@patternfly/elements 1.0.0

package/pf-tabs/BaseTabs.js

@@ -0,0 +1,329 @@
+var _BaseTabs_instances, _a, _BaseTabs_instances_1, _BaseTabs_showScrollButtons, _BaseTabs_overflowOnLeft, _BaseTabs_overflowOnRight, _BaseTabs_logger, _BaseTabs__allTabs, _BaseTabs__allPanels, _BaseTabs__focusableTabs, _BaseTabs__focusTab, _BaseTabs_scrollTimeout, _BaseTabs_activeIndex, _BaseTabs_activeTab_get, _BaseTabs_allTabs_get, _BaseTabs_allTabs_set, _BaseTabs_allPanels_get, _BaseTabs_allPanels_set, _BaseTabs_focusTab_get, _BaseTabs_focusTab_set, _BaseTabs_onSlotchange, _BaseTabs_updateAccessibility, _BaseTabs_onTabExpand, _BaseTabs_deactivateExcept, _BaseTabs_firstFocusable, _BaseTabs_lastFocusable, _BaseTabs_firstTab_get, _BaseTabs_lastTab_get, _BaseTabs_next, _BaseTabs_prev, _BaseTabs_currentIndex, _BaseTabs_activate, _BaseTabs_select, _BaseTabs_onKeydown, _BaseTabs_onScroll, _BaseTabs_firstLastClasses, _BaseTabs_setOverflowState, _BaseTabs_scrollLeft, _BaseTabs_scrollRight;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { property, query, queryAssignedElements } from 'lit/decorators.js';
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+import { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';
+import { BaseTab, TabExpandEvent } from './BaseTab.js';
+import { BaseTabPanel } from './BaseTabPanel.js';
+import { css } from "lit";
+const styles = css `:host {\n  display: block;\n}\n\n[part="tabs-container"] {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n}\n\n[part="tabs-container"]::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-style: solid;\n}\n\n:host button {\n  opacity: 1;\n}\n\n:host button:nth-of-type(1) {\n  margin-inline-end: 0;\n  translate: 0 0;\n}\n\n:host button:nth-of-type(2) {\n  margin-inline-start: 0;\n  translate: 0 0;\n}\n\n[part="tabs"],\n[part="panels"] {\n  display: block;\n}\n\n[part="tabs"] {\n  scrollbar-width: none;\n  position: relative;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n[part="tabs-container"]::before,\n[part="tabs"]::before,\nbutton::before {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  content: "";\n  border-style: solid;\n}\n\n[part="tabs"]::before,\nbutton::before {\n  top: 0;\n}\n\nbutton,\n[part="tabs"]::before {\n  border: 0;\n}\n\nbutton {\n  flex: none;\n  line-height: 1;\n  opacity: 0;\n}\n\nbutton::before {\n  border-block-start-width: 0;\n}\n\nbutton:nth-of-type(1) {\n  translate: -100% 0;\n}\n\nbutton:nth-of-type(2) {\n  translate: 100% 0;\n}\n\nbutton:disabled {\n  pointer-events: none;\n}\n\n`;
+/**
+ * BaseTabs
+ *
+ * @attr [label-scroll-left="Scroll left"] - accessible label for the tab panel's scroll left button.
+ * @attr [label-scroll-right="Scroll right"] - accessible label for the tab panel's scroll right button.
+ *
+ */
+export class BaseTabs extends LitElement {
+    constructor() {
+        super(...arguments);
+        _BaseTabs_instances.add(this);
+        _BaseTabs_showScrollButtons.set(this, false);
+        _BaseTabs_overflowOnLeft.set(this, false);
+        _BaseTabs_overflowOnRight.set(this, false);
+        _BaseTabs_logger.set(this, new Logger(this));
+        _BaseTabs__allTabs.set(this, []);
+        _BaseTabs__allPanels.set(this, []);
+        _BaseTabs__focusableTabs.set(this, []);
+        _BaseTabs__focusTab.set(this, void 0);
+        _BaseTabs_scrollTimeout.set(this, void 0);
+        _BaseTabs_activeIndex.set(this, 0);
+        this.id = this.id || getRandomId(this.localName);
+        _BaseTabs_onTabExpand.set(this, (event) => {
+            if (!(event instanceof TabExpandEvent) ||
+                __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length === 0 || __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length === 0) {
+                return;
+            }
+            const target = event;
+            if (target.active) {
+                this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab === target.tab);
+            }
+        });
+        _BaseTabs_onKeydown.set(this, (event) => {
+            const foundTab = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).find(tab => tab === event.target);
+            if (!foundTab) {
+                return;
+            }
+            switch (event.key) {
+                case 'ArrowUp':
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_prev).call(this);
+                    break;
+                case 'ArrowDown':
+                case 'ArrowRight':
+                    event.preventDefault();
+                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_next).call(this);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstFocusable).call(this));
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_lastFocusable).call(this));
+                    break;
+                default:
+                    return;
+            }
+        });
+        _BaseTabs_onScroll.set(this, () => {
+            clearTimeout(__classPrivateFieldGet(this, _BaseTabs_scrollTimeout, "f"));
+            const { scrollTimeoutDelay } = this.constructor;
+            __classPrivateFieldSet(this, _BaseTabs_scrollTimeout, setTimeout(() => __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_setOverflowState).call(this), scrollTimeoutDelay), "f");
+        });
+    }
+    static isTab(element) {
+        return element instanceof BaseTab;
+    }
+    static isPanel(element) {
+        return element instanceof BaseTabPanel;
+    }
+    get activeIndex() {
+        return __classPrivateFieldGet(this, _BaseTabs_activeIndex, "f");
+    }
+    set activeIndex(index) {
+        const oldIndex = this.activeIndex;
+        const tab = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get)[index];
+        if (tab) {
+            if (tab.disabled) {
+                __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`Disabled tabs can not be active, setting first focusable tab to active`);
+                __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_activate).call(this, __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstFocusable).call(this));
+                index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(t => t === __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstFocusable).call(this));
+                return;
+            }
+            else if (!tab.active) {
+                // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`
+                tab.active = true;
+                return;
+            }
+        }
+        if (index === -1) {
+            __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`No active tab found, setting first focusable tab to active`);
+            __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_activate).call(this, __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstFocusable).call(this));
+            index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(t => t === __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstFocusable).call(this));
+            return;
+        }
+        __classPrivateFieldSet(this, _BaseTabs_activeIndex, index, "f");
+        this.requestUpdate('activeIndex', oldIndex);
+        __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get)[__classPrivateFieldGet(this, _BaseTabs_activeIndex, "f")].hidden = false;
+        // close all tabs that are not the activeIndex
+        __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_deactivateExcept).call(this, __classPrivateFieldGet(this, _BaseTabs_activeIndex, "f"));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('expand', __classPrivateFieldGet(this, _BaseTabs_onTabExpand, "f"));
+        this.addEventListener('keydown', __classPrivateFieldGet(this, _BaseTabs_onKeydown, "f"));
+        __classPrivateFieldGet(BaseTabs, _a, "f", _BaseTabs_instances_1).add(this);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        __classPrivateFieldGet(BaseTabs, _a, "f", _BaseTabs_instances_1).delete(this);
+    }
+    render() {
+        const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor;
+        return html `
+      <div part="container">
+        <div part="tabs-container">${!__classPrivateFieldGet(this, _BaseTabs_showScrollButtons, "f") ? '' : html `
+          <button id="previousTab"
+              aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll left'}"
+              ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflowOnLeft, "f")}"
+              @click="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_scrollLeft)}">
+            <pf-icon icon="${scrollIconLeft}" set="${scrollIconSet}" loading="eager"></pf-icon>
+          </button>`}
+          <slot name="tab"
+                part="tabs"
+                role="tablist"
+                @slotchange="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_onSlotchange)}"></slot> ${!__classPrivateFieldGet(this, _BaseTabs_showScrollButtons, "f") ? '' : html `
+          <button id="nextTab"
+              aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll right'}"
+              ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflowOnRight, "f")}"
+              @click="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_scrollRight)}">
+            <pf-icon icon="${scrollIconRight}" set="${scrollIconSet}" loading="eager"></pf-icon>
+          </button>`}
+        </div>
+        <slot part="panels" @slotchange="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_onSlotchange)}"></slot>
+      </div>
+    `;
+    }
+    async firstUpdated() {
+        __classPrivateFieldGet(this, _BaseTabs_onScroll, "f").call(this);
+        this.tabList.addEventListener('scroll', __classPrivateFieldGet(this, _BaseTabs_onScroll, "f"));
+    }
+    /** override to prevent scroll buttons from showing */
+    get canShowScrollButtons() {
+        return true;
+    }
+}
+_a = BaseTabs, _BaseTabs_showScrollButtons = new WeakMap(), _BaseTabs_overflowOnLeft = new WeakMap(), _BaseTabs_overflowOnRight = new WeakMap(), _BaseTabs_logger = new WeakMap(), _BaseTabs__allTabs = new WeakMap(), _BaseTabs__allPanels = new WeakMap(), _BaseTabs__focusableTabs = new WeakMap(), _BaseTabs__focusTab = new WeakMap(), _BaseTabs_scrollTimeout = new WeakMap(), _BaseTabs_activeIndex = new WeakMap(), _BaseTabs_onTabExpand = new WeakMap(), _BaseTabs_onKeydown = new WeakMap(), _BaseTabs_onScroll = new WeakMap(), _BaseTabs_instances = new WeakSet(), _BaseTabs_activeTab_get = function _BaseTabs_activeTab_get() {
+    const [tab] = __classPrivateFieldGet(this, _BaseTabs__allTabs, "f").filter(tab => tab.active);
+    return tab;
+}, _BaseTabs_allTabs_get = function _BaseTabs_allTabs_get() {
+    return __classPrivateFieldGet(this, _BaseTabs__allTabs, "f");
+}, _BaseTabs_allTabs_set = function _BaseTabs_allTabs_set(tabs) {
+    __classPrivateFieldSet(this, _BaseTabs__allTabs, tabs.filter(tab => this.constructor.isTab(tab)), "f");
+    __classPrivateFieldSet(this, _BaseTabs__focusableTabs, __classPrivateFieldGet(this, _BaseTabs__allTabs, "f").filter(tab => !tab.disabled), "f");
+}, _BaseTabs_allPanels_get = function _BaseTabs_allPanels_get() {
+    return __classPrivateFieldGet(this, _BaseTabs__allPanels, "f");
+}, _BaseTabs_allPanels_set = function _BaseTabs_allPanels_set(panels) {
+    __classPrivateFieldSet(this, _BaseTabs__allPanels, panels.filter(panel => this.constructor.isPanel(panel)), "f");
+}, _BaseTabs_focusTab_get = function _BaseTabs_focusTab_get() {
+    return __classPrivateFieldGet(this, _BaseTabs__focusTab, "f");
+}, _BaseTabs_focusTab_set = function _BaseTabs_focusTab_set(tab) {
+    __classPrivateFieldSet(this, _BaseTabs__focusTab, tab, "f");
+}, _BaseTabs_onSlotchange = function _BaseTabs_onSlotchange(event) {
+    if (event.target.name === 'tab') {
+        __classPrivateFieldSet(this, _BaseTabs_instances, this.tabs, "a", _BaseTabs_allTabs_set);
+    }
+    else {
+        __classPrivateFieldSet(this, _BaseTabs_instances, this.panels, "a", _BaseTabs_allPanels_set);
+    }
+    if (__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length === __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length &&
+        (__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length !== 0 || __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length !== 0)) {
+        __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_updateAccessibility).call(this);
+        this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab.active);
+        __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstLastClasses).call(this);
+    }
+}, _BaseTabs_updateAccessibility = function _BaseTabs_updateAccessibility() {
+    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, index) => {
+        const panel = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get)[index];
+        if (!panel.hasAttribute('aria-labelledby')) {
+            panel.setAttribute('aria-labelledby', tab.id);
+        }
+        tab.setAttribute('aria-controls', panel.id);
+    });
+}, _BaseTabs_deactivateExcept = function _BaseTabs_deactivateExcept(index) {
+    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, i) => tab.active = i === index);
+    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).forEach((panel, i) => panel.hidden = i !== index);
+}, _BaseTabs_firstFocusable = function _BaseTabs_firstFocusable() {
+    const [firstTab] = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f");
+    return firstTab;
+}, _BaseTabs_lastFocusable = function _BaseTabs_lastFocusable() {
+    return __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f").at(-1);
+}, _BaseTabs_firstTab_get = function _BaseTabs_firstTab_get() {
+    const [tab] = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get);
+    return tab;
+}, _BaseTabs_lastTab_get = function _BaseTabs_lastTab_get() {
+    return __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).at(-1);
+}, _BaseTabs_next = function _BaseTabs_next() {
+    // find index of active tab in focusableTabs
+    const currentIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_currentIndex).call(this);
+    // increment focusable index and return focusable tab
+    const nextFocusableIndex = currentIndex + 1;
+    let nextTab;
+    if (nextFocusableIndex >= __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f").length) {
+        // get the first focusable tab
+        [nextTab] = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f");
+    }
+    else {
+        // get index of that focusable tab from all tabs
+        nextTab = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f")[nextFocusableIndex];
+    }
+    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, nextTab);
+}, _BaseTabs_prev = function _BaseTabs_prev() {
+    const currentIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_currentIndex).call(this);
+    // increment focusable index and return focusable tab
+    const nextFocusableIndex = currentIndex - 1;
+    let prevTab;
+    if (nextFocusableIndex < 0) {
+        // get the last focusable tab
+        prevTab = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f")[__classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f").length - 1];
+    }
+    else {
+        // get index of that focusable tab from all tabs
+        prevTab = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f")[nextFocusableIndex];
+    }
+    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_select).call(this, prevTab);
+}, _BaseTabs_currentIndex = function _BaseTabs_currentIndex() {
+    let current;
+    // get current tab
+    if (__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_focusTab_get)?.ariaDisabled === 'true') {
+        current = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_focusTab_get);
+    }
+    else {
+        current = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get);
+    }
+    const index = __classPrivateFieldGet(this, _BaseTabs__focusableTabs, "f").findIndex(tab => tab === current);
+    return index;
+}, _BaseTabs_activate = function _BaseTabs_activate(selectedTab) {
+    if (selectedTab.ariaDisabled !== 'true') {
+        selectedTab.active = true;
+    }
+}, _BaseTabs_select = async function _BaseTabs_select(selectedTab) {
+    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_activate).call(this, selectedTab);
+    __classPrivateFieldSet(this, _BaseTabs_instances, selectedTab, "a", _BaseTabs_focusTab_set);
+    await this.updateComplete;
+    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_focusTab_get).focus();
+}, _BaseTabs_firstLastClasses = function _BaseTabs_firstLastClasses() {
+    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstTab_get).classList.add('first');
+    __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_lastTab_get).classList.add('last');
+}, _BaseTabs_setOverflowState = function _BaseTabs_setOverflowState() {
+    const { canShowScrollButtons } = this;
+    __classPrivateFieldSet(this, _BaseTabs_overflowOnLeft, canShowScrollButtons && !isElementInView(this.tabList, __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstTab_get)), "f");
+    __classPrivateFieldSet(this, _BaseTabs_overflowOnRight, canShowScrollButtons && !isElementInView(this.tabList, __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_lastTab_get)), "f");
+    __classPrivateFieldSet(this, _BaseTabs_showScrollButtons, canShowScrollButtons && (__classPrivateFieldGet(this, _BaseTabs_overflowOnLeft, "f") || __classPrivateFieldGet(this, _BaseTabs_overflowOnRight, "f")), "f");
+    this.requestUpdate();
+}, _BaseTabs_scrollLeft = function _BaseTabs_scrollLeft() {
+    const container = this.tabList;
+    const childrenArr = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get);
+    let firstElementInView;
+    let lastElementOutOfView;
+    for (let i = 0; i < childrenArr.length && !firstElementInView; i++) {
+        if (isElementInView(container, childrenArr[i], false)) {
+            firstElementInView = childrenArr[i];
+            lastElementOutOfView = childrenArr[i - 1];
+        }
+    }
+    if (lastElementOutOfView) {
+        container.scrollLeft -= lastElementOutOfView.scrollWidth;
+    }
+    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_setOverflowState).call(this);
+}, _BaseTabs_scrollRight = function _BaseTabs_scrollRight() {
+    const container = this.tabList;
+    const childrenArr = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get);
+    let lastElementInView;
+    let firstElementOutOfView;
+    for (let i = childrenArr.length - 1; i >= 0 && !lastElementInView; i--) {
+        if (isElementInView(container, childrenArr[i], false)) {
+            lastElementInView = childrenArr[i];
+            firstElementOutOfView = childrenArr[i + 1];
+        }
+    }
+    if (firstElementOutOfView) {
+        container.scrollLeft += firstElementOutOfView.scrollWidth;
+    }
+    __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_setOverflowState).call(this);
+};
+BaseTabs.styles = [styles];
+/** Time in milliseconds to debounce between scroll events and updating scroll button state */
+BaseTabs.scrollTimeoutDelay = 0;
+/** Icon name to use for the scroll left button */
+BaseTabs.scrollIconLeft = 'angle-left';
+/** Icon name to use for the scroll right button */
+BaseTabs.scrollIconRight = 'angle-right';
+/** Icon set to use for the scroll buttons */
+BaseTabs.scrollIconSet = 'fas';
+_BaseTabs_instances_1 = { value: new Set() };
+(() => {
+    // on resize check for overflows to add or remove scroll buttons
+    window.addEventListener('resize', () => {
+        for (const instance of __classPrivateFieldGet(_a, _a, "f", _BaseTabs_instances_1)) {
+            __classPrivateFieldGet(instance, _BaseTabs_onScroll, "f").call(instance);
+        }
+    }, { capture: false });
+})();
+__decorate([
+    queryAssignedElements({ slot: 'tab' })
+], BaseTabs.prototype, "tabs", void 0);
+__decorate([
+    queryAssignedElements()
+], BaseTabs.prototype, "panels", void 0);
+__decorate([
+    query('[part="tabs"]')
+], BaseTabs.prototype, "tabList", void 0);
+__decorate([
+    property({ attribute: false })
+], BaseTabs.prototype, "activeIndex", null);
+//# sourceMappingURL=BaseTabs.js.map

