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

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

@@ -10,10 +10,51 @@ import { getElementsFromNamedSlot, hasSlot } from "../../utils/slot-utils";
  */
 export class DuetRadio {
     constructor() {
+        this.focus = false;
         /**
          * Own Properties.
          */
         this.radioId = createID("DuetRadio");
+        /**
+         * 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;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Theme of the radio.
+         */
+        this.theme = "";
+        /**
+         * Makes the radio component disabled. This prevents users from being able to
+         * interact with the radio, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the input is required or not. Please note that this is required 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;
+        /**
+         * Stops the components from emitting events
+         */
+        this.blockEvents = false;
+        /**
+         * Label for the radio.
+         */
+        this.label = "label";
         this.radioInputListenersRemove = radioInput => {
             radioInput.removeEventListener("change", this.onChange);
             //radioInput.removeEventListener("click", this.onRadioClick)
@@ -27,7 +68,7 @@ export class DuetRadio {
             radioInput.addEventListener("blur", this.onBlur);
         };
         this.radioInputSetUp = () => {
-            const slotInput = this.element.querySelector("input[slot=input]");
+            const slotInput = this.element.querySelector("input");
             const radioInput = slotInput || document.createElement("input");
             radioInput.slot = "input";
             radioInput.disabled = this.disabled || this.groupDisabled ? true : undefined;
@@ -115,29 +156,6 @@ export class DuetRadio {
                 component: "duet-radio",
             });
         };
-        this.focus = false;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleIndex = undefined;
-        this.margin = "auto";
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.theme = "";
-        this.disabled = false;
-        this.required = false;
-        this.blockEvents = false;
-        this.identifier = undefined;
-        this.label = "label";
-        this.name = undefined;
-        this.role = undefined;
-        this.groupDisabled = undefined;
-        this.groupDirection = undefined;
-        this.groupResponsive = undefined;
-        this.checked = undefined;
-        this.value = undefined;
     }
     /**
      * Component lifecycle events.
@@ -164,16 +182,16 @@ export class DuetRadio {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'a52c6ac475749b2d64a22d9b37e841039fb39d2a', onClick: this.onClick, class: {
+        return (h(Host, { key: '0811162c634e2b8b369c4e7f4b812f8a1273d968', onClick: this.onClick, class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
                 "duet-m-0": this.margin === "none",
-            } }, h("div", { key: '417713dd7269568373d53e39dd9b380549baeeca', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: '290edaf76e243376166f55ba7e18010c7d7d0a33', name: "input" }), h("label", { key: 'f3aa06a86046c1b0256dab97bd42633fcdeb9db9', inert: true, ref: element => (this.labelElement = element), class: {
+            } }, h("div", { key: '092e3a273977a27528421ed663ff7fb02d8d69c3', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: '4718ae20d1c35598cd5303f78aff0a4396cb2347', name: "input" }), h("label", { key: 'ec79e101c2130e2bb249336066e200e0dd4be698', inert: true, ref: element => (this.labelElement = element), class: {
                 "duet-label": true,
                 checked: this.checked,
                 focus: this.focus,
                 disabled: this.disabled || this.groupDisabled,
-            } }, h("div", { key: 'c849be25a4c0058030e19d2c21ebf4cb7242f95e', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
+            } }, h("div", { key: '11d19022266ecb88c7f4e473ac20279dc02fbd08', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
     }
     static get is() { return "duet-radio"; }
     static get encapsulation() { return "shadow"; }
@@ -191,6 +209,7 @@ export class DuetRadio {
         return {
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -205,11 +224,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -224,12 +243,12 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -244,12 +263,12 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -264,12 +283,12 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleIndex": {
                 "type": "string",
+                "attribute": "accessible-index",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -284,11 +303,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-index",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -309,12 +328,12 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -329,11 +348,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -348,11 +367,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -367,11 +386,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -392,12 +411,12 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -412,12 +431,12 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -432,12 +451,12 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "blockEvents": {
                 "type": "boolean",
+                "attribute": "block-events",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -452,12 +471,12 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "block-events",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -472,11 +491,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -491,12 +510,12 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -511,11 +530,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "role": {
                 "type": "string",
+                "attribute": "role",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -530,11 +549,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             },
             "groupDisabled": {
                 "type": "boolean",
+                "attribute": "group-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -552,11 +571,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-disabled",
                 "reflect": false
             },
             "groupDirection": {
                 "type": "string",
+                "attribute": "group-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -580,11 +599,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-direction",
                 "reflect": false
             },
             "groupResponsive": {
                 "type": "boolean",
+                "attribute": "group-responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -602,11 +621,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "group-responsive",
                 "reflect": false
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -621,11 +640,11 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -640,7 +659,6 @@ export class DuetRadio {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             }
         };

package/lib/collection/components/duet-radio-group/duet-radio-group.js

@@ -11,32 +11,71 @@ import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 export class DuetRadioGroup {
     constructor() {
         /**
-         * Component event handling.
+         * Direction of the radio group.
          */
-        this.onSelect = (ev) => {
-            const selectedRadio = ev.target;
-            if (selectedRadio) {
-                this.value = selectedRadio.value;
-            }
-            // Prevent events from bubbling up the DOM tree in case
-            // this group is a sub-group of another choice group.
-            ev.cancelBubble = true;
-        };
         this.direction = "vertical";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Theme of the radio group.
+         */
         this.theme = "";
+        /**
+         * Display radio group in error state along with an error message.
+         */
         this.error = "";
+        /**
+         * Tooltip to display next to the label of the radio group.
+         */
         this.tooltip = "";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
         this.tooltipDirection = "auto";
-        this.name = undefined;
+        /**
+         * Legend displayed for the radio 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 radio group.
+         */
         this.caption = "";
+        /**
+         * Enable or disable the automatic responsive behaviour of the radio 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.value = undefined;
-        this.disabled = undefined;
+        /**
+         * Sets whether making a choice is required or optional. Will set contained duet-radio components to required as well.
+         */
         this.required = false;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
         this.accessibleLiveError = "polite";
+        /**
+         * Component event handling.
+         */
+        this.onSelect = (ev) => {
+            const selectedRadio = ev.target;
+            if (selectedRadio) {
+                this.value = selectedRadio.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.
@@ -131,6 +170,7 @@ export class DuetRadioGroup {
         return {
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -151,12 +191,12 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"vertical\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -177,12 +217,12 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -203,12 +243,12 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -223,12 +263,12 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -243,12 +283,12 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "tooltipDirection": {
                 "type": "string",
+                "attribute": "tooltip-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -269,12 +309,12 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -289,11 +329,11 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -308,12 +348,12 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"Label\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -328,12 +368,12 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -348,12 +388,12 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "responsive": {
                 "type": "boolean",
+                "attribute": "responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -368,12 +408,12 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -388,11 +428,11 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -407,11 +447,11 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -426,12 +466,12 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -446,7 +486,6 @@ export class DuetRadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             }