@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

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

@@ -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);
@@ -158,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.
@@ -389,6 +476,7 @@ export class DuetChoice {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -409,12 +497,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -429,12 +517,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",
@@ -455,12 +543,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",
@@ -478,12 +566,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",
@@ -498,11 +586,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",
@@ -517,11 +605,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -536,11 +624,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",
@@ -555,11 +643,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",
@@ -574,12 +662,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",
@@ -594,12 +682,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",
@@ -614,12 +702,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",
@@ -634,12 +722,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -654,11 +742,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetChoiceType",
@@ -679,12 +767,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": true,
                 "defaultValue": "\"checkbox\""
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -699,11 +787,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -718,12 +806,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "collapsible": {
                 "type": "boolean",
+                "attribute": "collapsible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -738,12 +826,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",
@@ -758,12 +846,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",
@@ -784,12 +872,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -804,12 +892,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -824,12 +912,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -850,12 +938,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -870,11 +958,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "groupDirection": {
                 "type": "string",
+                "attribute": "group-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -898,11 +986,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-direction",
                 "reflect": false
             },
             "groupDisabled": {
                 "type": "boolean",
+                "attribute": "group-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -920,11 +1008,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-disabled",
                 "reflect": false
             },
             "groupResponsive": {
                 "type": "boolean",
+                "attribute": "group-responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -942,11 +1030,11 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-responsive",
                 "reflect": false
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -961,12 +1049,12 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -981,12 +1069,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",
@@ -1007,12 +1095,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",
@@ -1030,12 +1118,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",
@@ -1056,12 +1144,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",
@@ -1079,7 +1167,6 @@ export class DuetChoice {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsible-notification",
                 "reflect": false,
                 "defaultValue": "getLocaleString(\n    this.collapsibleNotificationDefaults,\n    getLanguage()\n  )"
             }