package/pf-tabs/BaseTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\nimport { isElementInView } from '@patternfly/pfe-core/functions/isElementInView.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n  static readonly styles = [styles];\n\n  static isTab(element: BaseTab): element is BaseTab {\n    return element instanceof BaseTab;\n  }\n\n  static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n    return element instanceof BaseTabPanel;\n  }\n\n  /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n  protected static readonly scrollTimeoutDelay: number = 0;\n  /** Icon name to use for the scroll left button */\n  protected static readonly scrollIconLeft: string = 'angle-left';\n  /** Icon name to use for the scroll right button */\n  protected static readonly scrollIconRight: string = 'angle-right';\n  /** Icon set to use for the scroll buttons */\n  protected static readonly scrollIconSet: string = 'fas';\n\n  static #instances = new Set<BaseTabs>();\n\n  static {\n    // on resize check for overflows to add or remove scroll buttons\n    window.addEventListener('resize', () => {\n      for (const instance of this.#instances) {\n        instance.#onScroll();\n      }\n    }, { capture: false });\n  }\n\n  @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n  @queryAssignedElements() private panels!: BaseTabPanel[];\n\n  @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n  #showScrollButtons = false;\n\n  #overflowOnLeft = false;\n\n  #overflowOnRight = false;\n\n  #logger = new Logger(this);\n\n  #_allTabs: BaseTab[] = [];\n\n  #_allPanels: BaseTabPanel[] = [];\n\n  #_focusableTabs: BaseTab[] = [];\n\n  #_focusTab?: BaseTab;\n\n  #scrollTimeout?: ReturnType<typeof setTimeout>;\n\n  #activeIndex = 0;\n\n  id: string = this.id || getRandomId(this.localName);\n\n  @property({ attribute: false })\n  get activeIndex() {\n    return this.#activeIndex;\n  }\n\n  set activeIndex(index: number) {\n    const oldIndex = this.activeIndex;\n    const tab = this.#allTabs[index];\n    if (tab) {\n      if (tab.disabled) {\n        this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n        this.#activate(this.#firstFocusable());\n        index = this.#allTabs.findIndex(t => t === this.#firstFocusable());\n        return;\n      } else if (!tab.active) {\n        // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n        tab.active = true;\n        return;\n      }\n    }\n    if (index === -1) {\n      this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n      this.#activate(this.#firstFocusable());\n      index = this.#allTabs.findIndex(t => t === this.#firstFocusable());\n      return;\n    }\n    this.#activeIndex = index;\n    this.requestUpdate('activeIndex', oldIndex);\n\n    this.#allPanels[this.#activeIndex].hidden = false;\n    // close all tabs that are not the activeIndex\n    this.#deactivateExcept(this.#activeIndex);\n  }\n\n  get #activeTab() {\n    const [tab] = this.#_allTabs.filter(tab => tab.active);\n    return tab;\n  }\n\n  get #allTabs() {\n    return this.#_allTabs;\n  }\n\n  set #allTabs(tabs: BaseTab[]) {\n    this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n    this.#_focusableTabs = this.#_allTabs.filter(tab => !tab.disabled);\n  }\n\n  get #allPanels() {\n    return this.#_allPanels;\n  }\n\n  set #allPanels(panels: BaseTabPanel[]) {\n    this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n  }\n\n  get #focusTab(): BaseTab | undefined {\n    return this.#_focusTab;\n  }\n\n  set #focusTab(tab: BaseTab | undefined) {\n    this.#_focusTab = tab;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('expand', this.#onTabExpand);\n    this.addEventListener('keydown', this.#onKeydown);\n    BaseTabs.#instances.add(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    BaseTabs.#instances.delete(this);\n  }\n\n  override render() {\n    const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n\n    return html`\n      <div part=\"container\">\n        <div part=\"tabs-container\">${!this.#showScrollButtons ? '' : html`\n          <button id=\"previousTab\"\n              aria-label=\"${this.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n              ?disabled=\"${!this.#overflowOnLeft}\"\n              @click=\"${this.#scrollLeft}\">\n            <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n          <slot name=\"tab\"\n                part=\"tabs\"\n                role=\"tablist\"\n                @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#showScrollButtons ? '' : html`\n          <button id=\"nextTab\"\n              aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n              ?disabled=\"${!this.#overflowOnRight}\"\n              @click=\"${this.#scrollRight}\">\n            <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n          </button>`}\n        </div>\n        <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n      </div>\n    `;\n  }\n\n  async firstUpdated() {\n    this.#onScroll();\n    this.tabList.addEventListener('scroll', this.#onScroll);\n  }\n\n  #onSlotchange(event: { target: { name: string; }; }) {\n    if (event.target.name === 'tab') {\n      this.#allTabs = this.tabs;\n    } else {\n      this.#allPanels = this.panels;\n    }\n    if (this.#allTabs.length === this.#allPanels.length &&\n      (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n      this.#updateAccessibility();\n      this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n      this.#firstLastClasses();\n    }\n  }\n\n  #updateAccessibility(): void {\n    this.#allTabs.forEach((tab, index) => {\n      const panel = this.#allPanels[index];\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tab.id);\n      }\n      tab.setAttribute('aria-controls', panel.id);\n    });\n  }\n\n  #onTabExpand = (event: Event): void => {\n    if (!(event instanceof TabExpandEvent) ||\n        this.#allTabs.length === 0 || this.#allPanels.length === 0) {\n      return;\n    }\n\n    const target = event as TabExpandEvent;\n    if (target.active) {\n      this.activeIndex = this.#allTabs.findIndex(tab => tab === target.tab);\n    }\n  };\n\n  #deactivateExcept(index: number) {\n    this.#allTabs.forEach((tab, i) => tab.active = i === index);\n    this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n  }\n\n  #firstFocusable(): BaseTab {\n    const [firstTab] = this.#_focusableTabs;\n    return firstTab;\n  }\n\n  #lastFocusable(): BaseTab {\n    return this.#_focusableTabs.at(-1) as BaseTab;\n  }\n\n  get #firstTab(): BaseTab {\n    const [tab] = this.#allTabs;\n    return tab;\n  }\n\n  get #lastTab(): BaseTab {\n    return this.#allTabs.at(-1) as BaseTab;\n  }\n\n  #next(): void {\n    // find index of active tab in focusableTabs\n    const currentIndex = this.#currentIndex();\n    // increment focusable index and return focusable tab\n    const nextFocusableIndex = currentIndex + 1;\n    let nextTab: BaseTab;\n    if (nextFocusableIndex >= this.#_focusableTabs.length) {\n      // get the first focusable tab\n      [nextTab] = this.#_focusableTabs;\n    } else {\n      // get index of that focusable tab from all tabs\n      nextTab = this.#_focusableTabs[nextFocusableIndex];\n    }\n    this.#select(nextTab);\n  }\n\n  #prev(): void {\n    const currentIndex = this.#currentIndex();\n    // increment focusable index and return focusable tab\n    const nextFocusableIndex = currentIndex - 1;\n    let prevTab: BaseTab;\n    if (nextFocusableIndex < 0) {\n      // get the last focusable tab\n      prevTab = this.#_focusableTabs[this.#_focusableTabs.length - 1];\n    } else {\n      // get index of that focusable tab from all tabs\n      prevTab = this.#_focusableTabs[nextFocusableIndex];\n    }\n    this.#select(prevTab);\n  }\n\n  #currentIndex(): number {\n    let current: BaseTab;\n    // get current tab\n    if (this.#focusTab?.ariaDisabled === 'true') {\n      current = this.#focusTab;\n    } else {\n      current = this.#activeTab;\n    }\n    const index = this.#_focusableTabs.findIndex(tab => tab === current);\n    return index;\n  }\n\n  #activate(selectedTab: BaseTab): void {\n    if (selectedTab.ariaDisabled !== 'true') {\n      selectedTab.active = true;\n    }\n  }\n\n  async #select(selectedTab: BaseTab): Promise<void> {\n    this.#activate(selectedTab);\n    this.#focusTab = selectedTab;\n    await this.updateComplete;\n    this.#focusTab.focus();\n  }\n\n  #onKeydown = (event: KeyboardEvent): void => {\n    const foundTab = this.#allTabs.find(tab => tab === event.target);\n    if (!foundTab) {\n      return;\n    }\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        event.preventDefault();\n        this.#prev();\n        break;\n\n      case 'ArrowDown':\n      case 'ArrowRight':\n        event.preventDefault();\n        this.#next();\n        break;\n\n      case 'Home':\n        event.preventDefault();\n        this.#select(this.#firstFocusable());\n        break;\n\n      case 'End':\n        event.preventDefault();\n        this.#select(this.#lastFocusable());\n        break;\n\n      default:\n        return;\n    }\n  };\n\n  #onScroll = () => {\n    clearTimeout(this.#scrollTimeout);\n    const { scrollTimeoutDelay } = (this.constructor as typeof BaseTabs);\n    this.#scrollTimeout = setTimeout(() => this.#setOverflowState(), scrollTimeoutDelay);\n  };\n\n  #firstLastClasses() {\n    this.#firstTab.classList.add('first');\n    this.#lastTab.classList.add('last');\n  }\n\n  /** override to prevent scroll buttons from showing */\n  protected get canShowScrollButtons() {\n    return true;\n  }\n\n  #setOverflowState(): void {\n    const { canShowScrollButtons } = this;\n    this.#overflowOnLeft = canShowScrollButtons && !isElementInView(this.tabList, this.#firstTab);\n    this.#overflowOnRight = canShowScrollButtons && !isElementInView(this.tabList, this.#lastTab);\n    this.#showScrollButtons = canShowScrollButtons && (this.#overflowOnLeft || this.#overflowOnRight);\n    this.requestUpdate();\n  }\n\n  #scrollLeft(): void {\n    const container = this.tabList;\n    const childrenArr = this.#allTabs;\n    let firstElementInView: BaseTab | undefined;\n    let lastElementOutOfView: BaseTab | undefined;\n    for (let i = 0; i < childrenArr.length && !firstElementInView; i++) {\n      if (isElementInView(container, childrenArr[i] as HTMLElement, false)) {\n        firstElementInView = childrenArr[i];\n        lastElementOutOfView = childrenArr[i - 1];\n      }\n    }\n    if (lastElementOutOfView) {\n      container.scrollLeft -= lastElementOutOfView.scrollWidth;\n    }\n    this.#setOverflowState();\n  }\n\n  #scrollRight(): void {\n    const container = this.tabList;\n    const childrenArr = this.#allTabs;\n    let lastElementInView: BaseTab | undefined;\n    let firstElementOutOfView: BaseTab | undefined;\n    for (let i = childrenArr.length - 1; i >= 0 && !lastElementInView; i--) {\n      if (isElementInView(container, childrenArr[i] as HTMLElement, false)) {\n        lastElementInView = childrenArr[i];\n        firstElementOutOfView = childrenArr[i + 1];\n      }\n    }\n    if (firstElementOutOfView) {\n      container.scrollLeft += firstElementOutOfView.scrollWidth;\n    }\n    this.#setOverflowState();\n  }\n}\n"]}

