npm - @baloise/ds-core - Versions diffs - 20.0.0-next.4 → 20.0.0-next.6 - Mend

@baloise/ds-core 20.0.0-next.4 → 20.0.0-next.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (988) hide show

package/dist/collection/components/tabs/tabs/tabs.js ADDED Viewed

@@ -0,0 +1,552 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { __decorate, __metadata } from "tslib";
+import { h, Host } from "@stencil/core";
+import { Logger, stopEventBubbling, OneOf, Type, raf } from "../../../utils/index";
+import { ListenToConfig, defaultConfig, } from "../../../global/index";
+import { TABS_COLORS, TABS_VERTICAL_COL_SIZES, } from "../tabs.interfaces";
+import { i18nDsTabs } from "./tabs.i18n";
+/**
+ * Tabs coordinates ds-tab and ds-tab-panel children into an accessible tabbed interface, supporting panels and navigation variants.
+ *
+ * @slot - ds-tab-panel children (panels variant).
+ * @slot tab - ds-tab children; managed automatically by ds-tabs.
+ * @part tablist - The tablist container.
+ */
+export class Tabs {
+    constructor() {
+        this.language = defaultConfig.language;
+        this.region = defaultConfig.region;
+        /**
+         * Accent color applied to the bottom border track and selected indicator.
+         */
+        this.color = '';
+        /**
+         * If `true`, tab buttons expand to fill the available width equally.
+         */
+        this.fullwidth = false;
+        /**
+         * If `true`, the component adapts for use on a dark (primary) background — all labels and the indicator become white.
+         */
+        this.inverted = false;
+        /**
+         * Accessible label for the navigation landmark (navigation variant only).
+         */
+        this.label = '';
+        /**
+         * If `true`, the tablist is displayed vertically on the left side.
+         */
+        this.vertical = false;
+        /**
+         * The col size of the tablist in vertical mode.
+         */
+        this.verticalColSize = 'one-third';
+        this.canScrollLeft = false;
+        this.canScrollRight = false;
+        this.checkOverflow = () => {
+            const el = this.tablistEl;
+            if (!el)
+                return;
+            this.canScrollLeft = el.scrollLeft > 0;
+            this.canScrollRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+        };
+        this.scrollPrev = () => {
+            const el = this.tablistEl;
+            if (el)
+                el.scrollBy({ left: -(el.clientWidth / 2), behavior: 'smooth' });
+        };
+        this.scrollNext = () => {
+            const el = this.tablistEl;
+            if (el)
+                el.scrollBy({ left: el.clientWidth / 2, behavior: 'smooth' });
+        };
+        this.handleKeyDown = (ev) => {
+            var _a, _b, _c, _d;
+            if (this.isNavigation())
+                return;
+            const focusable = this.getTabs();
+            const currentIndex = focusable.findIndex(t => t.name === this.value);
+            const isForward = this.vertical ? ev.key === 'ArrowDown' : ev.key === 'ArrowRight';
+            const isBackward = this.vertical ? ev.key === 'ArrowUp' : ev.key === 'ArrowLeft';
+            if (ev.key === 'Home') {
+                ev.preventDefault();
+                this.activateTab((_a = focusable[0]) === null || _a === void 0 ? void 0 : _a.name);
+            }
+            else if (ev.key === 'End') {
+                ev.preventDefault();
+                this.activateTab((_b = focusable[focusable.length - 1]) === null || _b === void 0 ? void 0 : _b.name);
+            }
+            else if (isForward) {
+                ev.preventDefault();
+                this.activateTab((_c = focusable[(currentIndex + 1) % focusable.length]) === null || _c === void 0 ? void 0 : _c.name);
+            }
+            else if (isBackward) {
+                ev.preventDefault();
+                this.activateTab((_d = focusable[(currentIndex - 1 + focusable.length) % focusable.length]) === null || _d === void 0 ? void 0 : _d.name);
+            }
+        };
+        this.handleSlotChange = () => {
+            this.setup();
+        };
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * @internal define config for the component
+     */
+    async configChanged(state) {
+        this.language = state.language;
+        this.region = state.region;
+    }
+    componentDidLoad() {
+        this.setup();
+        this.initCarousel();
+        raf(() => this.moveIndicator(false));
+    }
+    componentDidUpdate() {
+        this.updateChildren();
+        this.checkOverflow();
+        this.moveIndicator(true);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.tablistEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('scroll', this.checkOverflow);
+    }
+    /**
+     * PROPERTY VALIDATION
+     * ------------------------------------------------------
+     */
+    /**
+     * PUBLIC LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToDsTabSelect(ev) {
+        stopEventBubbling(ev);
+        this.activateTab(ev.detail.name);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    getTabs() {
+        return Array.from(this.el.querySelectorAll(':scope > ds-tab'));
+    }
+    getPanels() {
+        return Array.from(this.el.querySelectorAll(':scope > ds-tab-panel'));
+    }
+    isNavigation() {
+        return this.getPanels().length === 0;
+    }
+    setup() {
+        const tabs = this.getTabs();
+        const panels = this.getPanels();
+        const isNav = this.isNavigation();
+        tabs.forEach(tab => {
+            // Place ds-tab into the named tablist slot
+            tab.slot = 'tab';
+            tab.navigation = isNav;
+            if (!isNav && tab.name) {
+                if (!tab.id)
+                    tab.id = `ds-tab-${tabIds++}`;
+                const panel = panels.find(p => p.for === tab.name);
+                if (panel) {
+                    if (!panel.id)
+                        panel.id = `ds-tab-panel-${tabIds++}`;
+                    tab.setAttribute('aria-controls', panel.id);
+                    panel.setAttribute('aria-labelledby', tab.id);
+                }
+            }
+        });
+        if (!isNav && !this.value) {
+            const first = tabs[0];
+            if (first)
+                this.value = first.name;
+        }
+        this.updateChildren();
+    }
+    updateChildren() {
+        const isNav = this.isNavigation();
+        this.getTabs().forEach(tab => {
+            tab.navigation = isNav;
+            tab.fullwidth = this.fullwidth;
+            tab.inverted = this.inverted;
+            tab.selected = isNav ? !!tab.querySelector('[aria-current]') : tab.name === this.value;
+            tab.vertical = this.vertical;
+        });
+        this.getPanels().forEach(panel => {
+            panel.selected = panel.for === this.value;
+        });
+    }
+    activateTab(name) {
+        if (name === this.value)
+            return;
+        this.value = name;
+        this.dsChange.emit({ value: name });
+        this.focusSelectedTab();
+    }
+    focusSelectedTab() {
+        const selected = this.getTabs().find(t => t.name === this.value);
+        if (!selected)
+            return;
+        selected.focus();
+        selected.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+    }
+    initCarousel() {
+        if (this.vertical || !this.tablistEl)
+            return;
+        this.tablistEl.addEventListener('scroll', this.checkOverflow, { passive: true });
+        this.resizeObserver = new ResizeObserver(this.checkOverflow);
+        this.resizeObserver.observe(this.tablistEl);
+        this.checkOverflow();
+    }
+    moveIndicator(animate) {
+        const indicator = this.indicatorEl;
+        const tablist = this.tablistEl;
+        if (!indicator || !tablist || this.isNavigation())
+            return;
+        const selected = this.getTabs().find(t => t.name === this.value);
+        if (!selected) {
+            indicator.style[this.vertical ? 'height' : 'width'] = '0px';
+            return;
+        }
+        // offsetLeft/offsetTop of slotted elements is relative to the shadow host, not
+        // #tablist. Use getBoundingClientRect() to get the position relative to #tablist's
+        // visible area, then add scroll offset to convert to the scrollable coordinate space.
+        const tablistRect = tablist.getBoundingClientRect();
+        const selectedRect = selected.getBoundingClientRect();
+        if (!animate)
+            indicator.style.transition = 'none';
+        if (this.vertical) {
+            const top = selectedRect.top - tablistRect.top + tablist.scrollTop;
+            indicator.style.height = `${selectedRect.height}px`;
+            indicator.style.transform = `translateY(${top}px)`;
+        }
+        else {
+            const left = selectedRect.left - tablistRect.left + tablist.scrollLeft;
+            indicator.style.width = `${selectedRect.width}px`;
+            indicator.style.transform = `translateX(${left}px)`;
+        }
+        if (!animate) {
+            void indicator.offsetWidth; // force reflow so transition:none takes effect
+            indicator.style.transition = '';
+        }
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const isNav = this.isNavigation();
+        const tablistDiv = (h("div", { key: '245fdce72c8ec78a305aba63b4aad162baf56660', id: "tablist", part: "tablist", role: isNav ? undefined : 'tablist', "aria-orientation": !isNav && this.vertical ? 'vertical' : undefined, onKeyDown: this.handleKeyDown, ref: el => {
+                this.tablistEl = el;
+            } }, h("slot", { key: '0216104ce661ec5341ced772c623903b1a0d7b69', name: "tab", onSlotchange: this.handleSlotChange }), h("div", { key: 'e155a48e10ecc834a37c0831b683146851f20eae', class: "indicator", "aria-hidden": "true", ref: el => {
+                this.indicatorEl = el;
+            } })));
+        const i18n = i18nDsTabs[this.language];
+        const tablistContainer = this.vertical ? (tablistDiv) : (h("div", { class: "tablist-outer" }, h("button", { class: "scroll-btn scroll-btn--prev", "aria-label": i18n.scrollLeft, "aria-hidden": "true", tabIndex: -1, onClick: this.scrollPrev }, h("ds-icon", { name: "caret-left", size: "sm" })), tablistDiv, h("button", { class: "scroll-btn scroll-btn--next", "aria-label": i18n.scrollRight, "aria-hidden": "true", tabIndex: -1, onClick: this.scrollNext }, h("ds-icon", { name: "caret-right", size: "sm" }))));
+        return (h(Host, { key: '9d12012542b086c78eb96c57582cc7a633f498bd', class: {
+                'is-fullwidth': this.fullwidth,
+                'is-inverted': this.inverted,
+                'is-purple': this.color === 'purple',
+                'is-green': this.color === 'green',
+                'is-red': this.color === 'red',
+                'is-yellow': this.color === 'yellow',
+                'is-vertical': this.vertical,
+                [`is-col-${this.verticalColSize}`]: this.vertical,
+                'is-navigation': isNav,
+                'has-overflow': this.canScrollLeft || this.canScrollRight,
+                'can-scroll-left': this.canScrollLeft,
+                'can-scroll-right': this.canScrollRight,
+            } }, isNav ? h("nav", { "aria-label": this.label || undefined }, tablistContainer) : tablistContainer, h("slot", { key: '482832affe4d974a55db8e2b07d79316c0176701', onSlotchange: this.handleSlotChange })));
+    }
+    static get is() { return "ds-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs.host.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs.host.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabsColor",
+                    "resolved": "\"\" | \"green\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "TabsColor": {
+                            "location": "import",
+                            "path": "../tabs.interfaces",
+                            "id": "src/components/tabs/tabs.interfaces.ts::TabsColor",
+                            "referenceLocation": "TabsColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accent color applied to the bottom border track and selected indicator."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "''"
+            },
+            "fullwidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, tab buttons expand to fill the available width equally."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fullwidth",
+                "defaultValue": "false"
+            },
+            "inverted": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the component adapts for use on a dark (primary) background \u2014 all labels and the indicator become white."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "inverted",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the navigation landmark (navigation variant only)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The `name` of the currently selected ds-tab (panels variant)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value"
+            },
+            "vertical": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the tablist is displayed vertically on the left side."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical",
+                "defaultValue": "false"
+            },
+            "verticalColSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabsVerticalColSize",
+                    "resolved": "\"full\" | \"half\" | \"one-quarter\" | \"one-third\" | \"three-quarters\" | \"two-thirds\"",
+                    "references": {
+                        "TabsVerticalColSize": {
+                            "location": "import",
+                            "path": "../tabs.interfaces",
+                            "id": "src/components/tabs/tabs.interfaces.ts::TabsVerticalColSize",
+                            "referenceLocation": "TabsVerticalColSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The col size of the tablist in vertical mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "vertical-col-size",
+                "defaultValue": "'one-third'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "language": {},
+            "region": {},
+            "canScrollLeft": {},
+            "canScrollRight": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsChange",
+                "name": "dsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected tab changes (panels variant only)."
+                },
+                "complexType": {
+                    "original": "TabsChangeDetail",
+                    "resolved": "{ value: string; }",
+                    "references": {
+                        "TabsChangeDetail": {
+                            "location": "import",
+                            "path": "../tabs.interfaces",
+                            "id": "src/components/tabs/tabs.interfaces.ts::TabsChangeDetail",
+                            "referenceLocation": "TabsChangeDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "configChanged": {
+                "complexType": {
+                    "signature": "(state: DsConfigState) => Promise<void>",
+                    "parameters": [{
+                            "name": "state",
+                            "type": "DsConfigState",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DsConfigState": {
+                            "location": "import",
+                            "path": "@global",
+                            "id": "src/global/index.ts::DsConfigState",
+                            "referenceLocation": "DsConfigState"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "define config for the component"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "dsTabSelect",
+                "method": "listenToDsTabSelect",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    Logger('tabs'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Tabs.prototype, "createLogger", null);
+__decorate([
+    OneOf(TABS_COLORS),
+    __metadata("design:type", String)
+], Tabs.prototype, "color", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tabs.prototype, "fullwidth", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tabs.prototype, "inverted", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", String)
+], Tabs.prototype, "label", void 0);
+__decorate([
+    Type('string'),
+    __metadata("design:type", Object)
+], Tabs.prototype, "value", void 0);
+__decorate([
+    Type('boolean'),
+    __metadata("design:type", Boolean)
+], Tabs.prototype, "vertical", void 0);
+__decorate([
+    OneOf(TABS_VERTICAL_COL_SIZES),
+    __metadata("design:type", String)
+], Tabs.prototype, "verticalColSize", void 0);
+__decorate([
+    ListenToConfig(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], Tabs.prototype, "configChanged", null);
+let tabIds = 0;

package/dist/collection/components/tabs/tabs.interfaces.js ADDED Viewed

@@ -0,0 +1,12 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+export const TABS_COLORS = ['', 'purple', 'green', 'red', 'yellow'];
+export const TABS_VERTICAL_COL_SIZES = [
+    'full',
+    'half',
+    'one-quarter',
+    'one-third',
+    'three-quarters',
+    'two-thirds',
+];

package/dist/collection/components/tabs/test/tabs.a11y.play.js ADDED Viewed

@@ -0,0 +1,60 @@
+/*!
+ * (C) Helvetia Design System https://design.baloise.dev/ - Apache License 2.0
+ */
+import { test } from "../../../../../../playwright/src/index";
+const PANELS = `
+  <ds-tab name="a">Tab A</ds-tab>
+  <ds-tab name="b">Tab B</ds-tab>
+  <ds-tab name="c">Tab C</ds-tab>
+  <ds-tab-panel for="a">Content A</ds-tab-panel>
+  <ds-tab-panel for="b">Content B</ds-tab-panel>
+  <ds-tab-panel for="c">Content C</ds-tab-panel>
+`;
+test.describe('a11y — panels variant', () => {
+    test('basic', async ({ page, a11y }) => {
+        await page.mount(`<ds-tabs>${PANELS}</ds-tabs>`);
+        await a11y('ds-tabs');
+    });
+    test('preset value', async ({ page, a11y }) => {
+        await page.mount(`<ds-tabs value="b">${PANELS}</ds-tabs>`);
+        await a11y('ds-tabs');
+    });
+    test('vertical', async ({ page, a11y }) => {
+        await page.mount(`<ds-tabs vertical>${PANELS}</ds-tabs>`);
+        await a11y('ds-tabs');
+    });
+    test('fullwidth', async ({ page, a11y }) => {
+        await page.mount(`<ds-tabs fullwidth>${PANELS}</ds-tabs>`);
+        await a11y('ds-tabs');
+    });
+});
+test.describe('a11y — navigation variant', () => {
+    test('basic', async ({ page, a11y }) => {
+        await page.mount(`
+      <ds-tabs label="Page sections">
+        <ds-tab name="first"><a href="/first" aria-current="page">First</a></ds-tab>
+        <ds-tab name="second"><a href="/second">Second</a></ds-tab>
+        <ds-tab name="third"><a href="/third">Third</a></ds-tab>
+      </ds-tabs>
+    `);
+        await a11y('ds-tabs');
+    });
+    test('vertical', async ({ page, a11y }) => {
+        await page.mount(`
+      <ds-tabs label="Page sections" vertical>
+        <ds-tab name="first"><a href="/first" aria-current="page">First</a></ds-tab>
+        <ds-tab name="second"><a href="/second">Second</a></ds-tab>
+      </ds-tabs>
+    `);
+        await a11y('ds-tabs');
+    });
+    test('no label', async ({ page, a11y }) => {
+        await page.mount(`
+      <ds-tabs>
+        <ds-tab name="first"><a href="/first" aria-current="page">First</a></ds-tab>
+        <ds-tab name="second"><a href="/second">Second</a></ds-tab>
+      </ds-tabs>
+    `);
+        await a11y('ds-tabs');
+    });
+});