@duetds/components 10.0.0-alpha.9 → 10.1.0

package/lib/dist-custom-elements/p-a9b78a2b.js

@@ -1,441 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-548610a6.js';
-import { s as spaceXSmall } from './p-cea716f7.js';
-import { o as offset, f as flip, s as shift, c as computePosition, a as autoUpdate, d as defineCustomElement$4 } from './p-940f9ee8.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { f as focusElement } from './p-e30dc66d.js';
-import { g as isArrowDownKey, b as isEscapeKey, f as isArrowUpKey, d as isTabKey } from './p-8db11326.js';
-import { a as getLanguage } from './p-35375593.js';
-import { T as Teleport } from './p-ca3cb21e.js';
-import { d as defineCustomElement$a } from './p-9ee4d52e.js';
-import { d as defineCustomElement$9 } from './p-ed6a907e.js';
-import { d as defineCustomElement$8 } from './p-77667998.js';
-import { d as defineCustomElement$7 } from './p-6620a58c.js';
-import { d as defineCustomElement$6 } from './p-0871ccd4.js';
-import { d as defineCustomElement$5 } from './p-3c70317f.js';
-import { d as defineCustomElement$3 } from './p-f6270dca.js';
-import { d as defineCustomElement$2 } from './p-592cf939.js';
-import { d as defineCustomElement$1 } from './p-196352e6.js';
-
-const duetPopupMenuCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-popup-menu-list{position:absolute;top:0;left:0;z-index:950;width:max-content;min-width:175px;padding:8px;margin:0;color:rgb(8, 42, 77);list-style:none;visibility:hidden !important;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:transform 300ms ease, visibility 300ms ease, opacity 300ms ease;transform:scaleY(0);transform-origin:top center}.duet-popup-menu-list.open{visibility:visible !important;opacity:1;transform:scaleY(1)}.duet-popup-menu-list.fixed{position:fixed}.duet-popup-menu-list.scroll-visible{overflow-y:scroll;scroll-margin:20px}.duet-popup-menu-list.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255)}::slotted(duet-notification){max-width:360px}";
-const DuetPopupMenuStyle0 = duetPopupMenuCss;
-
-const DuetPopupMenu = /*@__PURE__*/ proxyCustomElement(class DuetPopupMenu extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetToggle = createEvent(this, "duetToggle", 7);
-        this.filterLabel = {
-            en: "Filter menu",
-            fi: "Suodata valikkoa",
-            sv: "Filtrera meny",
-        };
-        this.setOpenButton = (element) => {
-            if (!element) {
-                return;
-            }
-            try {
-                const button = element;
-                button.accessiblePopup = "true";
-                button.accessibleExpanded = false;
-                if (this.controllerIcon) {
-                    button.setAttribute("trailing-icon", "action-arrow-down-small");
-                }
-                this.openButton = button;
-            }
-            catch (_e) { }
-        };
-        this.openButtonEventListener = () => {
-            this.toggle();
-        };
-        this.updatePlacement = async () => {
-            if (!this.openButton) {
-                return;
-            }
-            const middleware = [
-                offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }),
-                this.allowVerticalFlip && flip(),
-                shift({ padding: 5 }),
-            ].filter(Boolean);
-            const coordinates = await computePosition(this.openButton, this.menuElement, {
-                middleware,
-                placement: this.placement,
-                strategy: this.position,
-            });
-            this.menuY = coordinates.y;
-            this.menuX = coordinates.x;
-        };
-        this.getNonFilteredItems = () => {
-            return this.showFilterInput ? this.itemElements.filter(i => i.style.display !== "none") : this.itemElements;
-        };
-        this.filterItems = () => {
-            var _a;
-            const filterText = (_a = this.filterInput.value) === null || _a === void 0 ? void 0 : _a.toLocaleLowerCase();
-            const items = this.itemElements;
-            items.forEach(item => {
-                item.style.display =
-                    !filterText ||
-                        item.textContent.toLowerCase().includes(filterText) ||
-                        item.value.toLowerCase().includes(filterText)
-                        ? ""
-                        : "none";
-            });
-        };
-        this.handleKeyDownOnFilter = (ev) => {
-            var _a;
-            if (isArrowDownKey(ev)) {
-                (_a = this.getNonFilteredItems()[0]) === null || _a === void 0 ? void 0 : _a.setFocus();
-            }
-        };
-        this.open = false;
-        this.menuY = undefined;
-        this.menuX = undefined;
-        this.language = getLanguage();
-        this.accessibleLabel = undefined;
-        this.accessibleRole = "menu";
-        this.theme = "";
-        this.skipTeleport = undefined;
-        this.placement = "bottom-start";
-        this.forcePlacement = false;
-        this.allowVerticalFlip = true;
-        this.position = "absolute";
-        this.mainAxisOffset = 0;
-        this.crossAxisOffset = 0;
-        this.controllerIcon = "action-arrow-down-small";
-        this.scrollLimit = undefined;
-        this.showFilterInput = undefined;
-    }
-    /**
-     * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,
-     * the component automatically sets the click event listener to open and close the popup-menu.
-     */
-    get controller() {
-        return this._controller;
-    }
-    set controller(value) {
-        if (this._controller === value) {
-            return;
-        }
-        this._controller = value;
-        if (typeof value === "string") {
-            this.setOpenButton(document.getElementById(value));
-            if (this.openButton) {
-                this.openButton.addEventListener("click", this.openButtonEventListener);
-            }
-        }
-        else {
-            this.setOpenButton(value);
-        }
-    }
-    /**
-     * Alias for property controller.
-     */
-    get opener() {
-        return this._controller;
-    }
-    set opener(value) {
-        this.controller = value;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    componentDidLoad() {
-        {
-            this.updatePlacement();
-        }
-    }
-    connectedCallback() {
-        if (!this.teleport) {
-            this.teleport = new Teleport(this.element);
-        }
-        if (this.teleport) {
-            this.teleport.activate();
-        }
-    }
-    disconnectedCallback() {
-        if (this.autoUpdateCleanup) {
-            this.autoUpdateCleanup();
-        }
-        if (this.openButton) {
-            this.openButton.removeEventListener("click", this.openButtonEventListener);
-            if (this.controllerIcon) {
-                this.openButton.removeAttribute("trailing-icon");
-            }
-        }
-    }
-    /**
-     * Component event handling.
-     */
-    handleKeyUp(evt) {
-        if (this.open) {
-            // When Esc is pressed the menu should be closed
-            if (isEscapeKey(evt)) {
-                this.hide();
-            }
-        }
-    }
-    async handleKeyDown(evt) {
-        const items = this.getNonFilteredItems();
-        if (this.open) {
-            if (isArrowDownKey(evt)) {
-                evt.preventDefault();
-                const current = await this.getFocusedItemIndex();
-                if (current !== -1) {
-                    if (current < items.length - 1) {
-                        items[current + 1].setFocus();
-                    }
-                    else {
-                        items[0].setFocus();
-                    }
-                }
-            }
-            if (isArrowUpKey(evt)) {
-                evt.preventDefault();
-                const current = await this.getFocusedItemIndex();
-                if (current !== -1) {
-                    if (current === 0) {
-                        if (this.showFilterInput) {
-                            this.filterInput.setFocus();
-                        }
-                        else {
-                            items[items.length - 1].setFocus();
-                        }
-                    }
-                    else {
-                        items[current - 1].setFocus();
-                    }
-                }
-            }
-            if (isTabKey(evt) && this.accessibleRole === "menu") {
-                evt.preventDefault();
-                this.hide();
-            }
-        }
-    }
-    handleClick(evt) {
-        const isClickOutside = evt.composedPath().every(node => node !== this.element && node !== this.openButton);
-        if (this.open && isClickOutside) {
-            this.hide();
-        }
-    }
-    /**
-     * isOpen.
-     */
-    async isOpen() {
-        return this.open;
-    }
-    /**
-     * Show.
-     */
-    async show() {
-        this.open = true;
-    }
-    /**
-     * Hide.
-     */
-    async hide() {
-        if (this.autoUpdateCleanup) {
-            this.autoUpdateCleanup();
-        }
-        this.open = false;
-    }
-    /**
-     * Toggle.
-     */
-    async toggle() {
-        if (this.open) {
-            this.hide();
-        }
-        else {
-            this.show();
-        }
-    }
-    handleOpenChange(newValue, oldValue) {
-        if (!!newValue === !!oldValue) {
-            return;
-        }
-        if (this.open && !oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = true;
-            }
-            if (this.accessibleRole !== "listbox") {
-                this.teleport.makeSiblingsInert();
-            }
-            this.updatePlacement();
-            // Start autoUpdate when menu is open
-            if (this.menuElement && this.openButton) {
-                this.autoUpdateCleanup = autoUpdate(this.openButton, this.menuElement, this.updatePlacement);
-            }
-            if (this.showFilterInput) {
-                this.filterInput.value = "";
-                this.filterItems();
-            }
-            setTimeout(() => {
-                if (this.accessibleRole === "menu") {
-                    this.itemElements[0].setFocus();
-                }
-                this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-            }, 200);
-        }
-        else if (!this.open && oldValue) {
-            if (this.openButton) {
-                this.openButton.accessibleExpanded = false;
-            }
-            // Clean up autoUpdate when closed
-            if (this.autoUpdateCleanup) {
-                this.autoUpdateCleanup();
-            }
-            setTimeout(() => {
-                if (this.accessibleRole === "menu") {
-                    focusElement(this.openButton);
-                }
-                this.duetToggle.emit({ open: this.open, component: "duet-popup-menu" });
-                if (this.accessibleRole !== "listbox") {
-                    this.teleport.removeInertFromSiblings();
-                }
-            }, 200);
-        }
-    }
-    get itemElements() {
-        return Array.from(this.element.querySelectorAll(":scope duet-popup-menu-item"));
-    }
-    get popupMenuStyleHeight() {
-        const selector = ":scope duet-popup-menu-item, :scope duet-notification";
-        const elements = Array.from(this.element.querySelectorAll(selector));
-        if (elements.length > 0 && this.scrollLimit) {
-            const paddings = Number(spaceXSmall.replace("px", "")) * 2;
-            return `${elements[0].offsetHeight * this.scrollLimit + paddings}px`;
-        }
-        else {
-            return "auto";
-        }
-    }
-    async getFocusedItemIndex() {
-        const items = this.getNonFilteredItems();
-        for (let i = 0; i < items.length; i++) {
-            if (await items[i].isFocused()) {
-                return i;
-            }
-        }
-        return -1;
-    }
-    render() {
-        const styles = {
-            top: `${this.menuY}px`,
-            left: `${this.menuX}px`,
-            position: this.position,
-            overflowY: "auto",
-            height: this.popupMenuStyleHeight,
-        };
-        return (h(Host, { key: 'd44b11810713e51b35f01a1e527de4e8fbb20a94' }, h("div", { key: 'ef92e91fadf1fffee766178607e5cc6835295a56', ref: element => {
-                this.menuElement = element;
-            }, style: styles, class: {
-                open: this.open,
-                "duet-popup-menu-list": true,
-                "duet-theme-turva": this.theme === "turva",
-                "scroll-visible": this.scrollLimit < this.itemElements.length,
-            }, role: this.accessibleRole, "aria-label": this.accessibleLabel }, this.showFilterInput && (h("div", { key: '6c81b3737473a220d8e3f0f00a2dc8fbaeadcc5d' }, h("duet-input", { key: '8667feda1fb7b281082220a6c770847ecec7b03f', ref: el => (this.filterInput = el), label: this.filterLabel[this.language], "label-hidden": true, expand: true, margin: "none", type: "search", onDuetInput: this.filterItems, onKeyDown: this.handleKeyDownOnFilter }), h("duet-spacer", { key: '27190fdb00333f8f4ffd28cc6d2be99a7eb74355', size: "xx-small" }))), h("slot", { key: '08e56b30c4235a91e15d9e60a667ed351f9dc7a1' }))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "open": ["handleOpenChange"]
-    }; }
-    static get style() { return DuetPopupMenuStyle0; }
-}, [1, "duet-popup-menu", {
-        "accessibleLabel": [1, "accessible-label"],
-        "accessibleRole": [1, "accessible-role"],
-        "theme": [1025],
-        "skipTeleport": [4, "skip-teleport"],
-        "controller": [6145],
-        "opener": [6145],
-        "placement": [1],
-        "forcePlacement": [4, "force-placement"],
-        "allowVerticalFlip": [4, "allow-vertical-flip"],
-        "position": [1025],
-        "mainAxisOffset": [2, "main-axis-offset"],
-        "crossAxisOffset": [2, "cross-axis-offset"],
-        "controllerIcon": [1, "controller-icon"],
-        "scrollLimit": [2, "scroll-limit"],
-        "showFilterInput": [4, "show-filter-input"],
-        "open": [32],
-        "menuY": [32],
-        "menuX": [32],
-        "language": [32],
-        "isOpen": [64],
-        "show": [64],
-        "hide": [64],
-        "toggle": [64]
-    }, [[8, "keyup", "handleKeyUp"], [8, "keydown", "handleKeyDown"], [8, "click", "handleClick"]], {
-        "open": ["handleOpenChange"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-popup-menu", "duet-button", "duet-caption", "duet-icon", "duet-input", "duet-spacer", "duet-spinner", "duet-tooltip", "duet-tooltip-button", "duet-tooltip-popup", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-popup-menu":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetPopupMenu);
-            }
-            break;
-        case "duet-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$a();
-            }
-            break;
-        case "duet-caption":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$9();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "duet-input":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "duet-spacer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "duet-spinner":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "duet-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-tooltip-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-tooltip-popup":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { DuetPopupMenu as D, defineCustomElement as d };

package/lib/dist-custom-elements/p-aaa7a7bd.js

@@ -1,13 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-const inheritGlobalTheme = (component) => {
-    // this minor change enables duet-theme-XXXXX instead of just duet-theme-turva
-    const classList = Array.from(document.documentElement.classList).join(" ") || "";
-    const theme = /(duet-theme-)([a-z]*)/gi.exec(classList);
-    if (theme && theme[1] === "duet-theme-") {
-        component.theme = theme[2] === "default" ? "" : theme[2];
-    }
-};
-
-export { inheritGlobalTheme as i };