@duetds/components 10.0.0-alpha.9 → 10.0.0

package/lib/collection/components/duet-share-chart/duet-share-chart.css

@@ -0,0 +1,82 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+}
+
+.duet-share-chart-horizontal-bar {
+  height: 16px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+}
+.duet-share-chart-horizontal-bar .duet-share-chart-share {
+  box-sizing: border-box;
+  display: inline-block;
+  height: 16px;
+  border-color: rgb(255, 255, 255);
+  border-style: solid;
+  border-width: 0 1px;
+}
+.duet-share-chart-horizontal-bar .duet-share-chart-share:first-child {
+  border-left-width: 0;
+  border-radius: 4px 0 0 4px;
+}
+.duet-share-chart-horizontal-bar .duet-share-chart-share:last-child {
+  border-right-width: 0;
+  border-radius: 0 4px 4px 0;
+}
+
+.duet-share-chart-item-list {
+  padding: 0 4px;
+  margin: 0;
+  list-style: none;
+}
+.duet-share-chart-item-list li {
+  display: flex;
+  font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  color: rgb(8, 42, 77);
+}
+.duet-share-chart-item-list li.duet-theme-turva {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: rgb(23, 28, 58);
+}
+.duet-share-chart-item-list span {
+  display: inline-block;
+}
+.duet-share-chart-item-list .duet-share-chart-item-color {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  margin-top: calc((1.5rem - 12px) / 2);
+  margin-right: 12px;
+  border-radius: 4px;
+}
+.duet-share-chart-item-list .duet-share-chart-item-value {
+  font-weight: 600;
+}
+
+:host(.duet-theme-turva2) .duet-share-chart-item-list li.duet-theme-turva {
+  color: rgb(23, 42, 59);
+}

package/lib/collection/components/duet-share-chart/duet-share-chart.js

