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

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

@@ -67,6 +67,143 @@ export class DuetInput {
             fi: "valittu",
             sv: "valt",
         };
+        /**
+         * State() variables
+         */
+        this.language = getLanguage();
+        /**
+         * Indicates whether the input is focused.
+         */
+        this.isFocused = false;
+        /**
+         * Indicates the id or a string of space seperated ids of a component(s) that describes the input.
+         */
+        this.accessibleDescribedBy = "";
+        /**
+         * Indicates value of any popup element associated with the input.
+         */
+        this.accessibleHasPopup = undefined;
+        /**
+         * 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;
+        /**
+         * 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";
+        /**
+         * Set the amount of time, in milliseconds, to wait to trigger the duetChange
+         * event after each keystroke.
+         */
+        this.debounce = 0;
+        /**
+         * If set, the input field will display a clear button that can be accessed with tabbing.
+         */
+        this.clear = false;
+        /**
+         * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
+         * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+         */
+        this.echoPlaceholder = false;
+        /**
+         * Theme of the input.
+         */
+        this.theme = "";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = 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;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Alignment of the input element
+         */
+        this.inputAlign = "left";
+        /**
+         * Padding of the input element. Use this only in special cases, never with regular forms.
+         * Setting this to other than the default will not work properly with button variation or
+         * together with icons.
+         */
+        this.inputPadding = "medium";
+        /**
+         * 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;
+        /**
+         * Type of the input.
+         */
+        this.type = "text";
+        /**
+         * Variation of button. Use "button" to render a button element next to the input, "button-left" to render a button on
+         * the left edge of the input, and "revealable" to render a button that reveals the password.
+         */
+        this.variation = "default";
+        /**
+         * @internal
+         * Render a container for chips
+         */
+        this.chips = false;
+        /**
+         * Label for the input.
+         */
+        this.label = "Label";
+        /**
+         * Display the input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Enable numeric keyboard for the input.
+         */
+        this.numericKeyboard = false;
+        /**
+         * @internal
+         * Used internally in Duet to adjust whether this component acts as e.g. number input.
+         */
+        this.component = "input";
+        /**
+         * Enable or disable automatic completion by the browser
+         */
+        this.autoComplete = "on";
+        /**
+         * A regular expression that matches any characters which should be *disallowed*.
+         * This differs from `pattern`, as it actively prevents users entering any characters which match the regular expression.
+         * e.g. the following will disallow any non-numeric characters `[^0-9]`
+         */
+        this.disallowPattern = null;
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        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";
         /**
          * Component event handling.
          */
@@ -181,54 +318,6 @@ export class DuetInput {
             }
             return this.type;
         };
-        this.language = getLanguage();
-        this.isPasswordRevealed = undefined;
-        this.isFocused = false;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleAutocomplete = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleExpanded = undefined;
-        this.accessibleDescribedBy = "";
-        this.accessibleHasPopup = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleLiveError = "polite";
-        this.debounce = 0;
-        this.clear = false;
-        this.caption = undefined;
-        this.echoPlaceholder = false;
-        this.theme = "";
-        this.expand = false;
-        this.disabled = false;
-        this.identifier = undefined;
-        this.margin = "auto";
-        this.inputAlign = "left";
-        this.inputPadding = "medium";
-        this.required = false;
-        this.type = "text";
-        this.variation = "default";
-        this.chips = false;
-        this.label = "Label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.error = "";
-        this.labelHidden = false;
-        this.numericKeyboard = false;
-        this.name = undefined;
-        this.pattern = undefined;
-        this.maxlength = undefined;
-        this.minlength = undefined;
-        this.placeholder = undefined;
-        this.component = "input";
-        this.role = undefined;
-        this.icon = undefined;
-        this.autoComplete = "on";
-        this.disallowPattern = null;
-        this.value = undefined;
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
     }
     disallowedPatternChange() {
         this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "gu") : null;
