@api-client/ui 0.4.2 → 0.4.4

package/build/src/md/menu/internal/SubMenu.js

@@ -0,0 +1,171 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import Menu from './Menu.js';
+import { findElementInShadowRoots } from '../../../lib/Dom.js';
+let UiSubMenu = (() => {
+    let _classSuper = Menu;
+    let _anchor_decorators;
+    let _anchor_initializers = [];
+    let _anchor_extraInitializers = [];
+    return class UiSubMenu extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _anchor_decorators = [property({ type: String })];
+            __esDecorate(this, null, _anchor_decorators, { kind: "accessor", name: "anchor", static: false, private: false, access: { has: obj => "anchor" in obj, get: obj => obj.anchor, set: (obj, value) => { obj.anchor = value; } }, metadata: _metadata }, _anchor_initializers, _anchor_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #anchor_accessor_storage = __runInitializers(this, _anchor_initializers, void 0);
+        /**
+         * The ID of the anchor element (parent menu item)
+         * @attribute
+         */
+        get anchor() { return this.#anchor_accessor_storage; }
+        set anchor(value) { this.#anchor_accessor_storage = value; }
+        /**
+         * Reference to the parent menu
+         */
+        parentMenu = (__runInitializers(this, _anchor_extraInitializers), null);
+        /**
+         * Reference to the anchor element
+         */
+        get anchorElement() {
+            if (!this.anchor)
+                return null;
+            return findElementInShadowRoots(this.anchor, this);
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.setAttribute('role', 'menu');
+            this.setAttribute('aria-label', 'Submenu');
+        }
+        updated(changedProperties) {
+            super.updated(changedProperties);
+            if (changedProperties.has('anchor')) {
+                this.updateAnchorPositioning();
+            }
+        }
+        /**
+         * Updates anchor positioning using CSS Anchor Positioning API
+         */
+        updateAnchorPositioning() {
+            const anchor = this.anchorElement;
+            if (!anchor)
+                return;
+            const anchorName = `--anchor-${this.id}`;
+            // Set anchor name on the parent menu item
+            anchor.style.setProperty('anchor-name', anchorName);
+            // Set anchor positioning on the submenu
+            this.style.setProperty('position-anchor', anchorName);
+        }
+        /**
+         * Shows the submenu
+         */
+        show() {
+            if (!this.anchorElement) {
+                return;
+            }
+            // Update positioning before showing
+            this.updateAnchorPositioning();
+            // Close any other open submenus in the parent menu
+            if (this.parentMenu) {
+                this.parentMenu.closeSubMenu();
+                this.parentMenu.setActiveSubMenu(this);
+            }
+            // Show the popover
+            this.showPopover();
+            this.open = true;
+            this.focus();
+            this.dispatchEvent(new CustomEvent('open', {
+                bubbles: true,
+                composed: true,
+                detail: { submenu: this },
+            }));
+        }
+        /**
+         * Hides the submenu
+         */
+        hide() {
+            super.hide();
+            // Clear parent menu's active submenu reference
+            const parentMenu = this.parentMenu;
+            if (parentMenu) {
+                parentMenu.setActiveSubMenu(null);
+            }
+            const anchor = this.anchorElement;
+            if (anchor) {
+                anchor.closeSubMenu();
+            }
+        }
+        /**
+         * Sets the parent menu reference
+         */
+        setParentMenu(menu) {
+            this.parentMenu = menu;
+        }
+        /**
+         * Handles selection events - bubbles them up to parent menu
+         */
+        notifySelect(item) {
+            // First hide this submenu
+            this.hide();
+            // If we have a parent menu, hide it too and bubble the selection
+            if (this.parentMenu) {
+                this.parentMenu.hide();
+            }
+            // Call parent implementation to dispatch the select event
+            return super.notifySelect(item);
+        }
+        /**
+         * Handles keyboard navigation specific to submenus
+         */
+        handleKeydown(e) {
+            if (!this.open || e.defaultPrevented)
+                return;
+            switch (e.key) {
+                case 'Escape':
+                    e.preventDefault();
+                    this.hide();
+                    // Return focus to parent menu item
+                    if (this.anchorElement) {
+                        this.anchorElement.focus();
+                    }
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    this.hide();
+                    // Return focus to parent menu item
+                    if (this.anchorElement) {
+                        this.anchorElement.focus();
+                    }
+                    break;
+                default:
+                    // Let the parent handle other keys
+                    super.handleKeydown(e);
+            }
+        }
+        render() {
+            const classes = classMap({
+                'submenu-container': true,
+                'submenu-open': this.open,
+            });
+            return html `
+      <div class=${classes}>
+        <slot></slot>
+      </div>
+    `;
+        }
+    };
+})();
+/**
+ * Material Design 3 Sub-Menu component.
+ * Extends the main Menu component to provide sub-menu functionality.
+ * Uses Popover API and Anchor Positioning API for modern positioning.
+ *
+ * @slot - The sub-menu items
+ * @fires select - Dispatched when a sub-menu item is selected
+ * @fires close - Dispatched when the sub-menu is closed
+ */
+export default UiSubMenu;
+//# sourceMappingURL=SubMenu.js.map

package/build/src/md/menu/internal/SubMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/SubMenu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport Menu from './Menu.js'\nimport UiListItem from '../../list/internals/ListItem.js'\nimport { findElementInShadowRoots } from '../../../lib/Dom.js'\nimport type { MenuItem } from '../../../index.js'\n\n/**\n * Material Design 3 Sub-Menu component.\n * Extends the main Menu component to provide sub-menu functionality.\n * Uses Popover API and Anchor Positioning API for modern positioning.\n *\n * @slot - The sub-menu items\n * @fires select - Dispatched when a sub-menu item is selected\n * @fires close - Dispatched when the sub-menu is closed\n */\nexport default class UiSubMenu extends Menu {\n  /**\n   * The ID of the anchor element (parent menu item)\n   * @attribute\n   */\n  @property({ type: String }) accessor anchor: string | undefined\n\n  /**\n   * Reference to the parent menu\n   */\n  parentMenu: Menu | null = null\n\n  /**\n   * Reference to the anchor element\n   */\n  get anchorElement(): MenuItem | null {\n    if (!this.anchor) return null\n    return findElementInShadowRoots(this.anchor, this) as MenuItem | null\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'menu')\n    this.setAttribute('aria-label', 'Submenu')\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('anchor')) {\n      this.updateAnchorPositioning()\n    }\n  }\n\n  /**\n   * Updates anchor positioning using CSS Anchor Positioning API\n   */\n  protected updateAnchorPositioning(): void {\n    const anchor = this.anchorElement\n    if (!anchor) return\n    const anchorName = `--anchor-${this.id}`\n\n    // Set anchor name on the parent menu item\n    anchor.style.setProperty('anchor-name', anchorName)\n\n    // Set anchor positioning on the submenu\n    this.style.setProperty('position-anchor', anchorName)\n  }\n\n  /**\n   * Shows the submenu\n   */\n  override show(): void {\n    if (!this.anchorElement) {\n      return\n    }\n\n    // Update positioning before showing\n    this.updateAnchorPositioning()\n\n    // Close any other open submenus in the parent menu\n    if (this.parentMenu) {\n      this.parentMenu.closeSubMenu()\n      this.parentMenu.setActiveSubMenu(this)\n    }\n\n    // Show the popover\n    this.showPopover()\n    this.open = true\n    this.focus()\n\n    this.dispatchEvent(\n      new CustomEvent('open', {\n        bubbles: true,\n        composed: true,\n        detail: { submenu: this },\n      })\n    )\n  }\n\n  /**\n   * Hides the submenu\n   */\n  override hide(): void {\n    super.hide()\n\n    // Clear parent menu's active submenu reference\n    const parentMenu = this.parentMenu\n    if (parentMenu) {\n      parentMenu.setActiveSubMenu(null)\n    }\n    const anchor = this.anchorElement\n    if (anchor) {\n      anchor.closeSubMenu()\n    }\n  }\n\n  /**\n   * Sets the parent menu reference\n   */\n  setParentMenu(menu: Menu): void {\n    this.parentMenu = menu\n  }\n\n  /**\n   * Handles selection events - bubbles them up to parent menu\n   */\n  override notifySelect(item: UiListItem): boolean {\n    // First hide this submenu\n    this.hide()\n\n    // If we have a parent menu, hide it too and bubble the selection\n    if (this.parentMenu) {\n      this.parentMenu.hide()\n    }\n\n    // Call parent implementation to dispatch the select event\n    return super.notifySelect(item)\n  }\n\n  /**\n   * Handles keyboard navigation specific to submenus\n   */\n  override handleKeydown(e: KeyboardEvent): void {\n    if (!this.open || e.defaultPrevented) return\n\n    switch (e.key) {\n      case 'Escape':\n        e.preventDefault()\n        this.hide()\n        // Return focus to parent menu item\n        if (this.anchorElement) {\n          this.anchorElement.focus()\n        }\n        break\n      case 'ArrowLeft':\n        e.preventDefault()\n        this.hide()\n        // Return focus to parent menu item\n        if (this.anchorElement) {\n          this.anchorElement.focus()\n        }\n        break\n      default:\n        // Let the parent handle other keys\n        super.handleKeydown(e)\n    }\n  }\n\n  override render(): TemplateResult {\n    const classes = classMap({\n      'submenu-container': true,\n      'submenu-open': this.open,\n    })\n\n    return html`\n      <div class=${classes}>\n        <slot></slot>\n      </div>\n    `\n  }\n}\n"]}

package/build/src/md/menu/internal/SubMenu.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=SubMenu.styles.d.ts.map

package/build/src/md/menu/internal/SubMenu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/menu/internal/SubMenu.styles.ts"],"names":[],"mappings":";AAEA,wBAKC"}

package/build/src/md/menu/internal/SubMenu.styles.js

@@ -0,0 +1,8 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    position-area: span-bottom right;
+    position-try-fallbacks: flip-block flip-inline;
+  }
+`;
+//# sourceMappingURL=SubMenu.styles.js.map

package/build/src/md/menu/internal/SubMenu.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenu.styles.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/SubMenu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;CAKjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    position-area: span-bottom right;\n    position-try-fallbacks: flip-block flip-inline;\n  }\n`\n"]}

package/build/src/md/menu/ui-menu-item.d.ts

@@ -0,0 +1,20 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internal/MenuItem.js';
+/**
+ * Material Design 3 Menu Item component.
+ *
+ * @element ui-menu-item
+ * @attribute {Object} data - The menu item data object
+ * @attribute {boolean} disabled - Whether the menu item is disabled
+ * @fires select - Dispatched when the menu item is selected
+ * @fires submenu-open - Dispatched when a sub-menu is opened
+ */
+export declare class UiMenuItemElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-menu-item': UiMenuItemElement;
+    }
+}
+//# sourceMappingURL=ui-menu-item.d.ts.map