package/pf-tabs/demo/demo.css

@@ -0,0 +1,62 @@
+main {
+  display: block;
+  grid: unset;
+}
+
+.example {
+  margin: 0 auto;
+  padding: 0 16px 32px;
+  width: 100%;
+  max-width: 1008px;
+}
+
+.example:last-of-type {
+  padding-block-end: 64px;
+}
+
+.input {
+  margin-block-start: 16px;
+}
+
+@media screen and (min-width: 768px) {
+  .example {
+    padding: 0 32px 32px;
+  }
+}
+
+/*
+  Inset Examples set class on host::part(tabs-container)
+*/
+.inset-sm::part(tabs-container) {
+  --pf-c-tabs--inset: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--sm, 0.5rem);
+}
+
+.inset-md::part(tabs-container) {
+  --pf-c-tabs--inset: var(--pf-global--spacer--md, 1rem);
+  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--md, 1rem);
+  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--md, 1rem);
+}
+
+.inset-lg::part(tabs-container) {
+  --pf-c-tabs--inset: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--lg, 1.5rem);
+  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--lg, 1.5rem);
+}
+
+.inset-xl::part(tabs-container) {
+  --pf-c-tabs--inset: var(--pf-global--spacer--xl, 2rem);
+  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--xl, 2rem);
+  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--xl, 2rem);
+}
+
+.inset-2xl::part(tabs-container) {
+  --pf-c-tabs--inset: var(--pf-global--spacer--2xl, 3rem);
+  --pf-c-tabs--m-vertical--inset: var(--pf-global--spacer--2xl, 3rem);
+  --pf-c-tabs--m-vertical--m-box--inset: var(--pf-global--spacer--2xl, 3rem);
+}
+
+.inset-page::part(tabs-container) {
+  --pf-c-tabs--inset: var(--pf-c-tabs--m-page-insets--inset, var(--pf-global--spacer--md, 1rem));
+}