@@ -0,0 +1,141 @@
+/*!
+ * Built with Duet Design System
+ */
+import { Build, h, Host } from "@stencil/core";
+import { inheritGlobalTheme } from "../../common";
+import { formatNumber } from "../../utils/language-utils";
+import { getElementsFromDefaultSlot } from "../../utils/slot-utils";
+import { getColorByName } from "../../utils/token-utils";
+export class DuetShareChart {
+    constructor() {
+        this.defaultColors = [
+            "lt-blue-800",
+            "lt-blue-600",
+            "success-600",
+            "success-800",
+            "warning-600",
+            "danger-600",
+            "danger-800",
+        ];
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * The string to show after each items value. When using "%" the enclosed items' values should add up to 100.
+         */
+        this.unit = "%";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    connectedCallback() {
+        if (!Build.isServer) {
+            this.childObserver = new MutationObserver(this.updateChartItems.bind(this));
+            this.childObserver.observe(this.element, {
+                childList: true,
+                subtree: true,
+                attributes: true,
+                characterData: true,
+            });
+        }
+        this.updateChartItems();
+    }
+    disconnectedCallback() {
+        if (this.childObserver) {
+            this.childObserver.disconnect();
+            this.childObserver = undefined;
+        }
+    }
+    /**
+     * Local methods
+     */
+    updateChartItems() {
+        const children = getElementsFromDefaultSlot(this.element).filter(el => el.tagName.toLocaleLowerCase() === "duet-share-chart-item");
+        this.items = children.map((child, index) => ({
+            text: child.textContent,
+            value: child.value,
+            color: child.color || this.defaultColors[index % this.defaultColors.length],
+        }));
+        this.itemsTotalValue = this.items.reduce((total, { value }) => total + value, 0);
+    }
+    render() {
+        return (h(Host, { key: 'c22523d7e91ce5ef59f5553ed847309cc45c9499' }, h("div", { key: '9aa4f2e4c117c5f7c30bce27585c7abc4d5568ea', class: "duet-share-chart-horizontal-bar", role: "presentation" }, this.items
+            .filter(i => !!i.value)
+            .map(item => (h("span", { class: "duet-share-chart-share", style: {
+                width: `${(item.value / this.itemsTotalValue) * 100}%`,
+                backgroundColor: getColorByName(item.color, this.theme),
+            } })))), h("ul", { key: '428d17dde9185b071455325d5d2195618f4a0267', class: "duet-share-chart-item-list" }, this.items.map(item => (h("li", { class: { "duet-theme-turva": this.theme === "turva" } }, h("span", { class: "duet-share-chart-item-color", style: { background: getColorByName(item.color, this.theme) } }), h("span", { class: "duet-share-chart-item-text" }, item.text, ":"), h("span", { class: "duet-share-chart-item-value" }, "\u00A0", formatNumber(item.value), "\u00A0", this.unit), this.unit !== "%" && (h("duet-visually-hidden", null, `${formatNumber((item.value / this.itemsTotalValue) * 100, 0)} %`)))))), h("slot", { key: '2f394e013dfe0a533524bef6f0649f57d1c2d957' })));
+    }
+    static get is() { return "duet-share-chart"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-share-chart.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-share-chart.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "attribute": "theme",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the component."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "unit": {
+                "type": "string",
+                "attribute": "unit",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The string to show after each items value. When using \"%\" the enclosed items' values should add up to 100."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"%\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "items": {}
+        };
+    }
+    static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-share-chart-item/duet-share-chart-item.js

@@ -0,0 +1,67 @@
+/*!
+ * Built with Duet Design System
+ */
+import { h, Host } from "@stencil/core";
+export class DuetShareChartItem {
+    constructor() {
+        /**
+         * The value of the item.
+         */
+        this.value = 0;
+    }
+    render() {
+        return (h(Host, { key: 'fb5eafa552f0f72600a3cec4b325ce891073f5bb' }, h("div", { key: 'b982b99b868fee7e0211a9b0dba7306eb2615874', hidden: true }, h("slot", { key: 'e8501789a378faa695408b024dd6d7c83aa3c1c9' }))));
+    }
+    static get is() { return "duet-share-chart-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color to use in the graph given as a Duet color token. If left out, the Share chart picks a color from a default set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "element"; }
+}

package/lib/collection/components/duet-show-more/duet-show-more.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   display: block;
 }
 
@@ -41,13 +41,20 @@
   display: block;
 }
 .duet-show-more .content:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-show-more .content:focus, .duet-show-more .content:focus.duet-theme-turva, .duet-theme-turva2 .duet-show-more .content:focus, .duet-show-more .content:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-show-more.duet-theme-turva {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: rgb(23, 28, 58);
 }