package/build/src/md/menu/ui-menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-menu-item.d.ts","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu-item.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAI5C;;;;;;;;GAQG;AACH,qBACa,iBAAkB,SAAQ,OAAO;IAC5C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAuB;CACnE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,iBAAiB,CAAA;KAClC;CACF"}

package/build/src/md/menu/ui-menu-item.js

@@ -0,0 +1,37 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internal/MenuItem.js';
+import styles from './internal/MenuItem.styles.js';
+import listStyles from '../list/internals/ListItem.styles.js';
+/**
+ * Material Design 3 Menu Item component.
+ *
+ * @element ui-menu-item
+ * @attribute {Object} data - The menu item data object
+ * @attribute {boolean} disabled - Whether the menu item is disabled
+ * @fires select - Dispatched when the menu item is selected
+ * @fires submenu-open - Dispatched when a sub-menu is opened
+ */
+let UiMenuItemElement = (() => {
+    let _classDecorators = [customElement('ui-menu-item')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var UiMenuItemElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiMenuItemElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [styles, listStyles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiMenuItemElement = _classThis;
+})();
+export { UiMenuItemElement };
+//# sourceMappingURL=ui-menu-item.js.map

package/build/src/md/menu/ui-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-menu-item.js","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu-item.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,wBAAwB,CAAA;AAC5C,OAAO,MAAM,MAAM,+BAA+B,CAAA;AAClD,OAAO,UAAU,MAAM,sCAAsC,CAAA;AAE7D;;;;;;;;GAQG;IAEU,iBAAiB;4BAD7B,aAAa,CAAC,cAAc,CAAC;;;;sBACS,OAAO;iCAAf,SAAQ,WAAO;;;;YAA9C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;;YADvD,uDAAiB;;;;;SAAjB,iBAAiB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internal/MenuItem.js'\nimport styles from './internal/MenuItem.styles.js'\nimport listStyles from '../list/internals/ListItem.styles.js'\n\n/**\n * Material Design 3 Menu Item component.\n *\n * @element ui-menu-item\n * @attribute {Object} data - The menu item data object\n * @attribute {boolean} disabled - Whether the menu item is disabled\n * @fires select - Dispatched when the menu item is selected\n * @fires submenu-open - Dispatched when a sub-menu is opened\n */\n@customElement('ui-menu-item')\nexport class UiMenuItemElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles, listStyles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-menu-item': UiMenuItemElement\n  }\n}\n"]}

package/build/src/md/menu/ui-menu.d.ts