package/pf-tabs/demo/pf-tabs.js

@@ -0,0 +1,43 @@
+import '@patternfly/elements/pf-icon/pf-icon.js';
+import '@patternfly/elements/pf-switch/pf-switch.js';
+import '@patternfly/elements/pf-tabs/pf-tabs.js';
+
+const toggleVariant = document.getElementById('toggle-variant');
+const resize = document.getElementById('overflow');
+const verticalInput = document.getElementById('toggle-vertical');
+const resizeInput = document.getElementById('toggle-resize');
+const verticalVariant = document.querySelector('pf-tabs[vertical]');
+const boxVariant = document.querySelector('pf-tabs[box]');
+const inset = document.querySelector('#inset');
+
+function variantToggle() {
+  boxVariant.setAttribute('box', toggleVariant.checked ? 'dark' : 'light');
+}
+
+function verticalToggle() {
+  if (verticalInput.checked) {
+    verticalVariant.setAttribute('box', 'dark');
+  } else {
+    verticalVariant.removeAttribute('box');
+  }
+}
+
+function resizeToggle() {
+  if (resizeInput.checked) {
+    resize.setAttribute('box', 'dark');
+  } else {
+    resize.removeAttribute('box');
+  }
+}
+
+function insetToggle(event) {
+  inset.classList = event.target.value;
+}
+
+for (const input of document.querySelectorAll('input[name="toggle-inset"]')) {
+  input.addEventListener('change', insetToggle);
+}
+
+toggleVariant.addEventListener('change', variantToggle);
+resizeInput.addEventListener('change', resizeToggle);
+verticalInput.addEventListener('change', verticalToggle);

