@flitsmeister/design-system 2.2.36 → 3.0.1

package/dist/fm-dropdown/fm-dropdown.js

@@ -0,0 +1,727 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { fmDropdownStyle } from './fm-dropdown.style.js';
+import { canUseHoverInput, clipDurationMsForRowCount, dropdownLabelId, dropdownListboxId, dropdownOptionId, eventTargetsComponent, findTypeaheadIndex, firstEnabledListIndex, isEmptyDropdownValue, isIconMedia, isImageMedia, isTypeaheadKey, labelForValue, mediaForValue, optionRowsForListbox, rowsFromSelectElement, rowsFromSlot, triggerLineText, } from './fm-dropdown-core.js';
+import { clampSheetVerticalDragDelta, DropdownBodyScrollLock, isMobileOs, sheetDragShouldClose, sheetHandlePointerDownAllowed, } from './fm-dropdown-mobile.js';
+import { FmIcon } from '../fm-icon/fm-icon.js';
+import '../fm-icon/icons/bold-chevron-down.js';
+import '../fm-icon/icons/bold-check.js';
+if (!customElements.get('fm-icon')) {
+    customElements.define('fm-icon', FmIcon);
+}
+/**
+ * Flitsmeister dropdown web component. Animated listbox with a hidden native select
+ * for forms and accessibility.
+ *
+ * @element fm-dropdown
+ *
+ * @fires fm-dropdown - Fired when a user selects an option. Detail: `{ value: string }`.
+ *
+ * @slot options - Option and optgroup elements for the native select. Use `slot="options"` on each direct option or optgroup.
+ * @slot media - Optional image or icon shown before placeholder text while `value` is empty.
+ * @slot description - Secondary text below the trigger label or placeholder.
+ *
+ * @cssprop --fm-dropdown-host-z-open - z-index for the opened host.
+ * @cssprop --fm-dropdown-overlay-z - z-index for the mobile overlay.
+ * @cssprop --fm-dropdown-sheet-z - z-index for the mobile sheet.
+ * @cssprop --fm-dropdown-clip-ms - Internal listbox clipping animation duration in milliseconds.
+ *
+ * @example
+ * ```html
+ * <fm-dropdown name="country" placeholder="Kies een land" value="">
+ *   <option slot="options" value="">Kies een land</option>
+ *   <option slot="options" value="nl">Nederland</option>
+ * </fm-dropdown>
+ * ```
+ */
+let FmDropdown = class FmDropdown extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.instanceId = Math.random().toString(36).slice(2, 11);
+        this.docPointerDown = (e) => this.onDocumentPointerDown(e);
+        this.docKeyDown = (e) => this.onDocumentKeyDown(e);
+        this.focusOutTimer = null;
+        this.typeaheadTimer = null;
+        this.typeaheadBuffer = '';
+        this.bodyScrollLock = new DropdownBodyScrollLock();
+        this.sheetPointerId = null;
+        this.sheetStartY = 0;
+        /** Form field name forwarded to the hidden native select. */
+        this.name = '';
+        /** Selected option value. */
+        this.value = '';
+        /** Placeholder text shown while `value` is empty. */
+        this.placeholder = '';
+        /** Disabled state. */
+        this.disabled = false;
+        /** Gray border in default state. */
+        this.grayBorder = false;
+        this.selectedText = '';
+        this.open = false;
+        this.activeIndex = 0;
+        this.sheetDragOffset = 0;
+        this.sheetDragging = false;
+    }
+    static { this.styles = [fmDropdownStyle]; }
+    get listboxId() {
+        return dropdownListboxId(this.instanceId);
+    }
+    get labelId() {
+        return dropdownLabelId(this.instanceId);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('pointerdown', this.docPointerDown, true);
+        document.addEventListener('keydown', this.docKeyDown, true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('pointerdown', this.docPointerDown, true);
+        document.removeEventListener('keydown', this.docKeyDown, true);
+        if (this.focusOutTimer !== null) {
+            window.clearTimeout(this.focusOutTimer);
+            this.focusOutTimer = null;
+        }
+        if (this.typeaheadTimer !== null) {
+            window.clearTimeout(this.typeaheadTimer);
+            this.typeaheadTimer = null;
+        }
+        this.bodyScrollLock.clear();
+    }
+    firstUpdated() {
+        const slot = this.optionsSlotEl ?? this.renderRoot.querySelector('slot[name="options"]');
+        slot?.addEventListener('slotchange', () => {
+            this.syncFromSelect();
+            this.requestUpdate();
+        });
+        this.syncFromSelect();
+    }
+    updated(changed) {
+        if (changed.has('value'))
+            this.syncFromSelect();
+        if (changed.has('open')) {
+            if (this.open)
+                this.setAttribute('data-menu-open', '');
+            else
+                this.removeAttribute('data-menu-open');
+            if (!this.open)
+                this.resetSheetDrag();
+            this.bodyScrollLock.sync(this.open);
+        }
+        if (this.open && changed.has('activeIndex'))
+            this.scrollActiveOptionIntoView();
+    }
+    get optionRows() {
+        const slot = this.optionsSlotEl ?? this.renderRoot?.querySelector('slot[name="options"]');
+        if (slot) {
+            const fromSlot = rowsFromSlot(slot);
+            if (fromSlot.length > 0)
+                return fromSlot;
+        }
+        const sel = this.selectEl;
+        if (!sel)
+            return [];
+        return rowsFromSelectElement(sel);
+    }
+    get listboxRows() {
+        return optionRowsForListbox(this.optionRows);
+    }
+    renderInlineMedia(media, alt = '') {
+        if (isIconMedia(media)) {
+            const iconName = media.trim().slice(5).trim();
+            return html `<fm-icon name=${iconName} variant="bold" size="sm" aria-hidden="true"></fm-icon>`;
+        }
+        if (isImageMedia(media))
+            return html `<img src=${media} alt=${alt} />`;
+        return html `<span class="dropdown-media-text" aria-hidden="true">${media}</span>`;
+    }
+    renderTriggerMedia() {
+        if (isEmptyDropdownValue(this.value))
+            return html `<slot name="media"></slot>`;
+        const m = mediaForValue(this.optionRows, this.value ?? '');
+        return m ? this.renderInlineMedia(m.media, m.alt) : nothing;
+    }
+    syncFromSelect() {
+        const sel = this.selectEl;
+        if (!sel)
+            return;
+        const v = this.value ?? '';
+        if (sel.value !== v)
+            sel.value = v;
+        const fromOptions = labelForValue(this.optionRows, v);
+        const fromNative = sel.selectedOptions[0]?.text?.trim() ?? '';
+        const text = fromOptions || fromNative;
+        if (text || v === '') {
+            if (text !== this.selectedText)
+                this.selectedText = text;
+        }
+    }
+    get triggerLineTextComputed() {
+        return triggerLineText({
+            value: this.value,
+            placeholder: this.placeholder,
+            optionRows: this.optionRows,
+            selectedText: this.selectedText,
+        });
+    }
+    optionElId(index) {
+        return dropdownOptionId(this.instanceId, index);
+    }
+    close({ restoreFocus = true } = {}) {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.resetTypeahead();
+        this.resetSheetDrag();
+        if (restoreFocus)
+            this.triggerEl?.focus();
+    }
+    commitValue(newValue, labelHint) {
+        const sel = this.selectEl;
+        if (!sel)
+            return;
+        const hint = (labelHint ?? '').trim();
+        const label = hint ||
+            labelForValue(this.optionRows, newValue) ||
+            sel.selectedOptions[0]?.text?.trim() ||
+            '';
+        const prev = this.value ?? '';
+        if (prev === newValue && sel.value === newValue) {
+            if (label !== this.selectedText)
+                this.selectedText = label;
+            return;
+        }
+        sel.value = newValue;
+        this.value = newValue;
+        this.selectedText = label;
+        sel.dispatchEvent(new Event('input', { bubbles: true }));
+        sel.dispatchEvent(new Event('change', { bubbles: true }));
+        this.dispatchEvent(new CustomEvent('fm-dropdown', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    selectActive() {
+        const rows = this.listboxRows;
+        const row = rows[this.activeIndex];
+        if (!row || row.disabled)
+            return;
+        this.commitValue(row.value, row.label);
+        this.close();
+    }
+    onDocumentPointerDown(e) {
+        const targetsThisComponent = eventTargetsComponent(e, this, this.shadowRoot);
+        if (!targetsThisComponent)
+            this.removeAttribute('data-focused');
+        if (!this.open || this.disabled)
+            return;
+        if (targetsThisComponent)
+            return;
+        this.close({ restoreFocus: false });
+    }
+    onDocumentKeyDown(e) {
+        if (!this.open)
+            return;
+        if (e.key !== 'Escape')
+            return;
+        this.close({ restoreFocus: false });
+    }
+    markFocusedState() {
+        if (this.disabled)
+            return;
+        this.setAttribute('data-focused', '');
+    }
+    clearFocusedStateIfOutside() {
+        if (this.focusOutTimer !== null)
+            window.clearTimeout(this.focusOutTimer);
+        this.focusOutTimer = window.setTimeout(() => {
+            this.focusOutTimer = null;
+            const root = this.shadowRoot;
+            const activeInsideShadow = root?.activeElement instanceof Node;
+            if (activeInsideShadow)
+                return;
+            if (this.matches(':focus-within'))
+                return;
+            this.removeAttribute('data-focused');
+        }, 0);
+    }
+    onTriggerClick() {
+        if (this.disabled)
+            return;
+        this.markFocusedState();
+        this.open = !this.open;
+        this.resetTypeahead();
+        if (this.open)
+            this.activeIndex = firstEnabledListIndex(this.listboxRows, this.value);
+    }
+    onOverlayClick() {
+        if (!this.open)
+            return;
+        this.close({ restoreFocus: false });
+    }
+    resetSheetDrag() {
+        this.sheetPointerId = null;
+        this.sheetStartY = 0;
+        this.sheetDragOffset = 0;
+        this.sheetDragging = false;
+    }
+    onHandlePointerDown(e) {
+        if (!this.open || !isMobileOs())
+            return;
+        if (!sheetHandlePointerDownAllowed(e))
+            return;
+        this.sheetPointerId = e.pointerId;
+        this.sheetStartY = e.clientY;
+        this.sheetDragging = true;
+        this.sheetDragOffset = 0;
+        const handle = e.currentTarget;
+        handle.setPointerCapture?.(e.pointerId);
+        e.preventDefault();
+    }
+    onHandlePointerMove(e) {
+        if (!this.sheetDragging || this.sheetPointerId !== e.pointerId)
+            return;
+        this.sheetDragOffset = clampSheetVerticalDragDelta(e.clientY, this.sheetStartY);
+    }
+    onHandlePointerUp(e) {
+        if (this.sheetPointerId !== e.pointerId)
+            return;
+        const handle = e.currentTarget;
+        handle.releasePointerCapture?.(e.pointerId);
+        const shouldClose = sheetDragShouldClose(this.sheetDragOffset);
+        this.resetSheetDrag();
+        if (shouldClose)
+            this.close({ restoreFocus: false });
+    }
+    onHandlePointerCancel(e) {
+        if (this.sheetPointerId !== e.pointerId)
+            return;
+        const handle = e.currentTarget;
+        handle.releasePointerCapture?.(e.pointerId);
+        this.resetSheetDrag();
+    }
+    resetTypeahead() {
+        this.typeaheadBuffer = '';
+        if (this.typeaheadTimer !== null) {
+            window.clearTimeout(this.typeaheadTimer);
+            this.typeaheadTimer = null;
+        }
+    }
+    pushTypeaheadChar(char) {
+        if (!char)
+            return;
+        this.typeaheadBuffer += char.toLocaleLowerCase();
+        if (this.typeaheadTimer !== null)
+            window.clearTimeout(this.typeaheadTimer);
+        this.typeaheadTimer = window.setTimeout(() => {
+            this.typeaheadTimer = null;
+            this.typeaheadBuffer = '';
+        }, 450);
+    }
+    scrollActiveOptionIntoView() {
+        const optionId = this.optionElId(this.activeIndex);
+        const optionEl = this.renderRoot.querySelector(`#${optionId}`);
+        optionEl?.scrollIntoView({ block: 'nearest' });
+    }
+    onTriggerKeydown(e) {
+        if (this.disabled)
+            return;
+        const rows = this.listboxRows;
+        if (rows.length === 0)
+            return;
+        if (!this.open) {
+            if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.open = true;
+                this.activeIndex = firstEnabledListIndex(rows, this.value);
+            }
+            return;
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            this.close({ restoreFocus: true });
+            return;
+        }
+        if (e.key === 'Tab') {
+            this.close({ restoreFocus: false });
+            return;
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this.selectActive();
+            return;
+        }
+        if (e.key === 'Home') {
+            e.preventDefault();
+            this.activeIndex = firstEnabledListIndex(rows);
+            return;
+        }
+        if (e.key === 'End') {
+            e.preventDefault();
+            if (rows.every((r) => r.disabled))
+                return;
+            for (let i = rows.length - 1; i >= 0; i--) {
+                if (!rows[i].disabled) {
+                    this.activeIndex = i;
+                    break;
+                }
+            }
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if (rows.every((r) => r.disabled))
+                return;
+            let i = this.activeIndex;
+            let steps = 0;
+            do {
+                i = i >= rows.length - 1 ? 0 : i + 1;
+                steps++;
+                if (steps > rows.length)
+                    return;
+            } while (rows[i].disabled);
+            this.activeIndex = i;
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            if (rows.every((r) => r.disabled))
+                return;
+            let i = this.activeIndex;
+            let steps = 0;
+            do {
+                i = i <= 0 ? rows.length - 1 : i - 1;
+                steps++;
+                if (steps > rows.length)
+                    return;
+            } while (rows[i].disabled);
+            this.activeIndex = i;
+            return;
+        }
+        if (isTypeaheadKey(e)) {
+            this.pushTypeaheadChar(e.key);
+            const typeaheadIndex = findTypeaheadIndex(rows, this.activeIndex, this.typeaheadBuffer);
+            if (typeaheadIndex >= 0) {
+                e.preventDefault();
+                this.activeIndex = typeaheadIndex;
+            }
+        }
+    }
+    onTriggerFocus() {
+        this.markFocusedState();
+    }
+    onTriggerBlur() {
+        this.clearFocusedStateIfOutside();
+    }
+    onNativeFocus() {
+        this.triggerEl?.focus();
+    }
+    onRootFocusIn(e) {
+        if (e.target === this.selectEl) {
+            this.triggerEl?.focus();
+            return;
+        }
+        this.markFocusedState();
+    }
+    onRootFocusOut() {
+        this.clearFocusedStateIfOutside();
+    }
+    onOptionPointerDown(e) {
+        e.preventDefault();
+        this.markFocusedState();
+    }
+    onOptionClick(e, index) {
+        e.preventDefault();
+        const row = this.listboxRows[index];
+        if (!row || row.disabled)
+            return;
+        this.activeIndex = index;
+        this.commitValue(row.value, row.label);
+        this.close({ restoreFocus: true });
+    }
+    onOptionPointerEnter(index) {
+        if (!this.open || this.disabled)
+            return;
+        if (!canUseHoverInput())
+            return;
+        const row = this.listboxRows[index];
+        if (!row || row.disabled)
+            return;
+        this.activeIndex = index;
+    }
+    render() {
+        const isMobileSheet = isMobileOs();
+        const bodyClasses = classMap({
+            'dropdown-body': true,
+            'dropdown-body--gray-border': this.grayBorder,
+        });
+        const rootClass = classMap({
+            'dropdown-root': true,
+            'dropdown-root--open': this.open,
+            'dropdown-root--mobile-sheet': isMobileSheet,
+        });
+        const overlayClass = classMap({
+            'dropdown-overlay': true,
+            'dropdown-overlay--open': this.open,
+        });
+        const sheetClass = classMap({
+            'dropdown-sheet': true,
+            'dropdown-sheet--open': this.open,
+            'dropdown-sheet--dragging': this.sheetDragging,
+        });
+        const allRows = this.optionRows;
+        const rows = this.listboxRows;
+        const clipDurationMs = clipDurationMsForRowCount(rows.length);
+        const activedescendant = this.open && rows[this.activeIndex] && !rows[this.activeIndex].disabled
+            ? this.optionElId(this.activeIndex)
+            : undefined;
+        return html `
+      <div
+        class=${rootClass}
+        @pointerdown=${() => this.markFocusedState()}
+        @focusin=${this.onRootFocusIn}
+        @focusout=${this.onRootFocusOut}
+      >
+        <select
+            class="dropdown-native"
+            name=${this.name}
+            .value=${this.value}
+            ?disabled=${this.disabled}
+            tabindex="-1"
+            inert
+            aria-hidden="true"
+            @change=${this.handleNativeChange}
+            @focus=${this.onNativeFocus}
+          >
+            ${allRows.map((row) => html `
+              <option
+                value=${row.value}
+                ?disabled=${row.disabled}
+                data-media=${row.media ?? ''}
+                data-media-alt=${row.mediaAlt ?? ''}
+              >
+                ${row.label}
+              </option>
+            `)}
+          </select>
+          <slot class="dropdown-options-source" name="options" aria-hidden="true"></slot>
+          <button
+            type="button"
+            class="dropdown-trigger"
+            ?disabled=${this.disabled}
+            aria-haspopup="listbox"
+            aria-expanded=${this.open ? 'true' : 'false'}
+            aria-controls=${this.listboxId}
+            aria-activedescendant=${activedescendant ?? nothing}
+            aria-labelledby=${this.labelId}
+            @click=${this.onTriggerClick}
+            @keydown=${this.onTriggerKeydown}
+            @focus=${this.onTriggerFocus}
+            @blur=${this.onTriggerBlur}
+          >
+            <div class=${bodyClasses}>
+              <div class="dropdown-prepend">
+                <span class="dropdown-media">${this.renderTriggerMedia()}</span>
+              </div>
+              <div class="dropdown-text">
+                <span
+                  class=${classMap({
+            'dropdown-placeholder': true,
+            'dropdown-placeholder--selected': !isEmptyDropdownValue(this.value),
+        })}
+                  id=${this.labelId}
+                >
+                  ${this.triggerLineTextComputed}
+                </span>
+                <slot name="description"></slot>
+              </div>
+              <div class="dropdown-append">
+                <span class="dropdown-chevron">
+                  <fm-icon name="chevron-down" variant="bold" size="sm"></fm-icon>
+                </span>
+              </div>
+            </div>
+          </button>
+          ${isMobileSheet
+            ? html `
+                <div class=${overlayClass} aria-hidden=${this.open ? 'false' : 'true'} @click=${this.onOverlayClick}></div>
+                <div
+                  class=${sheetClass}
+                  aria-hidden=${this.open ? 'false' : 'true'}
+                  style=${`--fm-dropdown-sheet-drag:${this.sheetDragOffset}px`}
+                >
+                  <div
+                    class="dropdown-sheet-handle"
+                    @pointerdown=${this.onHandlePointerDown}
+                    @pointermove=${this.onHandlePointerMove}
+                    @pointerup=${this.onHandlePointerUp}
+                    @pointercancel=${this.onHandlePointerCancel}
+                  >
+                    <span class="dropdown-sheet-handle__bar" aria-hidden="true"></span>
+                  </div>
+                  <div class="dropdown-panel dropdown-panel--sheet" id=${this.listboxId} role="listbox" aria-labelledby=${this.labelId}>
+                    ${rows.map((row, index) => {
+                const selected = row.value === (this.value ?? '');
+                const active = !isMobileSheet && index === this.activeIndex && !row.disabled;
+                return html `
+                        <div
+                          class=${classMap({
+                    'dropdown-option': true,
+                    'dropdown-option--disabled': row.disabled,
+                    'dropdown-option--active': active,
+                    'dropdown-option--selected': selected,
+                })}
+                          id=${this.optionElId(index)}
+                          role="option"
+                          aria-selected=${selected ? 'true' : 'false'}
+                          aria-disabled=${row.disabled ? 'true' : 'false'}
+                          style=${`--stagger:${index}`}
+                          @pointerdown=${this.onOptionPointerDown}
+                          @pointerenter=${() => this.onOptionPointerEnter(index)}
+                          @click=${(e) => this.onOptionClick(e, index)}
+                        >
+                          ${row.media
+                    ? html `<span class="dropdown-option__media">${this.renderInlineMedia(row.media, row.mediaAlt ?? '')}</span>`
+                    : nothing}
+                          <span class="dropdown-option__label">${row.label}</span>
+                          ${selected
+                    ? html `
+                                <span class="dropdown-option__check" aria-hidden="true">
+                                  <fm-icon name="check" variant="bold" size="sm" color="primary"></fm-icon>
+                                </span>
+                              `
+                    : nothing}
+                        </div>
+                      `;
+            })}
+                  </div>
+                </div>
+              `
+            : html `
+              <div
+                class="dropdown-panel-clip"
+                aria-hidden=${this.open ? 'false' : 'true'}
+                style=${`--fm-dropdown-clip-ms:${clipDurationMs}`}
+              >
+                <div class="dropdown-panel-inner">
+                  ${this.open
+                ? html `
+                    <div
+                      class="dropdown-panel"
+                      id=${this.listboxId}
+                      role="listbox"
+                      aria-labelledby=${this.labelId}
+                    >
+                      ${rows.map((row, index) => {
+                    const selected = row.value === (this.value ?? '');
+                    const active = !isMobileSheet && index === this.activeIndex && !row.disabled;
+                    return html `
+                          <div
+                            class=${classMap({
+                        'dropdown-option': true,
+                        'dropdown-option--disabled': row.disabled,
+                        'dropdown-option--active': active,
+                        'dropdown-option--selected': selected,
+                    })}
+                            id=${this.optionElId(index)}
+                            role="option"
+                            aria-selected=${selected ? 'true' : 'false'}
+                            aria-disabled=${row.disabled ? 'true' : 'false'}
+                            style=${`--stagger:${index}`}
+                            @pointerdown=${this.onOptionPointerDown}
+                            @pointerenter=${() => this.onOptionPointerEnter(index)}
+                            @click=${(e) => this.onOptionClick(e, index)}
+                          >
+                            ${row.media
+                        ? html `<span class="dropdown-option__media">${this.renderInlineMedia(row.media, row.mediaAlt ?? '')}</span>`
+                        : nothing}
+                            <span class="dropdown-option__label">${row.label}</span>
+                            ${selected
+                        ? html `
+                                  <span class="dropdown-option__check" aria-hidden="true">
+                                    <fm-icon name="check" variant="bold" size="sm" color="primary"></fm-icon>
+                                  </span>
+                                `
+                        : nothing}
+                          </div>
+                        `;
+                })}
+                    </div>
+                  `
+                : nothing}
+                </div>
+              </div>
+            `}
+      </div>
+    `;
+    }
+    handleNativeChange(e) {
+        if (!e.isTrusted)
+            return;
+        const sel = e.target;
+        this.value = sel.value;
+        const v = this.value ?? '';
+        let label = labelForValue(this.optionRows, v) || sel.selectedOptions[0]?.text?.trim() || '';
+        if (label || v === '') {
+            if (label !== this.selectedText)
+                this.selectedText = label;
+        }
+        this.dispatchEvent(new CustomEvent('fm-dropdown', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+};
+__decorate([
+    property({ type: String })
+], FmDropdown.prototype, "name", void 0);
+__decorate([
+    property({ type: String })
+], FmDropdown.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], FmDropdown.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], FmDropdown.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'gray-border', reflect: true })
+], FmDropdown.prototype, "grayBorder", void 0);
+__decorate([
+    query('select.dropdown-native')
+], FmDropdown.prototype, "selectEl", void 0);
+__decorate([
+    query('slot[name="options"]')
+], FmDropdown.prototype, "optionsSlotEl", void 0);
+__decorate([
+    query('.dropdown-trigger')
+], FmDropdown.prototype, "triggerEl", void 0);
+__decorate([
+    state()
+], FmDropdown.prototype, "selectedText", void 0);
+__decorate([
+    state()
+], FmDropdown.prototype, "open", void 0);
+__decorate([
+    state()
+], FmDropdown.prototype, "activeIndex", void 0);
+__decorate([
+    state()
+], FmDropdown.prototype, "sheetDragOffset", void 0);
+__decorate([
+    state()
+], FmDropdown.prototype, "sheetDragging", void 0);
+FmDropdown = __decorate([
+    customElement('fm-dropdown')
+], FmDropdown);
+export { FmDropdown };
+//# sourceMappingURL=fm-dropdown.js.map