@duetds/components 6.0.3 → 6.0.4

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

@@ -0,0 +1,226 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { f as findCheckedOption, w as watchForOptions } from './p-12721178.js';
+import { d as defineCustomElement$6 } from './p-e5c8a58f.js';
+import { d as defineCustomElement$5 } from './p-e4d5fbc0.js';
+import { d as defineCustomElement$4 } from './p-7739604d.js';
+import { d as defineCustomElement$3 } from './p-88511d7a.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.js';
+
+const duetChoiceGroupCss = "*.sc-duet-choice-group,*.sc-duet-choice-group::after,*.sc-duet-choice-group::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-group-h{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:block}@media (min-width: 48em){.horizontal.sc-duet-choice-group-h .duet-choice-group.sc-duet-choice-group{display:flex;margin-bottom:0}}.horizontal.sc-duet-choice-group-h .duet-choice-group.duet-no-stacking.sc-duet-choice-group{display:flex}.duet-choice-group.sc-duet-choice-group{position:relative;width:100%;margin-bottom:-12px}";
+
+const duetChoiceSelector = ":scope duet-choice:not(:scope duet-choice duet-choice-group duet-choice):not(:scope duet-choice duet-fieldset duet-choice)";
+const DuetChoiceGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    /**
+     * Direction of the choice group.
+     */
+    this.direction = "vertical";
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Theme of the choice group.
+     */
+    this.theme = "";
+    /**
+     * Display choice group in error state along with an error message.
+     */
+    this.error = "";
+    /**
+     * Legend displayed for the choice buttons in this group.
+     */
+    this.label = "Label";
+    /**
+     * Visually hide the label, but still show it to screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * Additional caption to show inside the label of the choice group.
+     */
+    this.caption = undefined;
+    /**
+     * Tooltip to display next to the label of the choice group.
+     */
+    this.tooltip = undefined;
+    /**
+     * With direction setting you can force the tooltip to always open towards left
+     * or right instead of automatically determining the direction.
+     */
+    this.tooltipDirection = "auto";
+    /**
+     * Enable or disable the automatic responsive behaviour of the choice group
+     * component when horizontal setting is used. Setting this option to "true"
+     * makes sure that contents are stacked vertically on mobile.
+     */
+    this.responsive = false;
+    this.getChoices = () => {
+      return Array.from(this.element.querySelectorAll(duetChoiceSelector));
+    };
+    /**
+     * Component event handling.
+     */
+    this.onSelect = (ev) => {
+      if (ev.detail.component !== "duet-choice") {
+        return;
+      }
+      const selectedChoice = ev.target;
+      if (selectedChoice) {
+        this.value = selectedChoice.value;
+      }
+      // Prevent events from bubbling up the DOM tree in case
+      // this group is a sub-group of another choice group.
+      ev.cancelBubble = true;
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  async connectedCallback() {
+    const el = this.element;
+    if (this.value === undefined) {
+      const choice = findCheckedOption(el, duetChoiceSelector);
+      if (choice !== undefined) {
+        await choice.componentOnReady();
+        if (this.value === undefined) {
+          this.value = choice.value;
+        }
+      }
+    }
+    this.mutationO = watchForOptions(el, duetChoiceSelector, newOption => {
+      if (newOption !== undefined) {
+        newOption.componentOnReady().then(() => {
+          const choices = this.getChoices();
+          if (choices.includes(newOption)) {
+            this.value = newOption.value;
+          }
+        });
+      }
+      else {
+        this.updateChoices();
+      }
+    });
+    this.updateChoices();
+  }
+  disconnectedCallback() {
+    if (this.mutationO) {
+      this.mutationO.disconnect();
+      this.mutationO = undefined;
+    }
+  }
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+  }
+  /**
+   * Local methods
+   */
+  async updateChoices() {
+    /**
+     * Make sure we get all choices first so values are up to date prior
+     * to caching the choice group value
+     */
+    const choices = this.getChoices();
+    const { value } = this;
+    let hasChecked = false;
+    // Walk the DOM in reverse order, since the last selected one wins
+    for (const choice of choices) {
+      choice.name = this.name;
+      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;
+      }
+      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, { onDuetChange: this.onSelect, class: { horizontal: this.direction === "horizontal" } }, h("duet-fieldset", { label: this.label, labelHidden: this.labelHidden, caption: this.caption, error: this.error, margin: this.margin, theme: this.theme }, this.tooltip && (h("duet-tooltip", { slot: "tooltip", direction: this.tooltipDirection, accessibleInputLabel: this.label }, this.tooltip)), h("div", { class: { "duet-choice-group": true, "duet-no-stacking": !this.responsive } }, h("slot", null)))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "value": ["updateChoices"],
+    "disabled": ["updateChoices"],
+    "name": ["updateChoices"],
+    "direction": ["updateChoices"],
+    "responsive": ["updateChoices"]
+  }; }
+  static get style() { return duetChoiceGroupCss; }
+}, [6, "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],
+    "value": [1537],
+    "disabled": [4]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-choice-group", "duet-caption", "duet-fieldset", "duet-icon", "duet-tooltip", "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$6();
+      }
+      break;
+    case "duet-fieldset":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-tooltip":
+      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

