@duetds/components 10.0.0-alpha.9 → 10.0.0

package/lib/dist-custom-elements/duet-toolbar.js

@@ -1,67 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-548610a6.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-
-const duetToolbarCss = "*,*::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;position:relative;width:100%}.duet-toolbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;background:rgb(255, 255, 255)}.duet-toolbar .container{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1384px;height:36px;margin:0 28px;border-bottom:1px solid rgb(212, 223, 229)}.duet-toolbar .list{display:flex;align-items:center;justify-content:space-between;height:100%;list-style-type:none}.duet-toolbar ::slotted(*){display:flex;align-items:center;justify-content:center;height:100%}.duet-toolbar.primary{background:rgb(0, 119, 179)}.duet-toolbar.primary .container{border-bottom:0}.duet-toolbar.secondary{background:rgb(8, 42, 77)}.duet-toolbar.secondary .container{border-bottom:0}.duet-toolbar.duet-theme-turva{background:rgb(255, 255, 255)}.duet-toolbar.duet-theme-turva .container{border-bottom:1px solid rgb(222, 224, 228)}.duet-toolbar.duet-theme-turva.primary{background:rgb(198, 12, 48)}.duet-toolbar.duet-theme-turva.primary .container{border-bottom:0}";
-const DuetToolbarStyle0 = duetToolbarCss;
-
-const DuetToolbar$1 = /*@__PURE__*/ proxyCustomElement(class DuetToolbar extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.theme = "";
-        this.variation = "default";
-        this.accessibleLabel = undefined;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const variation = this.variation === "primary" ||
-            this.variation === "negative" ||
-            (this.theme === "turva" && this.variation === "secondary")
-            ? "primary"
-            : this.variation === "secondary"
-                ? "secondary"
-                : "default";
-        return (h(Host, { key: 'fba71bd458248491214c3aab4243df4e105fdb5b' }, h("nav", { key: '42fa26ad6a3ffea27ec62722a3f55f1c0d8ea0f1', class: {
-                "duet-toolbar": true,
-                "duet-theme-turva": this.theme === "turva",
-                [variation]: true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'c19fc58652bd52d9c6f7755a01b266a7f77d1949', class: "container" }, h("div", { key: 'a0fef6ef853fc353a374b7bcd2fa632f5176ae60', class: "list", role: "list" }, h("slot", { key: 'a2b2896ec5ebf46253f3e05e1b8ac44582161abf', name: "left" })), h("div", { key: '11cb17b0024f1b6a84d91fb04f8d3be806b49af7', class: "list", role: "list" }, h("slot", { key: 'cd1c67c9f98bf8cb3607965c715d9974e6c17f93', name: "right" }))))));
-    }
-    get element() { return this; }
-    static get style() { return DuetToolbarStyle0; }
-}, [1, "duet-toolbar", {
-        "theme": [1025],
-        "variation": [1025],
-        "accessibleLabel": [1, "accessible-label"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-toolbar"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-toolbar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetToolbar$1);
-            }
-            break;
-    } });
-}
-
-const DuetToolbar = DuetToolbar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetToolbar, defineCustomElement };

package/lib/dist-custom-elements/duet-tooltip-button.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetTooltipButton extends Components.DuetTooltipButton, HTMLElement {}
-export const DuetTooltipButton: {
-    prototype: DuetTooltipButton;
-    new (): DuetTooltipButton;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-tooltip-button.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetTooltipButton$1, d as defineCustomElement$1 } from './p-f6270dca.js';
-
-const DuetTooltipButton = DuetTooltipButton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetTooltipButton, defineCustomElement };

package/lib/dist-custom-elements/duet-tooltip-popup.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetTooltipPopup extends Components.DuetTooltipPopup, HTMLElement {}
-export const DuetTooltipPopup: {
-    prototype: DuetTooltipPopup;
-    new (): DuetTooltipPopup;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-tooltip-popup.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetTooltipPopup$1, d as defineCustomElement$1 } from './p-592cf939.js';
-
-const DuetTooltipPopup = DuetTooltipPopup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetTooltipPopup, defineCustomElement };

package/lib/dist-custom-elements/duet-tooltip.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetTooltip extends Components.DuetTooltip, HTMLElement {}
-export const DuetTooltip: {
-    prototype: DuetTooltip;
-    new (): DuetTooltip;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-tooltip.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetTooltip$1, d as defineCustomElement$1 } from './p-940f9ee8.js';
-
-const DuetTooltip = DuetTooltip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetTooltip, defineCustomElement };