@@ -0,0 +1,22 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internal/Menu.js';
+/**
+ * Material Design 3 Menu component with sub-menu support.
+ *
+ * @element ui-menu
+ * @attribute {boolean} open - Whether the menu is currently open
+ * @attribute {boolean} anchored - Whether the menu should be positioned relative to an anchor element
+ * @attribute {boolean} disabled - Whether the menu is disabled
+ * @fires select - Dispatched when a menu item is selected
+ * @fires close - Dispatched when the menu is closed
+ * @fires open - Dispatched when the menu is opened
+ */
+export declare class UiMenuElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-menu': UiMenuElement;
+    }
+}
+//# sourceMappingURL=ui-menu.d.ts.map

package/build/src/md/menu/ui-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-menu.d.ts","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,oBAAoB,CAAA;AAGxC;;;;;;;;;;GAUG;AACH,qBACa,aAAc,SAAQ,OAAO;IACxC,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,aAAa,CAAA;KACzB;CACF"}

package/build/src/md/menu/ui-menu.js

@@ -0,0 +1,38 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internal/Menu.js';
+import styles from './internal/Menu.styles.js';
+/**
+ * Material Design 3 Menu component with sub-menu support.
+ *
+ * @element ui-menu
+ * @attribute {boolean} open - Whether the menu is currently open
+ * @attribute {boolean} anchored - Whether the menu should be positioned relative to an anchor element
+ * @attribute {boolean} disabled - Whether the menu is disabled
+ * @fires select - Dispatched when a menu item is selected
+ * @fires close - Dispatched when the menu is closed
+ * @fires open - Dispatched when the menu is opened
+ */
+let UiMenuElement = (() => {
+    let _classDecorators = [customElement('ui-menu')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var UiMenuElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiMenuElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [styles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiMenuElement = _classThis;
+})();
+export { UiMenuElement };
+//# sourceMappingURL=ui-menu.js.map

package/build/src/md/menu/ui-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-menu.js","sourceRoot":"","sources":["../../../../src/md/menu/ui-menu.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,oBAAoB,CAAA;AACxC,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAE9C;;;;;;;;;;GAUG;IAEU,aAAa;4BADzB,aAAa,CAAC,SAAS,CAAC;;;;sBACU,OAAO;6BAAf,SAAQ,WAAO;;;;YAA1C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAa;;;;;SAAb,aAAa","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internal/Menu.js'\nimport styles from './internal/Menu.styles.js'\n\n/**\n * Material Design 3 Menu component with sub-menu support.\n *\n * @element ui-menu\n * @attribute {boolean} open - Whether the menu is currently open\n * @attribute {boolean} anchored - Whether the menu should be positioned relative to an anchor element\n * @attribute {boolean} disabled - Whether the menu is disabled\n * @fires select - Dispatched when a menu item is selected\n * @fires close - Dispatched when the menu is closed\n * @fires open - Dispatched when the menu is opened\n */\n@customElement('ui-menu')\nexport class UiMenuElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-menu': UiMenuElement\n  }\n}\n"]}

package/build/src/md/menu/ui-sub-menu.d.ts

@@ -0,0 +1,20 @@
+import type { CSSResultOrNative } from 'lit';
+import Element from './internal/SubMenu.js';
+/**
+ * Material Design 3 Sub-Menu component.
+ *
+ * @element ui-sub-menu
+ * @attribute {Object} parentItem - The parent menu item element
+ * @attribute {Array} menuItems - The sub-menu items data
+ * @fires select - Dispatched when a sub-menu item is selected
+ * @fires close - Dispatched when the sub-menu is closed
+ */
+export declare class UiSubMenuElement extends Element {
+    static styles: CSSResultOrNative[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ui-sub-menu': UiSubMenuElement;
+    }
+}
+//# sourceMappingURL=ui-sub-menu.d.ts.map

package/build/src/md/menu/ui-sub-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-sub-menu.d.ts","sourceRoot":"","sources":["../../../../src/md/menu/ui-sub-menu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAI3C;;;;;;;;GAQG;AACH,qBACa,gBAAiB,SAAQ,OAAO;IAC3C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAuB;CACnE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,gBAAgB,CAAA;KAChC;CACF"}

package/build/src/md/menu/ui-sub-menu.js

@@ -0,0 +1,37 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import Element from './internal/SubMenu.js';
+import menuStyles from './internal/SubMenu.styles.js';
+import styles from './internal/Menu.styles.js';
+/**
+ * Material Design 3 Sub-Menu component.
+ *
+ * @element ui-sub-menu
+ * @attribute {Object} parentItem - The parent menu item element
+ * @attribute {Array} menuItems - The sub-menu items data
+ * @fires select - Dispatched when a sub-menu item is selected
+ * @fires close - Dispatched when the sub-menu is closed
+ */
+let UiSubMenuElement = (() => {
+    let _classDecorators = [customElement('ui-sub-menu')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = Element;
+    var UiSubMenuElement = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiSubMenuElement = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static styles = [styles, menuStyles];
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return UiSubMenuElement = _classThis;
+})();
+export { UiSubMenuElement };
+//# sourceMappingURL=ui-sub-menu.js.map

package/build/src/md/menu/ui-sub-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-sub-menu.js","sourceRoot":"","sources":["../../../../src/md/menu/ui-sub-menu.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,uBAAuB,CAAA;AAC3C,OAAO,UAAU,MAAM,8BAA8B,CAAA;AACrD,OAAO,MAAM,MAAM,2BAA2B,CAAA;AAE9C;;;;;;;;GAQG;IAEU,gBAAgB;4BAD5B,aAAa,CAAC,aAAa,CAAC;;;;sBACS,OAAO;gCAAf,SAAQ,WAAO;;;;YAA7C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;;YADvD,uDAAgB;;;;;SAAhB,gBAAgB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internal/SubMenu.js'\nimport menuStyles from './internal/SubMenu.styles.js'\nimport styles from './internal/Menu.styles.js'\n\n/**\n * Material Design 3 Sub-Menu component.\n *\n * @element ui-sub-menu\n * @attribute {Object} parentItem - The parent menu item element\n * @attribute {Array} menuItems - The sub-menu items data\n * @fires select - Dispatched when a sub-menu item is selected\n * @fires close - Dispatched when the sub-menu is closed\n */\n@customElement('ui-sub-menu')\nexport class UiSubMenuElement extends Element {\n  static override styles: CSSResultOrNative[] = [styles, menuStyles]\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ui-sub-menu': UiSubMenuElement\n  }\n}\n"]}