-.duet-show-more.duet-theme-turva .content:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+
+:host(.duet-theme-turva2) .duet-show-more.duet-theme-turva {
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-show-more/duet-show-more.js

@@ -10,62 +10,108 @@ export class DuetShowMore {
     constructor() {
         this.contentId = createID("DuetShowMore");
         this.buttonId = createID("DuetShowMoreButton");
-        this.handleKeyDown = (e) => {
-            if (isKeyboardClick(e)) {
-                this.handleClick(e);
-            }
-        };
-        this.handleClick = (e) => {
-            e.preventDefault();
-            const open = !this.open;
-            this.open = open;
-            if (open) {
-                setTimeout(() => {
-                    this.contentElement.focus();
-                }, 100);
-                setTimeout(() => {
-                    this.buttonAriaOpen = open;
-                }, 500);
-            }
-            else {
-                this.buttonAriaOpen = open;
-            }
-            this.duetToggle.emit({
-                component: "duet-show-more",
-                originalEvent: e,
-            });
-        };
+        this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
         this.buttonAriaOpen = false;
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * The currently active language. This setting also changes the logo to match
+         * the chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
         this.language = getLanguage();
+        /**
+         * Default translations for show more label.
+         */
         this.showMoreLabelDefaults = {
             fi: "Näytä lisää",
             sv: "Visa mer",
             en: "Show more",
         };
+        /**
+         * Show more label. Defaults to what is in showMoreLabelDefaults prop.
+         */
         this.showMoreLabel = getLocaleString(this.showMoreLabelDefaults);
+        /**
+         * Default translations for show less label.
+         */
         this.showLessLabelDefaults = {
             fi: "Näytä vähemmän",
             sv: "Visa mindre",
             en: "Show less",
         };
+        /**
+         * Show less label. Defaults to what is in showLessLabelDefaults prop.
+         */
         this.showLessLabel = getLocaleString(this.showLessLabelDefaults);
+        /**
+         * Default translations for show more accessible label.
+         */
         this.showMoreAccessibleLabelDefaults = {
             fi: "Näytä lisää tästä aiheesta",
             sv: "Visa mer om detta ämne",
             en: "Show more about this subject",
         };
+        /**
+         * Show more accessible label. Defaults to what is in showMoreAccessibleLabelDefaults prop.
+         */
         this.showMoreAccessibleLabel = getLocaleString(this.showMoreAccessibleLabelDefaults);
+        /**
+         * Default translations for show less accessible label.
+         */
         this.showLessAccessibleLabelDefaults = {
             fi: "Näytä vähemmän tästä aiheesta",
             sv: "Visa mindre om detta ämne",
             en: "Show less about this subject",
         };
+        /**
+         * Show less accessible label. Defaults to what is in showLessAccessibleLabelDefaults prop.
+         */
         this.showLessAccessibleLabel = getLocaleString(this.showLessAccessibleLabelDefaults);
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Controls the margin of the button component inside of show more.
+         */
         this.buttonMargin = "auto";
+        /**
+         * Controls the padding of the button component inside of show more.
+         */
         this.buttonPadding = "auto";
+        /**
+         * Is the component expanded or collapsed.
+         */
         this.open = false;
+        this.handleKeyDown = (e) => {
+            if (isKeyboardClick(e)) {
+                this.handleClick(e);
+            }
+        };
+        this.handleClick = (e) => {
+            e.preventDefault();
+            const open = !this.open;
+            this.open = open;
+            if (open) {
+                setTimeout(() => {
+                    this.contentElement.focus();
+                }, 100);
+                setTimeout(() => {
+                    this.buttonAriaOpen = open;
+                }, 500);
+            }
+            else {
+                this.buttonAriaOpen = open;
+            }
+            this.duetToggle.emit({
+                component: "duet-show-more",
+                originalEvent: e,
+            });
+        };
     }
     /**
      * Component lifecycle events.
@@ -90,12 +136,12 @@ export class DuetShowMore {
      * Always the last one of the class.
      */
     render() {
-        return (h(Host, { key: 'ef627056589c603539d480e8fa4b98d62926c407' }, h("div", { key: '2338f98e828eb9fa1752c410155f1950a7db6929', class: {
+        return (h(Host, { key: '5a2691671f8db729580e5e163f0a4172065b60a1' }, h("div", { key: 'd00e9ad7eec18c34b53f35be55000cc238e96d41', class: {
                 "duet-show-more": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
                 open: this.open,
-            } }, h("div", { key: '6843c1073eb5e3d32b240523cf4f6438aceda390', ref: ref => (this.contentElement = ref), class: { content: true }, id: this.contentId, tabindex: this.open ? "0" : "" }, h("div", { key: '1f50d0de6d6e467b6d001de9c14c40e765432b83', class: { "slotted-content": true } }, h("slot", { key: 'ae4f7c65883e2d7cbba0b9b7dad0403e8679dfe3' }))), h("duet-button", { key: '41ab2c46d81106aa01df2c856ed26ba7aa8ec298', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.open, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: 'f0f97a072bc00a04d6d2cdaceb03dd34b1571fbb' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
+            } }, h("div", { key: '5e4edfe4b958662c6d8a0bb0a5a2ad941d3f7bd7', ref: ref => (this.contentElement = ref), class: { content: true, "duet-theme-turva": this.theme === "turva" }, id: this.contentId, tabindex: this.open ? "-1" : "" }, h("div", { key: '474e8ecec72e945e59954844d55e2a7d09e53362', class: { "slotted-content": true } }, h("slot", { key: '553fee6703e708bb2a283b75033a7250017fa00c' }))), h("duet-button", { key: 'd4e86de6ba82e7d997ef4af2a2a45fb8b6f26a78', id: this.buttonId, variation: "plain", "accessible-label": this.buttonAriaOpen ? this.showLessAccessibleLabel : this.showMoreAccessibleLabel, "accessible-expanded": this.buttonAriaOpen ? "true" : "false", "accessible-controls": this.contentId, accessiblePressed: this.isSafariBrowser ? this.open : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "icon-right": true, icon: this.open ? "action-arrow-up-small" : "action-arrow-down-small", "icon-size": "medium-small", size: "small", margin: this.buttonMargin, padding: this.buttonPadding, theme: this.theme === "turva" ? "turva" : "default" }, h("span", { key: '5e1363182df7d60a43688b5ff4c6a91d6602eb19' }, this.open ? this.showLessLabel : this.showMoreLabel)))));
     }
     static get is() { return "duet-show-more"; }
     static get encapsulation() { return "shadow"; }
@@ -113,6 +159,7 @@ export class DuetShowMore {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -133,12 +180,12 @@ export class DuetShowMore {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -165,12 +212,12 @@ export class DuetShowMore {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": true,
                 "defaultValue": "getLanguage()"
             },
             "showMoreLabelDefaults": {
                 "type": "unknown",
+                "attribute": "show-more-label-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -195,6 +242,7 @@ export class DuetShowMore {
             },
             "showMoreLabel": {
                 "type": "string",
+                "attribute": "show-more-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -209,12 +257,12 @@ export class DuetShowMore {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-more-label",
                 "reflect": true,
                 "defaultValue": "getLocaleString(this.showMoreLabelDefaults)"
             },
             "showLessLabelDefaults": {
                 "type": "unknown",
+                "attribute": "show-less-label-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -239,6 +287,7 @@ export class DuetShowMore {
             },
             "showLessLabel": {
                 "type": "string",
+                "attribute": "show-less-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -253,12 +302,12 @@ export class DuetShowMore {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-less-label",
                 "reflect": true,
                 "defaultValue": "getLocaleString(this.showLessLabelDefaults)"
             },
             "showMoreAccessibleLabelDefaults": {
                 "type": "unknown",
+                "attribute": "show-more-accessible-label-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -283,6 +332,7 @@ export class DuetShowMore {
             },
             "showMoreAccessibleLabel": {
                 "type": "string",
+                "attribute": "show-more-accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -297,12 +347,12 @@ export class DuetShowMore {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-more-accessible-label",
                 "reflect": true,
                 "defaultValue": "getLocaleString(\n    this.showMoreAccessibleLabelDefaults\n  )"
             },
             "showLessAccessibleLabelDefaults": {
                 "type": "unknown",
+                "attribute": "show-less-accessible-label-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject",
@@ -327,6 +377,7 @@ export class DuetShowMore {
             },
             "showLessAccessibleLabel": {
                 "type": "string",
+                "attribute": "show-less-accessible-label",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -341,12 +392,12 @@ export class DuetShowMore {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "show-less-accessible-label",
                 "reflect": true,
                 "defaultValue": "getLocaleString(\n    this.showLessAccessibleLabelDefaults\n  )"
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -367,12 +418,12 @@ export class DuetShowMore {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "buttonMargin": {
                 "type": "string",
+                "attribute": "button-margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -393,12 +444,12 @@ export class DuetShowMore {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "buttonPadding": {
                 "type": "string",
+                "attribute": "button-padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -419,12 +470,12 @@ export class DuetShowMore {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "open": {
                 "type": "boolean",
+                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -439,7 +490,6 @@ export class DuetShowMore {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"
             }