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

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

@@ -27,6 +27,76 @@ export class DuetCombobox {
                 this.listContainer.style.setProperty("--popup-width", `${currentWidth - 2 * popupMenuPadding}px`);
             }
         }, 100));
+        this.processedItems = null;
+        this.inputValue = "";
+        this.listOpen = false;
+        // the selected item is based upon the DuetComboboxItem.id value
+        this.selectedItems = new Set();
+        // the activeItem number is based upon the array.index of the array stored in processedItems
+        this.activeItem = undefined;
+        /**
+         * Defaults for the accessible labels for the select items
+         */
+        this.accessibleLabelDefaults = {
+            en: {
+                heading: "Select:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtered",
+            },
+            fi: {
+                heading: "Valitse:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} suodatettu",
+            },
+            sv: {
+                heading: "Välj:",
+                item: "{name}",
+                itemFiltered: "{name}, {hiddenItems} filtrerade",
+            },
+        };
+        /**
+         * Accessible labels for the select items
+         */
+        this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
+        /**
+         * Label for the input if input is not provided as a slotted element.
+         */
+        this.label = "";
+        /**
+         * Caption for the input if input is not provided as a slotted element.
+         */
+        this.caption = "";
+        /**
+         * Theme of the combobox.
+         */
+        this.theme = "";
+        /**
+         * Force the user to make a selection (typing things in the input field will only be used for list search).
+         * This property also sync input value with selected value on blur.
+         */
+        this.force = false;
+        /**
+         * Allow multiple selections. Selections are displayed as DuetChips.
+         */
+        this.multiple = false;
+        /**
+         * A hook to overwrite how the values are displayed in the input field after a User select an item
+         * @example (item) => `${item.name} (${item.value})`
+         * @default undefined
+         */
+        this.formatter = (item) => item && item.name ? item.name : "";
+        /**
+         * Defines minimum number of characters that must be given to show search results
+         */
+        this.minCharacters = 0;
+        /**
+         * Defines if items list should always open after clicking on input
+         */
+        this.openListOnClick = false;
+        /**
+         * Defines if filtering of items should be done by includes or startsWith
+         */
+        this.filterType = "startsWith";
         this.onInputChange = async (e) => {
             const newValue = e.detail.value;
             this.inputValue = newValue;
@@ -123,40 +193,6 @@ export class DuetCombobox {
             }
             return;
         };
