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

package/lib/collection/components/duet-choice/duet-choice.js

@@ -2,7 +2,7 @@
  * Built with Duet Design System
  */
 import infoIcon from "@duetds/icons/lib/assets/messaging-info";
-import { h, Host } from "@stencil/core";
+import { Build, h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { createID } from "../../utils/create-id";
@@ -19,11 +19,141 @@ import { getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
  */
 export class DuetChoice {
     constructor() {
+        this.focus = false;
         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;
+        /**
+         * 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;
+        /**
+         * This attribute works only when the 'collapsible' attribute is set to true.
+         * It maintains the visibility of the additional content section, regardless of whether the input is checked or not.
+         */
+        this.collapsibleForceExpanded = 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;
+        /**
+         * Accessible info label defaults
+         */
+        this.infoLabelDefaults = {
+            fi: "Lisätietoja vaihtoehdosta",
+            en: "More information about",
+            sv: "Mera information om",
+        };
+        /**
+         * Accessible info label
+         * @default  {
+         *     fi: "Lisätietoja vaihtoehdosta",
+         *     en: "More information about",
+         *     sv: "Mera information om",
+         *   }
+         */
+        this.infoLabel = getLocaleString(this.infoLabelDefaults, getLanguage());
+        /**
+         * Accessible collapsible notification defaults
+         */
+        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",
+        };
+        /**
+         * Accessible collapsible notification. If a collapsible choice has no header, and contains other
+         * elements than duet-paragraph, duet-heading or duet-fieldset, this is used as the accessible
+         * notification of opening the collapsible content (added to aria-describedby).
+         * @default {
+         *    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());
         this.radioInputListenersRemove = radioInput => {
             radioInput.removeEventListener("change", this.onChange);
             radioInput.removeEventListener("keydown", this.handleKeyDown);
@@ -36,45 +166,48 @@ export class DuetChoice {
             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;
+        this.inputSetUp = () => {
+            if (Build.isServer) {
+                return;
+            }
+            const slotInput = this.element.querySelectorAll(":scope > input");
+            const input = slotInput[slotInput.length - 1] || document.createElement("input");
+            input.slot = "choiceinput";
+            input.disabled = this.getDisabled();
+            input.id = this.identifier || this.choiceId;
+            input.type = this.type;
+            input.name = this.name;
+            input.value = this.value;
+            input.checked = this.checked;
+            input.required = this.required;
+            input.ariaDescription = this.accessibleDescription;
             if (this.accessibleControls) {
-                radioInput.setAttribute("aria-controls", this.accessibleControls);
+                input.setAttribute("aria-controls", this.accessibleControls);
             }
             if (this.accessibleActiveDescendant) {
-                radioInput.setAttribute("aria-activedescendant", this.accessibleActiveDescendant);
+                input.setAttribute("aria-activedescendant", this.accessibleActiveDescendant);
             }
             if (this.accessibleLabelledBy) {
-                radioInput.setAttribute("aria-labelledby", this.accessibleLabelledBy);
+                input.setAttribute("aria-labelledby", this.accessibleLabelledBy);
             }
             if (this.accessibleDetails) {
-                radioInput.setAttribute("aria-details", this.accessibleDetails);
+                input.setAttribute("aria-details", this.accessibleDetails);
             }
             if (this.accessibleOwns) {
-                radioInput.setAttribute("aria-owns", this.accessibleOwns);
+                input.setAttribute("aria-owns", this.accessibleOwns);
             }
             if (this.getAriaDescribedby()) {
-                radioInput.setAttribute("aria-describedby", this.getAriaDescribedby());
+                input.setAttribute("aria-describedby", this.getAriaDescribedby());
             }
-            radioInput.ariaLabel = this.getLabel();
-            if (slotInput) {
-                this.radioInputListenersRemove(radioInput);
+            input.ariaLabel = this.getLabel();
+            if (slotInput.length > 0) {
+                this.radioInputListenersRemove(input);
             }
             else {
-                this.element.appendChild(radioInput);
+                this.element.appendChild(input);
             }
-            this.radioInputListenersAdd(radioInput);
-            this.focusableElement = radioInput;
+            this.radioInputListenersAdd(input);
+            this.focusableElement = input;
         };
         /**
          * Component event handling.
@@ -155,49 +288,6 @@ export class DuetChoice {
                 }, 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.
@@ -221,14 +311,11 @@ export class DuetChoice {
         this.duetChoiceReady.emit();
     }
     componentDidRender() {
-        if (this.type === "radio") {
-            this.radioInputSetUp();
-        }
+        this.inputSetUp();
     }
     disconnectedCallback() {
         disconnectLanguageChangeObserver(this);
         unsubscribeTabbingChange(this);
-        this.duetChoiceRemove.emit();
     }
     /**
      * Sets focus on the specified `duet-choice`. Use this method instead of the global
@@ -268,7 +355,7 @@ export class DuetChoice {
         if (this.accessibleDescribedBy) {
             return this.accessibleDescribedBy;
         }
-        if (this.collapsible || this.hasInfo) {
+        if ((this.collapsible || this.hasInfo) && this.getExpanded()) {
             if (this.hasHeader) {
                 return this.headerId;
             }
@@ -335,8 +422,7 @@ export class DuetChoice {
      * Always the last one in the class.
      */
     render() {
-        const identifier = this.identifier || this.choiceId;
-        return (h(Host, { key: '6b043ca676b0915beba8f7395ab51da5e4b5cd9b', class: {
+        return (h(Host, { key: '8e0d44318e6f23b8cd30378f4a2d6d9d04775caf', class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
                 "duet-m-0": this.margin === "none",
@@ -344,10 +430,10 @@ export class DuetChoice {
                 "duet-theme-turva": this.theme === "turva",
                 "no-hover": this.isHovering,
                 disabled: this.getDisabled(),
-            } }, h("div", { key: '0891860988aae6ccb6cdaba297bb752a056511ed', class: {
+            } }, h("div", { key: '94430228895b0bbd2ddf795f24e2c598356fa005', class: {
                 "duet-choice-card-flextainer": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("div", { key: 'bce0c0ae884e3406707a4a4c369b4459d50c0093', class: {
+            } }, h("div", { key: 'e8e03959412c6c2d97e38969c2264cbd2dc93e9f', class: {
                 "duet-choice-card": true,
                 "has-icon": !!this.icon,
                 "has-info": this.hasInfo,
@@ -356,19 +442,19 @@ export class DuetChoice {
                 collapsible: this.collapsible,
                 "collapsible-force-expanded": this.collapsibleForceExpanded,
                 "duet-p-0": this.padding === "none",
-            } }, this.type === "checkbox" && (h("input", { key: '89d5dd0ee3b36469a8dc76939682d6a9639d52a0', 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: '2745b90b9febcddd1617878dc85dbdca91bed103', name: "choiceradioinput" }), h("label", { key: '60293091e7005f427af03589faa2471a20a07dbd', class: {
+            } }, h("slot", { key: 'f535dd20ca1dfcefc16cefbe057ac14a9f8d0b14', name: "choiceinput" }), h("label", { key: '70fa4e33e814019ead7d1bdce622d289fbdde47c', 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: 'ae4be026a3b09c369840065af56652403199f386', name: "before-text" }), this.icon && (h("div", { key: 'c7cb16471ff37dd3b02090dad05d7614f3d314bd', class: "duet-choice-card-icon" }, h("duet-icon", { key: 'addb288ef7d86b56bea8c1f332441a2c4cadb3d2', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: 'b93a83dfd99fe82813d0daa25004ad9c5f4bb58f', class: "duet-choice-card-text" }, h("div", { key: '6c12ddc5fce7a4b360c8cd54f4c767cf3481af25' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: '2375bc05cb87c6aff0e56758c9f478103e3fde4e' }, h("duet-spacer", { key: 'ed9c38492bbd765fe2f7c8e00be12f022b21932b', size: "xx-small" }), h("duet-caption", { key: 'bd6ee17d7a87ee48ee817e3d22ae84f08ad1710c', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: '60864680b2473d89f940fa0cd8bfae6433838ae4' }, h("duet-spacer", { key: '303abb939ca6951fabf2e789877ce9fdc5192e68', size: "xx-small" }), h("slot", { key: '3c0f6a723591ecf194520eef02445741986e2ede', name: "additional" })))), h("div", { key: 'aab22344ed2b2b79259222456daed0c67007bd55' }, h("div", { key: '8414b4650724896fe86bb5883c29f25970fd5225', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: '0fb93a9d51f221f5338009ab93ee9ed0dd840afc', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: 'dd75d55f02a8b12d8914d92ad5fd09f7b16cd0f0', ref: button => (this.infoButtonEl = button), id: this.infoButtonId, class: {
+            }, onClick: this.onClick }, this.hasBeforeText && h("slot", { key: 'ddf8b67cf503633034ca3c8c94d5923c99dace05', name: "before-text" }), this.icon && (h("div", { key: 'a5d3e1324aafbece41a54e14c9852c264bf0d9b0', class: "duet-choice-card-icon" }, h("duet-icon", { key: '0382f9205997600a146e181e3783d75538b1925e', margin: "none", size: "small", name: this.icon, color: "currentColor" }))), h("div", { key: '14a3b6689b6527398fdf46729e56b7a97383bf93', class: "duet-choice-card-text" }, h("div", { key: '26144b6d2c60fbb338e08e6355e0b2ea2138a682' }, this.hasLabel ? h("slot", { name: "label" }) : this.label), this.caption && (h("div", { key: '4059958e6434760f1f3afe27e4d5196595fe000b' }, h("duet-spacer", { key: 'beec0d868ce1f590a55ae2b30e12eb1b1cc4b35e', size: "xx-small" }), h("duet-caption", { key: 'bd0c1c6cba4398151bafcdfbc79c85c6e9aad9cc', margin: "none", selected: this.checked }, this.caption))), this.hasAdditional && (h("div", { key: '35c0cad0a89437af7ef7bc8e842d7d52bfaca6ed' }, h("duet-spacer", { key: 'db0d7edb4432c1693160898f653ceff941ea5c72', size: "xx-small" }), h("slot", { key: '72baad0387d37783233fac3bdb9ca218036f6317', name: "additional" })))), h("div", { key: 'c844c7c3d338339d4260986a68d90f43ebe5a7ba' }, h("div", { key: '79f40913fe5c59d12db856a401a80f35addd0379', class: { "duet-checkmark-container": true, "duet-checkmark-radio": this.type === "radio" } }, this.checked && h("div", { key: 'dff8e47098a438673e4e87e1dd132280daa3eaf8', class: "duet-checkmark" }))))), this.hasInfo && !this.collapsible && (h("button", { key: '22d9672aa71a3a41ed928f9b90782f335b40ea86', 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: 'acc75d0d4e81d63a1cadaf113f7a97727ec9b323', class: "duet-choice-info-icon" }, h("duet-icon", { key: 'dab37c8b277f1077f49ddadcd62a7b81e5590e0d', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: '2f6a4388ba251ee6e2d1125a5eed938899c730c8', id: `${this.choiceId}-collapsible-notification`, hidden: true }, this.collapsibleNotification)), this.collapsible || this.hasInfo ? (h("div", { class: this.getClassNames(), id: this.expandId }, h("span", { class: {
+            }, 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: '263cdcb2a2121471627759f4ab9bab65436636de', class: "duet-choice-info-icon" }, h("duet-icon", { key: 'ed64691ddbd6ba488a7b3c494d64849cef448a33', icon: infoIcon.svg, margin: "none", size: "small", color: "currentColor" }))))), this.collapsible && (h("span", { key: 'a6dba636c1c5df9f2180bbaae7d71d1571b7e356', 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));
+            } }, h("span", { id: this.headerId }, h("slot", { name: "header" })), this.hasInfo ? (h("span", { ref: span => (this.infoContainer = span), tabindex: "-1", 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));
     }
     static get is() { return "duet-choice"; }
     static get encapsulation() { return "shadow"; }
@@ -386,6 +472,7 @@ export class DuetChoice {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -406,12 +493,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -426,12 +513,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
             "accessibleLabelInfoButtonDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-info-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -452,12 +539,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-info-default",
                 "reflect": false,
                 "defaultValue": "DuetStringsExternalDefaults"
             },
             "accessibleLabelInfoButton": {
                 "type": "string",
+                "attribute": "accessible-label-info-button",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -475,12 +562,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-info-button",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.accessibleLabelInfoButtonDefaults)"
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -495,11 +582,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -514,11 +601,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -533,11 +620,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -552,11 +639,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -571,12 +658,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -591,12 +678,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -611,12 +698,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -631,12 +718,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -651,11 +738,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetChoiceType",
@@ -676,12 +763,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": true,
                 "defaultValue": "\"checkbox\""
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -696,11 +783,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -715,12 +802,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "collapsible": {
                 "type": "boolean",
+                "attribute": "collapsible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -735,12 +822,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsible",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "collapsibleForceExpanded": {
                 "type": "boolean",
+                "attribute": "collapsible-force-expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -755,12 +842,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsible-force-expanded",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -781,12 +868,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -801,12 +888,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -821,12 +908,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -847,12 +934,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -867,11 +954,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "groupDirection": {
                 "type": "string",
+                "attribute": "group-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -895,11 +982,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-direction",
                 "reflect": false
             },
             "groupDisabled": {
                 "type": "boolean",
+                "attribute": "group-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -917,11 +1004,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-disabled",
                 "reflect": false
             },
             "groupResponsive": {
                 "type": "boolean",
+                "attribute": "group-responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -939,11 +1026,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-responsive",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -958,12 +1045,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -978,12 +1065,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "infoLabelDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-info-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -1004,12 +1091,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-info-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Lis\u00E4tietoja vaihtoehdosta\",\n    en: \"More information about\",\n    sv: \"Mera information om\",\n  }"
             },
             "infoLabel": {
                 "type": "string",
+                "attribute": "info-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1027,12 +1114,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "info-label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.infoLabelDefaults, getLanguage())"
             },
             "collapsibleNotificationDefaults": {
                 "type": "string",
+                "attribute": "accessible-collapsible-notification-default",
                 "mutable": false,
                 "complexType": {
                     "original": "| DuetLangObject\n    | string",
@@ -1053,12 +1140,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-collapsible-notification-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"T\u00E4m\u00E4 valinta sis\u00E4lt\u00E4\u00E4 lis\u00E4tietoja, jotka avautuivat alle\",\n    en: \"This choice has additional information opened below\",\n    sv: \"Det h\u00E4r val har mer information som \u00F6ppnades nedan\",\n  }"
             },
             "collapsibleNotification": {
                 "type": "string",
+                "attribute": "collapsible-notification",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1076,7 +1163,6 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsible-notification",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.collapsibleNotificationDefaults,\n    getLanguage()\n  )"
             }
@@ -1110,26 +1196,6 @@ export class DuetChoice {
                         }
                     }
                 }
-            }, {
-                "method": "duetChoiceRemove",
-                "name": "duetChoiceRemove",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Emitted when the component is removed from the DOM."
-                },
-                "complexType": {
-                    "original": "CustomEvent",
-                    "resolved": "CustomEvent<any>",
-                    "references": {
-                        "CustomEvent": {
-                            "location": "global",
-                            "id": "global::CustomEvent"
-                        }
-                    }
-                }
             }, {
                 "method": "duetChange",
                 "name": "duetChange",
@@ -1243,3 +1309,32 @@ export class DuetChoice {
     }
     static get elementRef() { return "element"; }
 }
+/*
+
+{this.type === "checkbox" && (
+              <input
+                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)}
+              ></input>
+            )}
+
+*/