package/build/src/mixins/FileDropMixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropMixin.d.ts","sourceRoot":"","sources":["../../../src/mixins/FileDropMixin.ts"],"names":[],"mappings":"AAEA,OAAO,EAAwB,UAAU,EAAE,MAAM,KAAK,CAAA;AAGtD,OAAO,wBAAwB,CAAA;AAE/B,eAAO,MAAM,gBAAgB,eAA6B,CAAA;AAC1D,eAAO,MAAM,gBAAgB,eAA6B,CAAA;AAC1D,eAAO,MAAM,eAAe,eAA4B,CAAA;AACxD,eAAO,MAAM,WAAW,eAAwB,CAAA;AAEhD,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;AAExD,MAAM,CAAC,OAAO,OAAO,sBAAsB;IACzC,gBAAgB,EAAE,OAAO,CAAA;IAEzB,UAAU,EAAE,WAAW,CAAA;IAEvB;;;;OAIG;IACH,mBAAmB,CAAC,KAAK,EAAE,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC;CACpD;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,GACvB,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAAc,CAAC,KAAG,WAAW,CAAC,sBAAsB,CAAC,GAAG,CAyH3F,CAAA"}
+{"version":3,"file":"FileDropMixin.d.ts","sourceRoot":"","sources":["../../../src/mixins/FileDropMixin.ts"],"names":[],"mappings":"AAEA,OAAO,EAAwB,UAAU,EAAE,MAAM,KAAK,CAAA;AAEtD,OAAO,wBAAwB,CAAA;AAE/B,eAAO,MAAM,gBAAgB,eAA6B,CAAA;AAC1D,eAAO,MAAM,gBAAgB,eAA6B,CAAA;AAC1D,eAAO,MAAM,eAAe,eAA4B,CAAA;AACxD,eAAO,MAAM,WAAW,eAAwB,CAAA;AAEhD,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;AAExD,MAAM,CAAC,OAAO,OAAO,sBAAsB;IACzC,gBAAgB,EAAE,OAAO,CAAA;IAEzB,UAAU,EAAE,WAAW,CAAA;IAEvB;;;;OAIG;IACH,mBAAmB,CAAC,KAAK,EAAE,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC;CACpD;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAC7D,YAAY,CAAC,KACZ,WAAW,CAAC,sBAAsB,CAAC,GAAG,CAwHxC,CAAA"}

package/build/src/mixins/FileDropMixin.js

@@ -3,7 +3,6 @@ import { __esDecorate, __runInitializers } from "tslib";
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import '../md/icons/ui-icon.js';
 export const dragEnterHandler = Symbol('dragEnterHandler');
 export const dragLeaveHandler = Symbol('dragLeaveHandler');
@@ -23,7 +22,7 @@ export const dropHandler = Symbol('dropHandler');
  *
  * @mixin
  */
