dees-catalog/ts_web/elements/dees-appui-mainselector.ts

import * as plugins from './00plugins.js';
import * as interfaces from './interfaces/index.js';

import { DeesContextmenu } from './dees-contextmenu.js';

import {
  DeesElement,
  type TemplateResult,
  property,
  customElement,
  html,
  css,
  cssManager,
} from '@design.estate/dees-element';

/**
 * the property selector menu
 * mainly used to select assets within in an organization
 */
@customElement('dees-appui-mainselector')
export class DeesAppuiMainselector extends DeesElement {
  public static demo = () => html`
    <dees-appui-mainselector
      .selectionOptions=${[
        { key: 'Overview', action: () => console.log('Overview') },
        { key: 'Components', action: () => console.log('Components') },
        { key: 'Services', action: () => console.log('Services') },
        { key: 'Database', action: () => console.log('Database') },
        { key: 'Settings', action: () => console.log('Settings') },
      ]}
    ></dees-appui-mainselector>
  `;

  // INSTANCE
  @property({ type: Array })
  public selectionOptions: interfaces.ISelectionOption[] = [
    { key: '⚠️ Please set selection options', action: () => console.warn('No selection options configured for mainselector') },
  ];

  @property()
  public selectedOption: interfaces.ISelectionOption = null;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        color: ${cssManager.bdTheme('#333', '#fff')};
        position: relative;
        display: block;
        width: 100%;
        max-width: 300px;
        height: 100%;
        background: ${cssManager.bdTheme('#fafafa', '#000000')};
        border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#222222')};
      }
      .maincontainer {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 100%;
        width: 100%;
      }

      .topbar {
        position: absolute;
        height: 32px;
        width: 100%;
      }

      .topbar .heading {
        padding-left: 16px;
        padding-top: 8px;
        line-height: 24px;
        font-family: 'Geist Sans', sans-serif;
        font-weight: 600;
        font-size: 14px;
        color: ${cssManager.bdTheme('#666', '#ccc')};
      }

      .selectionOptions {
        position: absolute;
        top: 32px;
        padding-top: 8px;
        left: 0px;
        width: 100%;
        font-family: 'Geist Sans', sans-serif;
        font-size: 14px;
      }

      .selectionOptions .selectionOption {
        cursor: default;
        margin-left: 16px;
        margin-right: 16px;
        padding-top: 8px;
        padding-bottom: 8px;
        border-top: 1px dotted ${cssManager.bdTheme('#e0e0e0', '#303030')};
        border-left: 0px solid rgba(0, 0, 0, 0);
        transition: all 0.1s;
      }

      .selectionOptions .selectionOption:hover {
        border-left: 2px solid #26a69a50;
        padding-left: 8px;
        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.02)')};
      }

      .selectionOptions .selectionOption:first-child {
        border-top: 1px solid rgba(0, 0, 0, 0);
      }

      .selectionOptions .selectionOption.selectedOption {
        border-left: 4px solid #26a69a;
        padding-left: 10px;
        background: ${cssManager.bdTheme('rgba(38, 166, 154, 0.05)', 'rgba(38, 166, 154, 0.1)')};
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <style></style>
      <div class="maincontainer">
        <div class="topbar">
          <div class="heading">Properties</div>
        </div>
        <div class="selectionOptions">
          ${this.selectionOptions.map((selectionOptionArg) => {
            return html`
              <div
                class="selectionOption ${this.selectedOption === selectionOptionArg
                  ? 'selectedOption'
                  : null}"
                @click="${() => {
                  this.selectOption(selectionOptionArg);
                }}"
                @contextmenu="${(eventArg: MouseEvent) => {
                  DeesContextmenu.openContextMenuWithOptions(eventArg, [
                    {
                      name: 'property settings',
                      action: async () => {},
                      iconName: 'gear',
                    },
                  ]);
                }}"
              >
                ${selectionOptionArg.key}
              </div>
            `;
          })}
        </div>
      </div>
    `;
  }

  private selectOption(optionArg: interfaces.ISelectionOption) {
    this.selectedOption = optionArg;
    this.selectedOption.action();
    
    // Emit option-select event
    this.dispatchEvent(new CustomEvent('option-select', {
      detail: { option: optionArg },
      bubbles: true,
      composed: true
    }));
  }

  async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
    await super.firstUpdated(_changedProperties);
    if (this.selectionOptions && this.selectionOptions.length > 0) {
      await this.updateComplete;
      this.selectOption(this.selectionOptions[0]);
    }
  }
}