@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

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

@@ -1,171 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-d77db171.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as createID } from './p-5e59e970.js';
-import { i as isKeyboardClick, s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './p-ca700701.js';
-import { s as sanitizeString } from './p-9c3c64b9.js';
-import { g as getColorByName } from './p-1f4fbc7a.js';
-import { d as defineCustomElement$3 } from './p-4da43fbc.js';
-import { d as defineCustomElement$2 } from './p-9f9423c6.js';
-
-const duetHeadingLevels = ["h1", "h2", "h3", "h4", "h5", "h6"];
-const duetBlock = "div";
-
-var actionArrowUp={"title":"action-arrow-up","tags":"action arrow up caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M.75 17.939a.752.752 0 0 1-.53-1.281L10.94 5.94c.283-.284.659-.44 1.059-.44.401 0 .777.156 1.06.438l10.721 10.72a.752.752 0 0 1-.53 1.281.743.743 0 0 1-.53-.22L12 7 1.28 17.719a.743.743 0 0 1-.53.22z\"/></svg>"};
-
-const duetCardCss = "*,*::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;margin-bottom:20px !important;display:flex;width:100%;vertical-align:top}:host(.duet-card-info){margin-bottom:16px !important}:host(.duet-m-0){margin:0 !important}.duet-card{padding:20px !important;position:relative;display:flex;flex-direction:column;width:100%;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-style:normal;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);text-decoration:none;border-radius:4px;box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}.duet-card.duet-p-0{padding:0 !important}.duet-card.duet-m-0{margin:0 !important}.duet-card:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-card:focus,.duet-card:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}@media (max-width: 20.5em){.duet-card.shadow-xxx-small{box-shadow:none}}@media (max-width: 22.5em){.duet-card.shadow-xx-small{box-shadow:none}}@media (max-width: 35.9375em){.duet-card.shadow-x-small{box-shadow:none}}@media (min-width: 36em){.duet-card.shadow-small{box-shadow:none}}@media (min-width: 48em){.duet-card.shadow-medium{box-shadow:none}}@media (min-width: 62em){.duet-card.shadow-large{box-shadow:none}}@media (min-width: 64.0625em){.duet-card.shadow-x-large{box-shadow:none}}@media (min-width: 76.25em){.duet-card.shadow-xx-large{box-shadow:none}}@media (min-width: 106.25em){.duet-card.shadow-xxx-large{box-shadow:none}}@media (min-width: 36em){.duet-card{padding:28px !important}}.duet-card.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);box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07)}@media (min-width: 36em){.duet-card.xx-small{padding:12px !important}}@media (min-width: 36em){.duet-card.x-small{padding:20px !important}}@media (min-width: 36em){.duet-card.medium{padding:28px !important}}@media (min-width: 48em){.duet-card.medium{padding:36px !important}}@media (min-width: 36em){.duet-card.large{padding:36px !important}}@media (min-width: 48em){.duet-card.large{padding:48px !important}}@media (min-width: 36em){.duet-card.x-large{padding:48px !important}}@media (min-width: 48em){.duet-card.x-large{padding:72px !important}}.duet-card.duet-card-collapsed{padding-bottom:0 !important}@media (min-width: 36em){.duet-card.duet-card-collapsed{padding-bottom:0 !important}}.duet-card.info{background:rgba(4, 81, 128, 0.04) !important;box-shadow:none}.duet-card.info.duet-theme-turva{background:rgba(23, 28, 58, 0.035) !important}.duet-card.plain{box-shadow:none}.duet-card.plain:not(.duet-card-has-bg){background:transparent !important}.duet-card-heading-grid{display:flex;flex-direction:row}.duet-card-icon{align-self:center}.duet-card-heading-text{flex:1;word-break:break-word}.duet-card-secondary-heading{font-size:1rem;font-weight:600;word-break:break-word}.duet-card-secondary-heading--inline{display:block;flex:1;align-self:flex-start;line-height:1.875;text-align:right}@media (max-width: 22.5em){.duet-card-secondary-heading--inline{display:none}}.duet-card-secondary-heading--new-line{display:none}@media (max-width: 22.5em){.duet-card-secondary-heading--new-line{display:block}}.duet-card-heading{position:relative;display:block;padding:16px 20px;margin:-20px -20px 20px;overflow:hidden;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:1.25rem;font-weight:800;color:rgb(8, 42, 77);border-bottom:1px solid rgb(212, 223, 229);border-radius:4px 4px 0 0}@media (min-width: 36em){.duet-card-heading{padding:15px 28px 16px !important;margin:-28px -28px 20px}.none .duet-card-heading{padding:0 !important;margin:0}}.duet-card-image-mask+.duet-card-heading{border-radius:0}.duet-card-heading.duet-card-heading--collapsible{cursor:pointer}.duet-card-heading.duet-card-heading--collapsible button{width:100%;font-family:inherit;font-size:inherit;font-weight:inherit;color:inherit;text-align:left;cursor:pointer}.duet-card-heading.duet-card-heading--collapsible button:focus{outline:0}:host(.user-is-tabbing) .duet-card-heading.duet-card-heading--collapsible button:focus{border-radius:4px;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-card-heading.duet-card-heading--collapsible button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-card-collapsed .duet-card-heading{margin-bottom:0 !important;border-bottom:0 !important}.duet-theme-turva .duet-card-heading{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);border-color:rgb(222, 224, 228)}@media (min-width: 36em){.xx-small .duet-card-heading{padding:6px 12px 7px !important;margin:-12px -12px 12px}}@media (min-width: 48em){.xx-small .duet-card-heading{padding:6px 12px 7px !important;margin:-12px -12px 12px}}@media (min-width: 36em){.x-small .duet-card-heading{padding:10px 20px 11px !important;margin:-20px -20px 20px}}@media (min-width: 48em){.x-small .duet-card-heading{padding:10px 20px 11px !important;margin:-20px -20px 20px}}.medium .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.medium .duet-card-heading{padding:15px 28px 16px !important;margin:-28px -28px 20px}}@media (min-width: 48em){.medium .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}.large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.large .duet-card-heading{padding:19px 36px 20px !important;margin:-36px -36px 28px}}@media (min-width: 48em){.large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}.x-large .duet-card-heading{margin:-20px -20px 20px}@media (min-width: 36em){.x-large .duet-card-heading{padding:26px 48px 27px !important;margin:-48px -48px 36px}}@media (min-width: 48em){.x-large .duet-card-heading{padding:39px 72px 40px !important;margin:-72px -72px 48px}}.none .duet-card-heading{padding:0;margin:0}.duet-card-footer{padding:20px;margin:20px -20px -20px;font-size:0.875rem;line-height:1.25;background:rgb(245, 248, 250);border-bottom-right-radius:4px;border-bottom-left-radius:4px}.duet-theme-turva .duet-card-footer{background:rgb(245, 247, 250)}@media (min-width: 36em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 36em){.xx-small .duet-card-footer{padding:10px 20px 11px !important;padding-left:12px !important;margin:12px -12px -12px}}@media (min-width: 36em){.x-small .duet-card-footer{padding:15px 28px 16px !important;padding-left:20px !important;margin:20px -20px -20px}}@media (min-width: 36em){.medium .duet-card-footer{padding:15px 28px 16px !important;margin:20px -28px -28px}}@media (min-width: 48em){.medium .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 36em){.large .duet-card-footer{padding:19px 36px 20px !important;margin:28px -36px -36px}}@media (min-width: 48em){.large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 36em){.x-large .duet-card-footer{padding:26px 48px 27px !important;margin:36px -48px -48px}}@media (min-width: 48em){.x-large .duet-card-footer{padding:39px 72px 40px !important;margin:48px -72px -72px}}.none .duet-card-footer{padding:0;margin:0}.duet-card-content{flex:1 1 auto;width:100%}.duet-card-collapsed .duet-card-content{display:none}.duet-card-caret{position:relative;top:6px;align-self:flex-start;transition:300ms ease}[aria-expanded=false] .duet-card-caret{transform:rotate(-180deg)}.duet-card-image-mask{position:relative;width:calc(100% + 40px);margin:-20px 0 20px -20px;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px}@media (min-width: 36em){.small .duet-card-image-mask{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 36em){.medium .duet-card-image-mask{width:calc(100% + 56px);margin:-28px 0 28px -28px}}@media (min-width: 48em){.medium .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 28px -36px}}@media (min-width: 36em){.large .duet-card-image-mask{width:calc(100% + 72px);margin:-36px 0 36px -36px}}@media (min-width: 48em){.large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 36em){.x-large .duet-card-image-mask{width:calc(100% + 96px);margin:-48px 0 36px -48px}}@media (min-width: 48em){.x-large .duet-card-image-mask{width:calc(100% + 144px);margin:-72px 0 36px -72px}}.none .duet-card-image-mask{width:100%;padding:0;margin:0}.duet-card-image{display:block;width:102%;min-width:1px;max-width:102%;height:auto;min-height:1px;margin-left:-1%;transition:transform 300ms ease;transform:scale(1.0001)}a.duet-card{transition:box-shadow 300ms ease, background-position 300ms ease}a.duet-card:hover{box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1)}a.duet-card:hover .duet-card-image{transform:scale(1.024)}.duet-theme-turva a.duet-card:hover{box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15)}a.duet-card:active{transition:none;transform:translateY(1px)}";
-const DuetCardStyle0 = duetCardCss;
-
-const DuetCard$1 = /*@__PURE__*/ proxyCustomElement(class DuetCard extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetToggle = createEvent(this, "duetToggle", 7);
-        this.cardId = createID("DuetCard");
-        /**
-         * Local methods.
-         */
-        this.togglePanel = (e) => {
-            e.preventDefault();
-            this.open = !this.open;
-            this.duetToggle.emit({
-                component: "duet-card",
-                originalEvent: e,
-            });
-        };
-        this.handleKeyDown = (e) => {
-            if (isKeyboardClick(e)) {
-                this.togglePanel(e);
-            }
-        };
-        this.accessibleLabel = undefined;
-        this.heading = "";
-        this.secondaryHeading = "";
-        this.variation = "default";
-        this.collapsible = false;
-        this.open = true;
-        this.headingLevel = "h2";
-        this.headingBackground = undefined;
-        this.icon = undefined;
-        this.image = undefined;
-        this.background = "gray-lightest";
-        this.padding = "small";
-        this.margin = "auto";
-        this.theme = "";
-        this.url = undefined;
-        this.shadowBreakpoint = undefined;
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.hasHeadingSlot = !!this.element.querySelector(":scope > [slot='heading']");
-        this.hasFooter = !!this.element.querySelector("[slot='footer']");
-    }
-    connectedCallback() {
-        subscribeTabbingChange(this);
-    }
-    disconnectedCallback() {
-        unsubscribeTabbingChange(this);
-    }
-    renderHeading() {
-        const safeHeadingLevel = sanitizeString(this.headingLevel);
-        const HeadingTag = [...duetHeadingLevels, duetBlock].some(tag => tag === safeHeadingLevel) ? safeHeadingLevel : "h2";
-        const headingStyles = {
-            backgroundColor: getColorByName(this.headingBackground),
-        };
-        const headingContent = (h(Fragment, null, h("div", { class: "duet-card-heading-grid" }, this.icon && (h(Fragment, null, h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: "currentColor" }), h("duet-spacer", { direction: "horizontal", size: "small" }))), h("div", { class: "duet-card-heading-text" }, this.heading ? this.heading : h("slot", { name: "heading" })), this.secondaryHeading && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--inline" }, this.secondaryHeading))), this.collapsible && (h(Fragment, null, h("duet-spacer", { direction: "horizontal", size: "small" }), h("duet-icon", { class: "duet-card-caret", icon: actionArrowUp.svg, size: "small", margin: "none", color: "currentColor" })))), this.secondaryHeading && (h("div", { class: "duet-card-secondary-heading duet-card-secondary-heading--new-line" }, this.secondaryHeading)), h("slot", { name: "below-heading" })));
-        if (this.collapsible) {
-            return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading duet-card-heading--collapsible", onClick: this.togglePanel, onKeyDown: this.handleKeyDown }, h("button", { "aria-controls": this.cardId, "aria-expanded": this.open ? "true" : "false" }, headingContent)));
-        }
-        else {
-            return (h(HeadingTag, { style: headingStyles, class: "duet-card-heading" }, headingContent));
-        }
-    }
-    /**
-     * Sets focus on underlying a element.
-     * Available only when url attribute is used.
-     * Use this method instead of the native `focus()`.
-     */
-    async setFocus(options) {
-        if (this.nativeCard) {
-            this.nativeCard.focus(options);
-        }
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const TagName = this.url ? "a" : "div";
-        const styles = {
-            backgroundColor: getColorByName(this.background),
-        };
-        return (h(Host, { key: 'e2a8edb2493ebbebc92b63967e157beddacdbd4a', class: {
-                "duet-m-0": this.margin === "none",
-                "duet-card-info": this.variation === "info",
-            } }, h(TagName, { key: 'dc8a552ac6e2f01149a0c2c114f36e2e66a3df2e', href: this.url, style: styles, ref: card => (this.nativeCard = card), "aria-label": this.accessibleLabel, class: {
-                "duet-card": true,
-                [this.padding]: true,
-                [this.variation]: true,
-                [`shadow-${this.shadowBreakpoint}`]: !!this.shadowBreakpoint,
-                "duet-p-0": this.padding === "none",
-                "duet-theme-turva": this.theme === "turva",
-                "duet-card-has-bg": this.background !== "gray-lightest",
-                "duet-card-has-icon": !!this.icon,
-                "duet-card-collapsed": this.collapsible && !this.open,
-            } }, this.image && (h("div", { key: 'd7ad8920cacfa8bcd8fa5c1fc306ea11c69f2c42', class: "duet-card-image-mask" }, h("img", { key: '83a4bf89bf9601a7d8924ab6a94d3bf37001bcf5', src: this.image, class: "duet-card-image", loading: "lazy", alt: "", "aria-hidden": "true" }))), (this.heading || this.hasHeadingSlot) && this.renderHeading(), h("div", { key: '1b43496f9e042da0c35ad3c090553acb0ac661ac', class: "duet-card-content", id: this.cardId }, h("slot", { key: '48e8abbabd5cd625b3faecd232e4a80cd0b58d44' }), this.hasFooter && (h("div", { key: '8fd234bb6cdfa1bc53f487b9051944e5c3c43439', class: "duet-card-footer" }, h("slot", { key: '664c4d55d042166647682eb00eb61e2d8f3fbd6c', name: "footer" })))))));
-    }
-    get element() { return this; }
-    static get style() { return DuetCardStyle0; }
-}, [1, "duet-card", {
-        "accessibleLabel": [1, "accessible-label"],
-        "heading": [1],
-        "secondaryHeading": [1, "secondary-heading"],
-        "variation": [1],
-        "collapsible": [4],
-        "open": [1540],
-        "headingLevel": [1, "heading-level"],
-        "headingBackground": [1, "heading-background"],
-        "icon": [1],
-        "image": [1],
-        "background": [1],
-        "padding": [1],
-        "margin": [1],
-        "theme": [1025],
-        "url": [1],
-        "shadowBreakpoint": [1, "shadow-breakpoint"],
-        "setFocus": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-card", "duet-icon", "duet-spacer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-card":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetCard$1);
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-spacer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetCard = DuetCard$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetCard, defineCustomElement };

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/dist-custom-elements/duet-choice-group.d.ts

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

package/lib/dist-custom-elements/duet-choice-group.js

@@ -1,228 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, h, d as Host } from './p-d77db171.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { c as checkNamedSlotElement } from './p-ad615991.js';
-import { d as defineCustomElement$8 } from './p-d2a5148f.js';
-import { d as defineCustomElement$7 } from './p-9fa4eb51.js';
-import { d as defineCustomElement$6 } from './p-4da43fbc.js';
-import { d as defineCustomElement$5 } from './p-fe9e47d9.js';
-import { d as defineCustomElement$4 } from './p-36ab2d57.js';
-import { d as defineCustomElement$3 } from './p-89b10856.js';
-import { d as defineCustomElement$2 } from './p-02f97b91.js';
-
-const duetChoiceGroupCss = "*,*::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%}:host(.horizontal) .duet-choice-group{display:block;margin-bottom:-12px}:host(.horizontal) .duet-choice-group.duet-no-stacking{display:flex}@media (min-width: 48em){:host(.horizontal) .duet-choice-group{margin-bottom:0}}@media (max-width: 35.9375em){:host(.horizontal) .duet-choice-group{display:flex}}:host(.horizontal.duet-choice-group-breakpoint-x-small) .duet-choice-group:not(.duet-no-stacking){display:flex}@media (max-width: 22.5em){:host(.horizontal.duet-choice-group-breakpoint-x-small) .duet-choice-group:not(.duet-no-stacking){display:block}}:host(.horizontal.duet-choice-group-breakpoint-small) .duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 36em){:host(.horizontal.duet-choice-group-breakpoint-small) .duet-choice-group:not(.duet-no-stacking){display:flex}}:host(.horizontal.duet-choice-group-breakpoint-medium) .duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 48em){:host(.horizontal.duet-choice-group-breakpoint-medium) .duet-choice-group:not(.duet-no-stacking){display:flex}}:host(.horizontal.duet-choice-group-breakpoint-large) .duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 62em){:host(.horizontal.duet-choice-group-breakpoint-large) .duet-choice-group:not(.duet-no-stacking){display:flex}}:host(.horizontal.duet-choice-group-breakpoint-x-large) .duet-choice-group:not(.duet-no-stacking){display:block}@media (min-width: 64.0625em){:host(.horizontal.duet-choice-group-breakpoint-x-large) .duet-choice-group:not(.duet-no-stacking){display:flex}}.duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
-const DuetChoiceGroupStyle0 = duetChoiceGroupCss;
-
-const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoiceGroup extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.choiceGroupName = "duet-choice-group";
-        this.choices = new Set();
-        /**
-         * Component event handling.
-         */
-        this.onSelect = (ev) => {
-            if (ev.detail.component !== "duet-choice") {
-                return;
-            }
-            const selectedChoice = ev.target;
-            if (selectedChoice && this.choices.has(selectedChoice)) {
-                this.value = selectedChoice.value;
-            }
-        };
-        this.onChoiceReady = (ev) => {
-            const choice = ev.target;
-            if (choice.closest("duet-choice-group") === this.element && !this.choices.has(choice)) {
-                this.choices.add(choice);
-                this.updateChoices();
-            }
-        };
-        this.onChoiceRemove = (ev) => {
-            const choice = ev.target;
-            this.choices.delete(choice);
-            this.updateChoices();
-        };
-        this.direction = "vertical";
-        this.margin = "auto";
-        this.theme = "";
-        this.error = "";
-        this.name = undefined;
-        this.label = "Label";
-        this.labelHidden = false;
-        this.caption = undefined;
-        this.tooltip = undefined;
-        this.tooltipDirection = "auto";
-        this.responsive = false;
-        this.breakpoint = "small";
-        this.value = undefined;
-        this.disabled = undefined;
-        this.required = false;
-        this.accessibleLiveError = "polite";
-    }
-    /**
-     * Component lifecycle events.
-     */
-    async connectedCallback() {
-        this.setInitialValue();
-        this.updateChoices();
-    }
-    disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
-        }
-    }
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        checkNamedSlotElement(this.element, "tooltip", "duet-tooltip", 1, true);
-    }
-    setInitialValue() {
-        if (typeof this.initialValue === "undefined") {
-            this.initialValue = this.value;
-        }
-    }
-    /**
-     * @internal
-     * Get initial value
-     */
-    async getInitialValue() {
-        return this.initialValue;
-    }
-    /**
-     * Local methods
-     */
-    async updateChoices() {
-        var _a;
-        const value = (_a = this.value) !== null && _a !== void 0 ? _a : this.initialValue;
-        let hasChecked = false;
-        // Walk the DOM in reverse order, since the last selected one wins
-        for (const choice of Array.from(this.choices)) {
-            choice.name = this.name;
-            choice.required = this.required;
-            choice.groupDisabled = this.disabled;
-            choice.groupDirection = this.direction;
-            choice.groupResponsive = this.responsive;
-            if (!hasChecked && choice.value === value) {
-                // Correct value for this choice, but this choice isn't checked yet
-                // and we haven't found a checked yet
-                hasChecked = true;
-                choice.checked = true;
-                if (typeof this.value === "undefined") {
-                    this.value = value;
-                }
-            }
-            else {
-                // This choice doesn't have the correct value or the choice group has been already checked
-                choice.checked = false;
-            }
-        }
-        // Reset value if
-        if (!hasChecked) {
-            this.value = undefined;
-        }
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        return (h(Host, { key: '1a1882dc018f8084af4b98bf1c1dd42eb6b4196e', onDuetChange: this.onSelect, onDuetChoiceReady: this.onChoiceReady, onDuetChoiceRemove: this.onChoiceRemove, class: {
-                horizontal: this.direction === "horizontal",
-                "duet-choice-group-breakpoint-x-small": this.responsive && this.breakpoint === "x-small",
-                "duet-choice-group-breakpoint-small": this.responsive && this.breakpoint === "small",
-                "duet-choice-group-breakpoint-medium": this.responsive && this.breakpoint === "medium",
-                "duet-choice-group-breakpoint-large": this.responsive && this.breakpoint === "large",
-                "duet-choice-group-breakpoint-x-large": this.responsive && this.breakpoint === "x-large",
-            } }, h("duet-fieldset", { key: '4e16e0509b823c92997d9f22bf0b760c5bab9584', label: this.label, labelHidden: this.labelHidden, compactLabel: true, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme, "accessible-live-error": this.accessibleLiveError }, this.tooltip && (h("duet-tooltip", { key: 'ccca359a5153567adc4d64b1006700cd3c229230', slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("slot", { key: 'b85ef08b02c0c4485c9051f84698b74d105ab2ed', name: "tooltip" }), h("div", { key: '76c59c3fdedd2bcbf0be91e55bffc45b1e18ae92', class: { [this.choiceGroupName]: true, "duet-no-stacking": !this.responsive } }, h("slot", { key: 'e0f5a4ae522a9d2b8eec286a9e40a4c5db764310' })))));
-    }
-    get element() { return this; }
-    static get watchers() { return {
-        "value": ["setInitialValue", "updateChoices"],
-        "disabled": ["updateChoices"],
-        "name": ["updateChoices"],
-        "direction": ["updateChoices"],
-        "responsive": ["updateChoices"]
-    }; }
-    static get style() { return DuetChoiceGroupStyle0; }
-}, [1, "duet-choice-group", {
-        "direction": [1],
-        "margin": [1],
-        "theme": [1025],
-        "error": [1],
-        "name": [1],
-        "label": [1],
-        "labelHidden": [4, "label-hidden"],
-        "caption": [1],
-        "tooltip": [1],
-        "tooltipDirection": [1, "tooltip-direction"],
-        "responsive": [4],
-        "breakpoint": [1],
-        "value": [1537],
-        "disabled": [4],
-        "required": [4],
-        "accessibleLiveError": [1, "accessible-live-error"],
-        "getInitialValue": [64]
-    }, undefined, {
-        "value": ["setInitialValue", "updateChoices"],
-        "disabled": ["updateChoices"],
-        "name": ["updateChoices"],
-        "direction": ["updateChoices"],
-        "responsive": ["updateChoices"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-choice-group", "duet-caption", "duet-fieldset", "duet-icon", "duet-tooltip", "duet-tooltip-button", "duet-tooltip-popup", "duet-visually-hidden"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-choice-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetChoiceGroup$1);
-            }
-            break;
-        case "duet-caption":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$8();
-            }
-            break;
-        case "duet-fieldset":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$6();
-            }
-            break;
-        case "duet-tooltip":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "duet-tooltip-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-tooltip-popup":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-visually-hidden":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetChoiceGroup = DuetChoiceGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetChoiceGroup, defineCustomElement };

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

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