@duetds/components 10.0.0-alpha.8 → 10.0.0

package/lib/collection/components/duet-scrollable/duet-scrollable.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;
   -webkit-tap-highlight-color: transparent;
 }
 
@@ -36,27 +36,27 @@
   flex-basis: 40px;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container--occluded {
-  flex-basis: 0;
+  visibility: hidden;
   flex-shrink: 1;
+  flex-basis: 0;
   width: 0;
   padding: 10px 0;
   overflow: hidden;
-  visibility: hidden;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute {
   position: absolute;
   top: 0;
-  z-index: 202;
+  z-index: 210;
   width: auto;
   height: 100%;
   padding: 0 16px;
   background-color: rgb(255, 255, 255);
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.left {
-  left: -2px;
+  left: 0;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container--absolute.right {
-  right: -2px;
+  right: 0;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button {
   position: absolute;
@@ -69,8 +69,8 @@
   transition: transform 300ms ease;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button:active duet-icon {
-  transition: transform 300ms ease;
   transform: scale(0.8);
+  transition: transform 300ms ease;
 }
 :host .duet-scrollable-items.buttons .duet-scrollable-button-container .duet-scrollable-button--left {
   left: 0;
@@ -121,32 +121,33 @@
   overflow-x: auto;
   /* We don't want vertical scrolling */
   overflow-y: hidden;
+  scroll-behavior: smooth;
   /* We don't want internal inline elements to wrap */
   white-space: nowrap;
   scroll-snap-type: x mandatory;
-  scroll-behavior: smooth;
   /* Add margin at ends to make visual appearance better */
   scroll-margin: 0 20px;
-  /* Make an auto-hiding scroller for the 3 people using a IE */
-  -ms-overflow-style: -ms-autohiding-scrollbar;
-  /* For WebKit implementations, provide inertia scrolling */
-  -webkit-overflow-scrolling: touch;
   /* Remove the default scrollbar for WebKit implementations */
   -webkit-mask: linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);
-  -webkit-mask-size: 50% 100%, 50% 100%;
-  -webkit-mask-position: left, right;
-  -webkit-mask-repeat: no-repeat;
   mask: linear-gradient(to right, transparent 0, #fff 10px), linear-gradient(to left, transparent 0, #fff 10px);
-  mask-size: 50% 100%, 50% 100%;
-  mask-position: left, right;
+  -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
+  -webkit-mask-position: left, right;
+  mask-position: left, right;
+  -webkit-mask-size: 50% 100%, 50% 100%;
+  mask-size: 50% 100%, 50% 100%;
+  /* Make an auto-hiding scroller for the 3 people using a IE */
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  /* For WebKit implementations, provide inertia scrolling */
+  -webkit-overflow-scrolling: touch;
   /* For absolutely positioned buttons, we remove the fade overlay
-     and adjust padding/margin to account for button borders,
-     preventing border clipping due to overflow issues */
+     and adjust padding/margin to account for tab group's 2px wide border,
+     to prevent overflow. */
 }
 :host .duet-scrollable-items .duet-scrollable-list--absolute {
-  padding-inline: 2px;
-  margin-inline: -2px;
+  padding-right: 0;
+  padding-left: 2px;
+  margin-inline: 0;
   -webkit-mask: none !important;
   mask: none !important;
 }
@@ -181,6 +182,9 @@
   padding-top: 16px;
   padding-bottom: 16px;
 }
+:host .duet-scrollable-items .duet-scrollable-list.duet-scrollable-stretch {
+  width: 100%;
+}
 :host .duet-scrollable-items.center {
   justify-content: center;
 }
@@ -199,9 +203,16 @@
 ::slotted(*) {
   flex-shrink: 0;
   margin-left: 0;
+  scroll-snap-align: center;
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   transition: -webkit-transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-  scroll-snap-align: center;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(120, 145, 164);
+}
+:host(.duet-theme-turva2) .duet-scrollable-items.duet-theme-turva .duet-scrollable-button-container .duet-scrollable-button--absolute:hover {
+  border-color: rgb(120, 145, 164);
 }

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

@@ -15,33 +15,71 @@ export class DuetScrollable {
         this.currentIndex = 0;
         this.scrollPaneElement = undefined;
         this.hasCollapseButtonLabelSlot = false;
+        this.scrollPaneAtStart = true;
+        this.needsScrolling = true;
+        this.scrollPaneAtEnd = false;
+        this.childrenData = {};
         /**
          * Observer to check if the scrollable content is wider than the scroll pane,
          * and thus needs scrolling.
          */
         this.resizeObserver = new ResizeObserver(entries => {
             if ((entries === null || entries === void 0 ? void 0 : entries.length) === 1) {
-                const threshold = this.buttonPosition === "absolute" ? 0 : 5;
+                const threshold = this.getOverlayWidth();
                 this.checkScrollingNeeded(entries[0].target, threshold);
             }
         });
-        this.collapsedOnClick = () => {
-            this.collapsed = !this.collapsed;
-        };
-        this.scrollPaneAtStart = true;
-        this.needsScrolling = true;
-        this.scrollPaneAtEnd = false;
-        this.childrenData = {};
+        /**
+         * Theme of duet-tab-scrollable. When used this will override the color setting and
+         * use "primary" or "primary-turva" as the color depending on which theme
+         * is chosen.
+         */
         this.theme = "";
+        /**
+         * Optional identifier to add to buttons in the tab group
+         */
         this.identifier = "";
+        /**
+         * Boolean to collapse scrollable items into normal flow.
+         */
         this.collapsed = false;
+        /**
+         * Whether or not include previous and forward buttons. Defaults to true.
+         */
         this.buttons = true;
+        /**
+         * Vertical alignment of the previous and forward buttons. Defaults to center.
+         */
         this.buttonAlignment = "center";
+        /**
+         * @internal
+         */
         this.buttonPosition = "relative";
+        /**
+         * Center the scrollable list. Defaults to false.
+         */
         this.center = false;
+        /**
+         * Whether to add padding to the scrollable list to account for
+         * overflowing elements, such as shadows or outlines.
+         */
         this.padding = "none";
+        /**
+         * @internal
+         */
         this.gap = "large";
+        /**
+         * Selected element
+         */
         this.selected = 0;
+        /**
+         * Enables stretch mode for tab groups
+         * @internal
+         */
+        this.stretch = false;
+        this.collapsedOnClick = () => {
+            this.collapsed = !this.collapsed;
+        };
     }
     watchPropHandler(newValue) {
         this.scrollToElement(newValue, "center");
@@ -66,6 +104,25 @@ export class DuetScrollable {
     disconnectedCallback() {
         this.resizeObserver.disconnect();
     }
+    /**
+     * Scrolls the scrollable so that the desired item is visible
+     * @param itemIndex The first item is 1
+     */
+    async scrollToItem(itemIndex) {
+        this.scrollToElement(itemIndex - 1, "center");
+    }
+    /**
+     * Scrolls the scrollable so that the first item is visible
+     */
+    async scrollToStart() {
+        this.scrollToElement(0, "center");
+    }
+    /**
+     * Scrolls the scrollable so that the last item is visible
+     */
+    async scrollToEnd() {
+        this.scrollToElement(this.getScrollPaneElements().length - 1, "center");
+    }
     /**
      * Private methods.
      */
@@ -86,7 +143,7 @@ export class DuetScrollable {
         }
         const parentWidth = ((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
         const contentWidth = element.scrollWidth;
-        const overlayWidth = 10 * 2;
+        const overlayWidth = this.getOverlayWidth() * 2;
         this.needsScrolling = contentWidth - overlayWidth > parentWidth + threshold;
         if (!this.needsScrolling) {
             this.scrollPaneAtStart = true;
@@ -140,12 +197,10 @@ export class DuetScrollable {
         else if (container.scrollLeft > 0) {
             this.scrollPaneAtStart = false;
         }
-        if (container.clientWidth + container.scrollLeft + 10 >= container.scrollWidth) {
-            this.scrollPaneAtEnd = true;
-        }
-        else if (container.clientWidth + container.scrollLeft + 10 < container.scrollWidth) {
-            this.scrollPaneAtEnd = false;
-        }
+        // Round both values to handle sub-pixel precision issues
+        const visibleContentWidth = Math.ceil(container.clientWidth + container.scrollLeft + this.getOverlayWidth());
+        const totalContentWidth = Math.round(container.scrollWidth);
+        this.scrollPaneAtEnd = visibleContentWidth >= totalContentWidth;
     }
     scrollToElement(index = this.currentIndex, inline) {
         const elements = this.getScrollPaneElements();
@@ -191,6 +246,9 @@ export class DuetScrollable {
         const last = this.getLastVisibleElement();
         this.scrollToElement(last + 1, "center");
     }
+    getOverlayWidth() {
+        return this.buttonPosition === "absolute" ? 0 : 10;
+    }
     renderButton(direction) {
         const arrowColor = this.theme === "turva" ? "color-primary-darker-turva" : "color-primary";
         const arrowColorDisabled = this.theme === "turva" ? "color-gray-turva" : "color-gray";
@@ -226,25 +284,26 @@ export class DuetScrollable {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'c34e5b0003be35e22f98362bd9919931b03d3595', class: {
+        return (h(Host, { key: '2ba4adf585cac6b8a76f8a06f2a46a3339b495e8', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-theme-default": this.theme === "default",
-            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '3bd10ff46206639e9c5d9542edbcf353f94bac7a', class: {
+            } }, this.hasCollapseButtonLabelSlot && (h("div", { key: '1bb6dcf18c16906a196f15532d51878f5a14ebfe', class: {
                 collapse: true,
                 hide: !this.needsScrolling && !this.collapsed,
-            } }, h("duet-button", { key: 'ae767e3c68f92f2128c36ec645e7b7ab0964c9d2', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '691d3a0b3c9d5b51872f49f84272f8572828e5ce', name: "collapse-button-label" })))), h("div", { key: '2eaaece8f810bb833ac1d8cc05b42533e63e260c', class: {
+            } }, h("duet-button", { key: '253b7c6b18e78444e59e7a3df3f66287e67d8d4d', variation: "plain", margin: "none", "center-text": true, onClick: () => this.collapsedOnClick() }, h("slot", { key: '46ee35a09a74308fef543368900ceb78546d2d27', name: "collapse-button-label" })))), h("div", { key: 'fbead3f5a25009528eca77982e0c340139f780dc', class: {
                 "duet-scrollable-items": true,
                 buttons: this.buttons,
                 center: this.center,
                 "duet-theme-turva": this.theme === "turva",
-            } }, this.buttons && this.renderButton("left"), h("div", { key: 'a3e3ffc70f490023285aec3a8f9c803fb00311fe', class: {
+            } }, this.buttons && this.renderButton("left"), h("div", { key: 'dc180a9004b8b097bca04412e3412b32949efbdc', class: {
                 "duet-scrollable-list": true,
                 [`duet-scrollable-list--${this.buttonPosition}`]: true,
                 [`gap-${this.gap}`]: true,
                 collapsed: this.collapsed,
                 [`duet-overflow-padding--${this.padding}`]: this.padding !== "none",
                 [`duet-scrollable-list--${this.buttonPosition}`]: this.buttonPosition === "absolute",
-            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: '1466f3209c9f59ed44686a3abbc34dd70527a7ce' })), this.buttons && this.renderButton("right"))));
+                "duet-scrollable-stretch": this.stretch,
+            }, onScroll: () => this.updateScrollButtons(), ref: element => (this.scrollPaneElement = element) }, h("slot", { key: 'a14ae5f86ffc50886753e785bfb795cc706e3f95' })), this.buttons && this.renderButton("right"))));
     }
     static get is() { return "duet-scrollable"; }
     static get encapsulation() { return "shadow"; }
@@ -262,6 +321,7 @@ export class DuetScrollable {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -282,12 +342,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -302,12 +362,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "collapsed": {
                 "type": "boolean",
+                "attribute": "collapsed",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -322,12 +382,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapsed",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "buttons": {
                 "type": "boolean",
+                "attribute": "buttons",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -342,12 +402,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "buttons",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "buttonAlignment": {
                 "type": "string",
+                "attribute": "button-alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "\"top\" | \"center\" | \"bottom\"",
@@ -362,12 +422,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-alignment",
                 "reflect": false,
                 "defaultValue": "\"center\""
             },
             "buttonPosition": {
                 "type": "string",
+                "attribute": "button-position",
                 "mutable": false,
                 "complexType": {
                     "original": "\"absolute\" | \"relative\"",
@@ -385,12 +445,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "button-position",
                 "reflect": false,
                 "defaultValue": "\"relative\""
             },
             "center": {
                 "type": "boolean",
+                "attribute": "center",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -405,12 +465,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "center",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetOverflowPadding",
@@ -431,12 +491,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"none\""
             },
             "gap": {
                 "type": "string",
+                "attribute": "gap",
                 "mutable": false,
                 "complexType": {
                     "original": "\"none\" | \"large\"",
@@ -454,12 +514,12 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "gap",
                 "reflect": false,
                 "defaultValue": "\"large\""
             },
             "selected": {
                 "type": "number",
+                "attribute": "selected",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -474,9 +534,31 @@ export class DuetScrollable {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "0"
+            },
+            "stretch": {
+                "type": "boolean",
+                "attribute": "stretch",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": "Enables stretch mode for tab groups"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -488,6 +570,68 @@ export class DuetScrollable {
             "childrenData": {}
         };
     }
+    static get methods() {
+        return {
+            "scrollToItem": {
+                "complexType": {
+                    "signature": "(itemIndex: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "itemIndex",
+                            "type": "number",
+                            "docs": "The first item is 1"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scrolls the scrollable so that the desired item is visible",
+                    "tags": [{
+                            "name": "param",
+                            "text": "itemIndex The first item is 1"
+                        }]
+                }
+            },
+            "scrollToStart": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scrolls the scrollable so that the first item is visible",
+                    "tags": []
+                }
+            },
+            "scrollToEnd": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scrolls the scrollable so that the last item is visible",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "element"; }
     static get watchers() {
         return [{

package/lib/collection/components/duet-section-layout/duet-section-layout.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;
   flex: 1 0 auto;
   width: 100%;

package/lib/collection/components/duet-section-layout/duet-section-layout.js

@@ -5,8 +5,18 @@ import { h, Host } from "@stencil/core";
 import isInternetExplorer from "../../utils/is-internet-explorer";
 export class DuetSectionLayout {
     constructor() {
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Align container vertically in the middle when the space allows it.
+         */
         this.middle = false;
+        /**
+         * Breakpoint used to remove padding. These match to
+         * similar media query tokens: $media-query-small and $media-query-medium.
+         */
         this.paddingBreakpoint = undefined;
     }
     /**
@@ -14,13 +24,13 @@ export class DuetSectionLayout {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f6adbb4624397e3ce0dc5dfaf00dad1afc605d72', class: {
+        return (h(Host, { key: '1423181d3efb8f77211a81db6dc7a415457b23f4', class: {
                 "duet-middle": this.middle,
                 "duet-ie": isInternetExplorer(),
-            } }, h("div", { key: 'a32239cd0233b568459975b3473fb8d644730a98', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '34f720bb4d768a6a37f8608f46d6a8ea4edbef53', class: {
+            } }, h("div", { key: '3b08e02d99ce4d269a90522f896ecfb43608c79f', class: { "duet-layout-wrapper": true, "duet-m-0": this.margin === "none" } }, h("div", { key: '1c60dd6abba084bdf4b29b9cb4b6e94d137517e3', class: {
                 "duet-layout": true,
                 [`padding-${this.paddingBreakpoint}`]: !!this.paddingBreakpoint,
-            } }, h("section", { key: 'a6a4fe58bb1b954401555a4325fdb0d3e98bc5b5', class: "duet-main" }, h("slot", { key: '7dacf94bdfaffc03e4d3cf81f4ac5fcf14b09304' }))))));
+            } }, h("section", { key: 'be58aa5ae79e61f3ba8e2bbadb119d169ab51d59', class: "duet-main" }, h("slot", { key: '43f94baf777b2626fefaa2a85d752f3e4652ed94' }))))));
     }
     static get is() { return "duet-section-layout"; }
     static get encapsulation() { return "shadow"; }
@@ -38,6 +48,7 @@ export class DuetSectionLayout {
         return {
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -58,12 +69,12 @@ export class DuetSectionLayout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "middle": {
                 "type": "boolean",
+                "attribute": "middle",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -78,12 +89,12 @@ export class DuetSectionLayout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "middle",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "paddingBreakpoint": {
                 "type": "string",
+                "attribute": "padding-breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetBreakpoints",
@@ -104,7 +115,6 @@ export class DuetSectionLayout {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding-breakpoint",
                 "reflect": false,
                 "defaultValue": "undefined"
             }