package/pf-tabs/pf-tab-panel.css

@@ -0,0 +1,3 @@
+:host([box="light"]) {
+  background-color: var(--pf-c-tab-content--m-light-300, var(--pf-global--BackgroundColor--light-300, #f0f0f0));
+}

package/pf-tabs/pf-tab-panel.d.ts

@@ -0,0 +1,17 @@
+import { BaseTabPanel } from './BaseTabPanel.js';
+/**
+ * @slot - Tab panel content
+ *
+ * @cssprop {<color>} --pf-c-tab-content--m-light-300 {@default `#f0f0f0`}
+ *
+ * @csspart container - container for the panel content
+ */
+export declare class PfTabPanel extends BaseTabPanel {
+    static readonly styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-tab-panel': PfTabPanel;
+    }
+}

package/pf-tabs/pf-tab-panel.js

@@ -0,0 +1,25 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+import { css } from "lit";
+const styles = css `:host([box="light"]) {\n  background-color: var(--pf-c-tab-content--m-light-300, var(--pf-global--BackgroundColor--light-300, #f0f0f0));\n}\n`;
+import { BaseTabPanel } from './BaseTabPanel.js';
+/**
+ * @slot - Tab panel content
+ *
+ * @cssprop {<color>} --pf-c-tab-content--m-light-300 {@default `#f0f0f0`}
+ *
+ * @csspart container - container for the panel content
+ */
+let PfTabPanel = class PfTabPanel extends BaseTabPanel {
+    connectedCallback() {
+        super.connectedCallback();
+        this.id || (this.id = getRandomId('pf-tab-panel'));
+    }
+};
+PfTabPanel.styles = [...BaseTabPanel.styles, styles];
+PfTabPanel = __decorate([
+    customElement('pf-tab-panel')
+], PfTabPanel);
+export { PfTabPanel };
+//# sourceMappingURL=pf-tab-panel.js.map

package/pf-tabs/pf-tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tab-panel.js","sourceRoot":"","sources":["pf-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;;;AAIvE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;GAMG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,YAAY;IAG1C,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;IAC1C,CAAC;;AALe,iBAAM,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAD/C,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAOtB;SAPY,UAAU","sourcesContent":["import { customElement } from 'lit/decorators.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport styles from './pf-tab-panel.css';\n\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\n/**\n * @slot - Tab panel content\n *\n * @cssprop {<color>} --pf-c-tab-content--m-light-300 {@default `#f0f0f0`}\n *\n * @csspart container - container for the panel content\n */\n@customElement('pf-tab-panel')\nexport class PfTabPanel extends BaseTabPanel {\n  static readonly styles = [...BaseTabPanel.styles, styles];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tab-panel': PfTabPanel;\n  }\n}\n"]}