dees-catalog/ts_web/elements/dees-input-dropdown.ts

import {
  customElement,
  DeesElement,
  type TemplateResult,
  property,
  state,
  html,
  css,
  cssManager,
  type CSSResult,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-input-dropdown.demo.js';
import { DeesWindowLayer } from './dees-windowlayer.js';

declare global {
  interface HTMLElementTagNameMap {
    'dees-input-dropdown': DeesInputDropdown;
  }
}

@customElement('dees-input-dropdown')
export class DeesInputDropdown extends DeesElement {
  public static demo = demoFunc;

  // INSTANCE
  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();

  @property({
    type: String,
    reflect: true,
  })
  public label: string = 'Label';

  @property()
  public key: string;

  @property()
  public options: { option: string; key: string; payload?: any }[] = [];

  @property()
  public selectedOption: { option: string; key: string; payload?: any } = null;

  @property({
    type: Boolean,
  })
  public required: boolean = false;

  @property({
    type: Boolean,
  })
  public enableSearch: boolean = true;

  @property({
    type: Boolean,
  })
  public disabled: boolean = false;

  @state()
  public opensToTop: boolean = false;

  public static styles = [
    cssManager.defaultStyles,
    css`
      * {
        box-sizing: border-box;
      }

      :host {
        font-family: Roboto;
        position: relative;
        display: block;
        color: ${cssManager.bdTheme('#222', '#fff')};
        margin-bottom: 24px;
      }

      .maincontainer {
        display: block;
      }

      .label {
        font-size: 14px;
        margin-bottom: 4px;
      }

      .selectedBox {
        user-select: none;
        cursor: pointer;
        position: relative;
        max-width: 420px;
        height: 40px;
        line-height: 40px;
        padding: 0px 8px;
        background: ${cssManager.bdTheme('#fafafa', '#222')};
        box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
        border-radius: 3px;
        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
        border-bottom: ${cssManager.bdTheme('1px solid #CCC', '1px solid #333')};
        transition: all 0.2s ease;
      }

      .accentTop {
        border-top: 1px solid #e4002b;
      }

      .accentBottom {
        border-bottom: 1px solid #e4002b;
      }

      .selectionBox {
        will-change: transform;
        pointer-events: none;
        cursor: pointer;
        transition: all 0.2s ease;
        opacity: 0;
        background: ${cssManager.bdTheme('#ffffff', '#222222')};
        max-width: 420px;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
        min-height: 40px;
        border-radius: 3px;
        padding: 4px;
        transform: scale(0.99, 0.99);
        position: absolute;
      }

      .selectionBox.show {
        pointer-events: all;
        opacity: 1;
        transform: scale(1, 1);
      }

      .option {
        transition: all 0.1s;
        line-height: 40px;
        padding: 0px 4px;
        border-radius: 3px;
      }

      .option:hover {
        color: #fff;
        padding-left: 8px;
        background: #0277bd;
      }

      .search {
        padding: 8px;
      }
      .search input {
        display: block;
        width: 80%;
        background: none;
        border: none;
        height: 24px;
        color: inherit;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        background: ${cssManager.bdTheme('#00000010', '#ffffff08')};
        border-radius: 16px;
        margin: auto;
      }

      .search input:focus {
        border: none;
        outline: none;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="maincontainer">
        ${this.label ? html`<div class="label">${this.label}</div>` : html``}
        <div class="selectionBox">
          ${this.enableSearch && !this.opensToTop
            ? html`
                <div class="search">
                  <input type="text" placeholder="Search" />
                </div>
              `
            : null}
          ${this.options.map((option) => {
            return html`
              <div
                class="option"
                @click=${() => {
                  this.updateSelection(option);
                }}
              >
                ${option.option}
              </div>
            `;
          })}
          ${this.enableSearch && this.opensToTop
            ? html`
                <div class="search">
                  <input type="text" placeholder="Search" />
                </div>
              `
            : null}
        </div>
        <div
          class="selectedBox"
          @click="${(event) => {
            if (!this.isElevated) {
              this.toggleSelectionBox();
            } else {
              this.updateSelection(this.selectedOption);
            }
          }}"
        >
          ${this.selectedOption?.option}
        </div>
      </div>
    `;
  }

  firstUpdated() {
    this.selectedOption = this.selectedOption || this.options[0] || null;
  }

  public async updateSelection(selectedOption) {
    this.selectedOption = selectedOption;

    this.dispatchEvent(
      new CustomEvent('selectedOption', {
        detail: selectedOption,
        bubbles: true,
      })
    );
    if (this.isElevated) {
      this.toggleSelectionBox();
    }
    this.changeSubject.next(this);
  }

  private isElevated: boolean = false;
  private windowOverlay: DeesWindowLayer;
  public async toggleSelectionBox() {
    const domtoolsInstance = await this.domtoolsPromise;
    const selectedBox: HTMLElement = this.shadowRoot.querySelector('.selectedBox');
    const selectionBox: HTMLElement = this.shadowRoot.querySelector('.selectionBox');
    if (!this.isElevated) {
      this.windowOverlay = await DeesWindowLayer.createAndShow({
        blur: false,
      });
      const elevatedDropdown = new DeesInputDropdown();
      elevatedDropdown.isElevated = true;
      elevatedDropdown.label = this.label;
      elevatedDropdown.enableSearch = this.enableSearch;
      elevatedDropdown.required = this.required;
      elevatedDropdown.disabled = this.disabled;
      elevatedDropdown.style.position = 'fixed';
      elevatedDropdown.style.top = this.getBoundingClientRect().top + 'px';
      elevatedDropdown.style.left = this.getBoundingClientRect().left + 'px';
      elevatedDropdown.style.width = this.clientWidth + 'px';
      elevatedDropdown.options = this.options;
      elevatedDropdown.selectedOption = this.selectedOption;
      console.log(elevatedDropdown.selectedOption);
      this.windowOverlay.appendChild(elevatedDropdown);
      await domtoolsInstance.convenience.smartdelay.delayFor(0);
      elevatedDropdown.toggleSelectionBox();
      const destroyOverlay = async () => {
        (elevatedDropdown.shadowRoot.querySelector('.selectionBox') as HTMLElement).style.opacity =
          '0';
        elevatedDropdown.removeEventListener('selectedOption', handleSelection);
        this.windowOverlay.removeEventListener('clicked', destroyOverlay);
        this.windowOverlay.destroy();
      };
      const handleSelection = async (event) => {
        await this.updateSelection(elevatedDropdown.selectedOption);
        destroyOverlay();
      };
      elevatedDropdown.addEventListener('selectedOption', handleSelection);
      this.windowOverlay.addEventListener('clicked', destroyOverlay);
    } else {
      if (!selectionBox.classList.contains('show')) {
        selectionBox.style.width = selectedBox.clientWidth + 'px';
        selectionBox.classList.add('show');
        const spaceData = selectedBox.getBoundingClientRect();
        if (300 > window.innerHeight - spaceData.bottom) {
          this.opensToTop = true;
          selectedBox.classList.add('accentTop');
          selectionBox.style.bottom = selectedBox.clientHeight + 2 + 'px';
        } else {
          selectedBox.classList.add('accentBottom');
          this.opensToTop = false;
          const labelOffset = this.label ? 24 : 0;
          selectionBox.style.top = selectedBox.clientHeight + labelOffset + 'px';
        }
        await domtoolsInstance.convenience.smartdelay.delayFor(0);
        const searchInput = selectionBox.querySelector('input');
        searchInput.focus();
      } else {
        selectedBox.style.pointerEvents = 'none';
        selectionBox.classList.remove('show');
        selectedBox.style.opacity = '0';
      }
    }
  }
}