@duetds/components 10.0.0-alpha.8 → 10.0.0

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -13,6 +13,96 @@ import { getLanguage, getLocaleString } from "../../utils/language-utils";
 export class DuetTabGroup {
     constructor() {
         this.id = createID("DuetTabGroup");
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.tabs = [];
+        this.selected = undefined;
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens)
+         * @deprecated scrolling is now the deafult behavior which can not be overridden, and this attribute has no effect
+         */
+        this.scrolls = true;
+        /**
+         * Whether the tab-group collapses to a select dropwdown in minor breakpoints
+         * @deprecated as scrolls is now always enabled, tabs never collapse to a dropdown, and this attribute has no effect
+         */
+        this.collapses = false;
+        /**
+         * Aria label for the entire tab-group
+         */
+        this.accessibleLabel = undefined;
+        /**
+         * Style variation of the tab group. Note that "plain-scrolling" is deprecated, as tab-group now allways has scrolling
+         * behavior, use values "default", "plain" or "checked"
+         */
+        this.variation = "default";
+        /**
+         * The currently active language. This setting changes the accessible labels 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();
+        /**
+         * Defaults for Label
+         * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
+         */
+        this.labelDefaults = {
+            fi: "Valitse",
+            en: "Choose",
+            sv: "Välj",
+        };
+        /**
+         * Label for the select element which gets shown on mobile.
+         * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
+         */
+        this.label = getLocaleString(this.labelDefaults, this.language);
+        /**
+         * Determines whether the label for the select element shown on mobile is visually hidden.
+         */
+        this.labelHidden = true;
+        /**
+         * Optional identifier to add to buttons in the tab group
+         */
+        this.identifier = this.id;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Controls the padding of the component.
+         */
+        this.padding = "auto";
+        /**
+         * @deprecated in favour of Duet Tab component owning the tab indexing
+         * Controls if tab container should have tab index and be accessible by pressing tab
+         */
+        this.setTabIndex = true;
+        /**
+         * If this property is set to true, tab won't change immediately after clicking it.
+         * Component will emit "duetTabChangeRequested" event, and it needs to be handled manually in order to change tab.
+         */
+        this.tabChangeConfirm = false;
+        /**
+         * By default switches to larger size from small breakpoint.
+         * Never disables switching to larger size and always forces it.
+         */
+        this.switchLargeBreakpoint = "small";
+        /**
+         * Makes the tab group fill the space with background, only used
+         * when tab-group variation is default.
+         */
+        this.fillSpace = false;
+        /**
+         * Makes the tab buttons stretch to fill the available space
+         */
+        this.stretch = false;
         /**
          * Component event handling.
          */
@@ -56,27 +146,6 @@ export class DuetTabGroup {
                 }
             }, 50);
         };
