@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -1,454 +0,0 @@
-/*!
- * Built with Duet Design System
- */
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-548610a6.js';
-import { i as inheritGlobalTheme } from './p-aaa7a7bd.js';
-import { D as DuetStringsExternalDefaults } from './p-9df4cfa4.js';
-import { c as createID } from './p-5e59e970.js';
-import { i as isKeyboardClick, a as isQuestionKey, s as subscribeTabbingChange, u as unsubscribeTabbingChange, b as isEscapeKey } from './p-8db11326.js';
-import { g as getLocaleString, a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './p-35375593.js';
-import { h as hasSlot, g as getElementsFromNamedSlot } from './p-ad615991.js';
-import { d as defineCustomElement$4 } from './p-ed6a907e.js';
-import { d as defineCustomElement$3 } from './p-77667998.js';
-import { d as defineCustomElement$2 } from './p-0871ccd4.js';
-
-var messagingInfo={"title":"messaging-info","tags":"messaging info information circle","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M13.5 17.25A2.252 2.252 0 0 1 11.25 15v-3.75h-.75a.75.75 0 0 1 0-1.5h.75c.827 0 1.5.673 1.5 1.5V15c0 .414.336.75.75.75h.75a.75.75 0 0 1 0 1.5z\"/><circle cx=\"11.625\" cy=\"7.125\" r=\"1.125\"/><path d=\"M12 24C5.383 24 0 18.617 0 12S5.383 0 12 0s12 5.383 12 12-5.383 12-12 12zm0-22.5C6.21 1.5 1.5 6.21 1.5 12S6.21 22.5 12 22.5 22.5 17.79 22.5 12 17.79 1.5 12 1.5z\"/></svg>"};
-
-const duetChoiceCss = "*,*::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-right:16px !important;margin-bottom:12px !important;display:inline-flex;flex-direction:column;width:auto;max-width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host{width:100%}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}:host(.duet-fixed){width:auto !important}:host(.vertical){margin-right:0 !important}@media (min-width: 48em){:host(.horizontal){margin-bottom:0 !important}}@media (min-width: 48em){:host(.horizontal-responsive){margin-bottom:0 !important;margin-right:16px !important}:host(.horizontal-responsive):last-child,:host(.horizontal-responsive):last-of-type{margin-right:0 !important}}:host(:last-child:not(:only-child)){margin-right:0 !important}.duet-choice-card{position:relative;display:block;width:100%;min-width:8rem;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;-webkit-hyphens:auto;hyphens:auto;line-height:1.1;color:rgb(8, 42, 77) !important;text-align:left;background:rgb(255, 255, 255);border-width:1px;border-radius:8px}.duet-choice-card.duet-p-0{padding:0 !important}.duet-choice-card.duet-m-0{margin:0 !important}.duet-theme-turva .duet-choice-card{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) !important}.duet-choice-card-flextainer{display:flex}.duet-choice-label{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:flex;gap:12px;align-items:center;justify-content:flex-start;width:100%;height:100%;min-height:3.875rem;padding:calc(1rem + 1px);font-size:1rem;font-weight:600;text-decoration:none;word-break:break-word;cursor:pointer;border:1px solid rgb(212, 223, 229);border-radius:8px;transition:background-color 150ms ease, border-color 300ms ease}.duet-choice-label.has-before-text .duet-choice-card-icon,.duet-choice-label.has-before-text .duet-choice-card-text{align-self:flex-start;margin-top:0.25rem}.duet-choice-label>div:last-child{flex:1;align-self:flex-start;justify-self:flex-end;margin-top:0.25rem}.has-info .duet-choice-label{border-top-right-radius:0;border-bottom-right-radius:0}.info .duet-choice-label{border-bottom-right-radius:0;border-bottom-left-radius:0}.duet-theme-turva .duet-choice-label{border-color:rgb(222, 224, 228)}.duet-theme-turva .info .duet-choice-label{border-color:rgb(222, 224, 228)}.duet-choice-label:active{opacity:0.75;transition:none !important}.checked>.duet-choice-label{padding:1rem;background:rgb(240, 247, 250);border-color:rgb(0, 119, 179) !important;border-width:2px}.checked>.duet-choice-label .duet-checkmark-container{border-color:rgb(0, 119, 179)}.duet-theme-turva .checked>.duet-choice-label{background:rgb(245, 247, 250);border-color:rgb(23, 28, 58) !important}.duet-theme-turva .checked>.duet-choice-label .duet-checkmark-container{border-color:rgb(198, 12, 48)}.checked.collapsible>.duet-choice-label,.collapsible-force-expanded.collapsible>.duet-choice-label{padding-bottom:calc(1rem + 2px) !important;border-bottom:0 !important;border-bottom-right-radius:0;border-bottom-left-radius:0}:host(:not(.no-hover):not(.disabled):hover)>.duet-choice-card-flextainer .duet-choice-label:not(.checked){border-color:rgb(0, 119, 179);border-width:2px}:host(:not(.no-hover):not(.disabled):hover)>.duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container{border-color:rgb(127, 150, 165)}.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover)>.duet-choice-card-flextainer .duet-choice-label:not(.checked){border-color:rgb(23, 28, 58)}.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover)>.duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container{border-color:rgb(143, 147, 158)}.duet-theme-turva .info :host(:not(.no-hover):not(.disabled):hover)>.duet-choice-card-flextainer .duet-choice-label:not(.checked){border-color:rgb(143, 147, 158)}:host(:not(.no-hover):not(.disabled):not([checked]):hover)>.duet-choice-card-flextainer .duet-choice-label:not(.checked){padding:1rem}input:focus{outline:0}:host(.user-is-tabbing) .checked.focus.duet-choice-label{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3)}:host(.user-is-tabbing) :not(.checked).focus.duet-choice-label{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-theme-turva .checked.focus.duet-choice-label{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2)}:host(.user-is-tabbing) .duet-theme-turva :not(.checked).focus.duet-choice-label{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.disabled.duet-choice-label{color:rgb(98, 121, 138) !important;cursor:default !important;background:rgb(245, 248, 250) !important;border-color:rgb(212, 223, 229) !important}.disabled.duet-choice-label .duet-choice-card-icon{color:rgb(98, 121, 138)}.duet-theme-turva .disabled.duet-choice-label .duet-choice-card-icon{color:rgb(143, 147, 158)}.disabled.duet-choice-label .duet-checkmark{border-color:rgb(98, 121, 138) !important}.disabled.duet-choice-label:hover,.disabled.duet-choice-label:active,.disabled.duet-choice-label:focus{box-shadow:none !important;opacity:1 !important;transition:none !important}.duet-theme-turva .disabled.duet-choice-label{color:rgb(143, 147, 158) !important;background:rgb(245, 247, 250) !important;border-color:rgb(222, 224, 228) !important}.duet-theme-turva .disabled.duet-choice-label .duet-checkmark{border-color:rgb(143, 147, 158) !important}.checked>.disabled.duet-choice-label{border-color:rgb(127, 150, 165) !important}.duet-theme-turva .checked>.disabled.duet-choice-label{border-color:rgb(143, 147, 158) !important}.duet-checkmark-container{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid rgb(127, 150, 165);border-radius:4px;transition:border 300ms ease}.duet-theme-turva .duet-checkmark-container{border-color:rgb(143, 147, 158)}.checked>.duet-choice-label .duet-checkmark-container{background:rgb(0, 119, 179);border-color:rgb(0, 119, 179);transition:none}.duet-theme-turva .checked>.duet-choice-label .duet-checkmark-container{background:rgb(23, 28, 58);border-color:rgb(23, 28, 58) !important}.duet-checkmark-container.duet-checkmark-radio{border-radius:50%}label.disabled .duet-checkmark-container{background:rgb(181, 198, 208) !important;border-color:rgb(181, 198, 208) !important}.duet-theme-turva label.disabled .duet-checkmark-container{border-color:rgb(199, 202, 207) !important}.checked>label.disabled .duet-checkmark-container{background:rgb(181, 198, 208) !important}.duet-theme-turva .checked>label.disabled .duet-checkmark-container{background:rgb(199, 202, 207) !important;border-color:rgb(199, 202, 207) !important}.duet-checkmark{position:absolute;top:10px;left:3px;width:5.3333333333px;height:11.8518518519px;border-top:2px solid rgb(255, 255, 255);border-right:2px solid rgb(255, 255, 255);opacity:1;transform:scaleX(-1) rotate(135deg) translateZ(0);transform-origin:left top;animation-name:duet-checkmark;animation-duration:600ms;animation-timing-function:ease-out;animation-fill-mode:forwards}@keyframes duet-checkmark{0%{width:0;height:0;opacity:1}20%{width:5.3333333333px;height:0;opacity:1}40%,100%{width:5.3333333333px;height:11.8518518519px;opacity:1}}.duet-choice-card-icon{position:relative;color:rgb(0, 119, 179)}.duet-theme-turva .duet-choice-card-icon{color:rgb(164, 4, 40)}.duet-choice-card-icon duet-icon{display:block}.duet-choice-section-hidden{display:none}.duet-choice-card-info.duet-choice-card-collapsed,.duet-choice-card-collapsed.duet-choice-card-collapsible{position:relative;width:auto;padding:0 !important;background:unset !important;border:0;border-radius:0}.duet-choice-card-info,.duet-choice-card-collapsible{padding:20px !important;position:relative;width:100%;font-weight:400;color:rgb(8, 42, 77);border:1px solid rgb(212, 223, 229);border-top:0;border-radius:0 0 8px 8px;transition:border-color 300ms ease}@media (min-width: 36em){.duet-choice-card-info,.duet-choice-card-collapsible{padding:28px !important}}.duet-theme-turva .duet-choice-card-info,.duet-theme-turva .duet-choice-card-collapsible{color:rgb(23, 28, 58);border-color:rgb(23, 28, 58)}.checked>.duet-choice-card-info,.checked>.duet-choice-card-collapsible{display:block}.duet-choice-card-info-expanded,.duet-choice-card-collapsible-expanded{display:block}.duet-choice-card-collapsible{background:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-top:0}.duet-choice-card-collapsible.duet-theme-turva{background:rgb(255, 255, 255);border-color:rgb(222, 224, 228)}.duet-choice-card-collapsible.checked{padding:19px !important;padding-top:20px !important;border-color:rgb(0, 119, 179);border-width:2px}@media (min-width: 36em){.duet-choice-card-collapsible.checked{padding:27px !important;padding-top:28px !important}}.duet-choice-card-collapsible.checked.duet-theme-turva{border-color:rgb(23, 28, 58)}.duet-choice-card-collapsible-disabled{background:rgb(245, 248, 250);border-color:rgb(212, 223, 229)}.duet-choice-card-collapsible-disabled.checked{border-color:rgb(212, 223, 229)}.duet-choice-card-collapsible-disabled.duet-theme-turva{background:rgb(245, 247, 250);border-color:rgb(222, 224, 228)}.duet-choice-card-collapsible-disabled.duet-theme-turva.checked{border-color:rgb(222, 224, 228)}.duet-choice-card-info{font-size:0.875rem;line-height:1.5;background:rgb(245, 248, 250);transition:150ms ease-out}.duet-choice-card-info.duet-theme-turva{background:rgb(245, 247, 250);border-color:rgb(222, 224, 228)}.duet-choice-card-info.duet-choice-card-collapsed .duet-choice-info-container ::slotted(*){display:none}:host(.user-is-tabbing) .duet-choice-info-container:focus{display:block;outline:none;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.disabled) .duet-choice-card-collapsible{border-color:rgb(127, 150, 165)}:host(.disabled) .duet-choice-card-collapsible.duet-theme-turva{border-color:rgb(143, 147, 158)}:host(:not(.no-hover):not(.disabled):hover)>.duet-choice-card-collapsible:not(.checked){border-color:rgb(0, 119, 179);border-width:2px}.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover)>.duet-choice-card-collapsible:not(.checked){border-color:rgb(143, 147, 158)}:host([collapsible-force-expanded]:not(.no-hover):not(.disabled):hover)>.duet-choice-card-collapsible:not(.checked){padding:19px !important;padding-top:20px !important}@media (min-width: 36em){:host([collapsible-force-expanded]:not(.no-hover):not(.disabled):hover)>.duet-choice-card-collapsible:not(.checked){padding:27px !important;padding-top:28px !important}}.duet-choice-info-toggle{display:flex;flex-shrink:0;align-items:flex-start;justify-content:center;width:57.6px;padding-top:1.25rem;cursor:pointer;background:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-left:0 none;border-top-right-radius:8px;border-bottom-right-radius:8px;-webkit-appearance:none;appearance:none}.duet-choice-info-toggle[aria-expanded=true]{background:rgb(245, 248, 250);border-bottom-color:transparent;border-bottom-right-radius:0}.duet-theme-turva .duet-choice-info-toggle[aria-expanded=true]{background:rgb(245, 247, 250)}.duet-choice-info-toggle[disabled]{pointer-events:none;background:rgb(245, 248, 250) !important;border-color:rgb(212, 223, 229) !important}.duet-choice-info-toggle[disabled] .duet-choice-info-icon{color:rgb(127, 150, 165) !important}.duet-choice-info-toggle[disabled].duet-theme-turva{background:rgb(245, 247, 250) !important;border-color:rgb(222, 224, 228) !important}.duet-choice-info-toggle[disabled].duet-theme-turva .duet-choice-info-icon{color:rgb(143, 147, 158) !important}.duet-choice-info-toggle:focus{outline:none}:host(.user-is-tabbing) .duet-choice-info-toggle: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-choice-info-toggle:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.checked+.duet-choice-info-toggle{border-left-color:rgb(0, 119, 179) !important}.duet-choice-info-toggle duet-icon{display:block}.duet-choice-info-toggle .duet-choice-info-icon{color:rgb(0, 119, 179)}.duet-theme-turva .duet-choice-info-toggle .duet-choice-info-icon{color:rgb(198, 12, 48)}:host(:not(.no-hover):not(.disabled):hover)>.duet-choice-card-flextainer .duet-choice-label .duet-choice-info-toggle{border-left-color:rgb(127, 150, 165)}.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover)>.duet-choice-card-flextainer .duet-choice-label .duet-choice-info-toggle{border-left-color:rgb(143, 147, 158)}.duet-choice-input,*::slotted([slot=choiceradioinput]){position:absolute !important;width:100%;height:100%;opacity:0}";
-const DuetChoiceStyle0 = duetChoiceCss;
-
-const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class DuetChoice extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.duetChoiceReady = createEvent(this, "duetChoiceReady", 7);
-        this.duetChoiceRemove = createEvent(this, "duetChoiceRemove", 7);
-        this.duetChange = createEvent(this, "duetChange", 7);
-        this.duetFocus = createEvent(this, "duetFocus", 7);
-        this.duetBlur = createEvent(this, "duetBlur", 7);
-        this.hasHeader = false;
-        this.choiceId = createID("DuetChoice");
-        this.expandId = createID("DuetChoiceExpand");
-        this.headerId = createID("DuetChoiceHeader");
-        this.infoButtonId = createID("DuetChoiceInfoButton");
-        this.radioInputListenersRemove = radioInput => {
-            radioInput.removeEventListener("change", this.onChange);
-            radioInput.removeEventListener("keydown", this.handleKeyDown);
-            radioInput.removeEventListener("focus", this.onFocus);
-            radioInput.removeEventListener("blur", this.onBlur);
-        };
-        this.radioInputListenersAdd = radioInput => {
-            radioInput.addEventListener("change", this.onChange);
-            radioInput.addEventListener("keydown", this.handleKeyDown);
-            radioInput.addEventListener("focus", this.onFocus);
-            radioInput.addEventListener("blur", this.onBlur);
-        };
-        this.radioInputSetUp = () => {
-            const slotInput = this.element.querySelector("input[slot=choiceradioinput]");
-            const radioInput = slotInput || document.createElement("input");
-            radioInput.slot = "choiceradioinput";
-            radioInput.disabled = this.getDisabled();
-            radioInput.id = this.identifier || this.choiceId;
-            radioInput.type = "radio";
-            radioInput.name = this.name;
-            radioInput.value = this.value;
-            radioInput.checked = this.checked;
-            radioInput.required = this.required;
-            radioInput.ariaDescription = this.accessibleDescription;
-            if (this.accessibleControls) {
-                radioInput.setAttribute("aria-controls", this.accessibleControls);
-            }
-            if (this.accessibleActiveDescendant) {
-                radioInput.setAttribute("aria-activedescendant", this.accessibleActiveDescendant);
-            }
-            if (this.accessibleLabelledBy) {
-                radioInput.setAttribute("aria-labelledby", this.accessibleLabelledBy);
-            }
-            if (this.accessibleDetails) {
-                radioInput.setAttribute("aria-details", this.accessibleDetails);
-            }
-            if (this.accessibleOwns) {
-                radioInput.setAttribute("aria-owns", this.accessibleOwns);
-            }
-            if (this.getAriaDescribedby()) {
-                radioInput.setAttribute("aria-describedby", this.getAriaDescribedby());
-            }
-            radioInput.ariaLabel = this.getLabel();
-            if (slotInput) {
-                this.radioInputListenersRemove(radioInput);
-            }
-            else {
-                this.element.appendChild(radioInput);
-            }
-            this.radioInputListenersAdd(radioInput);
-            this.focusableElement = radioInput;
-        };
-        /**
-         * Component event handling.
-         */
-        this.onMouseEnter = () => {
-            this.isHovering = true;
-        };
-        this.onMouseLeave = () => {
-            this.isHovering = false;
-        };
-        this.onClick = (ev) => {
-            this.toggleChecked(ev);
-        };
-        this.handleKeyDown = (ev) => {
-            if (isKeyboardClick(ev)) {
-                this.toggleChecked(ev);
-            }
-            if (isQuestionKey(ev) && this.hasInfo) {
-                this.toggleInfo();
-            }
-        };
-        this.onChange = () => {
-            const input = this.focusableElement;
-            const inputChecked = input.checked;
-            this.checked = inputChecked;
-            this.duetChange.emit({
-                checked: this.checked,
-                value: this.value,
-                component: "duet-choice",
-            });
-        };
-        this.onBlur = (ev) => {
-            this.focus = false;
-            this.duetBlur.emit({
-                originalEvent: ev,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-choice",
-            });
-        };
-        this.onFocus = (ev) => {
-            this.focus = true;
-            this.duetFocus.emit({
-                originalEvent: ev,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-choice",
-            });
-        };
-        /**
-         * Local methods
-         */
-        this.toggleChecked = ev => {
-            ev.preventDefault();
-            ev.stopPropagation();
-            if (this.getDisabled()) {
-                return;
-            }
-            // if it's a radio button, and it's already checked
-            // we shouldn't fire an event, so exit early
-            if (this.type === "radio" && this.checked) {
-                return;
-            }
-            this.checked = !this.checked;
-            this.duetChange.emit({
-                originalEvent: ev,
-                checked: this.checked,
-                value: this.value,
-                component: "duet-choice",
-            });
-        };
-        this.toggleInfo = () => {
-            this.isInfoOpen = !this.isInfoOpen;
-            if (this.isInfoOpen) {
-                setTimeout(() => {
-                    var _a;
-                    (_a = this.infoContainer) === null || _a === void 0 ? void 0 : _a.focus();
-                }, 150);
-            }
-        };
-        this.focus = false;
-        this.isHovering = false;
-        this.isInfoOpen = false;
-        this.theme = "";
-        this.label = "label";
-        this.accessibleLabelInfoButtonDefaults = DuetStringsExternalDefaults;
-        this.accessibleLabelInfoButton = getLocaleString(this.accessibleLabelInfoButtonDefaults);
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.caption = "";
-        this.value = undefined;
-        this.type = "checkbox";
-        this.name = undefined;
-        this.checked = false;
-        this.collapsible = false;
-        this.collapsibleForceExpanded = false;
-        this.margin = "auto";
-        this.icon = "";
-        this.expand = false;
-        this.padding = "auto";
-        this.identifier = undefined;
-        this.groupDirection = undefined;
-        this.groupDisabled = undefined;
-        this.groupResponsive = undefined;
-        this.disabled = false;
-        this.required = false;
-        this.infoLabelDefaults = {
-            fi: "Lisätietoja vaihtoehdosta",
-            en: "More information about",
-            sv: "Mera information om",
-        };
-        this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
-        this.collapsibleNotificationDefaults = {
-            fi: "Tämä valinta sisältää lisätietoja, jotka avautuivat alle",
-            en: "This choice has additional information opened below",
-            sv: "Det här val har mer information som öppnades nedan",
-        };
-        this.collapsibleNotification = getLocaleString(this.collapsibleNotificationDefaults, getLanguage());
-    }
-    /**
-     * Component lifecycle events.
-     */
-    componentWillLoad() {
-        inheritGlobalTheme(this);
-        this.hasInfo = hasSlot(this.element, "info");
-        this.hasHeader = hasSlot(this.element, "header");
-        this.hasAdditional = hasSlot(this.element, "additional");
-        this.hasLabel = hasSlot(this.element, "label");
-        this.hasBeforeText = hasSlot(this.element, "before-text");
-        this.duetChoiceReady.emit();
-    }
-    connectedCallback() {
-        connectLanguageChangeObserver(this, [
-            { prop: "accessibleLabelInfoButton", defaults: "accessibleLabelInfoButtonDefaults" },
-            { prop: "infoLabel", defaults: "infoLabelDefaults" },
-            { prop: "collapsibleNotification", defaults: "collapsibleNotificationDefaults" },
-        ]);
-        subscribeTabbingChange(this);
-        this.duetChoiceReady.emit();
-    }
-    componentDidRender() {
-        if (this.type === "radio") {
-            this.radioInputSetUp();
-        }
-    }
-    disconnectedCallback() {
-        disconnectLanguageChangeObserver(this);
-        unsubscribeTabbingChange(this);
-        this.duetChoiceRemove.emit();
-    }
-    /**
-     * Sets focus on the specified `duet-choice`. Use this method instead of the global
-     * `input.focus()`.
-     */
-    async setFocus(options) {
-        this.focusableElement.focus(options);
-    }
-    /**
-     * This method toggles the info section.
-     */
-    async toggleInfoMethod() {
-        this.isInfoOpen = !this.isInfoOpen;
-    }
-    handleEscape(e) {
-        if (isEscapeKey(e)) {
-            if (this.isInfoOpen) {
-                this.isInfoOpen = false;
-                if (this.infoButtonEl) {
-                    this.infoButtonEl.focus();
-                }
-            }
-        }
-    }
-    /**
-     * Should the collapsible content be announced by screen readers
-     */
-    isCollapsibleAnnounceable() {
-        if (!this.collapsible || !this.getExpanded()) {
-            return false;
-        }
-        const children = Array.from(this.element.querySelectorAll(`#${this.choiceId}-collapsible-content > *`) || []);
-        const announceableElements = ["duet-paragraph", "duet-heading", "duet-fieldset"];
-        return children.every(child => announceableElements.includes(child.tagName.toLowerCase()));
-    }
-    getAriaDescribedby() {
-        if (this.accessibleDescribedBy) {
-            return this.accessibleDescribedBy;
-        }
-        if (this.collapsible || this.hasInfo) {
-            if (this.hasHeader) {
-                return this.headerId;
-            }
-            else if (this.isCollapsibleAnnounceable()) {
-                return this.expandId;
-            }
-            else {
-                return `${this.choiceId}-collapsible-notification`;
-            }
-        }
-        return null;
-    }
-    getDisabled() {
-        return this.disabled || this.groupDisabled;
-    }
-    getExpanded() {
-        return this.checked || this.collapsibleForceExpanded;
-    }
-    getClassNames() {
-        if (this.hasInfo && !this.collapsible) {
-            return {
-                checked: this.checked,
-                "duet-choice-card-info": true,
-                "duet-choice-card-info-expanded": this.isInfoOpen,
-                "duet-choice-card-collapsed": !this.isInfoOpen,
-                "duet-theme-turva": this.theme === "turva",
-            };
-        }
-        if (!this.hasInfo && this.collapsible) {
-            return {
-                checked: this.checked,
-                "duet-choice-card-collapsible": true,
-                "duet-choice-card-collapsible-expanded": this.getExpanded(),
-                "duet-choice-card-collapsed": !this.getExpanded(),
-                "duet-choice-card-collapsible-disabled": this.getDisabled(),
-                "duet-theme-turva": this.theme === "turva",
-            };
-        }
-        return {
-            checked: this.checked,
-            "duet-choice-default-slot": true,
-        };
-    }
-    getLabel() {
-        let slotLabel = "";
-        let slotBeforeText = "";
-        let slotAdditional = "";
-        if (this.hasLabel) {
-            const slotContent = getElementsFromNamedSlot(this.element, "label");
-            slotLabel = slotContent.length > 0 ? slotContent[0].textContent : "";
-        }
-        if (this.hasBeforeText) {
-            const slotContent = getElementsFromNamedSlot(this.element, "before-text");
-            slotBeforeText = slotContent.length > 0 ? slotContent[0].textContent : "";
-        }
-        if (this.hasAdditional) {
-            const slotContent = getElementsFromNamedSlot(this.element, "additional");
-            slotAdditional = slotContent.length > 0 ? slotContent[0].textContent : "";
-        }
-        return `${slotBeforeText} ${this.hasLabel ? slotLabel : this.label} ${this.caption} ${slotAdditional}`;
-    }
-    /**
-     * render() function
-     * Always the last one in the class.
-     */
-    render() {
-        const identifier = this.identifier || this.choiceId;
-        return (h(Host, { key: '95c3bf3494b8d33d7f30cd09b46a5542371c9252', class: {
-                horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
-                "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
-                "duet-m-0": this.margin === "none",
-                "duet-expand": this.expand,
-                "duet-theme-turva": this.theme === "turva",
-                "no-hover": this.isHovering,
-                disabled: this.getDisabled(),
-            } }, h("div", { key: '087bfe11a824d0dbe53285fddc1666b9b078fea7', class: {
-                "duet-choice-card-flextainer": true,
-                "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: 'd0c3f8b55c14582927183cc12046d1bcf005031b', class: {
-                "duet-choice-card": true,
-                "has-icon": !!this.icon,
-                "has-info": this.hasInfo,
-                checked: this.checked,
-                info: this.isInfoOpen,
-                collapsible: this.collapsible,
-                "collapsible-force-expanded": this.collapsibleForceExpanded,
-                "duet-p-0": this.padding === "none",
-            } }, this.type === "checkbox" && (h("input", { key: '2fcbc3765e11d789344ce8350afe6c0406d51a3e', class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.getDisabled(), required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "aria-label": this.getLabel(), "aria-controls": this.accessibleControls, "aria-activedescendant": this.accessibleActiveDescendant, "aria-labelledby": this.accessibleLabelledBy, "aria-details": this.accessibleDetails, "aria-description": this.accessibleDescription, "aria-owns": this.accessibleOwns, "aria-describedby": this.getAriaDescribedby(), onKeyDown: this.handleKeyDown, ref: input => (this.focusableElement = input) })), h("slot", { key: '055e6d1ffd084a07626bace527c86fa830239818', name: "choiceradioinput" }), h("label", { key: '99586309cadfcf173411bb0533e78185835f4554', class: {
-                "duet-choice-label": true,
-                "has-before-text": this.hasBeforeText,
-                checked: this.checked,
-                focus: this.focus,
-                disabled: this.getDisabled(),
-            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: 'c4cd8c27fe9d8b11e3db64e8964f8559dbd66130', name: "before-text" }), this.icon && (h("div", { key: '685779ca31a7d1f6827d0d7fe4bed7044aa0f2af', class: "duet-choice-card-icon" }, h("duet-icon", { key: '98804614219f404137fb630983a81bf08abc773a', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: '6e5b7a8b3e5dbfa5d3f0a77104f2f2b1d332f6cc', class: "duet-choice-card-text" }, h("div", { key: '23e244b266355d1ea70ad12e9847903c59bb34e6' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: 'ddefb454ac0a3505a520dbb9484cd60b1a26827c' }, h("duet-spacer", { key: 'ae3957e6c8147bc379db21059f8584e44a55fd14', size: "xx-small" }), h("duet-caption", { key: 'f0a653783164ebc5b6d2bdd2acc537a9afd0b515', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: '1665619173760a73a28ba685d950f737418d1ee5' }, h("duet-spacer", { key: '593fe55534da49906cc3a14ea4b13e8ff6903c0d', size: "xx-small" }), h("slot", { key: '8ea22bb8657c210bbddc57f03ce88fa5c23791e7', name: "additional" })))), h("div", { key: '4a5a62991e5e107bfe56e31e10509bb7bd5860ce' }, h("div", { key: 'ffd299c11348780fd2908d37cba9633a3946274a', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: 'b70b4052ee1b8479bbc98bcc4b55491b00fd1c94', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: '0f7091a28c9ee79e5de07e72bb96d652f7dfed7c', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
-                "duet-choice-info-toggle": true,
-                "duet-theme-turva": this.theme === "turva",
-            }, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, onClick: this.toggleInfo, disabled: this.getDisabled(), "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button", onKeyUp: e => this.handleEscape(e) }, h("div", { key: 'a6ce7e8b62192855cccf8989cf3f01abe95e32ef', class: "duet-choice-info-icon" }, h("duet-icon", { key: '62b112f3050dab7811bd7a0fb7354a88b60f702f', icon: messagingInfo.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: '4ffef77c7f061ecc78412b274b5974d37df32cd6', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
-                "duet-choice-section-visible": this.collapsible ? this.getExpanded() : this.isInfoOpen,
-                "duet-choice-section-hidden": this.collapsible ? !this.getExpanded() : !this.isInfoOpen,
-            } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", { ref: span => (this.infoContainer = span), tabindex: "0", class: "duet-choice-info-container", onKeyUp: e => this.handleEscape(e) }, h("span", null, h("slot", { name: "info" })), h("slot", null))) : (h("span", { id: `${this.choiceId}-collapsible-content` }, h("slot", null)))))) : null));
-    }
-    get element() { return this; }
-    static get style() { return DuetChoiceStyle0; }
-}, [1, "duet-choice", {
-        "theme": [1025],
-        "label": [1],
-        "accessibleLabelInfoButtonDefaults": [1, "accessible-label-info-default"],
-        "accessibleLabelInfoButton": [1025, "accessible-label-info-button"],
-        "accessibleActiveDescendant": [1, "accessible-active-descendant"],
-        "accessibleControls": [1, "accessible-controls"],
-        "accessibleOwns": [1, "accessible-owns"],
-        "accessibleDescribedBy": [1, "accessible-described-by"],
-        "accessibleDetails": [1, "accessible-details"],
-        "accessibleLabelledBy": [1, "accessible-labelled-by"],
-        "accessibleDescription": [1, "accessible-description"],
-        "caption": [1],
-        "value": [1537],
-        "type": [513],
-        "name": [1],
-        "checked": [1540],
-        "collapsible": [4],
-        "collapsibleForceExpanded": [4, "collapsible-force-expanded"],
-        "margin": [1],
-        "icon": [1],
-        "expand": [4],
-        "padding": [1],
-        "identifier": [1],
-        "groupDirection": [1, "group-direction"],
-        "groupDisabled": [4, "group-disabled"],
-        "groupResponsive": [4, "group-responsive"],
-        "disabled": [516],
-        "required": [4],
-        "infoLabelDefaults": [1, "accessible-label-info-default"],
-        "infoLabel": [1025, "info-label"],
-        "collapsibleNotificationDefaults": [1, "accessible-collapsible-notification-default"],
-        "collapsibleNotification": [1025, "collapsible-notification"],
-        "focus": [32],
-        "isHovering": [32],
-        "isInfoOpen": [32],
-        "setFocus": [64],
-        "toggleInfoMethod": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["duet-choice", "duet-caption", "duet-icon", "duet-spacer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "duet-choice":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, DuetChoice$1);
-            }
-            break;
-        case "duet-caption":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$4();
-            }
-            break;
-        case "duet-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "duet-spacer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const DuetChoice = DuetChoice$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { DuetChoice, defineCustomElement };

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

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