@duetds/components 10.0.0-alpha.8 → 10.0.0

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: 'a18e1bea800f34ba634ddbdd7ef3b2741ac05693', onClick: this.onClick, class: {
+        return (h(Host, { key: '5b1a38835b8478e9e31e2893f654d4a7da0de880', 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: 'dd86df6b4f97f44ee5371a2e586d48eb6673e434', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: 'bf1968e5b50d89b25ccb6659f6b55450bf9c1d04', name: "input" }), h("label", { key: '3aa9841af26a9ad017a09c58e49f793a08f3d2a5', inert: true, ref: element => (this.labelElement = element), class: {
+            } }, h("div", { key: '7397b43b1104dbdc870ec0ad65793bd372062eaf', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, h("slot", { key: '8daf569056a859f5362236e546a61e958ba4bcaf', name: "input" }), h("label", { key: '3acd012b17207cf38a15085d2cc868b3e4cc8c1c', 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: '83ebf1480f51c230592b3c03c35d14583c7ffa8c', class: "duet-label-content" }, this.hasLabel ? h("slot", { name: "label" }) : this.label)))));
+            } }, h("div", { key: '5fb433fd2fe57f3e560fdefcabff68999301596a', 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.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
   width: 100%;
 }