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`
${this.label ? html`
${this.label}
` : html``}
${this.enableSearch && !this.opensToTop ? html` ` : null} ${this.options.map((option) => { return html`
{ this.updateSelection(option); }} > ${option.option}
`; })} ${this.enableSearch && this.opensToTop ? html` ` : null}
${this.selectedOption?.option}
`; } 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'; } } } }