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

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

import {
  DeesElement,
  TemplateResult,
  property,
  customElement,
  html,
  css,
  cssManager,
} from '@designestate/dees-element';

@customElement('deap-mainselector')
export class DeapMainselector extends DeesElement {
  public static demo = () => html`<deap-mainselector></deap-mainselector>`;

  // INSTANCE
  @property()
  public selectionOptions: interfaces.ISelectionOption[] = [
    {
      key: 'option 1',
      action: () => {},
    },
    { key: 'option 2', action: () => {} },
    { key: 'option 3', action: () => {} },
    { key: 'option 4', action: () => {} },
  ];

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

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
          color: #fff;
          position: relative;
          display: block;
          width: 100%;
          max-width: 300px;
          height: 100%;
          background: #3c3c3c;
        }
        .maincontainer {
          position: absolute;
          top: 0px;
          left: 0px;
          height: 100%;
          width: 100%;
        }

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

          background: #333333;
        }

        .topbar .heading {
          padding-left: 20px;
          line-height: 80px;
          font-family: Roboto Mono;
          font-size: 16px;
        }

        .selectionOptions {
          position: absolute;
          top: 80px;
          left: 0px;
          width: 100%;
          font-family: Roboto Mono;
          font-size: 16px;
        }

        .selectionOptions .selectionOption {
          margin-left: 16px;
          margin-right: 16px;
          padding-top: 8px;
          padding-bottom: 8px;
          border-top: 1px solid #707070;
          border-left: 0px solid rgba(0,0,0,0);
          cursor: pointer;
          transition: all 0.1s;

        }

        .selectionOptions .selectionOption:hover {
          border-left: 2px solid #26A69A50;
          padding-left: 8px;
        }

        .selectionOptions .selectionOption.selectedOption {
          border-left: 4px solid #26A69A;
          padding-left: 10px;
        }

        .selectionOptions .selectionOption:first-child {
          margin-top: 16px;
        }

        .selectionOptions .selectionOption:last-child {
          margin-bottom: 16px;
          border-bottom: 1px solid #707070;
        }
    `
  ];

  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);
                }}"
              >
                ${selectionOptionArg.key}
              </div>
            `;
          })}
        </div>
      </div>
    `;
  }

  private selectOption(optionArg: interfaces.ISelectionOption) {
    this.selectedOption = optionArg;
    this.selectedOption.action();
  }

  firstUpdated() {
    this.selectOption(this.selectionOptions[0]);
  }
}