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

package/lib/collection/components/duet-range-slider/duet-range-slider.js

@@ -26,6 +26,67 @@ export class DuetRangeSlider {
          */
         this.rangeId = createID("DuetRange");
         this.proxyId = createID("DuetRange");
+        /**
+         * Theme of the input.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = 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;
+        /**
+         * Makes the input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Minimum value.
+         */
+        this.min = 0;
+        /**
+         * Label for the range slider.
+         */
+        this.label = "label";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Unit for the range slider.
+         */
+        this.unit = "";
+        /**
+         * Maximum value.
+         */
+        this.max = 100;
+        /**
+         * Step amount.
+         */
+        this.step = 1;
+        /**
+         * Locale used to format the entered value.
+         */
+        this.locale = "fi-FI";
+        /**
+         * Value of the input.
+         */
+        this.value = 0;
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the duetChange
+         * event after each keystroke.
+         */
+        this.debounce = 0;
         /**
          * Component event handling.
          */
@@ -54,28 +115,6 @@ export class DuetRangeSlider {
                 });
             }, this.debounce);
         };
-        this.theme = "";
-        this.margin = "auto";
-        this.expand = false;
-        this.identifier = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.disabled = false;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.min = 0;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.labelHidden = false;
-        this.unit = "";
-        this.max = 100;
-        this.step = 1;
-        this.locale = "fi-FI";
-        this.value = 0;
-        this.debounce = 0;
     }
     /**
      * Component lifecycle events.
@@ -141,6 +180,7 @@ export class DuetRangeSlider {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -161,12 +201,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -187,12 +227,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -207,12 +247,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -227,11 +267,11 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -246,11 +286,11 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -265,12 +305,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -285,12 +325,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -305,11 +345,11 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -324,11 +364,11 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -343,11 +383,11 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -362,11 +402,11 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false
             },
             "min": {
                 "type": "number",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -381,12 +421,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -401,12 +441,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"label\""
             },
             "labelColor": {
                 "type": "string",
+                "attribute": "label-color",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -421,11 +461,11 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-color",
                 "reflect": false
             },
             "labelWeight": {
                 "type": "string",
+                "attribute": "label-weight",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTextFontWeight",
@@ -446,11 +486,11 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-weight",
                 "reflect": false
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -465,12 +505,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "unit": {
                 "type": "string",
+                "attribute": "unit",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -485,12 +525,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "unit",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "max": {
                 "type": "number",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -505,12 +545,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "100"
             },
             "step": {
                 "type": "number",
+                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -525,12 +565,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "step",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "locale": {
                 "type": "string",
+                "attribute": "locale",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLocale",
@@ -551,12 +591,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "locale",
                 "reflect": false,
                 "defaultValue": "\"fi-FI\""
             },
             "value": {
                 "type": "number",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -571,12 +611,12 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -591,7 +631,6 @@ export class DuetRangeSlider {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
             }

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -14,19 +14,34 @@ export class DuetRangeStepper {
     constructor() {
         this.leftBn = createID("duetRangeStepper-left");
         this.rightBn = createID("duetRangeStepper-right");
-        this.handleClick = (e, direction) => {
-            e.preventDefault();
-            this.stepIndex += direction;
-            this.clampStepIndex();
-            this.handleStepClick(e);
-        };
         this.buttonLeftDisabled = false;
         this.buttonRightDisabled = false;
+        /**
+         * Theme of the component.
+         */
         this.theme = "";
+        /**
+         * Makes the controls of range-stepper component disabled.
+         */
         this.disabled = false;
+        /**
+         * Start value
+         * @default 1
+         */
         this.stepIndex = 1;
+        /**
+         * How big is the step
+         * @default 50
+         */
         this.stepSize = 50;
+        /**
+         * Total of
+         * @default undefined
+         */
         this.total = 1000;
+        /**
+         * Default range stepper labels
+         */
         this.ariaLabelsDefaults = {
             en: {
                 next_increment: "Next range increment",
@@ -44,8 +59,20 @@ export class DuetRangeStepper {
                 x_of_y: "{0}–{1} av {2}",
             },
         };
+        /**
+         * Default pagination labels
+         */
         this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
+        /**
+         * Used to indicate which dom element with ID this element controls
+         */
         this.ariaControls = "";
+        this.handleClick = (e, direction) => {
+            e.preventDefault();
+            this.stepIndex += direction;
+            this.clampStepIndex();
+            this.handleStepClick(e);
+        };
     }
     watchStepIndexStateHandler(newValue) {
         if (this.leftBnRef && this.rightBnRef) {
@@ -190,6 +217,7 @@ export class DuetRangeStepper {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -210,12 +238,12 @@ export class DuetRangeStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -230,12 +258,12 @@ export class DuetRangeStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "stepIndex": {
                 "type": "number",
+                "attribute": "step-index",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -253,12 +281,12 @@ export class DuetRangeStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "step-index",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "stepSize": {
                 "type": "number",
+                "attribute": "step-size",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -276,12 +304,12 @@ export class DuetRangeStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "step-size",
                 "reflect": false,
                 "defaultValue": "50"
             },
             "total": {
                 "type": "number",
+                "attribute": "total",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -299,12 +327,12 @@ export class DuetRangeStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "total",
                 "reflect": false,
                 "defaultValue": "1000"
             },
             "ariaLabelsDefaults": {
                 "type": "unknown",
+                "attribute": "accessible-labels-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -329,6 +357,7 @@ export class DuetRangeStepper {
             },
             "ariaLabels": {
                 "type": "unknown",
+                "attribute": "accessible-labels",
                 "mutable": true,
                 "complexType": {
                     "original": "Record<string, string>",
@@ -352,6 +381,7 @@ export class DuetRangeStepper {
             },
             "ariaControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -366,7 +396,6 @@ export class DuetRangeStepper {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false,
                 "defaultValue": "\"\""
             }