@six-group/ui-library 4.0.3 → 4.1.0

package/dist/collection/components/six-tab-group/six-tab-group.js

@@ -18,331 +18,332 @@ import { flipAnimate } from "../../utils/animation";
  * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.
  */
 export class SixTabGroup {
-  constructor() {
-    this.handleClick = (event) => {
-      const target = event.target;
-      const tab = target.closest('six-tab');
-      const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest('six-tab-group');
-      // Ensure the target tab is in this tab group
-      if (tabGroup !== this.host) {
-        return false;
-      }
-      if (tab != null) {
-        this.setActiveTab(tab);
-      }
-    };
-    this.handleKeyDown = (event) => {
-      if (this.nav == null)
-        return;
-      const target = event.target;
-      const tab = target.closest('six-tab');
-      const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest('six-tab-group');
-      // Ensure the target tab is in this tab group
-      if (tabGroup !== this.host) {
-        return false;
-      }
-      // Move focus left or right
-      if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
-        const activeEl = document.activeElement;
-        if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {
-          const tabs = this.getAllTabs();
-          let index = tabs.indexOf(activeEl);
-          if (event.key === 'Home') {
-            index = 0;
-          }
-          else if (event.key === 'End') {
-            index = tabs.length - 1;
-          }
-          else if (event.key === 'ArrowLeft') {
-            index = Math.max(0, index - 1);
-          }
-          else if (event.key === 'ArrowRight') {
-            index = Math.min(tabs.length - 1, index + 1);
-          }
-          tabs[index].setFocus({ preventScroll: true });
-          this.setActiveTab(tabs[index]);
-          if (['top', 'bottom'].includes(this.placement)) {
-            scrollIntoView(tabs[index], this.nav, 'horizontal');
-          }
-          event.preventDefault();
+    constructor() {
+        this.handleClick = (event) => {
+            const target = event.target;
+            const tab = target.closest('six-tab');
+            const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest('six-tab-group');
+            // Ensure the target tab is in this tab group
+            if (tabGroup !== this.host) {
+                return false;
+            }
+            if (tab != null) {
+                this.setActiveTab(tab);
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (this.nav == null)
+                return;
+            const target = event.target;
+            const tab = target.closest('six-tab');
+            const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest('six-tab-group');
+            // Ensure the target tab is in this tab group
+            if (tabGroup !== this.host) {
+                return false;
+            }
+            // Move focus left or right
+            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+                const activeEl = document.activeElement;
+                if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {
+                    const tabs = this.getAllTabs();
+                    let index = tabs.indexOf(activeEl);
+                    if (event.key === 'Home') {
+                        index = 0;
+                    }
+                    else if (event.key === 'End') {
+                        index = tabs.length - 1;
+                    }
+                    else if (event.key === 'ArrowLeft') {
+                        index = Math.max(0, index - 1);
+                    }
+                    else if (event.key === 'ArrowRight') {
+                        index = Math.min(tabs.length - 1, index + 1);
+                    }
+                    tabs[index].setFocus({ preventScroll: true });
+                    this.setActiveTab(tabs[index]);
+                    if (['top', 'bottom'].includes(this.placement)) {
+                        scrollIntoView(tabs[index], this.nav, 'horizontal');
+                    }
+                    event.preventDefault();
+                }
+            }
+        };
+        this.handleScrollLeft = () => {
+            if (this.nav == null)
+                return;
+            this.nav.scroll({
+                left: this.nav.scrollLeft - this.nav.clientWidth,
+                behavior: 'smooth',
+            });
+        };
+        this.handleScrollRight = () => {
+            if (this.nav == null)
+                return;
+            this.nav.scroll({
+                left: this.nav.scrollLeft + this.nav.clientWidth,
+                behavior: 'smooth',
+            });
+        };
+        this.hasScrollControls = false;
+        this.placement = 'top';
+        this.noScrollControls = false;
+    }
+    handleNoScrollControlsChange() {
+        this.updateScrollControls();
+    }
+    componentDidLoad() {
+        if (this.tabGroup == null || this.nav == null)
+            return;
+        // Set initial tab state when the tabs first become visible
+        const observer = new IntersectionObserver((entries, observer) => {
+            if (entries[0].intersectionRatio > 0) {
+                this.setAriaLabels();
+                this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);
+                observer.unobserve(entries[0].target);
+            }
+        });
+        observer.observe(this.host);
+        this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());
+        this.resizeObserver.observe(this.nav);
+        requestAnimationFrame(() => this.updateScrollControls());
+        // Update aria labels if the DOM changes
+        this.mutationObserver = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                return !['aria-labelledby', 'aria-controls'].includes((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : '');
+            })) {
+                setTimeout(() => this.setAriaLabels());
+            }
+        });
+        this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver == null || this.tabGroup == null || this.nav == null || this.resizeObserver == null) {
+            return;
+        }
+        this.mutationObserver.disconnect();
+        this.resizeObserver.unobserve(this.nav);
+    }
+    /** Shows the specified tab panel. */
+    async show(panel) {
+        const tabs = this.getAllTabs();
+        const tab = tabs.find((el) => el.panel === panel);
+        if (tab != null) {
+            this.setActiveTab(tab);
         }
-      }
-    };
-    this.handleScrollLeft = () => {
-      if (this.nav == null)
-        return;
-      this.nav.scroll({
-        left: this.nav.scrollLeft - this.nav.clientWidth,
-        behavior: 'smooth',
-      });
-    };
-    this.handleScrollRight = () => {
-      if (this.nav == null)
-        return;
-      this.nav.scroll({
-        left: this.nav.scrollLeft + this.nav.clientWidth,
-        behavior: 'smooth',
-      });
-    };
-    this.hasScrollControls = false;
-    this.placement = 'top';
-    this.noScrollControls = false;
-  }
-  handleNoScrollControlsChange() {
-    this.updateScrollControls();
-  }
-  componentDidLoad() {
-    if (this.tabGroup == null || this.nav == null)
-      return;
-    // Set initial tab state when the tabs first become visible
-    const observer = new IntersectionObserver((entries, observer) => {
-      if (entries[0].intersectionRatio > 0) {
-        this.setAriaLabels();
-        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);
-        observer.unobserve(entries[0].target);
-      }
-    });
-    observer.observe(this.host);
-    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());
-    this.resizeObserver.observe(this.nav);
-    requestAnimationFrame(() => this.updateScrollControls());
-    // Update aria labels if the DOM changes
-    this.mutationObserver = new MutationObserver((mutations) => {
-      if (mutations.some((mutation) => {
+    }
+    getAllTabs(includeDisabled = false) {
         var _a;
-        return !['aria-labelledby', 'aria-controls'].includes((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : '');
-      })) {
-        setTimeout(() => this.setAriaLabels());
-      }
-    });
-    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
-  }
-  disconnectedCallback() {
-    if (this.mutationObserver == null || this.tabGroup == null || this.nav == null || this.resizeObserver == null) {
-      return;
+        const slot = (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (slot == null)
+            return [];
+        return [...slot.assignedElements()].filter((el) => {
+            return includeDisabled
+                ? el.tagName.toLowerCase() === 'six-tab'
+                : el.tagName.toLowerCase() === 'six-tab' && !el.disabled;
+        });
     }
-    this.mutationObserver.disconnect();
-    this.resizeObserver.unobserve(this.nav);
-  }
-  /** Shows the specified tab panel. */
-  async show(panel) {
-    const tabs = this.getAllTabs();
-    const tab = tabs.find((el) => el.panel === panel);
-    if (tab != null) {
-      this.setActiveTab(tab);
+    getAllPanels() {
+        var _a;
+        const slot = (_a = this.body) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (slot == null)
+            return [];
+        return [...slot.assignedElements()].filter((el) => el.tagName.toLowerCase() === 'six-tab-panel');
     }
-  }
-  getAllTabs(includeDisabled = false) {
-    var _a;
-    const slot = (_a = this.tabs) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-    if (slot == null)
-      return [];
-    return [...slot.assignedElements()].filter((el) => {
-      return includeDisabled
-        ? el.tagName.toLowerCase() === 'six-tab'
-        : el.tagName.toLowerCase() === 'six-tab' && !el.disabled;
-    });
-  }
-  getAllPanels() {
-    var _a;
-    const slot = (_a = this.body) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
-    if (slot == null)
-      return [];
-    return [...slot.assignedElements()].filter((el) => el.tagName.toLowerCase() === 'six-tab-panel');
-  }
-  getActiveTab() {
-    return this.getAllTabs().find((el) => el.active);
-  }
-  updateScrollControls() {
-    if (this.nav == null)
-      return;
-    this.hasScrollControls = this.noScrollControls
-      ? false
-      : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
-  }
-  setActiveTab(tab, emitEvents = true) {
-    var _a, _b, _c;
-    if (this.nav == null)
-      return;
-    const newIndicator = (_a = tab === null || tab === void 0 ? void 0 : tab.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab__indicator');
-    const oldIndicator = (_c = (_b = this.getActiveTab()) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.tab__indicator');
-    if (oldIndicator != null && newIndicator != null) {
-      flipAnimate(newIndicator, oldIndicator);
+    getActiveTab() {
+        return this.getAllTabs().find((el) => el.active);
     }
-    if (tab !== this.activeTab && !tab.disabled) {
-      const previousTab = this.activeTab;
-      this.activeTab = tab;
-      // Sync tabs and panels
-      this.getAllTabs().map((el) => (el.active = el === this.activeTab));
-      this.getAllPanels().map((el) => { var _a; return (el.active = el.name === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)); });
-      if (['top', 'bottom'].includes(this.placement)) {
-        scrollIntoView(this.activeTab, this.nav, 'horizontal');
-      }
-      // Emit events
-      if (emitEvents) {
-        if (previousTab != null) {
-          this.sixTabHide.emit({ name: previousTab.panel });
-        }
-        this.sixTabShow.emit({ name: this.activeTab.panel });
-      }
+    updateScrollControls() {
+        if (this.nav == null)
+            return;
+        this.hasScrollControls = this.noScrollControls
+            ? false
+            : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
     }
-  }
-  setAriaLabels() {
-    const tabs = this.getAllTabs();
-    const panels = this.getAllPanels();
-    // Link each tab with its corresponding panel
-    tabs.map((tab) => {
-      var _a, _b;
-      const panel = panels.find((el) => el.name === tab.panel);
-      if (panel != null) {
-        tab.setAttribute('aria-controls', (_a = panel.getAttribute('id')) !== null && _a !== void 0 ? _a : '');
-        panel.setAttribute('aria-labelledby', (_b = tab.getAttribute('id')) !== null && _b !== void 0 ? _b : '');
-      }
-    });
-  }
-  render() {
-    return (h("div", { part: "base", ref: (el) => (this.tabGroup = el), class: {
-        'tab-group': true,
-        // Placements
-        'tab-group--top': this.placement === 'top',
-        'tab-group--bottom': this.placement === 'bottom',
-        'tab-group--left': this.placement === 'left',
-        'tab-group--right': this.placement === 'right',
-        'tab-group--has-scroll-controls': this.hasScrollControls,
-      }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "tab-group__nav-container" }, this.hasScrollControls && (h("six-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--left", exportparts: "base:scroll-button", name: "chevron_left", onClick: this.handleScrollLeft })), h("div", { ref: (el) => (this.nav = el), key: "nav", part: "nav", class: "tab-group__nav" }, h("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("slot", { name: "nav" }))), this.hasScrollControls && (h("six-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), h("div", { ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", null))));
-  }
-  static get is() { return "six-tab-group"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-tab-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-tab-group.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'top' | 'bottom' | 'left' | 'right'",
-          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The placement of the tabs."
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'top'"
-      },
-      "noScrollControls": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disables the scroll arrows that appear when tabs overflow."
-        },
-        "attribute": "no-scroll-controls",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasScrollControls": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixTabShow",
-        "name": "six-tab-show",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a tab is shown."
-        },
-        "complexType": {
-          "original": "SixTabShowPayload",
-          "resolved": "SixTabShowPayload",
-          "references": {
-            "SixTabShowPayload": {
-              "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-tab-group/six-tab-group.tsx",
-              "id": "src/components/six-tab-group/six-tab-group.tsx::SixTabShowPayload"
-            }
-          }
+    setActiveTab(tab, emitEvents = true) {
+        var _a, _b, _c;
+        if (this.nav == null)
+            return;
+        const newIndicator = (_a = tab === null || tab === void 0 ? void 0 : tab.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tab__indicator');
+        const oldIndicator = (_c = (_b = this.getActiveTab()) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.tab__indicator');
+        if (oldIndicator != null && newIndicator != null) {
+            flipAnimate(newIndicator, oldIndicator);
         }
-      }, {
-        "method": "sixTabHide",
-        "name": "six-tab-hide",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when a tab is hidden."
-        },
-        "complexType": {
-          "original": "SixTabHidePayload",
-          "resolved": "SixTabHidePayload",
-          "references": {
-            "SixTabHidePayload": {
-              "location": "local",
-              "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-tab-group/six-tab-group.tsx",
-              "id": "src/components/six-tab-group/six-tab-group.tsx::SixTabHidePayload"
+        if (tab !== this.activeTab && !tab.disabled) {
+            const previousTab = this.activeTab;
+            this.activeTab = tab;
+            // Sync tabs and panels
+            this.getAllTabs().map((el) => (el.active = el === this.activeTab));
+            this.getAllPanels().map((el) => { var _a; return (el.active = el.name === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)); });
+            if (['top', 'bottom'].includes(this.placement)) {
+                scrollIntoView(this.activeTab, this.nav, 'horizontal');
             }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "(panel: string) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            // Emit events
+            if (emitEvents) {
+                if (previousTab != null) {
+                    this.sixTabHide.emit({ name: previousTab.panel });
+                }
+                this.sixTabShow.emit({ name: this.activeTab.panel });
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the specified tab panel.",
-          "tags": []
         }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "noScrollControls",
-        "methodName": "handleNoScrollControlsChange"
-      }];
-  }
+    }
+    setAriaLabels() {
+        const tabs = this.getAllTabs();
+        const panels = this.getAllPanels();
+        // Link each tab with its corresponding panel
+        tabs.map((tab) => {
+            var _a, _b;
+            const panel = panels.find((el) => el.name === tab.panel);
+            if (panel != null) {
+                tab.setAttribute('aria-controls', (_a = panel.getAttribute('id')) !== null && _a !== void 0 ? _a : '');
+                panel.setAttribute('aria-labelledby', (_b = tab.getAttribute('id')) !== null && _b !== void 0 ? _b : '');
+            }
+        });
+    }
+    render() {
+        return (h("div", { part: "base", ref: (el) => (this.tabGroup = el), class: {
+                'tab-group': true,
+                // Placements
+                'tab-group--top': this.placement === 'top',
+                'tab-group--bottom': this.placement === 'bottom',
+                'tab-group--left': this.placement === 'left',
+                'tab-group--right': this.placement === 'right',
+                'tab-group--has-scroll-controls': this.hasScrollControls,
+            }, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("div", { class: "tab-group__nav-container" }, this.hasScrollControls && (h("six-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--left", exportparts: "base:scroll-button", name: "chevron_left", onClick: this.handleScrollLeft })), h("div", { ref: (el) => (this.nav = el), key: "nav", part: "nav", class: "tab-group__nav" }, h("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" }, h("slot", { name: "nav" }))), this.hasScrollControls && (h("six-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))), h("div", { ref: (el) => (this.body = el), part: "body", class: "tab-group__body" }, h("slot", null))));
+    }
+    static get is() { return "six-tab-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-tab-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-tab-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the tabs."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "noScrollControls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the scroll arrows that appear when tabs overflow."
+                },
+                "attribute": "no-scroll-controls",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasScrollControls": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixTabShow",
+                "name": "six-tab-show",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a tab is shown."
+                },
+                "complexType": {
+                    "original": "SixTabShowPayload",
+                    "resolved": "SixTabShowPayload",
+                    "references": {
+                        "SixTabShowPayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-tab-group/six-tab-group.tsx",
+                            "id": "src/components/six-tab-group/six-tab-group.tsx::SixTabShowPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixTabHide",
+                "name": "six-tab-hide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a tab is hidden."
+                },
+                "complexType": {
+                    "original": "SixTabHidePayload",
+                    "resolved": "SixTabHidePayload",
+                    "references": {
+                        "SixTabHidePayload": {
+                            "location": "local",
+                            "path": "/home/runner/work/six-webcomponents/six-webcomponents/libraries/ui-library/src/components/six-tab-group/six-tab-group.tsx",
+                            "id": "src/components/six-tab-group/six-tab-group.tsx::SixTabHidePayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(panel: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "panel",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows the specified tab panel.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "noScrollControls",
+                "methodName": "handleNoScrollControlsChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-tab-group.js.map