@duetds/components 10.0.0-alpha.8 → 10.0.0

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

@@ -8,6 +8,7 @@ import { enableUserIsTabbing, subscribeTabbingChange, unsubscribeTabbingChange }
 import { getLocaleString } from "../../utils/language-utils";
 export class DuetChip {
     constructor() {
+        this.focus = false;
         /**
          * Own Properties.
          */
@@ -22,6 +23,47 @@ export class DuetChip {
             en: "Selected, remove with backspace",
             sv: "Valt, ta bort med backsteg",
         };
+        this.inputChipHover = false;
+        this.inputChipDeleteFocus = false;
+        /**
+         * Variation of the chip.
+         * Button should be used to present a list of actions or suggestions. It behaves like a button and must be used
+         * together with a click handler. Filter acts like a checkbox, it can be toggled on or off, and it should be
+         * used with a value. Input represents items input by the user, and the chip can be removed with a click.
+         * Radio behaves like a radio button, it can be toggled on or off, and it should be used with a value and name.
+         */
+        this.variation = "button";
+        /**
+         * Size of the chip. Use "large" for a chip that has the same height as default duet-input and duet-button.
+         */
+        this.size = "medium";
+        /**
+         * Icon to display to the left of the chip content.
+         */
+        this.icon = "";
+        /**
+         * Theme of the button.
+         */
+        this.theme = "";
+        /**
+         * Selected state of the input chip. Deleting the input chip with backspace key should be done only for a selected
+         * chip. If a chip is not selected, backspace key should select it.
+         * @internal
+         */
+        this.selected = false;
+        /**
+         * Checked state of the filter chip.
+         */
+        this.checked = false;
+        /**
+         * Makes the chip look inactive and announced as unavailable to assistive technologies. Prevents the default action.
+         * Not available for the input variation.
+         */
+        this.disabled = false;
+        /**
+         * Use this property to add an aria-haspopup attribute.
+         */
+        this.accessiblePopup = "false";
         this.enforceNoDisabledSelected = () => {
             if (this.disabled && this.checked) {
                 console.error("Duet error: pre-selected chip may not be disabled");
@@ -41,7 +83,7 @@ export class DuetChip {
             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.ariaDisabled = this.disabled ? "true" : undefined;
@@ -187,25 +229,6 @@ export class DuetChip {
             });
             this.element.remove();
         };
-        this.focus = false;
-        this.popupElement = undefined;
-        this.popupOpen = undefined;
-        this.inputChipHover = false;
-        this.inputChipDeleteFocus = false;
-        this.accessibleLabel = undefined;
-        this.variation = "button";
-        this.size = "medium";
-        this.popup = undefined;
-        this.icon = "";
-        this.theme = "";
-        this.identifier = undefined;
-        this.value = undefined;
-        this.name = undefined;
-        this.selected = false;
-        this.checked = false;
-        this.disabled = false;
-        this.accessibleExpanded = undefined;
-        this.accessiblePopup = "false";
     }
     clearOtherRadioButtons() {
         if (this.variation === "radio" && this.checked) {
@@ -217,11 +240,17 @@ export class DuetChip {
             });
         }
     }
+    removeDisabledAttributeWhenFalse() {
+        if (!this.disabled) {
+            this.element.removeAttribute("disabled");
+        }
+    }
     /**
      * Component lifecycle events.
      */
     componentWillLoad() {
         inheritGlobalTheme(this);
+        this.removeDisabledAttributeWhenFalse();
         this.popupSetUp();
         this.enforceNoDisabledSelected();
     }
@@ -303,7 +332,7 @@ export class DuetChip {
             onBlur: this.onBlur,
             ref: el => (this.focusableElement = el),
         };
-        return (h(Host, { key: '5ddf4eae8cb9deb9390f694c3a0a1bc9981d4359', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: '121adcccdad8d637a2fc60482831f988948e2ac7', class: classes }, h("button", Object.assign({ key: '6862bfd33573fa7a7cf74a80abb28edb7b1d31af', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '16cdf94c6a9d411ed7dcdfd91fedb3653631382f', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'd913024eebba49b2f489c6859c8b0fb5395752cf', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '0c90ce6861f802bec7d4d9462fdd08e7b8130179' })))), this.variation === "input" && (h("span", { key: '55ddebe4c051b4806e58275c3c500e594c7bbe24', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: 'e37c4f5cc015d6487de4a65c3339369a4e89962e', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: 'b213a65e417e8a1900d42b19c59f8d7c9ef2fa94', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: '235ba630d4861c5b89074208bfe8bec3aafc4cb2', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '4952f588693c543bb5e940e62ad82a2afc1828a0' })), h("button", { key: 'e92f1e564b70b2041845bb3d25f3dd02277d2eae', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: '14ee83c2409dc44690e041ee80542d555e7f1e93', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'b1ca9ec7ec6fce48f4c33d2029ccd043a79dd803', class: classes }, h("input", Object.assign({ key: 'dbbf118c242b3a04c7df17eaf04a6f27fcc0eb40', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: '898206f44f12092a9d4d695a8e7d09a56297671f', htmlFor: identifier }, this.icon && (h("span", { key: '0c337ba4f6e48d81752ff411e467f346fc87c311', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'a24f796b0817c43c51e3e1676ab9d65a4fe07ad3', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '955cf61a6b57d6edc3c8d8350fb469efffad3803', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '8f0b8996230a8dfe83414e89b7c796121de41526' }), this.popupElement && (h("span", { key: '37a42083a01d64d81bec08dcb9464ec450e17820', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'cb1d4646dd01cee1b69d45988aba671e8d606a91', name: "action-arrow-down-small", size: "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '89d0d76772a7ff76799ee9d60329ca3dd81b7fd8', class: classes }, h("slot", { key: '391e609c08ee02a3b4153e5509736db840803e85', name: "input" }), h("label", { key: '233a831ddd3e6e850c69f4300f28b2b33a6c7dd3', htmlFor: identifier }, this.icon && (h("span", { key: '90edf79133173465641029aa158d36a568a31cfa', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'a055c58682160fac0822611b692264e0bedb7b6c', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '14ca6369602be7c44b16ee89eabd77e3c26bb941', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '63635381228bc16fc8f12cfed491dda50ce188a4' }))))));
+        return (h(Host, { key: 'fec47aedb512eead9eb64575e8f98b678e53f41d', class: { [this.variation]: true } }, this.variation === "button" && (h("span", { key: 'eff19ffc79c16ebd3bacbbdf5fb02ce1feb26c49', class: classes }, h("button", Object.assign({ key: '7e2f2da2eb55db53d182bab0283746543bbf7052', id: identifier, "aria-label": this.accessibleLabel, "aria-haspopup": this.getAccessiblePopup(), "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, name: this.name, value: this.value, onClick: this.disabled ? evt => evt.stopPropagation() : undefined }, focusHandlers), h("span", { key: '8ed98fe02241fe8ba40388532df90c056697a8eb', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'c9e40650866119a9c8609bce2525fb2e0ae7a4b7', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: '91d3860bd84c5665487440a84dc7139cc057da9b' })))), this.variation === "input" && (h("span", { key: '0edd53d2a0b5eaf47e8a7ba9260997ab8a893a90', class: classes, "aria-label": this.getAccessibleInputChipLabel() }, h("button", Object.assign({ key: '1390d0b60f05efe534ce7a93e0fd1e1013b4fcf7', id: identifier, class: "duet-chip-input-button", value: this.value, "aria-label": this.accessibleLabel, onMouseOver: () => (this.inputChipHover = true), onMouseOut: () => (this.inputChipHover = false), onClick: () => (this.selected = !this.selected) }, focusHandlers), h("span", { key: 'a77442337da66dcca7e46eac520ea2601a0f200e', class: "duet-chip-icon-container" }, this.icon && (h("duet-icon", { key: 'a95497c8e5dd1fbeb97715f19678c66448fc3981', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }))), h("slot", { key: 'b4d281bfb01a611d911b4ee1780c1c36df499943' })), h("button", { key: '621d6fc5dc6d2f820ab8f570921ee8335d6992dd', class: "duet-chip-remove-button", "aria-label": this.getAccessibleDeleteLabel(), onClick: this.onRemoveClick, onFocus: () => (this.inputChipDeleteFocus = true), onBlur: () => (this.inputChipDeleteFocus = false), ref: el => (this.deleteButtonElement = el) }, h("duet-icon", { key: 'bc8ef1b7a5026b38f088507488e372eb94fe24d3', name: "activity-close", size: "xx-small", margin: "none", color: "currentColor" })))), this.variation === "filter" && (h("span", { key: 'a23d77fb07a75d9dad213738cde1b8f7fc065a75', class: classes }, h("input", Object.assign({ key: 'bece465fae4c3428c895cb1e28f5bb370f7226d7', "aria-haspopup": this.getAccessiblePopup(), "aria-controls": (_a = this.popupElement) === null || _a === void 0 ? void 0 : _a.id, "aria-expanded": this.getAccessibleExpanded(), "aria-disabled": this.disabled ? "true" : undefined, id: identifier, type: "checkbox", name: this.name, value: this.value, checked: this.checked, onClick: this.onFilterClick, onChange: this.onFilterChange }, focusHandlers)), h("label", { key: 'c8ca07278535a0735aaf0b3609b057b7b07d73a7', htmlFor: identifier }, this.icon && (h("span", { key: 'b2040b8ad45d57cae370db873126f6af04103e35', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'de63c47bcd290a7bb278d18044dcbb59f3d36bdd', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: 'e85e6a5937affd776ad433d0fff928e2985606f6', name: "messaging-checked-small", size: this.size === "large" ? "x-small" : "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: 'be966f534808d4c13283c7a428b8bd5f220f57ac' }), this.popupElement && (h("span", { key: '1f3d21e7eba82aa859081602aa42a9f84d320de2', class: "duet-chip-popup-disclosure" }, h("duet-icon", { key: 'af6883b215be51bbfd4d4a763f9a7f93a3196368', name: "action-arrow-down-small", size: this.size === "large" ? "xx-small" : "xxx-small", margin: "none", color: "currentColor" })))))), this.variation === "radio" && (h("span", { key: '30bd7e485658623c6bb9ee6f72f6e90a145fcd62', class: classes }, h("slot", { key: 'da5cb9135a68d3d76a81d5c129b4065dc79dcb58', name: "input" }), h("label", { key: 'bc19df62252b9a253d26bc989c6c8120c89d56a3', htmlFor: identifier }, this.icon && (h("span", { key: 'd35af1432d982b9ba952abed1395b90748501f11', class: "duet-chip-icon-container" }, h("duet-icon", { key: 'd75598a3891d73aaac169b59201294c462fe3e5c', name: this.icon, size: this.size === "large" ? "small" : "x-small", margin: "none", color: "currentColor" }), h("duet-icon", { key: '88a3bbd9d095a53fef6b723f96fc3818b28889db', name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor", class: "check-mark" }))), h("slot", { key: '7c2b2e07d9b91726f23248f13abe2c7a0816ddfe' }))))));
     }
     static get is() { return "duet-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -321,6 +350,7 @@ export class DuetChip {
         return {
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -335,11 +365,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetChipVariation",
@@ -360,12 +390,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"button\""
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetChipSize",
@@ -386,12 +416,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
             "popup": {
                 "type": "string",
+                "attribute": "popup",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -406,11 +436,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "popup",
                 "reflect": false
             },
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetIconName",
@@ -431,12 +461,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -457,12 +487,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -477,11 +507,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false
             },
             "value": {
                 "type": "string",
+                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -496,11 +526,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -515,11 +545,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": false
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -537,12 +567,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -557,12 +587,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -577,12 +607,12 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accessibleExpanded": {
                 "type": "boolean",
+                "attribute": "accessible-expanded",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -597,11 +627,11 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-expanded",
                 "reflect": true
             },
             "accessiblePopup": {
                 "type": "string",
+                "attribute": "accessible-popup",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -616,7 +646,6 @@ export class DuetChip {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-popup",
                 "reflect": true,
                 "defaultValue": "\"false\""
             }
@@ -789,6 +818,9 @@ export class DuetChip {
         return [{
                 "propName": "checked",
                 "methodName": "clearOtherRadioButtons"
+            }, {
+                "propName": "disabled",
+                "methodName": "removeDisabledAttributeWhenFalse"
             }];
     }
 }

package/lib/collection/components/duet-choice/duet-checkmark.css

@@ -71,4 +71,8 @@
     height: 11.8518518519px;
     opacity: 1;
   }
+}
+:host(.duet-theme-turva2.duet-theme-turva) .checked .duet-checkmark-container {
+  background: rgb(23, 42, 59);
+  border-color: rgb(23, 42, 59) !important;
 }

package/lib/collection/components/duet-choice/duet-checkmark.js

@@ -5,10 +5,25 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 export class DuetCheckmark {
     constructor() {
+        /**
+         * Theme
+         */
         this.theme = "";
+        /**
+         * Checked
+         */
         this.checked = false;
+        /**
+         * Checked
+         */
         this.presentationOnly = false;
+        /**
+         * Checked
+         */
         this.center = false;
+        /**
+         * Type
+         */
         this.type = "checkbox";
     }
     /**
@@ -18,11 +33,11 @@ export class DuetCheckmark {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '816a3ac9535fd26b046d08026281ac22a04e42ac', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: '11fd99290f4e4f3454beba9f53a86bf9707ed733', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: 'f58d6e9f6047afcc52bdf92b4aa5f2c22732a2de', class: {
+        return (h(Host, { key: '9f320db3e8549d7d12de134f013789c1f412b947', class: { "duet-theme-turva": this.theme === "turva" } }, h("div", { key: 'a8fe605a230fd34d9714bd5194c281b87394bd24', role: this.presentationOnly ? "presentation" : null, class: { checked: this.checked } }, h("div", { key: '91fabdc145a023efc8317ef543296d4e5e2509d9', class: {
                 "duet-checkmark-container": true,
                 center: this.center,
                 "duet-checkmark-radio": this.type === "radio",
-            } }, this.checked && h("div", { key: '3e2d68f14bba50cbc66021180eaaa9efaa9b26d9', class: "duet-checkmark" })))));
+            } }, this.checked && h("div", { key: '9a418c3b3cd7c451f52003eb5efe16e90a4d5841', class: "duet-checkmark" })))));
     }
     static get is() { return "duet-checkmark"; }
     static get originalStyleUrls() {
@@ -39,6 +54,7 @@ export class DuetCheckmark {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -59,12 +75,12 @@ export class DuetCheckmark {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "checked": {
                 "type": "boolean",
+                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -79,12 +95,12 @@ export class DuetCheckmark {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "checked",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "presentationOnly": {
                 "type": "boolean",
+                "attribute": "presentation-only",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -99,12 +115,12 @@ export class DuetCheckmark {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "presentation-only",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "center": {
                 "type": "boolean",
+                "attribute": "center",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -119,12 +135,12 @@ export class DuetCheckmark {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "center",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetChoiceType",
@@ -145,7 +161,6 @@ export class DuetCheckmark {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "type",
                 "reflect": true,
                 "defaultValue": "\"checkbox\""
             }