@@ -488,6 +577,7 @@ export class DuetInput {
         return {
             "accessibleActiveDescendant": {
                 "type": "string",
+                "attribute": "accessible-active-descendant",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -502,11 +592,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-active-descendant",
                 "reflect": false
             },
             "accessibleAutocomplete": {
                 "type": "string",
+                "attribute": "accessible-autocomplete",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -521,11 +611,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-autocomplete",
                 "reflect": false
             },
             "accessibleControls": {
                 "type": "string",
+                "attribute": "accessible-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -540,11 +630,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-controls",
                 "reflect": false
             },
             "accessibleOwns": {
                 "type": "string",
+                "attribute": "accessible-owns",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -559,11 +649,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-owns",
                 "reflect": false
             },
             "accessibleExpanded": {
                 "type": "string",
+                "attribute": "accessible-expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -578,11 +668,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-expanded",
                 "reflect": false
             },
             "accessibleDescribedBy": {
                 "type": "string",
+                "attribute": "accessible-described-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -597,12 +687,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-described-by",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "accessibleHasPopup": {
                 "type": "string",
+                "attribute": "accessible-has-popup",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -617,12 +707,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-has-popup",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDetails": {
                 "type": "string",
+                "attribute": "accessible-details",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -637,12 +727,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-details",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -657,12 +747,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -677,12 +767,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "accessibleLiveError": {
                 "type": "string",
+                "attribute": "accessible-live-error",
                 "mutable": false,
                 "complexType": {
                     "original": "\"off\" | \"polite\" | \"assertive\"",
@@ -697,12 +787,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""
             },
             "debounce": {
                 "type": "number",
+                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -717,12 +807,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "debounce",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "clear": {
                 "type": "boolean",
+                "attribute": "clear",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -737,12 +827,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clear",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -757,11 +847,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false
             },
             "echoPlaceholder": {
                 "type": "boolean",
+                "attribute": "echo-placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -776,12 +866,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "echo-placeholder",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -802,12 +892,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "expand": {
                 "type": "boolean",
+                "attribute": "expand",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -822,12 +912,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "expand",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -842,12 +932,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -862,11 +952,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -887,12 +977,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "inputAlign": {
                 "type": "string",
+                "attribute": "input-align",
                 "mutable": false,
                 "complexType": {
                     "original": "\"left\" | \"right\"",
@@ -907,12 +997,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input-align",
                 "reflect": false,
                 "defaultValue": "\"left\""
             },
             "inputPadding": {
                 "type": "string",
+                "attribute": "input-padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetInputPadding",
@@ -933,12 +1023,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "input-padding",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "required": {
                 "type": "boolean",
+                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -953,12 +1043,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetInputType",
@@ -979,12 +1069,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "\"text\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetVariationType",
@@ -1005,12 +1095,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "chips": {
                 "type": "boolean",
+                "attribute": "chips",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1028,12 +1118,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "chips",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1048,12 +1138,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"Label\""
             },
             "labelColor": {
                 "type": "string",
+                "attribute": "label-color",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1068,11 +1158,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-color",
                 "reflect": false
             },
             "labelWeight": {
                 "type": "string",
+                "attribute": "label-weight",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTextFontWeight",
@@ -1093,11 +1183,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-weight",
                 "reflect": false
             },
             "error": {
                 "type": "string",
+                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1112,12 +1202,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "error",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1132,12 +1222,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "numericKeyboard": {
                 "type": "boolean",
+                "attribute": "numeric-keyboard",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1152,12 +1242,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "numeric-keyboard",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1172,11 +1262,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "pattern": {
                 "type": "string",
+                "attribute": "pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1191,11 +1281,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "pattern",
                 "reflect": false
             },
             "maxlength": {
                 "type": "number",
+                "attribute": "maxlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1210,11 +1300,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "maxlength",
                 "reflect": false
             },
             "minlength": {
                 "type": "number",
+                "attribute": "minlength",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -1229,11 +1319,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "minlength",
                 "reflect": false
             },
             "placeholder": {
                 "type": "string",
+                "attribute": "placeholder",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1248,11 +1338,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "placeholder",
                 "reflect": false
             },
             "component": {
                 "type": "string",
+                "attribute": "component",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetInputComponentType",
@@ -1276,12 +1366,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "component",
                 "reflect": false,
                 "defaultValue": "\"input\""
             },
             "role": {
                 "type": "string",
+                "attribute": "role",
                 "mutable": false,
                 "complexType": {
                     "original": "string | null",
@@ -1296,11 +1386,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "role",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -1321,11 +1411,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false
             },
             "autoComplete": {
                 "type": "string",
+                "attribute": "auto-complete",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1340,12 +1430,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "auto-complete",
                 "reflect": false,
                 "defaultValue": "\"on\""
             },
             "disallowPattern": {
                 "type": "string",
+                "attribute": "disallow-pattern",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1360,12 +1450,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disallow-pattern",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1380,11 +1470,11 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "validity": {
                 "type": "unknown",
+                "attribute": "validity",
                 "mutable": false,
                 "complexType": {
                     "original": "ValidityState",
@@ -1407,6 +1497,7 @@ export class DuetInput {
             },
             "tooltip": {
                 "type": "string",
+                "attribute": "tooltip",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -1421,12 +1512,12 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "tooltipDirection": {
                 "type": "string",
+                "attribute": "tooltip-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTooltipDirection",
@@ -1447,7 +1538,6 @@ export class DuetInput {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             }