-        this.processedItems = null;
-        this.inputValue = "";
-        this.listOpen = false;
-        this.selectedItems = new Set();
-        this.activeItem = undefined;
-        this.accessibleLabelDefaults = {
-            en: {
-                heading: "Select:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtered",
-            },
-            fi: {
-                heading: "Valitse:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} suodatettu",
-            },
-            sv: {
-                heading: "Välj:",
-                item: "{name}",
-                itemFiltered: "{name}, {hiddenItems} filtrerade",
-            },
-        };
-        this.accessibleLabels = getLocaleString(this.accessibleLabelDefaults, getLanguage());
-        this.label = "";
-        this.caption = "";
-        this.theme = "";
-        this.force = false;
-        this.multiple = false;
-        this.items = undefined;
-        this.formatter = (item) => item && item.name ? item.name : "";
-        this.value = undefined;
-        this.minCharacters = 0;
-        this.openListOnClick = false;
-        this.filterType = "startsWith";
     }
     popupMenuOpenHandler() {
         if (this.listOpen) {
@@ -572,6 +608,7 @@ export class DuetCombobox {
         return {
             "accessibleLabelDefaults": {
                 "type": "string",
+                "attribute": "accessible-label-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -592,12 +629,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label-defaults",
                 "reflect": false,
                 "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtered\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} suodatettu\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtrerade\",\n    },\n  }"
             },
             "accessibleLabels": {
                 "type": "unknown",
+                "attribute": "accessible-labels",
                 "mutable": true,
                 "complexType": {
                     "original": "Record<string, string>",
@@ -621,6 +658,7 @@ export class DuetCombobox {
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -635,12 +673,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -655,12 +693,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -681,12 +719,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "force": {
                 "type": "boolean",
+                "attribute": "force",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -701,12 +739,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "force",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "multiple": {
                 "type": "boolean",
+                "attribute": "multiple",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -721,12 +759,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "items": {
                 "type": "any",
+                "attribute": "items",
                 "mutable": true,
                 "complexType": {
                     "original": "any",
@@ -741,11 +779,11 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "items",
                 "reflect": false
             },
             "formatter": {
                 "type": "unknown",
+                "attribute": "formatter",
                 "mutable": false,
                 "complexType": {
                     "original": "(item: DuetComboboxItem) => string",
@@ -776,6 +814,7 @@ export class DuetCombobox {
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string | string[]",
@@ -790,11 +829,11 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": false
             },
             "minCharacters": {
                 "type": "number",
+                "attribute": "min-characters",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -809,12 +848,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min-characters",
                 "reflect": false,
                 "defaultValue": "0"
             },
             "openListOnClick": {
                 "type": "boolean",
+                "attribute": "open-list-on-click",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -829,12 +868,12 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open-list-on-click",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "filterType": {
                 "type": "string",
+                "attribute": "filter-type",
                 "mutable": false,
                 "complexType": {
                     "original": "\"includes\" | \"startsWith\"",
@@ -849,7 +888,6 @@ export class DuetCombobox {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "filter-type",
                 "reflect": false,
                 "defaultValue": "\"startsWith\""
             }

package/lib/collection/components/duet-contact-card/duet-contact-card.js

@@ -15,16 +15,18 @@ export class DuetContactCard {
             sv: "Telefon",
         };
         this.language = getLanguage();
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.image = undefined;
-        this.name = undefined;
-        this.description = undefined;
-        this.email = undefined;
-        this.phone = undefined;
-        this.buttonText = undefined;
+        /**
+         * Button icon.
+         */
         this.buttonIcon = "form-date";
-        this.buttonUrl = undefined;
     }
     /**
      * Component lifecycle events.
@@ -66,6 +68,7 @@ export class DuetContactCard {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -86,12 +89,12 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -112,12 +115,12 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "image": {
                 "type": "string",
+                "attribute": "image",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -132,11 +135,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "image",
                 "reflect": false
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -151,11 +154,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "description": {
                 "type": "string",
+                "attribute": "description",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -170,11 +173,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "description",
                 "reflect": false
             },
             "email": {
                 "type": "string",
+                "attribute": "email",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -189,11 +192,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "email",
                 "reflect": false
             },
             "phone": {
                 "type": "string",
+                "attribute": "phone",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -208,11 +211,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "phone",
                 "reflect": false
             },
             "buttonText": {
                 "type": "string",
+                "attribute": "button-text",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -227,11 +230,11 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-text",
                 "reflect": false
             },
             "buttonIcon": {
                 "type": "string",
+                "attribute": "button-icon",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetIconName",
@@ -252,12 +255,12 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-icon",
                 "reflect": false,
                 "defaultValue": "\"form-date\""
             },
             "buttonUrl": {
                 "type": "string",
+                "attribute": "button-url",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -272,7 +275,6 @@ export class DuetContactCard {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-url",
                 "reflect": false
             }
         };

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -6,12 +6,18 @@ import { inheritGlobalTheme } from "../../common/themeable-component";
 import { subscribeTabbingChange, unsubscribeTabbingChange } from "../../utils/keyboard-utils";
 export class DuetCookieConsent {
     constructor() {
+        /**
+         * Adds accessible label for the cookie consent ok button.
+         */
+        this.accessibleLabel = "Hyväksyn evästeiden käytön";
+        /**
+         * Theme of the cookie consent banner.
+         */
+        this.theme = "";
         this.handleClick = e => {
             e.preventDefault();
             this.duetCookieConsent.emit({ component: "duet-cookie-consent" });
         };
-        this.accessibleLabel = "Hyväksyn evästeiden käytön";
-        this.theme = "";
     }
     handleFocusIn(event) {
         const eventPath = event.composedPath();
@@ -58,6 +64,7 @@ export class DuetCookieConsent {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -72,12 +79,12 @@ export class DuetCookieConsent {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "\"Hyv\u00E4ksyn ev\u00E4steiden k\u00E4yt\u00F6n\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -98,7 +105,6 @@ export class DuetCookieConsent {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             }