@@ -0,0 +1,11 @@
+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;

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

@@ -0,0 +1,390 @@
+/*!
+ * Built with Duet Design System
+ */
+import { p as proxyCustomElement, H, c as createEvent, h, b as Host } from './p-3fc2d124.js';
+import { i as inheritGlobalTheme } from './p-4ebf1618.js';
+import { D as DuetStringsExternalDefaults } from './p-76f00bd5.js';
+import { c as createID } from './p-c1325e35.js';
+import { F as FocusGuard } from './p-0b8f16f1.js';
+import { i as isKeyboardClick, a as isQuestionKey, b as isEscapeKey } from './p-d8549efe.js';
+import { g as getLocaleString, a as getLanguage } from './p-ede854e1.js';
+import { d as defineCustomElement$5 } from './p-e5c8a58f.js';
+import { d as defineCustomElement$4 } from './p-7739604d.js';
+import { d as defineCustomElement$3 } from './p-81c9b244.js';
+import { d as defineCustomElement$2 } from './p-b08e57cf.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 = "*.sc-duet-choice,*.sc-duet-choice::after,*.sc-duet-choice::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.sc-duet-choice-h{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}.sc-duet-choice-h:last-child,.sc-duet-choice-h:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){.sc-duet-choice-h{width:100%}}.duet-expand.sc-duet-choice-h{width:100% !important}.duet-m-0.sc-duet-choice-h{margin:0 !important}.duet-fixed.sc-duet-choice-h{width:auto !important}.vertical.sc-duet-choice-h{margin-right:0 !important}.horizontal.sc-duet-choice-h{margin-bottom:0 !important}@media (min-width: 48em){.horizontal-responsive.sc-duet-choice-h{margin-bottom:0 !important;margin-right:16px !important}.horizontal-responsive.sc-duet-choice-h:last-child,.horizontal-responsive.sc-duet-choice-h:last-of-type{margin-right:0 !important}}.sc-duet-choice-h:last-child:not(:only-child){margin-right:0 !important}.duet-choice-card.sc-duet-choice{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:#00294d !important;text-align:left;background:white;border-width:2px}.duet-choice-card.duet-p-0.sc-duet-choice{padding:0 !important}.duet-choice-card.duet-m-0.sc-duet-choice{margin:0 !important}.duet-theme-turva.sc-duet-choice .duet-choice-card.sc-duet-choice{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:#171c3a !important}.duet-choice-card-flextainer.sc-duet-choice{display:flex}.duet-choice-label.sc-duet-choice{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:flex;gap:1rem;align-items:center;justify-content:flex-start;width:100%;height:100%;min-height:3.875rem;padding:1rem;font-size:1rem;font-weight:600;text-decoration:none;word-break:break-word;cursor:pointer;border:2px solid #e1e3e6;border-radius:4px;transition:background-color 150ms ease}.duet-choice-label.has-before-text.sc-duet-choice .duet-choice-card-icon.sc-duet-choice,.duet-choice-label.has-before-text.sc-duet-choice .duet-choice-card-text.sc-duet-choice{align-self:flex-start;margin-top:0.25rem}.duet-choice-label.sc-duet-choice>div.sc-duet-choice:last-child{flex:1;align-self:flex-start;justify-self:flex-end;margin-top:0.25rem}.has-info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-top-right-radius:0;border-bottom-right-radius:0}.info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-bottom-right-radius:0;border-bottom-left-radius:0}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:#e4e4e6}.duet-theme-turva.sc-duet-choice .info.sc-duet-choice .duet-choice-label.sc-duet-choice{border-color:#e4e4e6}.duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#909599}.duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-checkmark-container.sc-duet-choice{border-color:#909599}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#747475}.duet-theme-turva.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-checkmark-container.sc-duet-choice{border-color:#747475}.duet-theme-turva.sc-duet-choice .info.sc-duet-choice .duet-choice-label.sc-duet-choice:not(.no-hover):hover{border-color:#747475}.duet-choice-label.sc-duet-choice:active{opacity:0.75;transition:none !important}.checked.sc-duet-choice .duet-choice-label.sc-duet-choice{color:#0077b3 !important;background:#f3f9fc;border-color:#0077b3 !important}.checked.sc-duet-choice .duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#0077b3}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice .duet-choice-label.sc-duet-choice{color:#171c3a !important;background:#f5f5f7;border-color:#171c3a !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice .duet-choice-label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#c60c30}.checked.collapsible.sc-duet-choice .duet-choice-label.sc-duet-choice{border-bottom:0 !important;border-bottom-right-radius:0;border-bottom-left-radius:0}input.sc-duet-choice:focus{outline:0}.user-is-tabbing.sc-duet-choice-h input.sc-duet-choice:checked:focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3)}.user-is-tabbing.sc-duet-choice-h input.sc-duet-choice:not(:checked):focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.user-is-tabbing.duet-theme-turva.sc-duet-choice-h input.sc-duet-choice:checked:focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2)}.user-is-tabbing.duet-theme-turva.sc-duet-choice-h input.sc-duet-choice:not(:checked):focus+.duet-choice-label.sc-duet-choice{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{color:#657787 !important;cursor:default !important;background:#f5f8fa !important;border-color:#e1e3e6 !important}input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:#657787 !important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{color:#747475 !important;background:#f5f5f7 !important;border-color:#e4e4e6 !important}.duet-theme-turva.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice .duet-checkmark.sc-duet-choice{border-color:#747475 !important}.checked.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:#e1e3e6 !important;border-color:#e1e3e6 !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice input[disabled].sc-duet-choice+.duet-choice-label.sc-duet-choice{background:#e4e4e6 !important;border-color:#e4e4e6 !important}.duet-checkmark-container.sc-duet-choice{position:relative;width:20px;height:20px;margin-left:auto;border:1px solid #909599;border-radius:4px;transition:border 300ms ease}.duet-theme-turva.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#747475}.checked.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#0077b3;border-color:#0077b3;transition:none}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#171c3a;border-color:#171c3a !important}.duet-checkmark-container.duet-checkmark-radio.sc-duet-choice{border-radius:50%}[disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#cfd2d4 !important}.duet-theme-turva.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{border-color:#cfcfd1 !important}.checked.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#cfd2d4 !important}.duet-theme-turva.sc-duet-choice .checked.sc-duet-choice [disabled].sc-duet-choice+label.sc-duet-choice .duet-checkmark-container.sc-duet-choice{background:#cfcfd1 !important}.duet-checkmark.sc-duet-choice{position:absolute;top:10px;left:3px;width:5.3333333333px;height:11.8518518519px;border-top:2px solid white;border-right:2px solid white;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.sc-duet-choice{position:relative}.duet-choice-card-icon.sc-duet-choice duet-icon.sc-duet-choice{display:block}.duet-choice-section-hidden.sc-duet-choice{display:none}.duet-choice-card-info.duet-choice-card-collapsed.sc-duet-choice,.duet-choice-card-collapsed.duet-choice-card-collapsible.sc-duet-choice{position:relative;width:auto;padding:0 !important;background:unset !important;border:0;border-radius:0}.duet-choice-card-info.sc-duet-choice,.duet-choice-card-collapsible.sc-duet-choice{padding:28px !important;position:relative;z-index:200;width:100%;font-weight:400;color:#00294d;border:2px solid #e1e3e6;border-top:0;border-radius:0 0 4px 4px}.duet-theme-turva.sc-duet-choice .duet-choice-card-info.sc-duet-choice,.duet-theme-turva.sc-duet-choice .duet-choice-card-collapsible.sc-duet-choice{color:#171c3a;border-color:#171c3a}.checked.sc-duet-choice .duet-choice-card-info.sc-duet-choice,.checked.sc-duet-choice .duet-choice-card-collapsible.sc-duet-choice{display:block}.duet-choice-card-info-expanded.sc-duet-choice,.duet-choice-card-collapsible-expanded.sc-duet-choice{display:block}.duet-choice-card-collapsible.sc-duet-choice{background:white;border:2px solid #0077b3;border-top:0}.duet-choice-card-collapsible.duet-theme-turva.sc-duet-choice{background:white;border-color:#171c3a}.duet-choice-card-collapsible-disabled.sc-duet-choice{background:#f5f8fa;border-color:#e1e3e6}.duet-choice-card-collapsible-disabled.duet-theme-turva.sc-duet-choice{background:#f5f5f7;border-color:#e4e4e6}.duet-choice-card-info.sc-duet-choice{font-size:0.875rem;line-height:1.5;background:#f5f8fa;transition:150ms ease-out}.duet-choice-card-info.duet-theme-turva.sc-duet-choice{background:#f5f5f7;border-color:#e4e4e6}.duet-choice-info-toggle.sc-duet-choice{display:flex;flex-shrink:0;align-items:flex-start;justify-content:center;width:57.6px;padding-top:1.25rem;cursor:pointer;background:white;border:2px solid #e1e3e6;border-left:0 none;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-appearance:none;appearance:none}.duet-choice-info-toggle[aria-expanded=true].sc-duet-choice{background:#f5f8fa;border-bottom-color:transparent;border-bottom-right-radius:0}.duet-choice-info-toggle[disabled].sc-duet-choice{pointer-events:none;background:#f5f8fa !important;border-color:#e1e3e6 !important}.duet-choice-info-toggle[disabled].sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#909599 !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice{background:#f5f5f7 !important;border-color:#e4e4e6 !important}.duet-choice-info-toggle[disabled].duet-theme-turva.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#747475 !important}.duet-choice-info-toggle.sc-duet-choice:focus{outline:none}.user-is-tabbing.sc-duet-choice-h .duet-choice-info-toggle.sc-duet-choice:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-choice-label.sc-duet-choice:not(.no-hover):hover .duet-choice-info-toggle.sc-duet-choice{border-left-color:#909599}.checked.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice{border-left-color:#0077b3 !important}.duet-choice-info-toggle.sc-duet-choice duet-icon.sc-duet-choice{display:block}.duet-choice-info-toggle.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#0077b3}.duet-theme-turva.sc-duet-choice .duet-choice-info-toggle.sc-duet-choice .duet-choice-info-icon.sc-duet-choice{color:#c60c30}.duet-choice-input.sc-duet-choice{position:absolute !important;width:auto;height:auto;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);color:transparent}";
+
+const DuetChoice$1 = /*@__PURE__*/ proxyCustomElement(class extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    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");
+    /**
+     * State() variables
+     * Inlined decorator, alphabetical order.
+     */
+    this.isHovering = false;
+    this.isInfoOpen = false;
+    this.isBlurred = false;
+    /**
+     * Theme of the choice.
+     */
+    this.theme = "";
+    /**
+     * Label for the choice button.
+     */
+    this.label = "label";
+    /**
+     * Property to change accessibleLabelInfoButton defaults on the component.
+     * normally you would handle these strings on an application level and override @accessibleLabelInfoButton when needed
+     */
+    this.accessibleLabelInfoButtonDefaults = DuetStringsExternalDefaults;
+    /**
+     * Accessible label that is read for screen reader users in the info toggle trigger button.
+     * Not visible for normal users.
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+     */
+    this.accessibleLabelInfoButton = getLocaleString(this.accessibleLabelInfoButtonDefaults);
+    /**
+     * Aria Details of the component
+     */
+    this.accessibleDetails = undefined;
+    /**
+     * String of id's that indicate alternative labels elements
+     */
+    this.accessibleLabelledBy = undefined;
+    /**
+     * Aria description the button
+     */
+    this.accessibleDescription = undefined;
+    /**
+     * Additional caption to show inside the label of the choice button.
+     */
+    this.caption = "";
+    /**
+     * Type of the choice button. You can set the type of the choice to be either
+     * “radio” or “checkbox”. Depending on this selection we convey the selection
+     * type to assistive technologies as well. When type “radio” is chosen it is
+     * required to place the choices inside Choice Group component.
+     */
+    this.type = "checkbox";
+    /**
+     * Checked state of the choice button.
+     */
+    this.checked = false;
+    /**
+     * Makes the choice button open a new section underneath it when clicked or
+     * tapped. This new section can be used to show more options related to this
+     * choice. Please note that this feature can’t be used together with the "info"
+     * functionality and that it only accepts plain dom nodes (no shadow dom elements
+     * such as duet-paragraph can be used as this will break accessibility)
+     */
+    this.collapsible = false;
+    /**
+     * Controls the margin of the component.
+     */
+    this.margin = "auto";
+    /**
+     * Icon to display to the left of the choice button label.
+     */
+    this.icon = "";
+    /**
+     * Expands the choice button to fill 100% of the container width.
+     */
+    this.expand = false;
+    /**
+     * Controls the padding of the component.
+     */
+    this.padding = "auto";
+    /**
+     * Makes the choice component disabled. This prevents users from being able to
+     * interact with the choice, and conveys its inactive state to assistive technologies.
+     */
+    this.disabled = false;
+    /**
+     * Set whether the input is required or not. Please note that this is necessary for
+     * accessible inputs when the user is required to fill them. When using this property
+     * you need to also set “novalidate” attribute to your form element to prevent
+     * browser from displaying its own validation errors.
+     */
+    this.required = false;
+    /**
+     * Placeholder defaults
+     * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+     */
+    this.infoLabelDefaults = {
+      fi: "Lisätietoja",
+      en: "More information about",
+      sv: "Mera information om",
+    };
+    /**
+     * Hint text to display before the user types into the date picker input.
+     * @default  {
+     *     fi: "Lisätietoja",
+     *     en: "More information about",
+     *     sv: "Mera information om",
+     *   }
+     */
+    this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
+    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 = () => {
+      this.checked = this.nativeInput.checked || false;
+      this.duetChange.emit({
+        checked: this.checked,
+        value: this.value,
+        component: "duet-choice",
+      });
+    };
+    this.onBlur = (ev) => {
+      this.duetBlur.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-choice",
+      });
+    };
+    this.onFocus = (ev) => {
+      this.duetFocus.emit({
+        originalEvent: ev,
+        checked: this.checked,
+        value: this.value,
+        component: "duet-choice",
+      });
+    };
+    /**
+     * Local methods
+     */
+    this.toggleChecked = ev => {
+      if (this.disabled || this.groupDisabled) {
+        return;
+      }
+      this.isInfoOpen = false;
+      // 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",
+      });
+      ev.preventDefault();
+      ev.stopPropagation();
+    };
+    this.toggleInfo = () => {
+      this.isInfoOpen = !this.isInfoOpen;
+    };
+  }
+  /**
+   * Component lifecycle events.
+   */
+  componentWillLoad() {
+    inheritGlobalTheme(this);
+    this.hasInfo = !!this.element.querySelector("[slot='info']");
+    this.hasHeader = !!this.element.querySelector('[slot="header"]');
+    this.hasAdditional = !!this.element.querySelector("[slot='additional']");
+    this.hasLabel = !!this.element.querySelector(":scope > [slot='label']");
+    this.hasBeforeText = !!this.element.querySelector("[slot='before-text']");
+  }
+  /**
+   * Component event handling.
+   */
+  handleHostBlur(ev) {
+    /**
+     * When moving away from a choice, collapse the info bar to assist visually impared people on focusing
+     */
+    if (this.hasInfo && this.isInfoOpen && this.isKeyDown) {
+      // @ts-ignore
+      const isTargetContainedInHost = this.element.contains(ev === null || ev === void 0 ? void 0 : ev.relatedTarget) || false;
+      if (!isTargetContainedInHost) {
+        this.toggleInfo();
+      }
+    }
+  }
+  handleHostKeyDown() {
+    this.isKeyDown = true;
+  }
+  handleHostKeyUp(ev) {
+    this.isKeyDown = false;
+    if (isEscapeKey(ev) && this.isInfoOpen) {
+      this.toggleInfo();
+    }
+  }
+  /**
+   * Sets focus on the specified `duet-choice`. Use this method instead of the global
+   * `input.focus()`.
+   */
+  async setFocus(options) {
+    this.nativeInput.focus(options);
+  }
+  getAriaDescribedby() {
+    if (this.accessibleDescribedBy) {
+      return this.accessibleDescribedBy;
+    }
+    if (this.collapsible || this.hasInfo) {
+      if (this.hasHeader) {
+        return this.headerId;
+      }
+      else {
+        return this.expandId;
+      }
+    }
+    return null;
+  }
+  getClassNames() {
+    if (this.hasInfo && !this.collapsible) {
+      return {
+        "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 {
+        "duet-choice-card-collapsible": true,
+        "duet-choice-card-collapsible-expanded": this.checked,
+        "duet-choice-card-collapsed": !this.checked,
+        "duet-choice-card-collapsible-disabled": this.disabled || this.groupDisabled ? true : false,
+        "duet-theme-turva": this.theme === "turva",
+      };
+    }
+    return {
+      "duet-choice-default-slot": true,
+    };
+  }
+  /**
+   * render() function
+   * Always the last one in the class.
+   */
+  render() {
+    const identifier = this.identifier || this.choiceId;
+    return (h(Host, { 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",
+      } }, h("div", { class: {
+        "duet-choice-card-flextainer": true,
+        "duet-theme-turva": this.theme === "turva",
+      } }, h("div", { class: {
+        "duet-choice-card": true,
+        "has-icon": !!this.icon,
+        "has-info": this.hasInfo,
+        checked: this.checked,
+        info: this.isInfoOpen,
+        collapsible: this.collapsible,
+        "duet-p-0": this.padding === "none",
+      } }, h("input", { class: "duet-choice-input", type: this.type, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.onChange, disabled: this.disabled || this.groupDisabled, required: this.required, id: identifier, name: this.name, value: this.value, checked: this.checked, "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.nativeInput = input) }), h("label", { htmlFor: identifier, class: { "duet-choice-label": true, "no-hover": this.isHovering, "has-before-text": this.hasBeforeText }, onClick: this.onClick }, this.hasBeforeText && h("slot", { name: "before-text" }), this.icon && (h("div", { class: "duet-choice-card-icon" }, h("duet-icon", { margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { class: "duet-choice-card-text" }, h("div", null, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("duet-caption", { margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", null, h("duet-spacer", { size: "xx-small" }), h("slot", { name: "additional" })))), h("div", null, h("div", { class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { 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.disabled || this.groupDisabled, "aria-expanded": this.isInfoOpen ? "true" : "false", "aria-label": `${this.infoLabel} ${this.label}`, "aria-controls": this.expandId, "aria-flowto": this.expandId, tabindex: this.type === "radio" && !this.checked ? "-1" : "0", type: "button" }, h("duet-visually-hidden", { "aria-hidden": !this.isBlurred ? "true" : "false" }, this.accessibleLabelInfoButton), h("div", { class: "duet-choice-info-icon" }, h("duet-icon", { icon: messagingInfo.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
+        "duet-choice-section-visible": this.collapsible ? this.checked : this.isInfoOpen,
+        "duet-choice-section-hidden": this.collapsible ? !this.checked : !this.isInfoOpen,
+      } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", null, h("span", { "aria-relevant": "all", "aria-atomic": "true", "aria-live": this.isInfoOpen ? "polite" : "off" }, h("slot", { name: "info" })), h("slot", null))) : (h("span", null, h("slot", null)))), this.isInfoOpen && h(FocusGuard, { moveFocusTo: this.infoButtonEl }))) : null));
+  }
+  get element() { return this; }
+  static get style() { return duetChoiceCss; }
+}, [6, "duet-choice", {
+    "theme": [1025],
+    "label": [1],
+    "accessibleLabelInfoButtonDefaults": [1, "accessible-label-info-default"],
+    "accessibleLabelInfoButton": [1, "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],
+    "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": [1, "info-label"],
+    "isHovering": [32],
+    "isInfoOpen": [32],
+    "isBlurred": [32],
+    "setFocus": [64]
+  }, [[2, "blur", "handleHostBlur"], [2, "keydown", "handleHostKeyDown"], [2, "keyup", "handleHostKeyUp"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["duet-choice", "duet-caption", "duet-icon", "duet-spacer", "duet-visually-hidden"];
+  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$5();
+      }
+      break;
+    case "duet-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "duet-spacer":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "duet-visually-hidden":
+      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

@@ -0,0 +1,11 @@
+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;