@m3e/web 2.0.5 → 2.1.0

package/dist/option.js

@@ -5,10 +5,9 @@
  */
 import { LitElement, html, unsafeCSS, css } from 'lit';
 import { query, property } from 'lit/decorators.js';
-import { Selected, Disabled, AttachInternals, Role, DesignToken, customElement, getTextContent, setCustomState, ScrollController, addCustomState, deleteCustomState } from '@m3e/web/core';
+import { Selected, Disabled, AttachInternals, Role, DesignToken, customElement, getTextContent, setCustomState, ScrollController, MutationController, hasAssignedNodes, deleteCustomState, addCustomState } from '@m3e/web/core';
 import { typeaheadLabel, removeAriaReferencedId, addAriaReferencedId } from '@m3e/web/core/a11y';
-import { positionAnchor } from '@m3e/web/core/anchoring';
-import { M3eDirectionality } from '@m3e/web/core/bidi';
+import { M3eFloatingPanelElement } from '@m3e/web/core/anchoring';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -65,7 +64,10 @@ var _M3eOptionElement_instances, _M3eOptionElement_value, _M3eOptionElement_text
  * @slot - Renders the label of the option.
  *
  * @attr disabled - Whether the element is disabled.
+ * @attr disable-highlight - Whether text highlighting is disabled.
+ * @attr highlight-mode - The mode in which to highlight a term.
  * @attr selected - Whether the element is selected.
+ * @attr term - The search term to highlight.
  * @attr value - A string representing the value of the option.
  *
  * @cssprop --m3e-option-container-height - The height of the option container.
