@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/collection/components/duet-grid/duet-grid.css

@@ -2,11 +2,11 @@
   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(.duet-grid-variation-flex) {
@@ -556,8 +556,6 @@
   grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   padding: 0;
-  /* stylelint-disable */
-  /* stylelint-disable */
 }
 @media (min-width: 36em) {
   :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
@@ -566,13 +564,11 @@
 }
 @container (min-width: 664px) {
   :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
-    /* stylelint-enable */
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
 @container (min-width: 1100px) {
   :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {
-    /* stylelint-enable */
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }

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

@@ -1,29 +1,56 @@
 /*!
  * Built with Duet Design System
  */
-import { media_query_large, media_query_medium, media_query_small } from "@duetds/tokens/lib/tokens.json";
-import { h, Host } from "@stencil/core";
-import { watchForElement, watchForOptions } from "../../utils/watch-options";
-function isGridItem(element) {
-    return element.tagName.toLowerCase() === "duet-grid-item";
-}
+import { Build, h, Host } from "@stencil/core";
+import { debounce } from "../../utils/js-utils";
 export class DuetGrid {
     constructor() {
-        this.mql = [
-            window.matchMedia(media_query_large.replace(/'/g, "")),
-            window.matchMedia(media_query_medium.replace(/'/g, "")),
-            window.matchMedia(media_query_small.replace(/'/g, "")),
-        ];
-        this.distributeFormElement = false;
+        /**
+         * Enable or disable the automatic responsive behaviour of the grid component.
+         * Setting this option to "true" makes sure that contents are stacked vertically
+         * on mobile (575px and under).
+         */
         this.responsive = false;
+        /**
+         * Switch the breakpoint used to trigger the content stacking. These match to
+         * similar media query tokens: $media-query-small and $media-query-medium.
+         */
         this.breakpoint = "small";
+        /**
+         * Direction of the grid items.
+         */
         this.direction = "horizontal";
+        /**
+         * Reverse the order of the grid items when horizontal. Usefull when we want the primary item
+         * to be on bottom right on desktop, but on top on mobile and the first for screen readers.
+         */
         this.rowReverse = false;
+        /**
+         * Adjusts the vertical alignment of the grid items, if set to "form-distribute"
+         * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
+         * so that they align even when displaying errors. Value "form_distribute" is deprecated, use
+         * "form-distribute" for new development.
+         */
         this.alignment = "top";
+        /**
+         * Adjusts the horizontal distribution of the grid items.
+         */
         this.distribution = "default";
+        /**
+         * Adjusts the horizontal alignment of the grid items on mobile (575px and under).
+         */
         this.mobile = "";
+        /**
+         * CSS grid based templates that can be used to create pre-defined layouts.
+         */
         this.gridTemplate = null;
     }
+    validateAlignment() {
+        if (this.alignment === "form_distribute") {
+            console.warn(`DuetGrid alignment value "form_distribute" is deprecated, replace with "form-distribute"`);
+            this.alignment = "form-distribute";
+        }
+    }
     /**
      * Private functions
      */
@@ -33,57 +60,59 @@ export class DuetGrid {
      * @returns {number}
      */
     outerHeight(element) {
-        const height = element.offsetHeight, style = window.getComputedStyle(element);
-        return ["top", "bottom"]
-            .map(side => parseInt(style[`margin-${side}`]))
-            .reduce((total, side) => total + side, height);
+        const height = element.offsetHeight;
+        const style = window.getComputedStyle(element);
+        const topMargin = parseInt(style.marginTop);
+        const bottomMargin = parseInt(style.marginBottom);
+        return topMargin + height + bottomMargin;
+    }
+    debounceWindowResizeHandler() {
+        debounce(this.updateGridItemsWithInputFields, 100);
     }
     /**
      * Component lifecycle events.
      */
     async connectedCallback() {
-        const el = this.element;
-        this.distributeFormElement = this.alignment === "form_distribute";
-        this.mutationO = watchForOptions(el, "duet-grid-item", () => {
-            this.updateGridItems();
-        });
+        if (!Build.isServer) {
+            this.childObserver = new MutationObserver(this.updateGridItems.bind(this));
+            this.childObserver.observe(this.element, { childList: true });
+        }
+        this.validateAlignment();
         // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
-        if (this.distributeFormElement) {
-            this.mutation1 = watchForElement(el, "duet-input", () => {
-                this.updateGridItemsWithInputFields();
-            });
-            // listen for potential mediaquery changes and reset layout
-            for (let i = 0; i < this.mql.length; i++) {
-                // addEventListener is not available in Stencil hydrate
-                if (this.mql[i].addEventListener) {
-                    this.mql[i].addEventListener("change", this.updateGridItemsWithInputFields.bind(this));
-                }
+        if (this.alignment === "form-distribute") {
+            if (!Build.isServer) {
+                this.formDistributeObserver = new MutationObserver(this.updateGridItemsWithInputFields.bind(this));
+                this.formDistributeObserver.observe(this.element, {
+                    subtree: true,
+                    childList: true,
+                    characterData: true,
+                    attributeFilter: ["error"],
+                });
+                window.addEventListener("resize", this.debounceWindowResizeHandler);
             }
+            this.updateGridItemsWithInputFields();
         }
         this.updateGridItems();
     }
     disconnectedCallback() {
-        if (this.mutationO) {
-            this.mutationO.disconnect();
-            this.mutationO = undefined;
+        if (this.childObserver) {
+            this.childObserver.disconnect();
+            this.childObserver = undefined;
         }
-        if (this.mutation1) {
-            this.mutation1.disconnect();
-            this.mutation1 = undefined;
-        }
-        // listen for potential mediaquery changes and reset layout
-        for (let i = 0; i < this.mql.length; i++) {
-            // addEventListener is not available in Stencil hydrate
-            if (this.mql[i].removeEventListener) {
-                this.mql[i].removeEventListener("change", this.updateGridItemsWithInputFields.bind(this));
-            }
+        if (this.formDistributeObserver) {
+            this.formDistributeObserver.disconnect();
+            this.formDistributeObserver = undefined;
         }
+        window.removeEventListener("resize", this.debounceWindowResizeHandler);
     }
     /**
      * Local methods
      */
+    getDirectChildren() {
+        return Array.from(Build.isServer ? this.element.children : this.element.querySelectorAll(":scope > *"));
+    }
     async updateGridItems() {
-        const items = Array.from(this.element.children).filter(isGridItem);
+        const items = this.getDirectChildren().filter(child => child.tagName.toLowerCase() === "duet-grid-item");
         items.forEach(item => {
             item.responsive = this.responsive;
             item.breakpoint = this.breakpoint;
@@ -92,19 +121,69 @@ export class DuetGrid {
         });
     }
     async updateGridItemsWithInputFields() {
-        const items = Array.from(this.element.children).filter(isGridItem);
+        // Duet components that need to taken into account in form-distribute
+        const elementNames = [
+            "duet-button",
+            "duet-checkbox",
+            "duet-choice",
+            "duet-choice-group",
+            "duet-combobox",
+            "duet-date-picker",
+            "duet-fieldset",
+            "duet-grid-item",
+            "duet-input",
+            "duet-multiselect",
+            "duet-number-input",
+            "duet-phone-input",
+            "duet-radio",
+            "duet-radio-group",
+            "duet-range-slider",
+            "duet-select",
+            "duet-textarea",
+            "duet-toggle",
+        ];
+        // Class selectors for error containers in different Duet components
+        const errorContainerClasses = [
+            ".duet-checkbox-error",
+            ".duet-fieldset-error",
+            ".duet-input-error",
+            ".duet-multiselect-error",
+            ".duet-select-error",
+            ".duet-textarea-error",
+        ];
+        const items = this.getDirectChildren().filter(child => !!child.querySelector(elementNames.join(",")) || elementNames.includes(child.tagName.toLowerCase()));
         // if layout changes to columns instead of row, remove all padding
         const hasColumnLayout = window ? window.getComputedStyle(this.element).flexDirection === "column" : false;
+        const selectorForErrorSpan = el => {
+            var _a;
+            return (el === null || el === void 0 ? void 0 : el.querySelector(errorContainerClasses.join(","))) ||
+                ((_a = el === null || el === void 0 ? void 0 : el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(errorContainerClasses.join(",")));
+        };
+        // Call selectorForErrorSpanFind with the first item in array that has error span
+        const findErrorSpanInArray = elArr => selectorForErrorSpan(elArr.find(selectorForErrorSpan));
+        // The element we check may have its error span inside its shadow DOM, or it may be in nested
+        // elements (e.g. nested duet-input) and there possibly in shadow DOM.
+        const findErrorSpan = item => {
+            var _a;
+            const ownErrorSpan = selectorForErrorSpan(item);
+            if (ownErrorSpan) {
+                return ownErrorSpan;
+            }
+            // First try to find nested elements in light DOM, in no error span found, try shadow DOM
+            const nestedErrorSpan = findErrorSpanInArray(Array.from(item.querySelectorAll(elementNames.join(",")) || [])) ||
+                findErrorSpanInArray(Array.from(((_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(elementNames.join(","))) || []));
+            return nestedErrorSpan;
+        };
         let maxHeight = 0;
         const sizes = [];
         items.forEach(item => {
-            const inputErrorDom = item.querySelector("span.duet-input-error");
+            const inputErrorDom = findErrorSpan(item);
             const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
             sizes.push(height);
         });
         maxHeight = Math.max(...sizes);
         items.forEach(item => {
-            const inputErrorDom = item.querySelector("span.duet-input-error");
+            const inputErrorDom = findErrorSpan(item);
             const height = inputErrorDom ? this.outerHeight(inputErrorDom) : 0;
             if (height < maxHeight && !hasColumnLayout) {
                 item.setAttribute("style", `padding-bottom: ${maxHeight - height}px;`);
@@ -119,11 +198,11 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'cb5bd9c4309fb0032446255aaed26f0442596f07', class: {
+        return (h(Host, { key: 'bc25c7c22f88bade50b1241086cbc3fccd94db28', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
-                "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute", // flex-end
+                "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form-distribute", // flex-end
                 "duet-grid-align-center": this.alignment === "center", // center
                 "duet-grid-align-stretch": this.alignment === "stretch", // stretch
                 "duet-grid-align-baseline": this.alignment === "baseline", // baseline
@@ -146,7 +225,7 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, h("slot", { key: '809a8de54de8b002bda6ce79cee4a081fb61db62' })));
+            } }, h("slot", { key: 'de127117a8189fccfa81ff58be25f057afb45729' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -164,6 +243,7 @@ export class DuetGrid {
         return {
             "responsive": {
                 "type": "boolean",
+                "attribute": "responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -178,12 +258,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetGridBreakpoint",
@@ -204,12 +284,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -230,12 +310,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"horizontal\""
             },
             "rowReverse": {
                 "type": "boolean",
+                "attribute": "row-reverse",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -250,16 +330,16 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "row-reverse",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "alignment": {
                 "type": "string",
-                "mutable": false,
+                "attribute": "alignment",
+                "mutable": true,
                 "complexType": {
                     "original": "DuetGridAlignment",
-                    "resolved": "\"baseline\" | \"bottom\" | \"center\" | \"form_distribute\" | \"stretch\" | \"top\"",
+                    "resolved": "\"baseline\" | \"bottom\" | \"center\" | \"form-distribute\" | \"form_distribute\" | \"stretch\" | \"top\"",
                     "references": {
                         "DuetGridAlignment": {
                             "location": "local",
@@ -272,16 +352,16 @@ export class DuetGrid {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Adjusts the vertical alignment of the grid items, if set to \"form_distribute\"\nthe grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,\nso that they align even when displaying errors."
+                    "text": "Adjusts the vertical alignment of the grid items, if set to \"form-distribute\"\nthe grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,\nso that they align even when displaying errors. Value \"form_distribute\" is deprecated, use\n\"form-distribute\" for new development."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "alignment",
                 "reflect": false,
                 "defaultValue": "\"top\""
             },
             "distribution": {
                 "type": "string",
+                "attribute": "distribution",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetGridDistribution",
@@ -302,12 +382,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "distribution",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "mobile": {
                 "type": "string",
+                "attribute": "mobile",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetGridMobileAlignment",
@@ -328,12 +408,12 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "mobile",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "gridTemplate": {
                 "type": "string",
+                "attribute": "grid-template",
                 "mutable": false,
                 "complexType": {
                     "original": "| \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"sidebar-right\"\n    | \"sidebar-left\"\n    | \"two-columns\"\n    | \"three-columns\"\n    | \"button-grid\"",
@@ -348,20 +428,17 @@ export class DuetGrid {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "grid-template",
                 "reflect": false,
                 "defaultValue": "null"
             }
         };
     }
-    static get states() {
-        return {
-            "distributeFormElement": {}
-        };
-    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{
+                "propName": "alignment",
+                "methodName": "validateAlignment"
+            }, {
                 "propName": "responsive",
                 "methodName": "updateGridItems"
             }, {

package/lib/collection/components/duet-grid-item/duet-grid-item.css

@@ -2,11 +2,11 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-bottom: 16px !important;
   min-width: 0;
   max-width: 100%;
@@ -106,4 +106,8 @@
 :host(.duet-m-0) {
   padding: 0 !important;
   margin: 0 !important;
+}
+
+:host(.duet-theme-turva2.duet-theme-turva) {
+  color: rgb(23, 42, 59);
 }

package/lib/collection/components/duet-grid-item/duet-grid-item.js

@@ -5,14 +5,41 @@ import { h, Host } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 export class DuetGridItem {
     constructor() {
+        /**
+         * Make the grid item fill the remaining available grid space.
+         */
         this.fill = false;
-        this.maxWidth = undefined;
-        this.minWidth = undefined;
+        /**
+         * Theme of the grid item.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * @internal
+         * Enable or disable the automatic responsive behaviour of the grid item.
+         * This property is used internally by Grid, and should not be set by the developer.
+         */
         this.responsive = false;
+        /**
+         * @internal
+         * Direction of the grid items.
+         * This property is used internally by Grid, and should not be set by the developer.
+         */
         this.direction = "horizontal";
+        /**
+         * @internal
+         * Switch the breakpoint used to trigger the content stacking.
+         * This property is used internally by Grid, and should not be set by the developer.
+         */
         this.breakpoint = "small";
+        /**
+         * @internal
+         * Reneder the grid row in reverse order
+         * This property is used internally by Grid, and should not be set by the developer.
+         */
         this.rowReverse = false;
     }
     /**
@@ -26,7 +53,7 @@ export class DuetGridItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '69107559554a11d43aeace87439dd5ee0983c961', style: {
+        return (h(Host, { key: 'cd699b121a356a4998001457a43186fcc2c75f29', style: {
                 "min-width": this.minWidth,
                 "max-width": this.maxWidth,
             }, class: {
@@ -43,7 +70,7 @@ export class DuetGridItem {
                 "duet-grid-item-br-medium": this.breakpoint === "medium",
                 "duet-grid-item-br-large": this.breakpoint === "large",
                 "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }, h("slot", { key: '17a808b61e7dd20826bed76c60721c3458d2a24d' })));
+            } }, h("slot", { key: 'c5bf503f54cdf776eb9ee3f975d09925f61e0922' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }
@@ -61,6 +88,7 @@ export class DuetGridItem {
         return {
             "fill": {
                 "type": "boolean",
+                "attribute": "fill",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -75,12 +103,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fill",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "maxWidth": {
                 "type": "string",
+                "attribute": "max-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -95,11 +123,11 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max-width",
                 "reflect": false
             },
             "minWidth": {
                 "type": "string",
+                "attribute": "min-width",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -114,11 +142,11 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min-width",
                 "reflect": false
             },
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -139,12 +167,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -165,12 +193,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "responsive": {
                 "type": "boolean",
+                "attribute": "responsive",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -188,12 +216,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "direction": {
                 "type": "string",
+                "attribute": "direction",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetDirection",
@@ -217,12 +245,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"horizontal\""
             },
             "breakpoint": {
                 "type": "string",
+                "attribute": "breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetGridBreakpoint",
@@ -246,12 +274,12 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
             },
             "rowReverse": {
                 "type": "boolean",
+                "attribute": "row-reverse",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -269,7 +297,6 @@ export class DuetGridItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "row-reverse",
                 "reflect": false,
                 "defaultValue": "false"
             }