-        this.tabs = [];
-        this.selected = undefined;
-        this.theme = "";
-        this.scrolls = true;
-        this.collapses = false;
-        this.accessibleLabel = undefined;
-        this.variation = "default";
-        this.language = getLanguage();
-        this.labelDefaults = {
-            fi: "Valitse",
-            en: "Choose",
-            sv: "Välj",
-        };
-        this.label = getLocaleString(this.labelDefaults, this.language);
-        this.labelHidden = true;
-        this.identifier = this.id;
-        this.margin = "auto";
-        this.padding = "auto";
-        this.setTabIndex = true;
-        this.tabChangeConfirm = false;
-        this.switchLargeBreakpoint = "small";
     }
     /**
      * Component lifecycle events.
@@ -88,7 +157,7 @@ export class DuetTabGroup {
             });
             this.mutationO.observe(this.element, {
                 attributes: true,
-                attributeFilter: ["label"],
+                attributeFilter: ["label", "selected"],
                 childList: true,
                 characterData: true,
                 subtree: true,
@@ -108,7 +177,13 @@ export class DuetTabGroup {
         inheritGlobalTheme(this);
     }
     componentDidLoad() {
-        this.scrollToActive();
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            if (entries.length > 0 && entries[0].isIntersecting) {
+                this.scrollToActive();
+                this.intersectionObserver.disconnect();
+            }
+        }, { root: null, threshold: 0 });
+        this.intersectionObserver.observe(this.element);
     }
     /**
      * This method allows you to open any of the tabs by calling the method and
@@ -151,34 +226,37 @@ export class DuetTabGroup {
         return localTabs;
     }
     getButtonId(index) {
-        return `${this.id}-button-${index}`;
+        return `${this.identifier}-button-${index}`;
     }
     getTabId(index) {
-        return `${this.id}-tab-${index}`;
+        return `${this.identifier}-tab-${index}`;
     }
     getAccessibleDescription(index) {
         const description = this.tabs[index].getAttribute("accessible-description") || null;
         return description;
     }
     async updateTabs() {
-        this.selected = undefined;
+        let selected;
         this.tabs = this.getTabs();
         this.tabs.forEach((tab, index) => {
             tab.id = this.getTabId(index);
             if (tab.selected) {
-                if (this.selected === undefined) {
-                    this.selected = index;
+                if (selected === undefined) {
+                    // keep first selected
+                    selected = index;
                 }
                 else {
+                    // unselect the rest
                     tab.selected = false;
                 }
             }
         });
-        if (this.selected === undefined) {
-            this.selected = 0;
+        // select first tab if none were selected
+        if (selected === undefined) {
+            selected = 0;
             this.tabs[0].selected = true;
         }
-        return;
+        this.selected = selected;
     }
     /**
      * To support text-align: center;
@@ -200,26 +278,31 @@ export class DuetTabGroup {
                 "duet-tab-button": true,
                 "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
                 selected: element.selected,
-                [`duet-notification-mark-${element.notificationMark}`]: !!element.notificationMark,
                 [largeBreakpoint]: ["default", "plain", "plain-scrolling"].includes(this.variation) ? true : false,
-            }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label))));
-        return (h("div", { key: '89dda2af64bfa896973646dee7566932c934896f', class: {
+                "duet-theme-turva": this.theme === "turva",
+            }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label), element.indicator && (h("duet-indicator", { variation: element.indicator, "accessible-label": element.indicatorAccessibleLabel })))));
+        return (h("div", { key: '8415a139c9a189c4c0ee19aa4cb2774a22eea232', class: {
                 "duet-tab-group": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variationClass]: true,
                 "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
                 "duet-tab-group-scrolls": true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '8781b3aa65caf6f828f1f84d3fa5ce603b620c13', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '9d145a51f61427e95d54628daef43256ab5eaa50', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
+                "duet-tab-group-fill-space": this.fillSpace && !this.stretch && this.variation === "default",
+                "duet-tab-group-stretch": this.stretch,
             }, ref: el => {
                 this.tabsContainer = el;
-            } }, this.variation === "checked" ? (buttons) : (h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center" }, buttons))), h("div", { key: '382e15a7c8aa8f5c6078402741c55ca70b97a8fd', class: {
+            } }, this.variation === "checked" ? (buttons) : (h("div", { class: {
+                "duet-tab-group-scrollable-wrapper": true,
+                "duet-tab-group-fill-space-wrapper": this.fillSpace && this.variation === "default",
+            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: '2bfb5fd10253af2f1a5d26e9a9b106d523ecd35c', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: '1551ac1536242c1526a0e3b7ed39de8dc57c9c44' }))));
+            } }, h("slot", { key: 'ed8a0ab42bda63cd27ce2311281d5f4a16db2e40' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -237,6 +320,7 @@ export class DuetTabGroup {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -257,12 +341,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "scrolls": {
                 "type": "boolean",
+                "attribute": "scrolls",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -280,12 +364,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scrolls",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "collapses": {
                 "type": "boolean",
+                "attribute": "collapses",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -303,12 +387,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapses",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -323,12 +407,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetTabVariation",
@@ -349,12 +433,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -381,12 +465,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "language",
                 "reflect": false,
                 "defaultValue": "getLanguage()"
             },
             "labelDefaults": {
                 "type": "string",
+                "attribute": "label-default",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -410,12 +494,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-default",
                 "reflect": false,
                 "defaultValue": "{\n    fi: \"Valitse\",\n    en: \"Choose\",\n    sv: \"V\u00E4lj\",\n  }"
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -433,12 +517,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": false,
                 "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
             },
             "labelHidden": {
                 "type": "boolean",
+                "attribute": "label-hidden",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -453,12 +537,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "identifier": {
                 "type": "string",
+                "attribute": "identifier",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -473,12 +557,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "identifier",
                 "reflect": false,
                 "defaultValue": "this.id"
             },
             "margin": {
                 "type": "string",
+                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetMargin",
@@ -499,12 +583,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "padding": {
                 "type": "string",
+                "attribute": "padding",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetPadding",
@@ -525,12 +609,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "padding",
                 "reflect": false,
                 "defaultValue": "\"auto\""
             },
             "setTabIndex": {
                 "type": "boolean",
+                "attribute": "set-tab-index",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -548,12 +632,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "set-tab-index",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "tabChangeConfirm": {
                 "type": "boolean",
+                "attribute": "tab-change-confirm",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -568,12 +652,12 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "tab-change-confirm",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "switchLargeBreakpoint": {
                 "type": "string",
+                "attribute": "switch-large-breakpoint",
                 "mutable": false,
                 "complexType": {
                     "original": "\"small\" | \"never\" | \"always\"",
@@ -588,9 +672,48 @@ export class DuetTabGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "switch-large-breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
+            },
+            "fillSpace": {
+                "type": "boolean",
+                "attribute": "fill-space",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the tab group fill the space with background, only used\nwhen tab-group variation is default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "stretch": {
+                "type": "boolean",
+                "attribute": "stretch",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the tab buttons stretch to fill the available space"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/lib/collection/components/duet-table/duet-table-styles.js

@@ -2,6 +2,9 @@
  * Built with Duet Design System
  */
 import { colorGrayDarker, colorGrayDarkerTurva, colorGrayDarkTurva, colorGrayLight, colorGrayLightest, colorGrayLightTurva, colorPrimary, colorSecondary, colorSecondaryTurva, fontFamilyText, fontFamilyTextTurva, fontSizeMedium, fontWeightSemiBold, lineHeightSmall, mediaQueryXSmall, spaceLarge, spaceMedium, spaceSmall, spaceXxSmall, } from "@duetds/tokens";