package/lib/dist-custom-elements/duet-tray.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetTray extends Components.DuetTray, HTMLElement {}
-export const DuetTray: {
-    prototype: DuetTray;
-    new (): DuetTray;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-tray.js

@@ -1,146 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, F as Fragment } from './p-548610a6.js';
-import { E as sizeHeader } from './p-cea716f7.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as createID } from './p-5e59e970.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-8db11326.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
-import { d as defineCustomElement$3 } from './p-77667998.js';
-import { d as defineCustomElement$2 } from './p-196352e6.js';
-
-const duetTrayCss = "*,*::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;display:block;width:100%}.duet-tray{position:fixed;top:4rem;right:0;left:0;z-index:399;display:flex;flex-direction:column;max-height:calc(100% - 8rem);padding:16px 20px 16px 24px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);visibility:hidden;background:rgb(240, 247, 250);border-bottom:1px solid rgb(212, 223, 229);box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07);opacity:0;transition:opacity 600ms ease, visibility 600ms ease, transform 600ms ease;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray{padding:16px 36px}}@media (min-width: 106.25em){.duet-tray{padding:16px 52px 16px 60px}}.duet-tray:focus{outline:0}:host(.user-is-tabbing) .duet-tray:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-tray.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tray.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58);background:rgb(245, 247, 250);border-color:rgb(222, 224, 228)}.duet-tray.duet-tray-is-active{visibility:visible;opacity:1;transform:translateY(0)}.duet-tray.duet-tray-is-hidden{visibility:hidden;opacity:0;transform:translateY(-4rem)}@media (min-width: 62em){.duet-tray.duet-tray-is-responsive{display:none !important}}.duet-tray.duet-tray-is-expandable{padding-right:66px}@media (min-width: 62em){.duet-tray.duet-tray-is-expandable{padding-right:78px}}@media (min-width: 106.25em){.duet-tray.duet-tray-is-expandable{padding-right:94px}}.duet-tray-expandable{position:relative;z-index:100;width:calc(100% + 46px);max-height:0;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity 600ms ease, visibility 600ms ease, max-height 600ms ease;scrollbar-width:none}.duet-tray-expandable::-webkit-scrollbar{display:none}.duet-tray-expandable.active{max-height:500px;visibility:visible;opacity:1}.duet-tray-expandable-content{width:100%;margin-top:16px;border-top:1px solid rgb(212, 223, 229)}.duet-theme-turva .duet-tray-expandable-content{border-color:rgb(222, 224, 228)}.duet-tray-button{-webkit-user-select:none;user-select:none;padding:20px !important;position:absolute;top:-2px;right:0;z-index:200;color:rgb(8, 42, 77);text-align:center;cursor:pointer;border-radius:4px;transition:transform 300ms ease;-webkit-tap-highlight-color:transparent}@media (min-width: 62em){.duet-tray-button{margin-right:16px}}@media (min-width: 106.25em){.duet-tray-button{margin-right:36px}}.duet-theme-turva .duet-tray-button{color:rgb(23, 28, 58)}.duet-tray-button.duet-tray-is-expanded{transform:rotate(-180deg)}.duet-tray-button:focus{outline:0}:host(.user-is-tabbing) .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .duet-tray-button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-tray-button:active{box-shadow:none;opacity:0.75}";
-const DuetTrayStyle0 = duetTrayCss;
-
-const topOffset = parseFloat(sizeHeader) * 2 * 16; // convert rem -> px
-const DuetTray$1 = /*@__PURE__*/ proxyCustomElement(class DuetTray extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Own Properties.
-         */
-        this.isTicking = false;
-        this.expandableId = createID("DuetTray");
-        /**
-         * Local methods.
-         */
-        this.animationLoop = () => {
-            this.hiddenState = window.pageYOffset < topOffset;
-            this.isTicking = false;
-        };
-        this.toggleExpandable = ev => {
-            ev.preventDefault();
-            this.expanded = !this.expanded;
-        };
-        this.expanded = false;
-        this.hiddenState = false;
-        this.language = getLanguage();
-        this.accessibleCloseLabelDefaults = {
-            fi: "Sulje",
-            en: "Close",
-            sv: "Stäng",
-        };
-        this.accessibleCloseLabel = getLocaleString(this.accessibleCloseLabelDefaults, this.language);
-        this.accessibleOpenLabelDefaults = {
-            fi: "Avaa",
-            en: "Open",
-            sv: "Öppna",
-        };
-        this.accessibleOpenLabel = getLocaleString(this.accessibleOpenLabelDefaults, this.language);
-        this.theme = "";
-        this.active = false;
-        this.autoHide = true;
-        this.responsive = true;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.hasAdditionalContent = !!this.element.querySelector("[slot='additional']");
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this, [
-            { prop: "accessibleOpenLabel", defaults: "accessibleOpenLabelDefaults" },
-            { prop: "accessibleCloseLabel", defaults: "accessibleCloseLabelDefaults" },
-        ]);
-        subscribeTabbingChange(this);
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-        unsubscribeTabbingChange(this);
-    }
-    /**
-     * Component event handling.
-     */
-    getFrame() {
-        if (!this.isTicking && this.autoHide && this.active) {
-            requestAnimationFrame(this.animationLoop);
-            this.isTicking = true;
-        }
-    }
-    handleBodyClick(e) {
-        if (this.expanded) {
-            this.expanded = this.element.contains(e.target);
-        }
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h("div", { key: '2a28dbe50c5347e6b109da091550d42998d3ea66', class: {
-                "duet-tray": true,
-                "duet-tray-is-active": this.active,
-                "duet-tray-is-hidden": this.hiddenState,
-                "duet-tray-is-responsive": this.responsive,
-                "duet-theme-turva": this.theme === "turva",
-                "duet-tray-is-expandable": this.hasAdditionalContent,
-            } }, h("div", { key: '26c9c3e75ad004e521ab31b2d8ba1b048546c6e9', class: "duet-tray-default-content", role: "status" }, h("slot", { key: 'c17b7e16c92f0d12b35857d35ba59a709fb9a2ae' })), this.hasAdditionalContent && (h(Fragment, { key: 'd6e7d2ffe0a1f7860bad5b50d420c90e7223fd11' }, h("button", { key: '3694b88cdf1c3f9ae783160da5941ef344fa259b', "aria-expanded": this.expanded ? "true" : "false", "aria-controls": this.expandableId, onClick: ev => this.toggleExpandable(ev), class: { "duet-tray-button": true, "duet-tray-is-expanded": this.expanded } }, h("duet-icon", { key: '1776e12e6f1b8bc01040cf1673c36c3fc092cd72', name: "action-arrow-down", size: "small", color: "currentColor", margin: "none" }), h("duet-visually-hidden", { key: '2e297573e5671cbfe8eadec345623d4a4d710a74' }, this.expanded ? this.accessibleCloseLabel : this.accessibleOpenLabel)), h("div", { key: 'dff0cd7c16e992deeb15383694707dc951c3a901', id: this.expandableId, class: { "duet-tray-expandable": true, active: this.expanded } }, h("div", { key: 'b2db67fffb12fc7fb2d06368158ce47c175b8df6', class: "duet-tray-expandable-content" }, h("slot", { key: '55a9e5ddfa5bda9ac52e720ca43ab972ea1360b3', name: "additional" })))))));
-    }
-    get element() { return this; }
-    static get style() { return DuetTrayStyle0; }
-}, [1, "duet-tray", {
-        "language": [1025],
-        "accessibleCloseLabelDefaults": [1, "accessible-close-label-default"],
-        "accessibleCloseLabel": [1025, "accessible-close-label"],
-        "accessibleOpenLabelDefaults": [1, "accessible-open-label-default"],
-        "accessibleOpenLabel": [1025, "accessible-open-label"],
-        "theme": [1025],
-        "active": [516],
-        "autoHide": [4, "auto-hide"],
-        "responsive": [4],
-        "expanded": [32],
-        "hiddenState": [32]
-    }, [[9, "scroll", "getFrame"], [16, "click", "handleBodyClick"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-tray", "duet-icon", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-tray":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetTray$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetTray = DuetTray$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetTray, defineCustomElement };

package/lib/dist-custom-elements/duet-upload-aria-status.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetUploadAriaStatus extends Components.DuetUploadAriaStatus, HTMLElement {}
-export const DuetUploadAriaStatus: {
-    prototype: DuetUploadAriaStatus;
-    new (): DuetUploadAriaStatus;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-upload-aria-status.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetUploadAriaStatus$1, d as defineCustomElement$1 } from './p-e58296e6.js';
-
-const DuetUploadAriaStatus = DuetUploadAriaStatus$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetUploadAriaStatus, defineCustomElement };

package/lib/dist-custom-elements/duet-upload-item.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetUploadItem extends Components.DuetUploadItem, HTMLElement {}
-export const DuetUploadItem: {
-    prototype: DuetUploadItem;
-    new (): DuetUploadItem;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;

package/lib/dist-custom-elements/duet-upload-item.js

@@ -1,9 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { D as DuetUploadItem$1, d as defineCustomElement$1 } from './p-9e31e365.js';
-
-const DuetUploadItem = DuetUploadItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetUploadItem, defineCustomElement };

package/lib/dist-custom-elements/duet-upload.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface DuetUpload extends Components.DuetUpload, HTMLElement {}
-export const DuetUpload: {
-    prototype: DuetUpload;
-    new (): DuetUpload;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;