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

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.
          */
@@ -26,7 +116,7 @@ export class DuetTabGroup {
             }
             if (isTabKey(ev) && !isShiftTabKey(ev)) {
                 ev.preventDefault();
-                this.element.querySelector("duet-tab[selected]").setFocus();
+                this.element.querySelector(":scope > duet-tab[selected]").setFocus();
             }
             if (button) {
                 ev.preventDefault();
@@ -49,50 +139,13 @@ export class DuetTabGroup {
             }
         };
         this.scrollToActive = () => {
-            if (this.variation === "checked" || this.variation === "plain-scrolling") {
-                setTimeout(() => {
-                    const active = this.tabsContainer.querySelector(".selected");
-                    if (active) {
-                        active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
-                    }
-                }, 50);
-            }
-        };
-        this.renderTab = () => {
-            const renderedTabs = this.tabs.map((element, index) => {
-                return (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: element.selected ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
-                        "duet-p-0": this.padding === "none",
-                        "duet-tab-button": true,
-                        "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
-                        selected: element.selected,
-                        [`duet-notification-mark-${element.notificationMark}`]: !!element.notificationMark,
-                    }, 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)));
-            });
-            if (this.scrolls) {
-                return (h("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
-            }
-            return renderedTabs;
-        };
-        this.tabs = [];
-        this.selected = undefined;
-        this.theme = "";
-        this.scrolls = false;
-        this.collapses = true;
-        this.accessibleLabel = undefined;
-        this.variation = "default";
-        this.language = getLanguage();
-        this.labelDefaults = {
-            fi: "Valitse",
-            en: "Choose",
-            sv: "Välj",
+            setTimeout(() => {
+                const active = this.tabsContainer.querySelector(".selected");
+                if (active) {
+                    active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+                }
+            }, 50);
         };
-        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;
     }
     /**
      * Component lifecycle events.
@@ -104,7 +157,7 @@ export class DuetTabGroup {
             });
             this.mutationO.observe(this.element, {
                 attributes: true,
-                attributeFilter: ["label"],
+                attributeFilter: ["label", "selected"],
                 childList: true,
                 characterData: true,
                 subtree: true,
@@ -124,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
@@ -167,63 +226,83 @@ 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;
+     */
+    isCentered() {
+        return window && window.getComputedStyle(this.element).textAlign == "center";
     }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
+        // TODO: get rid of plain-scrolling class, as we always scroll
         const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
         const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
-        return (h("div", { key: 'e0f45c74bfcf70ef285031d2cefe9676f73fa1a1', class: {
+        const largeBreakpoint = `switch-large-at-${this.switchLargeBreakpoint ? this.switchLargeBreakpoint : "small"}`;
+        const buttons = this.tabs.map((element, index) => (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: element.selected ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
+                "duet-p-0": this.padding === "none",
+                "duet-tab-button": true,
+                "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
+                selected: element.selected,
+                [largeBreakpoint]: ["default", "plain", "plain-scrolling"].includes(this.variation) ? true : false,
+                "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": this.scrolls,
-                "duet-tab-group-collapses": this.collapses,
-            }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { key: '67a5b742600e566ff2217a3145ce9f7ab2a70aa1', value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
-                return { label: tab.label, value: index.toString() };
-            }) })), h("div", { key: '85da5c9758a9440e31caac2659f44157e65ad2fa', role: "tablist", class: {
+                "duet-tab-group-scrolls": true,
+            }, "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-collapses": this.collapses,
+                "duet-tab-group-fill-space": this.fillSpace && !this.stretch && this.variation === "default",
+                "duet-tab-group-stretch": this.stretch,
             }, ref: el => {
                 this.tabsContainer = el;
-            } }, this.renderTab()), h("div", { key: 'e44faf2ce5439c15cce9afa44b09a96b028fa228', 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: 'ef3760dd2409dbc0e5cc35cb5e5e173a83817667' }))));
+            } }, h("slot", { key: 'ed8a0ab42bda63cd27ce2311281d5f4a16db2e40' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -241,6 +320,7 @@ export class DuetTabGroup {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -261,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",
@@ -276,17 +356,20 @@ export class DuetTabGroup {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens),\nif this is a number instead of true it will be used as \"amount of items to scroll\""
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "scrolling is now the deafult behavior which can not be overridden, and this attribute has no effect"
+                        }],
+                    "text": "Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens)"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "scrolls",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "collapses": {
                 "type": "boolean",
+                "attribute": "collapses",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -296,17 +379,20 @@ export class DuetTabGroup {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "as scrolls is now always enabled, tabs never collapse to a dropdown, and this attribute has no effect"
+                        }],
                     "text": "Whether the tab-group collapses to a select dropwdown in minor breakpoints"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "collapses",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "accessibleLabel": {
                 "type": "string",
+                "attribute": "accessible-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -321,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",
@@ -343,16 +429,16 @@ export class DuetTabGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Style variation of the tab group."
+                    "text": "Style variation of the tab group. Note that \"plain-scrolling\" is deprecated, as tab-group now allways has scrolling\nbehavior, use values \"default\", \"plain\" or \"checked\""
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
             "language": {
                 "type": "string",
+                "attribute": "language",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetLanguage",
@@ -379,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",
@@ -408,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",
@@ -431,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",
@@ -451,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",
@@ -471,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",
@@ -497,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",
@@ -523,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",
@@ -546,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",
@@ -566,7 +652,66 @@ 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\"",
+                    "resolved": "\"always\" | \"never\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "By default switches to larger size from small breakpoint.\nNever disables switching to larger size and always forces it."
+                },
+                "getter": false,
+                "setter": false,
+                "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"
             }