@xplortech/apollo-core 2.6.0 → 2.7.1

package/dist/collection/components/xpl-tabs/tabs.stories.js

@@ -1,78 +1,28 @@
+import { renderTabsStoryMarkup, tabsPlainDomUnderlineStoryHtml, tabsStoryBaseArgTypes, tabsUnderlineDefaultArgs, } from "./tabs.shared";
 export default {
     title: 'Components/Tabs',
+    component: 'xpl-tabs',
     parameters: {
         actions: {
             handles: ['tabChange'],
         },
-    },
-    argTypes: {
-        tabsLength: {
-            control: {
-                type: 'number',
-            },
-        },
-        fullWidth: {
-            control: {
-                type: 'boolean',
+        docs: {
+            description: {
+                component: 'Underline tabs use `xpl-tabs` with `type="tabs"` (default). **Segment Control** is the same component with `type="segment"` — see **Components/Segment Control** in the sidebar.',
             },
         },
     },
+    argTypes: Object.assign(Object.assign({}, tabsStoryBaseArgTypes), { type: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.type), { table: { disable: true } }), icon: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.icon), { table: { disable: true } }), iconPosition: Object.assign(Object.assign({}, tabsStoryBaseArgTypes.iconPosition), { table: { disable: true } }) }),
 };
-const renderHeadingAndPanel = (tabsLength) => Array.from({ length: tabsLength }, (_, index) => `
-        <xpl-tab target="tab${index}" slot="heading">Tab ${index + 1}</xpl-tab>
-        <xpl-tab-panel target="tab${index}" slot="panel">Tab ${index + 1} content</xpl-tab-panel>
-    `).join('');
-export const Tabs = ({ tabsLength, fullWidth }) => `
-    <xpl-tabs value="tab${tabsLength - 1}" full-width="${fullWidth}">
-        ${renderHeadingAndPanel(tabsLength)}
-    </xpl-tabs>
-`;
-Tabs.args = {
-    tabsLength: 2,
-    fullWidth: false,
-};
+export const Tabs = (args, context) => renderTabsStoryMarkup(args, context !== null && context !== void 0 ? context : {});
+Tabs.args = tabsUnderlineDefaultArgs;
 Tabs.parameters = {
     layout: 'padded',
     'web-component': {
-        render: (({ tabsLength, fullWidth }) => [
-            `<xpl-tabs value="tab2" full-width="${fullWidth}">
-                ${renderHeadingAndPanel(tabsLength)}
-            </xpl-tabs>`,
-        ])(Tabs.args),
+        render: renderTabsStoryMarkup(tabsUnderlineDefaultArgs),
     },
     html: {
-        render: (({ fullWidth }) => [
-            `<div class="xpl-tabs ${fullWidth ? 'xpl-tabs--full-width' : ''}">
-                <xpl-select classnames="xpl-tabs__mobile-select" selectedvalues="tab0"></xpl-select>
-                <div class="xpl-tabs__headings" role="tablist">
-                    <div
-                    class="xpl-tabs__active-bar"
-                    style="transform: translateX(77.5156px); width: 47.75px"
-                    ></div>
-                    <div class="xpl-tab">
-                    <a class="xpl-tab__button" role="tab" aria-controls="tab0">Tab 1</a>
-                    </div>
-                    <div class="xpl-tab">
-                    <a class="xpl-tab__button" role="tab" aria-controls="tab1">Tab 2</a>
-                    </div>
-                </div>
-
-                <div class="xpl-tabs__panels">
-                    <div class="xpl-tab-panel">
-                    <div class="xpl-text-title-4">Tab 1 content</div>
-                    <p class="xpl-text-body">
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
-                    </p>
-                    </div>
-                    <div class="xpl-tab-panel">
-                    <div class="xpl-text-title-4">Tab 2 content</div>
-                    <p class="xpl-text-body">
-                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
-                    </p>
-                    </div>
-                </div>
-            </div>`,
-        ])(Tabs.args),
+        render: tabsPlainDomUnderlineStoryHtml,
     },
     design: {
         type: 'figma',

package/dist/collection/components/xpl-tabs/xpl-tabs.js

@@ -1,39 +1,190 @@
 import { Host, h, } from "@stencil/core";
+const PILL_LABEL_ICON_SELECTORS = '.xpl-button__icon, xpl-icon';
+let xplTabsInstanceCounter = 0;
+function tabHeadingLabelFromElement(tab) {
+    var _a, _b;
+    const pillInner = tab.querySelector('xpl-button button');
+    if (pillInner) {
+        const clone = pillInner.cloneNode(true);
+        if (clone instanceof HTMLElement) {
+            clone.querySelectorAll(PILL_LABEL_ICON_SELECTORS).forEach((node) => node.remove());
+            const text = (_a = clone.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, ' ').trim();
+            if (text) {
+                return text;
+            }
+        }
+    }
+    const underline = tab.querySelector('.xpl-tab__button');
+    if (underline) {
+        return Array.from(underline.childNodes)
+            .filter((node) => node.nodeType === Node.TEXT_NODE)
+            .map((node) => { var _a; return ((_a = node.textContent) !== null && _a !== void 0 ? _a : '').trim(); })
+            .join(' ');
+    }
+    return (_b = tab.getAttribute('target')) !== null && _b !== void 0 ? _b : '';
+}
 export class Tabs {
     constructor() {
-        this.fullWidth = false;
-        this.selectedValue = this.getDefaultValue();
+        this.tabHeadings = [];
+        this.tabPanels = [];
+        this.tablistKeydownBound = false;
         this.activeBarPosition = {
             left: 0,
             width: 0,
         };
+        this.choicesTick = 1;
         this.isMobileSelectChange = false;
-        this.tabHeadings = [];
-        this.tabPanels = [];
+        this.selectedValue = '';
+        this.disabled = false;
+        this.fullWidth = false;
+        this.type = 'tabs';
         this.handleTabChange = (target) => {
-            this.updateTabsSelectedState(target);
+            this.applySelection(target);
+        };
+        this.onTablistKeydown = async (ev) => {
+            var _a, _b;
+            if (this.disabled) {
+                return;
+            }
+            const tabHost = (_b = (_a = ev.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, 'xpl-tab');
+            if (!tabHost || !this.tabHeadings.includes(tabHost)) {
+                return;
+            }
+            const { key } = ev;
+            const rtl = this.isTablistRtl();
+            let moveForward = false;
+            let moveBackward = false;
+            if (rtl) {
+                if (key === 'ArrowLeft' || key === 'ArrowDown') {
+                    moveForward = true;
+                }
+                else if (key === 'ArrowRight' || key === 'ArrowUp') {
+                    moveBackward = true;
+                }
+            }
+            else if (key === 'ArrowRight' || key === 'ArrowDown') {
+                moveForward = true;
+            }
+            else if (key === 'ArrowLeft' || key === 'ArrowUp') {
+                moveBackward = true;
+            }
+            const isArrow = moveForward || moveBackward;
+            const isHome = key === 'Home';
+            const isEnd = key === 'End';
+            if (!isArrow && !isHome && !isEnd) {
+                return;
+            }
+            const enabled = this.getEnabledTabHeadingsSync();
+            if (enabled.length === 0) {
+                return;
+            }
+            const currentIndex = enabled.indexOf(tabHost);
+            if (currentIndex === -1) {
+                return;
+            }
+            let nextIndex;
+            if (isArrow) {
+                if (moveForward) {
+                    nextIndex = (currentIndex + 1) % enabled.length;
+                }
+                else {
+                    nextIndex = (currentIndex - 1 + enabled.length) % enabled.length;
+                }
+            }
+            else if (isHome) {
+                nextIndex = 0;
+            }
+            else {
+                nextIndex = enabled.length - 1;
+            }
+            const nextTab = enabled[nextIndex];
+            const nextValue = nextTab === null || nextTab === void 0 ? void 0 : nextTab.getAttribute('target');
+            if (!nextValue) {
+                return;
+            }
+            const currentTarget = tabHost.getAttribute('target');
+            ev.preventDefault();
+            if (nextValue === currentTarget) {
+                return;
+            }
+            this.applySelection(nextValue);
+            await nextTab.focusTrigger();
+            this.tabChange.emit(nextValue);
         };
     }
-    onWindowResize() {
-        this.updateActiveBarPosition();
+    onDisabledChanged() {
+        this.syncGroupDisabledOnTabs();
+        if (!this.disabled) {
+            this.syncRovingTabindex();
+        }
     }
-    getDefaultValue() {
-        var _a, _b;
-        return this.value || ((_b = (_a = this.tabHeadings) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getAttribute('target')) || '';
+    onFullWidthChanged() {
+        this.syncFullWidthOnTabs();
     }
-    updateActiveBarPosition() {
-        const tabHeading = this.tabHeadings.find((heading) => heading.getAttribute('target') === this.selectedValue);
-        if (!this.headingsContainerRef || !tabHeading) {
+    onTypeChanged() {
+        this.syncVariantOnTabs();
+    }
+    onValueChanged(newValue) {
+        this.applySelection(newValue);
+    }
+    connectedCallback() {
+        if (!this.el.hasAttribute('data-tabs-instance-id')) {
+            xplTabsInstanceCounter += 1;
+            this.el.setAttribute('data-tabs-instance-id', `xpl-tg-${xplTabsInstanceCounter}`);
+        }
+        if (typeof MutationObserver === 'undefined') {
             return;
         }
-        const tabRect = tabHeading.getBoundingClientRect();
-        const containerRect = this.headingsContainerRef.getBoundingClientRect();
-        this.activeBarPosition = {
-            left: tabRect.left - containerRect.left,
-            width: tabRect.width,
-        };
+        this.observer = new MutationObserver(() => {
+            this.collectTabs(true);
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        if (this.headingsContainerRef && this.tablistKeydownBound) {
+            this.headingsContainerRef.removeEventListener('keydown', this.onTablistKeydown);
+            this.tablistKeydownBound = false;
+        }
+        if (this.rafId !== undefined) {
+            cancelAnimationFrame(this.rafId);
+            this.rafId = undefined;
+        }
+    }
+    componentWillLoad() {
+        this.selectedValue = this.getDefaultValue();
     }
-    updateTabsSelectedState(newValue) {
+    componentDidLoad() {
+        this.collectTabs(false);
+        this.attachTablistKeydown();
+    }
+    componentDidUpdate() {
+        this.updateActiveBarPosition();
+        this.syncRovingTabindex();
+    }
+    componentDidRender() {
+        if (!this.tablistKeydownBound && this.headingsContainerRef) {
+            this.attachTablistKeydown();
+        }
+    }
+    onWindowResize() {
+        this.updateActiveBarPosition();
+    }
+    syncGroupDisabledOnTabs() {
+        this.tabHeadings.forEach((tabHeading) => {
+            if (this.disabled) {
+                tabHeading.setAttribute('data-group-disabled', '');
+            }
+            else {
+                tabHeading.removeAttribute('data-group-disabled');
+            }
+        });
+    }
+    applySelection(newValue) {
         this.tabHeadings.forEach((tabHeading) => {
             const isSelected = newValue === tabHeading.getAttribute('target');
             if (isSelected) {
@@ -52,52 +203,125 @@ export class Tabs {
                 tabPanel.removeAttribute('selected');
             }
         });
-        requestAnimationFrame(() => {
+        this.syncGroupDisabledOnTabs();
+        if (this.rafId !== undefined) {
+            cancelAnimationFrame(this.rafId);
+        }
+        this.rafId = requestAnimationFrame(() => {
+            this.rafId = undefined;
             this.selectedValue = newValue;
             this.updateActiveBarPosition();
+            this.syncRovingTabindex();
         });
     }
-    collectTabs() {
-        this.tabHeadings = Array.from(this.el.querySelectorAll('xpl-tab'));
-        this.tabPanels = Array.from(this.el.querySelectorAll('xpl-tab-panel'));
-        this.handleTabChange(this.getDefaultValue());
+    isOwnedTabOrPanel(node) {
+        return node.closest('xpl-tabs') === this.el;
     }
-    renderChoices() {
-        return this.tabHeadings.map((tabHeading) => {
-            var _a, _b;
-            return ({
-                label: Array.from((_b = (_a = tabHeading.querySelector('.xpl-tab__button')) === null || _a === void 0 ? void 0 : _a.childNodes) !== null && _b !== void 0 ? _b : [])
-                    .filter((node) => node.nodeType === Node.TEXT_NODE)
-                    .map((node) => node.textContent.trim())
-                    .join(' '),
-                value: tabHeading.getAttribute('target'),
-            });
+    collectTabs(bumpChoicesTick) {
+        this.tabHeadings = Array.from(this.el.querySelectorAll('xpl-tab')).filter((tab) => this.isOwnedTabOrPanel(tab));
+        this.tabPanels = Array.from(this.el.querySelectorAll('xpl-tab-panel')).filter((panel) => this.isOwnedTabOrPanel(panel));
+        this.syncVariantOnTabs();
+        this.syncFullWidthOnTabs();
+        this.applySelection(this.getDefaultValue());
+        if (bumpChoicesTick) {
+            this.choicesTick += 1;
+        }
+    }
+    syncVariantOnTabs() {
+        this.tabHeadings.forEach((tabHeading) => {
+            tabHeading.variant = this.type;
         });
     }
-    connectedCallback() {
-        if (typeof MutationObserver === 'undefined') {
+    syncFullWidthOnTabs() {
+        this.tabHeadings.forEach((tabHeading) => {
+            tabHeading.fullWidth = this.fullWidth;
+        });
+    }
+    getDefaultValue() {
+        var _a, _b;
+        return this.value || ((_b = (_a = this.tabHeadings) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.getAttribute('target')) || '';
+    }
+    async syncRovingTabindex() {
+        if (this.disabled) {
             return;
         }
-        this.observer = new MutationObserver(() => {
-            this.collectTabs();
+        await Promise.all(this.tabHeadings.map(async (tabHeading) => {
+            var _a;
+            const target = (_a = tabHeading.getAttribute('target')) !== null && _a !== void 0 ? _a : '';
+            const isSelected = target === this.selectedValue;
+            await tabHeading.setTabIndex(isSelected ? 0 : -1);
+        }));
+    }
+    getEnabledTabHeadingsSync() {
+        return this.tabHeadings.filter((tabHeading) => {
+            if (this.disabled || tabHeading.hasAttribute('disabled')) {
+                return false;
+            }
+            const btn = tabHeading.variant === 'segment'
+                ? tabHeading.querySelector('xpl-button button')
+                : tabHeading.querySelector('.xpl-tab__button');
+            return Boolean(btn && !btn.disabled);
         });
-        this.observer.observe(this.el, {
-            childList: true,
-            subtree: true,
+    }
+    attachTablistKeydown() {
+        const nav = this.headingsContainerRef;
+        if (!nav || this.tablistKeydownBound) {
+            return;
+        }
+        nav.addEventListener('keydown', this.onTablistKeydown);
+        this.tablistKeydownBound = true;
+    }
+    isTablistRtl() {
+        const nav = this.headingsContainerRef;
+        if (!nav) {
+            return false;
+        }
+        return getComputedStyle(nav).direction === 'rtl';
+    }
+    renderChoices() {
+        return this.tabHeadings.map((tabHeading) => {
+            var _a;
+            const target = (_a = tabHeading.getAttribute('target')) !== null && _a !== void 0 ? _a : '';
+            const tabDisabled = this.disabled || tabHeading.hasAttribute('disabled');
+            const icon = this.type === 'segment' ? tabHeading.getAttribute('icon') || undefined : undefined;
+            return Object.assign({ label: tabHeadingLabelFromElement(tabHeading), value: target, isDisabled: tabDisabled }, (icon ? { icon } : {}));
         });
     }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    updateActiveBarPosition() {
+        if (this.type === 'segment') {
+            return;
+        }
+        const tabHeading = this.tabHeadings.find((heading) => heading.getAttribute('target') === this.selectedValue);
+        if (!this.headingsContainerRef || !tabHeading) {
+            return;
+        }
+        const tabRect = tabHeading.getBoundingClientRect();
+        const containerRect = this.headingsContainerRef.getBoundingClientRect();
+        const nextLeft = tabRect.left - containerRect.left;
+        const nextWidth = tabRect.width;
+        if (this.activeBarPosition.left === nextLeft &&
+            this.activeBarPosition.width === nextWidth) {
+            return;
+        }
+        this.activeBarPosition = {
+            left: nextLeft,
+            width: nextWidth,
+        };
     }
-    componentDidLoad() {
-        this.collectTabs();
+    mobileSelectClassNames() {
+        const base = 'xpl-tabs__mobile-select';
+        if (this.type === 'segment') {
+            return `${base} xpl-tabs__mobile-select--segment`;
+        }
+        return base;
     }
     render() {
-        return (h(Host, { key: '0f74359ee1e50de711500ed4d91a7f305a0c8b43', class: {
+        const isSegment = this.type === 'segment';
+        return (h(Host, { key: '9998ae067e13e7c08338ae29bfe05bc3adacaa87', class: {
                 'xpl-tabs': true,
                 'xpl-tabs--full-width': this.fullWidth,
-            } }, h("xpl-select", { key: '9315829ad692ec8b80fe00f588974ed8f1b5dbc9', classNames: "xpl-tabs__mobile-select", choices: this.renderChoices(), selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
+                'xpl-tabs--segment': isSegment,
+            }, "data-choices-tick": this.choicesTick }, h("xpl-select", { key: '18209c354e77267a13ce0c7380df0e419595cca7', classNames: this.mobileSelectClassNames(), choices: this.renderChoices(), disabled: this.disabled, selectedValues: this.selectedValue, onDropdownStateChange: (event) => {
                 if (event.detail) {
                     this.isMobileSelectChange = true;
                 }
@@ -108,37 +332,40 @@ export class Tabs {
                     this.tabChange.emit(selectedValue);
                     this.isMobileSelectChange = false;
                 }
-            } }), h("nav", { key: '7abdf0d065f25c78b393ec9808fe7f44c84bfb27', class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
+            } }), h("nav", { key: 'cf1bf2ec95fbbe7f0a6b8774cc5ce26928c7d6ca', "aria-orientation": "horizontal", class: "xpl-tabs__headings", role: "tablist", ref: (el) => {
                 this.headingsContainerRef = el;
             }, onTabChange: (event) => {
+                event.stopPropagation();
                 this.isMobileSelectChange = false;
                 this.handleTabChange(event.detail);
-            } }, h("div", { key: 'de5157e6ce7914060f25e9b21bd8051a1437f92a', class: "xpl-tabs__active-bar", style: {
+                this.tabChange.emit(event.detail);
+            } }, !isSegment && (h("div", { key: '5bfd13566a17723ec166a934bc72e59307eacb8c', class: "xpl-tabs__active-bar", style: {
                 transform: `translateX(${this.activeBarPosition.left}px)`,
                 width: `${this.activeBarPosition.width}px`,
-            } }), h("slot", { key: 'fc61c457e2a4eb10609b97e911b9ddbb2a64757f', name: "heading" })), h("div", { key: 'd6187a0de12b34f61ad10a602085d4525c2850ca', class: "xpl-tabs__panels" }, h("slot", { key: 'c5cf20e4677ee9f998c115d472cfc1cd5e5fa1fd', name: "panel" }))));
+            } })), h("slot", { key: '52baf508a46759fe908f8721b3089d3db0189383', name: "heading" })), h("div", { key: '363fe87f244eace0dc0af0903e0b8c25da3a613f', class: "xpl-tabs__panels" }, h("slot", { key: 'f3872844f486cf831bca26a228eba88fa18b42c3', name: "panel" }))));
     }
     static get is() { return "xpl-tabs"; }
     static get properties() {
         return {
-            "value": {
-                "type": "string",
+            "disabled": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The selected tab target value, defaults to the first tab"
+                    "text": "Disables the whole tab group (headings, mobile select, and segment pills)."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value"
+                "attribute": "disabled",
+                "defaultValue": "false"
             },
             "fullWidth": {
                 "type": "boolean",
@@ -159,14 +386,54 @@ export class Tabs {
                 "reflect": false,
                 "attribute": "full-width",
                 "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'tabs' | 'segment'",
+                    "resolved": "\"segment\" | \"tabs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual and layout variant: classic underline tabs or segment (pill) controls."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'tabs'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected tab target value, defaults to the first tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
             }
         };
     }
     static get states() {
         return {
-            "selectedValue": {},
             "activeBarPosition": {},
-            "isMobileSelectChange": {}
+            "choicesTick": {},
+            "isMobileSelectChange": {},
+            "selectedValue": {}
         };
     }
     static get events() {
@@ -178,7 +445,7 @@ export class Tabs {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that emits the target of the selected tab"
+                    "text": "Emitted when the selected tab changes (click, keyboard, or mobile `xpl-select`).\nThe event `detail` is the selected tab\u2019s `target` string.\nAlways dispatched from this host (including after heading clicks) so `event.target` is\nconsistent for listeners on `xpl-tabs` or bubbling ancestors."
                 },
                 "complexType": {
                     "original": "string",
@@ -190,8 +457,17 @@ export class Tabs {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disabled",
+                "methodName": "onDisabledChanged"
+            }, {
+                "propName": "fullWidth",
+                "methodName": "onFullWidthChanged"
+            }, {
+                "propName": "type",
+                "methodName": "onTypeChanged"
+            }, {
                 "propName": "value",
-                "methodName": "updateTabsSelectedState"
+                "methodName": "onValueChanged"
             }];
     }
     static get listeners() {