@@ -102,6 +104,21 @@ let M3eOptionElement = class M3eOptionElement extends Selected(Disabled(AttachIn
     _M3eOptionElement_value.set(this, void 0);
     /** @private */
     _M3eOptionElement_textContent.set(this, "");
+    /**
+     * The search term to highlight.
+     * @default ""
+     */
+    this.term = "";
+    /**
+     * The mode in which to highlight a term.
+     * @default "contains"
+     */
+    this.highlightMode = "contains";
+    /**
+     * Whether text highlighting is disabled.
+     * @default false
+     */
+    this.disableHighlight = false;
   }
   /** A string representing the value of the option. */
   get value() {
@@ -110,9 +127,13 @@ let M3eOptionElement = class M3eOptionElement extends Selected(Disabled(AttachIn
   set value(value) {
     __classPrivateFieldSet(this, _M3eOptionElement_value, value, "f");
   }
+  /** The textual label of the option. */
+  get label() {
+    return __classPrivateFieldGet(this, _M3eOptionElement_textContent, "f");
+  }
   /** @internal */
   [(_M3eOptionElement_value = new WeakMap(), _M3eOptionElement_textContent = new WeakMap(), _M3eOptionElement_instances = new WeakSet(), typeaheadLabel)]() {
-    return __classPrivateFieldGet(this, _M3eOptionElement_textContent, "f");
+    return this.label;
   }
   /** Whether the option represents an empty option. */
   get isEmpty() {
@@ -132,7 +153,7 @@ let M3eOptionElement = class M3eOptionElement extends Selected(Disabled(AttachIn
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("selected") && this.selected) {
-      const panel = this.closest("[role='listbox']") ?? this.closest("m3e-select");
+      const panel = this.closest("[role='listbox']") ?? this.closest("m3e-autocomplete") ?? this.closest("m3e-select");
       if (panel && panel.ariaMultiSelectable !== "true" && !panel.hasAttribute("multi")) {
         panel.querySelectorAll("m3e-option").forEach(x => {
           if (x !== this && x.selected) {
@@ -144,7 +165,7 @@ let M3eOptionElement = class M3eOptionElement extends Selected(Disabled(AttachIn
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg></div><m3e-text-overflow class="label"><slot @slotchange="${__classPrivateFieldGet(this, _M3eOptionElement_instances, "m", _M3eOptionElement_handleSlotChange)}"></slot></m3e-text-overflow></div></div>`;
+    return html`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg></div><m3e-text-overflow class="label"><m3e-text-highlight term="${this.term}" mode="${this.highlightMode}" ?disabled="${this.disableHighlight}"><slot @slotchange="${__classPrivateFieldGet(this, _M3eOptionElement_instances, "m", _M3eOptionElement_handleSlotChange)}"></slot></m3e-text-highlight></m3e-text-overflow></div></div>`;
   }
 };
 _M3eOptionElement_handleSlotChange = function _M3eOptionElement_handleSlotChange(e) {
@@ -157,6 +178,14 @@ __decorate([query(".focus-ring")], M3eOptionElement.prototype, "focusRing", void
 __decorate([query(".state-layer")], M3eOptionElement.prototype, "stateLayer", void 0);
 __decorate([query(".ripple")], M3eOptionElement.prototype, "_ripple", void 0);
 __decorate([property()], M3eOptionElement.prototype, "value", null);
+__decorate([property()], M3eOptionElement.prototype, "term", void 0);
+__decorate([property({
+  attribute: "highlight-mode"
+})], M3eOptionElement.prototype, "highlightMode", void 0);
+__decorate([property({
+  attribute: "disable-highlight",
+  type: Boolean
+})], M3eOptionElement.prototype, "disableHighlight", void 0);
 M3eOptionElement = __decorate([customElement("m3e-option")], M3eOptionElement);
 
 var _M3eOptGroupElement_instances, _M3eOptGroupElement_labelId, _M3eOptGroupElement_label, _M3eOptGroupElement_handleLabelSlotChange;
@@ -226,8 +255,7 @@ M3eOptGroupElement.styles = css`:host { display: block; --_option-padding-start:
 M3eOptGroupElement.__nextId = 0;
 M3eOptGroupElement = M3eOptGroupElement_1 = __decorate([customElement("m3e-optgroup")], M3eOptGroupElement);
 
-var _M3eOptionPanelElement_instances, _M3eOptionPanelElement_trigger, _M3eOptionPanelElement_anchor, _M3eOptionPanelElement_anchorCleanup, _M3eOptionPanelElement_documentClickHandler, _M3eOptionPanelElement_scrollController, _M3eOptionPanelElement_toggleHandler, _M3eOptionPanelElement_handleSlotChange, _M3eOptionPanelElement_handleDocumentClick;
-var M3eOptionPanelElement_1;
+var _M3eOptionPanelElement_instances, _M3eOptionPanelElement_scrollController, _M3eOptionPanelElement_handleNoDataSlotChange, _M3eOptionPanelElement_handleLoadingSlotChange, _M3eOptionPanelElement_handleMutation;
 /**
  * Presents a list of options on a temporary surface.
  *
@@ -256,151 +284,96 @@ var M3eOptionPanelElement_1;
  * @cssprop --m3e-option-panel-text-highlight-container-color - Background color used for text highlight matches.
  * @cssprop --m3e-option-panel-text-highlight-color - Text color used for text highlight matches.
  */
-let M3eOptionPanelElement = M3eOptionPanelElement_1 = class M3eOptionPanelElement extends AttachInternals(Role(LitElement, "listbox")) {
+let M3eOptionPanelElement = class M3eOptionPanelElement extends Role(M3eFloatingPanelElement, "listbox") {
   constructor() {
-    super(...arguments);
+    super();
     _M3eOptionPanelElement_instances.add(this);
     /** @private */
-    _M3eOptionPanelElement_trigger.set(this, void 0);
-    /** @private */
-    _M3eOptionPanelElement_anchor.set(this, void 0);
-    /** @private */
-    _M3eOptionPanelElement_anchorCleanup.set(this, void 0);
-    /** @private */
-    _M3eOptionPanelElement_documentClickHandler.set(this, e => __classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleDocumentClick).call(this, e));
-    /** @private */
     _M3eOptionPanelElement_scrollController.set(this, new ScrollController(this, {
       target: null,
       callback: () => this.hide(false)
     }));
-    /** @private */
-    _M3eOptionPanelElement_toggleHandler.set(this, e => {
-      if (e.newState === "closed") {
-        __classPrivateFieldGet(this, _M3eOptionPanelElement_anchorCleanup, "f")?.call(this);
-        __classPrivateFieldSet(this, _M3eOptionPanelElement_anchorCleanup, undefined, "f");
-      }
+    /**
+     * The state for which to present content.
+     * @default "content"
+     */
+    this.state = "content";
+    new MutationController(this, {
+      config: {
+        childList: true,
+        subtree: true
+      },
+      callback: () => __classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleMutation).call(this)
     });
   }
-  /** Whether the panel is open. */
-  get isOpen() {
-    return __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f") !== undefined;
-  }
-  /** @inheritdoc */
-  connectedCallback() {
-    super.connectedCallback();
-    addCustomState(this, "-no-animate");
-    this.setAttribute("popover", "manual");
-    this.addEventListener("toggle", __classPrivateFieldGet(this, _M3eOptionPanelElement_toggleHandler, "f"));
-    document.addEventListener("click", __classPrivateFieldGet(this, _M3eOptionPanelElement_documentClickHandler, "f"));
-  }
   /** @inheritdoc */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener("toggle", __classPrivateFieldGet(this, _M3eOptionPanelElement_toggleHandler, "f"));
-    document.removeEventListener("click", __classPrivateFieldGet(this, _M3eOptionPanelElement_documentClickHandler, "f"));
-  }
-  /**
-   * Opens the panel.
-   * @param {HTMLElement} trigger The element that triggered the panel.
-   * @param {HTMLElement | undefined} anchor The element used to position the panel.
-   * @returns {Promise<void>} A `Promise` that resolves when the panel is opened.
-   */
   async show(trigger, anchor) {
-    if (__classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f") && __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f") !== trigger) {
-      this.hide();
-    }
-    __classPrivateFieldSet(this, _M3eOptionPanelElement_anchorCleanup, await positionAnchor(this, anchor ?? trigger, {
-      position: "bottom-start",
-      inline: true,
-      flip: true
-    }, (x, y, position) => {
-      setCustomState(this, "-top", position.includes("top"));
-      setCustomState(this, "-bottom", position.includes("bottom"));
-      if (M3eDirectionality.current === "rtl") {
-        this.style.right = `${window.innerWidth - x - this.clientWidth}px`;
-        this.style.left = "";
-      } else {
-        this.style.left = `${x}px`;
-        this.style.right = "";
-      }
-      this.style.top = `${y}px`;
-    }), "f");
-    this.showPopover();
-    __classPrivateFieldSet(this, _M3eOptionPanelElement_trigger, trigger, "f");
-    __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f").ariaExpanded = "true";
-    __classPrivateFieldSet(this, _M3eOptionPanelElement_anchor, anchor, "f");
-    __classPrivateFieldGet(this, _M3eOptionPanelElement_scrollController, "f").observe(__classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f"));
-  }
-  /**
-   * Hides the panel.
-   * @param {boolean} [restoreFocus=false] Whether to restore focus to the panel's trigger.
-   */
-  hide(restoreFocus = false) {
-    this.hidePopover();
-    if (__classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f")) {
-      __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f").ariaExpanded = "false";
-      if (restoreFocus) {
-        __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f").focus();
-      }
-      __classPrivateFieldGet(this, _M3eOptionPanelElement_scrollController, "f").unobserve(__classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f"));
-      __classPrivateFieldSet(this, _M3eOptionPanelElement_trigger, undefined, "f");
-    }
+    await super.show(trigger, anchor);
+    __classPrivateFieldGet(this, _M3eOptionPanelElement_scrollController, "f").observe(trigger);
   }
-  /**
-   * Toggles the panel.
-   * @param {HTMLElement} trigger The element that triggered the panel.
-   * @param {HTMLElement | undefined} anchor The element used to position the panel.
-   * @returns {Promise<void>} A `Promise` that resolves when the panel is opened or closed.
-   */
-  async toggle(trigger, anchor) {
-    if (__classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f")) {
-      this.hide();
-    } else {
-      await this.show(trigger, anchor);
+  /** @inheritdoc */
+  hide(restoreFocus) {
+    if (this.trigger) {
+      __classPrivateFieldGet(this, _M3eOptionPanelElement_scrollController, "f").unobserve(this.trigger);
     }
+    super.hide(restoreFocus);
   }
   /** @inheritdoc */
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    requestAnimationFrame(() => deleteCustomState(this, "-no-animate"));
+  connectedCallback() {
+    super.connectedCallback();
+    __classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleMutation).call(this);
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleSlotChange)}"></slot></div>`;
+    return html`<div class="base"><slot></slot><div class="no-data" aria-hidden="true"><slot name="no-data" @slotchange="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleNoDataSlotChange)}"></slot></div><div class="loading" aria-hidden="true"><slot name="loading" @slotchange="${__classPrivateFieldGet(this, _M3eOptionPanelElement_instances, "m", _M3eOptionPanelElement_handleLoadingSlotChange)}"></slot></div></div>`;
   }
 };
-_M3eOptionPanelElement_trigger = new WeakMap();
-_M3eOptionPanelElement_anchor = new WeakMap();
-_M3eOptionPanelElement_anchorCleanup = new WeakMap();
-_M3eOptionPanelElement_documentClickHandler = new WeakMap();
 _M3eOptionPanelElement_scrollController = new WeakMap();
-_M3eOptionPanelElement_toggleHandler = new WeakMap();
 _M3eOptionPanelElement_instances = new WeakSet();
-_M3eOptionPanelElement_handleSlotChange = function _M3eOptionPanelElement_handleSlotChange() {
-  const options = [...this.querySelectorAll("m3e-option")];
-  options.forEach((x, i) => {
-    setCustomState(x, "-first", i === 0 && !(x.parentElement instanceof M3eOptGroupElement));
-    setCustomState(x, "-last", i === options.length - 1);
-  });
+_M3eOptionPanelElement_handleNoDataSlotChange = function _M3eOptionPanelElement_handleNoDataSlotChange(e) {
+  setCustomState(this, "-with-no-data", hasAssignedNodes(e.target));
+};
+_M3eOptionPanelElement_handleLoadingSlotChange = function _M3eOptionPanelElement_handleLoadingSlotChange(e) {
+  setCustomState(this, "-with-loading", hasAssignedNodes(e.target));
+  setCustomState(this, "-with-loading-indicator", this.querySelector("m3e-loading-indicator[slot='loading'], m3e-circular-progress-indicator[slot='loading']") !== null);
 };
-_M3eOptionPanelElement_handleDocumentClick = function _M3eOptionPanelElement_handleDocumentClick(e) {
-  if (!e.composedPath().some(x => x instanceof M3eOptionPanelElement_1 || x === __classPrivateFieldGet(this, _M3eOptionPanelElement_trigger, "f") || x === __classPrivateFieldGet(this, _M3eOptionPanelElement_anchor, "f"))) {
-    this.hide();
+_M3eOptionPanelElement_handleMutation = function _M3eOptionPanelElement_handleMutation() {
+  const options = this.querySelectorAll("m3e-option");
+  let first = false;
+  let last;
+  for (let i = 0; i < options.length; i++) {
+    const option = options[i];
+    if (option.hidden) {
+      deleteCustomState(option, "-first");
+      deleteCustomState(option, "-last");
+    } else if (!first && !(option.parentElement instanceof M3eOptGroupElement)) {
+      addCustomState(option, "-first");
+      first = true;
+      addCustomState(option, "-last");
+      last = option;
+    } else {
+      deleteCustomState(option, "-first");
+      if (last) {
+        deleteCustomState(last, "-last");
+      }
+      addCustomState(option, "-last");
+      last = option;
+    }
   }
 };
 (() => {
   if (typeof window !== "undefined") {
     const lightDomStyle = new CSSStyleSheet();
-    lightDomStyle.replaceSync(css`m3e-option-panel > m3e-divider { margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem); }`.toString());
+    lightDomStyle.replaceSync(css`m3e-option-panel > m3e-divider { margin-block: var(--m3e-option-panel-divider-spacing, 0.5rem); } m3e-option-panel m3e-option[hidden], m3e-option-panel m3e-optgroup[hidden] { display: none; }`.toString());
     document.adoptedStyleSheets = [...document.adoptedStyleSheets, lightDomStyle];
   }
 })();
 /** The styles of the element. */
-M3eOptionPanelElement.styles = css`:host { position: absolute; flex-direction: column; padding: unset; margin: unset; border: unset; overflow-y: auto; scrollbar-width: ${DesignToken.scrollbar.thinWidth}; scrollbar-color: ${DesignToken.scrollbar.color}; scroll-padding-block: calc( var(--m3e-focus-ring-thickness, 3px) + var(--m3e-option-panel-container-padding-block, 0.25rem) ); border-radius: var(--m3e-option-panel-container-shape, ${DesignToken.shape.corner.large}); min-width: var(--m3e-option-panel-container-min-width, 7rem); max-width: var(--m3e-option-panel-container-max-width, 17.5rem); max-height: var(--m3e-option-panel-container-max-height, 17.5rem); background-color: var(--m3e-option-panel-container-color, ${DesignToken.color.surfaceContainer}); box-shadow: var(--m3e-option-panel-container-elevation, ${DesignToken.elevation.level3}); opacity: 0; display: none; } .base { display: flex; flex-direction: column; row-gap: var(--m3e-option-panel-gap, 0.125rem); min-width: inherit; max-width: inherit; padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } :host(:not(:state(-no-animate))) { transition: ${unsafeCSS(`opacity ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}, 
-        transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},
-        overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,
-        display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`)}; } :host { transform: scaleY(0.8); } :host(:popover-open) { transform: scaleY(1); display: block; opacity: 1; } :host::backdrop { background-color: transparent; } :host(:state(-bottom)) { transform-origin: top; } :host(:state(-top)) { transform-origin: bottom; } @starting-style { :host(:popover-open) { transform: scaleY(0.8); } } @media (prefers-reduced-motion) { :host(:not(:state(-no-animate))) { transition: none; } } @media (forced-colors: active) { :host { background-color: Menu; color: MenuText; outline: 1px solid MenuText; } }`;
-M3eOptionPanelElement = M3eOptionPanelElement_1 = __decorate([customElement("m3e-option-panel")], M3eOptionPanelElement);
+M3eOptionPanelElement.styles = [M3eFloatingPanelElement.styles, css`:host { --m3e-floating-panel-container-shape: var( --m3e-option-panel-container-shape, ${DesignToken.shape.corner.large} ); --m3e-floating-panel-container-min-width: var(--m3e-option-panel-container-min-width, 7rem); --m3e-floating-panel-container-max-width: var(--m3e-option-panel-container-max-width, 17.5rem); --m3e-floating-panel-container-max-height: var(--m3e-option-panel-container-max-height, 17.5rem); --m3e-floating-panel-container-color: var( --m3e-option-panel-container-color, ${DesignToken.color.surfaceContainer} ); --m3e-floating-panel-container-elevation: var( --m3e-option-panel-container-elevation, ${DesignToken.elevation.level3} ); --m3e-floating-panel-container-padding-inline: var(--m3e-option-panel-container-padding-inline, 0.25rem); --m3e-floating-panel-container-padding-block: var(--m3e-option-panel-container-padding-block, 0.25rem); } .base { row-gap: var(--m3e-option-panel-gap, 0.125rem); --m3e-text-highlight-container-color: var( --m3e-option-panel-text-highlight-container-color, ${DesignToken.color.tertiaryContainer} ); --m3e-text-highlight-color: var( --m3e-option-panel-text-highlight-color, ${DesignToken.color.onTertiaryContainer} ); --m3e-focus-ring-outward-offset: 0px; --m3e-focus-ring-growth-factor: 1.5; } .no-data { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-no-data-container-height, 2.75rem); padding: var(--m3e-option-panel-no-data-container-padding, 0.75rem); color: var(--m3e-option-panel-no-data-color, ${DesignToken.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-no-data-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-no-data-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-no-data-line-height, ${DesignToken.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-no-data-tracking, ${DesignToken.typescale.standard.label.large.tracking} ); } .loading { display: flex; align-items: center; box-sizing: border-box; min-height: var(--m3e-option-panel-loading-container-height, 2.75rem); padding: var(--m3e-option-panel-loading-container-padding, 0.75rem); color: var(--m3e-option-panel-loading-color, ${DesignToken.color.onSurfaceVariant}); font-size: var(--m3e-option-panel-loading-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var( --m3e-option-panel-loading-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight} ); line-height: var( --m3e-option-panel-loading-line-height, ${DesignToken.typescale.standard.label.large.lineHeight} ); letter-spacing: var( --m3e-option-panel-loading-tracking, ${DesignToken.typescale.standard.label.large.tracking} ); } :host(:state(-no-data)) slot:not([name]), :host(:state(-loading)) slot:not([name]), :host(:state(-loading)) .no-data, :host(:not(:state(-no-data))) .no-data, :host(:not(:state(-with-no-data))) .no-data, :host(:not(:state(-loading))) .loading, :host(:not(:state(-with-loading))) .loading { display: none; } :host(:state(-no-data)) .base, :host(:state(-loading)) .base { overflow-y: hidden; } :host(:state(-with-loading-indicator)) .loading { padding: 0; justify-content: center; }`];
+__decorate([property({
+  reflect: true
+})], M3eOptionPanelElement.prototype, "state", void 0);
+M3eOptionPanelElement = __decorate([customElement("m3e-option-panel")], M3eOptionPanelElement);
 
 export { M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement };
 //# sourceMappingURL=option.js.map