-export const FileDropMixin = dedupeMixin((superClass) => {
+export const FileDropMixin = (superClass) => {
     let MyMixinClass = (() => {
         let _classSuper = superClass;
         let _dropTargetActive_decorators;
@@ -76,11 +75,11 @@ export const FileDropMixin = dedupeMixin((superClass) => {
              */
             dropTargetTemplate() {
                 return html `
-          <div class="drop-info">
-            <ui-icon icon="fileDownload" class="drop-icon"></ui-icon>
-            <p class="drop-message">Drop the file here</p>
-          </div>
-        `;
+        <div class="drop-info">
+          <ui-icon icon="fileDownload" class="drop-icon"></ui-icon>
+          <p class="drop-message">Drop the file here</p>
+        </div>
+      `;
             }
             [(_dropTargetActive_decorators = [property({ type: Boolean })], dragEnterHandler)](e) {
                 if (!e.dataTransfer) {
@@ -145,5 +144,5 @@ export const FileDropMixin = dedupeMixin((superClass) => {
         };
     })();
     return MyMixinClass;
-});
+};
 //# sourceMappingURL=FileDropMixin.js.map

package/build/src/mixins/FileDropMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDropMixin.js","sourceRoot":"","sources":["../../../src/mixins/FileDropMixin.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { html, TemplateResult, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { dedupeMixin } from '@open-wc/dedupe-mixin'\nimport '../md/icons/ui-icon.js'\n\nexport const dragEnterHandler = Symbol('dragEnterHandler')\nexport const dragLeaveHandler = Symbol('dragLeaveHandler')\nexport const dragOverHandler = Symbol('dragOverHandler')\nexport const dropHandler = Symbol('dropHandler')\n\ntype Constructor<T = object> = new (...args: any[]) => T\n\nexport declare class FileDropMixinInterface {\n  dropTargetActive: boolean\n\n  dropTarget: HTMLElement\n\n  /**\n   * Processes dropped to the page files\n   * @param files The list of dropped files\n   * @abstract This is to be implemented by the platform bindings\n   */\n  processDroppedFiles(files: FileList): Promise<void>\n}\n\n/**\n * Adds methods to accept files via drag and drop.\n * The mixin register the dnd events on the body element. When an object is dragged over the window it adds\n * this `drop-target` class to the `body` element. Additionally it sets the `dropTargetActive` property.\n *\n * The mixin also assumes that when the `drop-target` is set then the `drop-info` overlay is rendered.\n * However, it does not change the logic if the element is not in the DOM.\n * Use the provided `dropTargetTemplate()` function to generate template for the drag info.\n *\n * The class implementing this mixin should override the `processDroppedFiles(files)`  method\n * to process the incoming files.\n *\n * @mixin\n */\nexport const FileDropMixin = dedupeMixin(\n  <T extends Constructor<LitElement>>(superClass: T): Constructor<FileDropMixinInterface> & T => {\n    class MyMixinClass extends superClass {\n      @property({ type: Boolean }) accessor dropTargetActive: boolean\n\n      dropTarget: HTMLElement = document.body\n\n      constructor(...args: any[]) {\n        super(...args)\n        this[dragEnterHandler] = this[dragEnterHandler].bind(this)\n        this[dragLeaveHandler] = this[dragLeaveHandler].bind(this)\n        this[dragOverHandler] = this[dragOverHandler].bind(this)\n        this[dropHandler] = this[dropHandler].bind(this)\n\n        this.dropTargetActive = false\n      }\n\n      override connectedCallback(): void {\n        const { dropTarget } = this\n        dropTarget.addEventListener('dragenter', this[dragEnterHandler])\n        dropTarget.addEventListener('dragleave', this[dragLeaveHandler])\n        dropTarget.addEventListener('dragover', this[dragOverHandler])\n        dropTarget.addEventListener('drop', this[dropHandler])\n        super.connectedCallback()\n      }\n\n      override disconnectedCallback(): void {\n        const { dropTarget } = this\n        dropTarget.removeEventListener('dragenter', this[dragEnterHandler])\n        dropTarget.removeEventListener('dragleave', this[dragLeaveHandler])\n        dropTarget.removeEventListener('dragover', this[dragOverHandler])\n        dropTarget.removeEventListener('drop', this[dropHandler])\n        super.disconnectedCallback()\n      }\n\n      /**\n       * Processes dropped to the page files\n       * @param files The list of dropped files\n       * @abstract This is to be implemented by the platform bindings\n       */\n      async processDroppedFiles(files: FileList): Promise<void> {\n        // ...\n      }\n\n      /**\n       * @returns The template for the drop file message\n       */\n      dropTargetTemplate(): TemplateResult {\n        return html`\n          <div class=\"drop-info\">\n            <ui-icon icon=\"fileDownload\" class=\"drop-icon\"></ui-icon>\n            <p class=\"drop-message\">Drop the file here</p>\n          </div>\n        `\n      }\n\n      [dragEnterHandler](e: DragEvent): void {\n        if (!e.dataTransfer) {\n          return\n        }\n        if (![...e.dataTransfer.types].includes('Files')) {\n          return\n        }\n        e.preventDefault()\n        this.dropTarget.classList.add('drop-target')\n        this.dropTargetActive = true\n        e.dataTransfer.effectAllowed = 'copy'\n      }\n\n      [dragLeaveHandler](e: DragEvent): void {\n        if (!e.dataTransfer) {\n          return\n        }\n        if (![...e.dataTransfer.types].includes('Files')) {\n          return\n        }\n        const node = e.target as HTMLElement\n        if (node.nodeType !== Node.ELEMENT_NODE) {\n          return\n        }\n        if (node !== this.dropTarget && !node.classList.contains('drop-info')) {\n          return\n        }\n        e.preventDefault()\n        this.dropTarget.classList.remove('drop-target')\n        this.dropTargetActive = false\n      }\n\n      [dragOverHandler](e: DragEvent): void {\n        if (!e.dataTransfer) {\n          return\n        }\n        if (![...e.dataTransfer.types].includes('Files')) {\n          return\n        }\n        const node = e.target as HTMLElement\n        if (node.nodeType !== Node.ELEMENT_NODE) {\n          return\n        }\n        if (node !== this.dropTarget && !node.classList.contains('drop-info')) {\n          return\n        }\n        e.preventDefault()\n        this.dropTarget.classList.add('drop-target')\n        this.dropTargetActive = true\n      }\n\n      [dropHandler](e: DragEvent): void {\n        if (!e.dataTransfer) {\n          return\n        }\n        if (![...e.dataTransfer.types].includes('Files')) {\n          return\n        }\n        e.preventDefault()\n        this.dropTarget.classList.remove('drop-target')\n        this.dropTargetActive = false\n        this.processDroppedFiles(e.dataTransfer.files)\n      }\n    }\n    return MyMixinClass as Constructor<FileDropMixinInterface> & T\n  }\n)\n"]}
+{"version":3,"file":"FileDropMixin.js","sourceRoot":"","sources":["../../../src/mixins/FileDropMixin.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { html, TemplateResult, LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport '../md/icons/ui-icon.js'\n\nexport const dragEnterHandler = Symbol('dragEnterHandler')\nexport const dragLeaveHandler = Symbol('dragLeaveHandler')\nexport const dragOverHandler = Symbol('dragOverHandler')\nexport const dropHandler = Symbol('dropHandler')\n\ntype Constructor<T = object> = new (...args: any[]) => T\n\nexport declare class FileDropMixinInterface {\n  dropTargetActive: boolean\n\n  dropTarget: HTMLElement\n\n  /**\n   * Processes dropped to the page files\n   * @param files The list of dropped files\n   * @abstract This is to be implemented by the platform bindings\n   */\n  processDroppedFiles(files: FileList): Promise<void>\n}\n\n/**\n * Adds methods to accept files via drag and drop.\n * The mixin register the dnd events on the body element. When an object is dragged over the window it adds\n * this `drop-target` class to the `body` element. Additionally it sets the `dropTargetActive` property.\n *\n * The mixin also assumes that when the `drop-target` is set then the `drop-info` overlay is rendered.\n * However, it does not change the logic if the element is not in the DOM.\n * Use the provided `dropTargetTemplate()` function to generate template for the drag info.\n *\n * The class implementing this mixin should override the `processDroppedFiles(files)`  method\n * to process the incoming files.\n *\n * @mixin\n */\nexport const FileDropMixin = <T extends Constructor<LitElement>>(\n  superClass: T\n): Constructor<FileDropMixinInterface> & T => {\n  class MyMixinClass extends superClass {\n    @property({ type: Boolean }) accessor dropTargetActive: boolean\n\n    dropTarget: HTMLElement = document.body\n\n    constructor(...args: any[]) {\n      super(...args)\n      this[dragEnterHandler] = this[dragEnterHandler].bind(this)\n      this[dragLeaveHandler] = this[dragLeaveHandler].bind(this)\n      this[dragOverHandler] = this[dragOverHandler].bind(this)\n      this[dropHandler] = this[dropHandler].bind(this)\n\n      this.dropTargetActive = false\n    }\n\n    override connectedCallback(): void {\n      const { dropTarget } = this\n      dropTarget.addEventListener('dragenter', this[dragEnterHandler])\n      dropTarget.addEventListener('dragleave', this[dragLeaveHandler])\n      dropTarget.addEventListener('dragover', this[dragOverHandler])\n      dropTarget.addEventListener('drop', this[dropHandler])\n      super.connectedCallback()\n    }\n\n    override disconnectedCallback(): void {\n      const { dropTarget } = this\n      dropTarget.removeEventListener('dragenter', this[dragEnterHandler])\n      dropTarget.removeEventListener('dragleave', this[dragLeaveHandler])\n      dropTarget.removeEventListener('dragover', this[dragOverHandler])\n      dropTarget.removeEventListener('drop', this[dropHandler])\n      super.disconnectedCallback()\n    }\n\n    /**\n     * Processes dropped to the page files\n     * @param files The list of dropped files\n     * @abstract This is to be implemented by the platform bindings\n     */\n    async processDroppedFiles(files: FileList): Promise<void> {\n      // ...\n    }\n\n    /**\n     * @returns The template for the drop file message\n     */\n    dropTargetTemplate(): TemplateResult {\n      return html`\n        <div class=\"drop-info\">\n          <ui-icon icon=\"fileDownload\" class=\"drop-icon\"></ui-icon>\n          <p class=\"drop-message\">Drop the file here</p>\n        </div>\n      `\n    }\n\n    [dragEnterHandler](e: DragEvent): void {\n      if (!e.dataTransfer) {\n        return\n      }\n      if (![...e.dataTransfer.types].includes('Files')) {\n        return\n      }\n      e.preventDefault()\n      this.dropTarget.classList.add('drop-target')\n      this.dropTargetActive = true\n      e.dataTransfer.effectAllowed = 'copy'\n    }\n\n    [dragLeaveHandler](e: DragEvent): void {\n      if (!e.dataTransfer) {\n        return\n      }\n      if (![...e.dataTransfer.types].includes('Files')) {\n        return\n      }\n      const node = e.target as HTMLElement\n      if (node.nodeType !== Node.ELEMENT_NODE) {\n        return\n      }\n      if (node !== this.dropTarget && !node.classList.contains('drop-info')) {\n        return\n      }\n      e.preventDefault()\n      this.dropTarget.classList.remove('drop-target')\n      this.dropTargetActive = false\n    }\n\n    [dragOverHandler](e: DragEvent): void {\n      if (!e.dataTransfer) {\n        return\n      }\n      if (![...e.dataTransfer.types].includes('Files')) {\n        return\n      }\n      const node = e.target as HTMLElement\n      if (node.nodeType !== Node.ELEMENT_NODE) {\n        return\n      }\n      if (node !== this.dropTarget && !node.classList.contains('drop-info')) {\n        return\n      }\n      e.preventDefault()\n      this.dropTarget.classList.add('drop-target')\n      this.dropTargetActive = true\n    }\n\n    [dropHandler](e: DragEvent): void {\n      if (!e.dataTransfer) {\n        return\n      }\n      if (![...e.dataTransfer.types].includes('Files')) {\n        return\n      }\n      e.preventDefault()\n      this.dropTarget.classList.remove('drop-target')\n      this.dropTargetActive = false\n      this.processDroppedFiles(e.dataTransfer.files)\n    }\n  }\n  return MyMixinClass as Constructor<FileDropMixinInterface> & T\n}\n"]}

package/build/src/mixins/RenderableMixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RenderableMixin.d.ts","sourceRoot":"","sources":["../../../src/mixins/RenderableMixin.ts"],"names":[],"mappings":"AAEA,OAAO,EAAQ,cAAc,EAAU,OAAO,EAAE,MAAM,KAAK,CAAA;AAG3D,eAAO,MAAM,cAAc,eAA2B,CAAA;AACtD,eAAO,MAAM,UAAU,eAAuB,CAAA;AAC9C,eAAO,MAAM,gBAAgB,eAA6B,CAAA;AAC1D,eAAO,MAAM,cAAc,eAA2B,CAAA;AACtD,eAAO,MAAM,uBAAuB,eAAoC,CAAA;AACxE,eAAO,MAAM,oBAAoB,eAAiC,CAAA;AAElE,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;AAExD,MAAM,CAAC,OAAO,OAAO,wBAAwB;IAC3C;;;;;OAKG;IACH,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAA;IAE/B;;OAEG;IACH,IAAI,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAAA;IAEtC;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAAA;IAExB;;;OAGG;IACH,WAAW,IAAI,IAAI;IAEnB;;OAEG;IACH,OAAO,IAAI,IAAI;IAEf;;;OAGG;IACH,YAAY,IAAI,cAAc,GAAG,OAAO,OAAO;IAE/C;;;;;;OAMG;IACH,MAAM,IAAI,IAAI;CACf;AAED;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GACzB,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,cAAc,CAAC,KAAG,WAAW,CAAC,wBAAwB,CAAC,GAAG,CAuHtF,CAAA"}
+{"version":3,"file":"RenderableMixin.d.ts","sourceRoot":"","sources":["../../../src/mixins/RenderableMixin.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,cAAc,EAAU,OAAO,EAAE,MAAM,KAAK,CAAA;AAG3D,eAAO,MAAM,cAAc,eAA2B,CAAA;AACtD,eAAO,MAAM,UAAU,eAAuB,CAAA;AAC9C,eAAO,MAAM,gBAAgB,eAA6B,CAAA;AAC1D,eAAO,MAAM,cAAc,eAA2B,CAAA;AACtD,eAAO,MAAM,uBAAuB,eAAoC,CAAA;AACxE,eAAO,MAAM,oBAAoB,eAAiC,CAAA;AAElE,KAAK,WAAW,CAAC,CAAC,GAAG,MAAM,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;AAExD,MAAM,CAAC,OAAO,OAAO,wBAAwB;IAC3C;;;;;OAKG;IACH,QAAQ,CAAC,aAAa,EAAE,OAAO,CAAA;IAE/B;;OAEG;IACH,IAAI,cAAc,IAAI,OAAO,CAAC,OAAO,CAAC,CAAA;IAEtC;;OAEG;IACH,IAAI,SAAS,IAAI,OAAO,CAAA;IAExB;;;OAGG;IACH,WAAW,IAAI,IAAI;IAEnB;;OAEG;IACH,OAAO,IAAI,IAAI;IAEf;;;OAGG;IACH,YAAY,IAAI,cAAc,GAAG,OAAO,OAAO;IAE/C;;;;;;OAMG;IACH,MAAM,IAAI,IAAI;CACf;AAED;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,CAAC,GAAG,CAAC,EACxD,YAAY,CAAC,KACZ,WAAW,CAAC,wBAAwB,CAAC,GAAG,CAsH1C,CAAA"}

package/build/src/mixins/RenderableMixin.js

@@ -1,6 +1,5 @@
 import { __esDecorate, __runInitializers } from "tslib";
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { dedupeMixin } from '@open-wc/dedupe-mixin';
 import { html, render } from 'lit';
 import reactive from '../decorators/reactive.js';
 export const renderingValue = Symbol('renderingValue');
@@ -16,7 +15,7 @@ export const resolveUpdatePromise = Symbol('resolveUpdatePromise');
  *
  * @mixin
  */
-export const RenderableMixin = dedupeMixin((superClass) => {
+export const RenderableMixin = (superClass) => {
     let RenderableMixinClass = (() => {
         let _classSuper = superClass;
         let _firstRendered_decorators;
@@ -133,5 +132,5 @@ export const RenderableMixin = dedupeMixin((superClass) => {
         };
     })();
     return RenderableMixinClass;
-});
+};
 //# sourceMappingURL=RenderableMixin.js.map

package/build/src/mixins/RenderableMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderableMixin.js","sourceRoot":"","sources":["../../../src/mixins/RenderableMixin.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { dedupeMixin } from '@open-wc/dedupe-mixin'\nimport { html, TemplateResult, render, nothing } from 'lit'\nimport reactive from '../decorators/reactive.js'\n\nexport const renderingValue = Symbol('renderingValue')\nexport const renderPage = Symbol('renderPage')\nexport const setUpdatePromise = Symbol('setUpdatePromise')\nexport const updateResolver = Symbol('updateResolver')\nexport const hasPendingUpdatePromise = Symbol('hasPendingUpdatePromise')\nexport const resolveUpdatePromise = Symbol('resolveUpdatePromise')\n\ntype Constructor<T = object> = new (...args: any[]) => T\n\nexport declare class RenderableMixinInterface {\n  /**\n   * Determines whether the initial render had run and the `firstRender()`\n   * function was called.\n   *\n   * @default false\n   */\n  accessor firstRendered: boolean\n\n  /**\n   * @type A promise resolved when the render finished.\n   */\n  get updateComplete(): Promise<boolean>\n\n  /**\n   * True when rendering debouncer is running.\n   */\n  get rendering(): boolean\n\n  /**\n   * Helper function to be overridden by child classes. It is called when the view\n   * is rendered for the first time.\n   */\n  firstRender(): void\n\n  /**\n   * A function called when the template has been rendered\n   */\n  updated(): void\n\n  /**\n   * This to be used by the child classes to render page template.\n   * @returns Application page template\n   */\n  pageTemplate(): TemplateResult | typeof nothing\n\n  /**\n   * The main render function. Sub classes should not override this method.\n   * Override `[renderPage]()` instead.\n   *\n   * The function calls `[renderPage]()` in a micro task so it is safe to call this\n   * multiple time in the same event loop.\n   */\n  render(): void\n}\n\n/**\n * Adds methods that helps with asynchronous template rendering.\n *\n * The application page content is rendered into the `#app` container.\n *\n * @mixin\n */\nexport const RenderableMixin = dedupeMixin(\n  <T extends Constructor<any>>(superClass: T): Constructor<RenderableMixinInterface> & T => {\n    class RenderableMixinClass extends superClass {\n      /**\n       * Determines whether the initial render had run and the `firstRender()`\n       * function was called.\n       *\n       * @default false\n       */\n      @reactive() accessor firstRendered = false;\n\n      [renderingValue] = false;\n\n      [hasPendingUpdatePromise] = false;\n\n      [updateResolver]?: (value?: any) => void\n\n      #updateComplete?: Promise<boolean>\n\n      /**\n       * @type A promise resolved when the render finished.\n       */\n      get updateComplete(): Promise<boolean> | undefined {\n        return this.#updateComplete\n      }\n\n      /**\n       * True when rendering debouncer is running.\n       */\n      get rendering(): boolean {\n        return this[renderingValue]\n      }\n\n      constructor(...args: any[]) {\n        super(...args)\n        this[setUpdatePromise]()\n      }\n\n      /**\n       * Helper function to be overridden by child classes. It is called when the view\n       * is rendered for the first time.\n       */\n      firstRender(): void {\n        //\n      }\n\n      /**\n       * A function called when the template has been rendered\n       */\n      updated(): void {\n        //\n      }\n\n      /**\n       * This to be used by the child classes to render page template.\n       * @returns Application page template\n       */\n      pageTemplate(): TemplateResult | typeof nothing {\n        return html``\n      }\n\n      /**\n       * The main render function. Sub classes should not override this method.\n       * Override `[renderPage]()` instead.\n       *\n       * The function calls `[renderPage]()` in a micro task so it is safe to call this\n       * multiple time in the same event loop.\n       */\n      render(): void {\n        if (this.rendering) {\n          return\n        }\n        this[renderingValue] = true\n        if (!this[hasPendingUpdatePromise]) {\n          this[setUpdatePromise]()\n        }\n        requestAnimationFrame(() => {\n          this[renderingValue] = false\n          this[renderPage]()\n        })\n      }\n\n      [renderPage](): void {\n        const root = document.querySelector('#app') as HTMLElement\n        if (!root) {\n          // eslint-disable-next-line no-console\n          console.warn(`The <div id=\"app\"></div> is not in the document.`)\n          return\n        }\n        if (!this.firstRendered) {\n          this.firstRendered = true\n          // cleanup any pre-existing content.\n          Array.from(root.childNodes).forEach((node) => node.parentNode?.removeChild(node))\n          setTimeout(() => this.firstRender())\n        }\n        render(this.pageTemplate(), root, { host: this })\n        this[resolveUpdatePromise]()\n        this.updated()\n      }\n\n      [setUpdatePromise](): void {\n        this.#updateComplete = new Promise((resolve) => {\n          this[updateResolver] = resolve\n          this[hasPendingUpdatePromise] = true\n        })\n      }\n\n      [resolveUpdatePromise](): void {\n        if (!this[hasPendingUpdatePromise]) {\n          return\n        }\n        this[hasPendingUpdatePromise] = false\n        const resolver = this[updateResolver]\n        if (resolver) {\n          resolver()\n        }\n      }\n    }\n    return RenderableMixinClass as Constructor<RenderableMixinInterface> & T\n  }\n)\n"]}
+{"version":3,"file":"RenderableMixin.js","sourceRoot":"","sources":["../../../src/mixins/RenderableMixin.ts"],"names":[],"mappings":";AAAA,uDAAuD;AACvD,OAAO,EAAE,IAAI,EAAkB,MAAM,EAAW,MAAM,KAAK,CAAA;AAC3D,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAEhD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;AACtD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA;AAC9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAA;AAC1D,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA;AACtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,yBAAyB,CAAC,CAAA;AACxE,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAAA;AAkDlE;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,UAAa,EAC8B,EAAE;QACvC,oBAAoB;0BAAS,UAAU;;;;qBAAvC,oBAAqB,SAAQ,WAAU;;;gBAO/B,4LAAS,aAAa,6BAAb,aAAa,qGAAS;;;YAA/B,uFAAyB,KAAK,EAAC;YAN3C;;;;;eAKG;YACS,IAAS,aAAa,mDAAS;YAA/B,IAAS,aAAa,yDAAS;YAE3C,+BAFC,QAAQ,EAAE,GAEV,cAAc,EAAC,+DAAG,KAAK,EAAC;YAEzB,CAAC,uBAAuB,CAAC,GAAG,KAAK,CAAC;YAElC,CAAC,cAAc,CAAC,CAAwB;YAExC,eAAe,CAAmB;YAElC;;eAEG;YACH,IAAI,cAAc;gBAChB,OAAO,IAAI,CAAC,eAAe,CAAA;YAC7B,CAAC;YAED;;eAEG;YACH,IAAI,SAAS;gBACX,OAAO,IAAI,CAAC,cAAc,CAAC,CAAA;YAC7B,CAAC;YAED,YAAY,GAAG,IAAW;gBACxB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAA;gBACd,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAA;YAC1B,CAAC;YAED;;;eAGG;YACH,WAAW;gBACT,EAAE;YACJ,CAAC;YAED;;eAEG;YACH,OAAO;gBACL,EAAE;YACJ,CAAC;YAED;;;eAGG;YACH,YAAY;gBACV,OAAO,IAAI,CAAA,EAAE,CAAA;YACf,CAAC;YAED;;;;;;eAMG;YACH,MAAM;gBACJ,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACnB,OAAM;gBACR,CAAC;gBACD,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI,CAAA;gBAC3B,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,EAAE,CAAC;oBACnC,IAAI,CAAC,gBAAgB,CAAC,EAAE,CAAA;gBAC1B,CAAC;gBACD,qBAAqB,CAAC,GAAG,EAAE;oBACzB,IAAI,CAAC,cAAc,CAAC,GAAG,KAAK,CAAA;oBAC5B,IAAI,CAAC,UAAU,CAAC,EAAE,CAAA;gBACpB,CAAC,CAAC,CAAA;YACJ,CAAC;YAED,CAAC,UAAU,CAAC;gBACV,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAgB,CAAA;gBAC1D,IAAI,CAAC,IAAI,EAAE,CAAC;oBACV,sCAAsC;oBACtC,OAAO,CAAC,IAAI,CAAC,kDAAkD,CAAC,CAAA;oBAChE,OAAM;gBACR,CAAC;gBACD,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC;oBACxB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAA;oBACzB,oCAAoC;oBACpC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC,CAAA;oBACjF,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAA;gBACtC,CAAC;gBACD,MAAM,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;gBACjD,IAAI,CAAC,oBAAoB,CAAC,EAAE,CAAA;gBAC5B,IAAI,CAAC,OAAO,EAAE,CAAA;YAChB,CAAC;YAED,CAAC,gBAAgB,CAAC;gBAChB,IAAI,CAAC,eAAe,GAAG,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;oBAC7C,IAAI,CAAC,cAAc,CAAC,GAAG,OAAO,CAAA;oBAC9B,IAAI,CAAC,uBAAuB,CAAC,GAAG,IAAI,CAAA;gBACtC,CAAC,CAAC,CAAA;YACJ,CAAC;YAED,CAAC,oBAAoB,CAAC;gBACpB,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,EAAE,CAAC;oBACnC,OAAM;gBACR,CAAC;gBACD,IAAI,CAAC,uBAAuB,CAAC,GAAG,KAAK,CAAA;gBACrC,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,CAAA;gBACrC,IAAI,QAAQ,EAAE,CAAC;oBACb,QAAQ,EAAE,CAAA;gBACZ,CAAC;YACH,CAAC;;;IAEH,OAAO,oBAAiE,CAAA;AAC1E,CAAC,CAAA","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { html, TemplateResult, render, nothing } from 'lit'\nimport reactive from '../decorators/reactive.js'\n\nexport const renderingValue = Symbol('renderingValue')\nexport const renderPage = Symbol('renderPage')\nexport const setUpdatePromise = Symbol('setUpdatePromise')\nexport const updateResolver = Symbol('updateResolver')\nexport const hasPendingUpdatePromise = Symbol('hasPendingUpdatePromise')\nexport const resolveUpdatePromise = Symbol('resolveUpdatePromise')\n\ntype Constructor<T = object> = new (...args: any[]) => T\n\nexport declare class RenderableMixinInterface {\n  /**\n   * Determines whether the initial render had run and the `firstRender()`\n   * function was called.\n   *\n   * @default false\n   */\n  accessor firstRendered: boolean\n\n  /**\n   * @type A promise resolved when the render finished.\n   */\n  get updateComplete(): Promise<boolean>\n\n  /**\n   * True when rendering debouncer is running.\n   */\n  get rendering(): boolean\n\n  /**\n   * Helper function to be overridden by child classes. It is called when the view\n   * is rendered for the first time.\n   */\n  firstRender(): void\n\n  /**\n   * A function called when the template has been rendered\n   */\n  updated(): void\n\n  /**\n   * This to be used by the child classes to render page template.\n   * @returns Application page template\n   */\n  pageTemplate(): TemplateResult | typeof nothing\n\n  /**\n   * The main render function. Sub classes should not override this method.\n   * Override `[renderPage]()` instead.\n   *\n   * The function calls `[renderPage]()` in a micro task so it is safe to call this\n   * multiple time in the same event loop.\n   */\n  render(): void\n}\n\n/**\n * Adds methods that helps with asynchronous template rendering.\n *\n * The application page content is rendered into the `#app` container.\n *\n * @mixin\n */\nexport const RenderableMixin = <T extends Constructor<any>>(\n  superClass: T\n): Constructor<RenderableMixinInterface> & T => {\n  class RenderableMixinClass extends superClass {\n    /**\n     * Determines whether the initial render had run and the `firstRender()`\n     * function was called.\n     *\n     * @default false\n     */\n    @reactive() accessor firstRendered = false;\n\n    [renderingValue] = false;\n\n    [hasPendingUpdatePromise] = false;\n\n    [updateResolver]?: (value?: any) => void\n\n    #updateComplete?: Promise<boolean>\n\n    /**\n     * @type A promise resolved when the render finished.\n     */\n    get updateComplete(): Promise<boolean> | undefined {\n      return this.#updateComplete\n    }\n\n    /**\n     * True when rendering debouncer is running.\n     */\n    get rendering(): boolean {\n      return this[renderingValue]\n    }\n\n    constructor(...args: any[]) {\n      super(...args)\n      this[setUpdatePromise]()\n    }\n\n    /**\n     * Helper function to be overridden by child classes. It is called when the view\n     * is rendered for the first time.\n     */\n    firstRender(): void {\n      //\n    }\n\n    /**\n     * A function called when the template has been rendered\n     */\n    updated(): void {\n      //\n    }\n\n    /**\n     * This to be used by the child classes to render page template.\n     * @returns Application page template\n     */\n    pageTemplate(): TemplateResult | typeof nothing {\n      return html``\n    }\n\n    /**\n     * The main render function. Sub classes should not override this method.\n     * Override `[renderPage]()` instead.\n     *\n     * The function calls `[renderPage]()` in a micro task so it is safe to call this\n     * multiple time in the same event loop.\n     */\n    render(): void {\n      if (this.rendering) {\n        return\n      }\n      this[renderingValue] = true\n      if (!this[hasPendingUpdatePromise]) {\n        this[setUpdatePromise]()\n      }\n      requestAnimationFrame(() => {\n        this[renderingValue] = false\n        this[renderPage]()\n      })\n    }\n\n    [renderPage](): void {\n      const root = document.querySelector('#app') as HTMLElement\n      if (!root) {\n        // eslint-disable-next-line no-console\n        console.warn(`The <div id=\"app\"></div> is not in the document.`)\n        return\n      }\n      if (!this.firstRendered) {\n        this.firstRendered = true\n        // cleanup any pre-existing content.\n        Array.from(root.childNodes).forEach((node) => node.parentNode?.removeChild(node))\n        setTimeout(() => this.firstRender())\n      }\n      render(this.pageTemplate(), root, { host: this })\n      this[resolveUpdatePromise]()\n      this.updated()\n    }\n\n    [setUpdatePromise](): void {\n      this.#updateComplete = new Promise((resolve) => {\n        this[updateResolver] = resolve\n        this[hasPendingUpdatePromise] = true\n      })\n    }\n\n    [resolveUpdatePromise](): void {\n      if (!this[hasPendingUpdatePromise]) {\n        return\n      }\n      this[hasPendingUpdatePromise] = false\n      const resolver = this[updateResolver]\n      if (resolver) {\n        resolver()\n      }\n    }\n  }\n  return RenderableMixinClass as Constructor<RenderableMixinInterface> & T\n}\n"]}

package/demo/md/index.html

@@ -41,6 +41,8 @@
         <dd>A Material 3 dropdown-list.</dd>
         <dt><a href="listbox/listbox.html">listbox</a></dt>
         <dd>A Material 3 listbox.</dd>
+        <dt><a href="menu/index.html">menu</a></dt>
+        <dd>A Material 3 menu.</dd>
         <dt><a href="inputs/switch.html">switch</a></dt>
         <dd>A Material 3 switch.</dd>