+const rgbable = (value) => {
+    return value.replace("rgb(", "").replace(")", "");
+};
 const styles = `
 duet-table {
   box-sizing: border-box;
@@ -167,6 +170,7 @@ duet-table {
 .duet-table-sticky thead th {
   position: sticky;
   top: 0;
+  z-index: $z-index-sticky;
   background: ${colorGrayLightest};
 }
 
@@ -202,7 +206,7 @@ duet-table {
   }
 
   &.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
-    background: rgba(${colorSecondaryTurva}, 0.04);
+    background: rgba(${rgbable(colorSecondaryTurva)}, 0.04);
   }
 
   tbody:not(:only-of-type) tr:nth-of-type(even) {
@@ -210,7 +214,7 @@ duet-table {
   }
 
   &.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
-    background: rgba(${colorSecondaryTurva}, 0.04);
+    background: rgba(${rgbable(colorSecondaryTurva)}, 0.04);
   }
 
   tfoot td {
@@ -411,10 +415,10 @@ duet-table {
 }
 
 .duet-table-selected-column {
-  background: rgba(${colorPrimary}, 0.08);
+  background: rgba(${rgbable(colorPrimary)}, 0.08);
 
   .duet-theme-turva & {
-    background: rgba(${colorGrayDarkerTurva}, 0.08);
+    background: rgba(${rgbable(colorGrayDarkerTurva)}, 0.08);
   }
 }
 
@@ -475,6 +479,66 @@ duet-table {
       grid-column: 2;
     }
   }
+
+  duet-table.duet-theme-turva2 {
+    &.duet-theme-turva td {
+      color: $color-turva2-gray-900;
+    }
+
+    &.duet-theme-turva tbody th {
+      color: $color-turva2-gray-900;
+    }
+
+    &.duet-table-striped.duet-theme-turva.duet-table-sticky thead {
+      th,
+      td {
+        border-bottom-color: $color-turva-nude-100;
+      }
+    }
+
+    &.duet-table-striped.duet-theme-turva tbody:only-of-type tr:nth-of-type(odd) {
+      background: rgba($color-turva2-gray-900, 0.04);
+    }
+
+    &.duet-table-striped.duet-theme-turva tbody:not(:only-of-type) tr:nth-of-type(even) {
+      background: rgba($color-turva2-gray-900, 0.04);
+    }
+
+    &.duet-table-striped.duet-theme-turva tfoot td {
+      border-top-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-striped.duet-table-flattened.duet-theme-turva tfoot tr {
+      border-top-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-plain.duet-theme-turva tbody {
+      th,
+      td {
+        border-bottom-color: $color-turva-nude-100;
+      }
+    }
+
+    &.duet-table-plain.duet-theme-turva tbody td {
+      border-bottom-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-plain.duet-table-flattened.duet-theme-turva tbody tr {
+      border-bottom-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-minimal.duet-table-flattened.duet-theme-turva tfoot {
+      border-top-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-fixed.duet-theme-turva:not(.duet-table-flattened) tfoot {
+      border-top-color: $color-turva-nude-100;
+    }
+
+    &.duet-table-sortable.duet-theme-turva:not(.duet-table-flattened) tfoot {
+      border-top-color: $color-turva-nude-100;
+    }
+  }
 }
 `.replace(/[\n\r\t]/gm, "");
 export function createStyles(element) {