@riverty/web-components 6.3.0 → 6.3.1

package/dist/collection/components/tab/tab.js

@@ -0,0 +1,169 @@
+import { h, Host } from "@stencil/core";
+export class RTab {
+    constructor() {
+        /** Indicates if `<r-tab>` is disabled */
+        this.disabled = false;
+        /** Indicates if `<r-tab>` is active */
+        this.active = false;
+        this.handleClick = () => {
+            if (this.disabled || this.active)
+                return;
+            this.tabChange.emit({ element: this.host });
+        };
+        this.handleKeyup = (event) => {
+            if (this.disabled || this.active)
+                return;
+            const isSpace = event.code === 'Space';
+            const isEnter = event.code === 'Enter';
+            if (isEnter || isSpace)
+                this.tabChange.emit({ element: this.host });
+        };
+        this.handleKeydown = (event) => {
+            if (this.disabled)
+                return;
+            switch (event.code) {
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                case 'Space':
+                case 'Home':
+                case 'End':
+                    event.preventDefault();
+                    break;
+            }
+            this.moveTabFocus.emit({ element: this.host, keycode: event.code });
+        };
+    }
+    render() {
+        const { disabled, active, panelId } = this;
+        const hostAttrs = {
+            role: 'tab',
+            tabindex: `${active ? '0' : '-1'}`,
+            'panel-id': panelId,
+            'aria-controls': panelId,
+            'aria-selected': `${active}`,
+            'aria-disabled': `${disabled}`
+        };
+        return (h(Host, Object.assign({ key: 'b68ad2b51c624ef92886f791e2093951ec235042', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: '59898569007666db12270834489378d695b7b651', class: "r-tab" }, disabled ?
+            h("r-icon", { class: "r-tab--disabled-icon", size: "s", name: "circle-slash" })
+            : h("slot", { name: "icon" }), h("slot", { key: '5e3b5ace265b9884bd659311d23955c084da995b' }))));
+    }
+    static get is() { return "r-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tab.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if `<r-tab>` is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "active": {
+                "type": "boolean",
+                "attribute": "active",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if `<r-tab>` is active"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "panelId": {
+                "type": "string",
+                "attribute": "panel-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Id of the panel that `<r-tab>` controls"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tabChange",
+                "name": "tabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `click` event on the `<r-tab>`"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRTabElement\n  }",
+                    "resolved": "{ element: HTMLRTabElement; }",
+                    "references": {
+                        "HTMLRTabElement": {
+                            "location": "global",
+                            "id": "global::HTMLRTabElement"
+                        }
+                    }
+                }
+            }, {
+                "method": "moveTabFocus",
+                "name": "moveTabFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `keydown` event on the `<r-tab>` to notify tabs component to move focus"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRTabElement,\n    keycode: string,\n  }",
+                    "resolved": "{ element: HTMLRTabElement; keycode: string; }",
+                    "references": {
+                        "HTMLRTabElement": {
+                            "location": "global",
+                            "id": "global::HTMLRTabElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/tab-panel/tab-panel.css

@@ -0,0 +1,19 @@
+:host([active]:not([active=false])) {
+  display: block;
+}
+
+:host {
+  display: none;
+  outline: none;
+}
+
+:host(:focus-visible) {
+  box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
+  outline: 2px solid var(--r-border-focused, #0071e3);
+  outline-offset: 2px;
+}
+
+.r-tab-panel {
+  font-family: var(--r-tab-panel--font-family, var(--r-font-family-text, system-ui));
+  font-size: var(--r-tab-panel--font-size, var(--r-font-size-text-400, 1rem));
+}

package/dist/collection/components/tab-panel/tab-panel.js

@@ -0,0 +1,72 @@
+import { Host, h } from "@stencil/core";
+export class RTabPanel {
+    constructor() {
+        /** Defines if the `panel` is hidden */
+        this.active = false;
+    }
+    render() {
+        const { tabId, active } = this;
+        const hostAttrs = {
+            role: 'tabpanel',
+            tabindex: '0',
+            active,
+            'aria-labelledby': tabId
+        };
+        return (h(Host, Object.assign({ key: '22e44ca7e5addc5d912e8005374cf0b01149eabe', class: "r-typography" }, hostAttrs), h("div", { key: '4b9498ba0f513636a5cfa0c29eb8158ab9ebca70', class: "r-tab-panel" }, h("slot", { key: 'e6d9d6538663c6a3b6c6772242bb8b7a107f26c0' }))));
+    }
+    static get is() { return "r-tab-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tab-panel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tab-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "attribute": "active",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines if the `panel` is hidden"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "tabId": {
+                "type": "string",
+                "attribute": "tab-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Id of the 'tab' connected to this `panel`"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+}

package/dist/collection/components/tabs/tabs.css

@@ -0,0 +1,4 @@
+:host {
+  display: block;
+  margin-top: var(--r-spacing-150, 1.5rem);
+}

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

@@ -0,0 +1,345 @@
+import { Host, h } from "@stencil/core";
+export class RTabs {
+    constructor() {
+        this.activeTab = null;
+    }
+    /** `<r-tab>` group of elements */
+    get tabElements() {
+        var _a;
+        return (_a = this.host.querySelector('r-tabs-list')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('r-tab');
+    }
+    /** `<r-tab-panel>` group of elements */
+    get panelElements() {
+        return this.host.querySelectorAll(':scope > r-tab-panel');
+    }
+    /** Active tab element */
+    get activeTabElement() {
+        return this.activeTab || this.host.querySelector('r-tab[active]');
+    }
+    /** Check if active tab element exists */
+    get hasActiveTabElement() {
+        return this.activeTabElement !== null;
+    }
+    /** Check if active tab element is disabled */
+    get isActiveTabElementDisabled() {
+        var _a;
+        return ((_a = this.activeTabElement) === null || _a === void 0 ? void 0 : _a.disabled) || false;
+    }
+    get isStructureCorrect() {
+        var _a, _b;
+        return Boolean(((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length) && ((_b = this.panelElements) === null || _b === void 0 ? void 0 : _b.length));
+    }
+    get isMissingPanel() {
+        var _a, _b;
+        return ((_a = this.panelElements) === null || _a === void 0 ? void 0 : _a.length) < ((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length);
+    }
+    get isDisabledPanel() {
+        return Boolean(Array.from(this.panelElements).find(panel => panel.hasAttribute('disabled')));
+    }
+    _disableTabIfPanelMissing() {
+        var _a;
+        if (!this.isMissingPanel)
+            return;
+        (_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.forEach((tab, index) => {
+            if (!this.panelElements[index]) {
+                tab.disabled = true;
+                tab.setAttribute('disabled', 'true');
+                return;
+            }
+        });
+    }
+    get tabGroupsAmount() {
+        return document.querySelectorAll('r-tabs').length;
+    }
+    markGroupsWithIndex() {
+        document.querySelectorAll('r-tabs').forEach((el, index) => {
+            el.setAttribute('data-group', `${index}`);
+        });
+    }
+    _connectTabsAndPanelsById() {
+        this.markGroupsWithIndex();
+        // Connect tabs and panels with id's
+        this.tabElements.forEach((tab, index) => {
+            var _a, _b;
+            const label = this.transliterateToKebabCase(tab.textContent);
+            // Unique id per each tab-panel pair
+            const tabId = `r-tab-${label}`;
+            const panelId = `r-tab-panel-${label}`;
+            // Assign `id` and `panel-id` to each tab
+            tab.setAttribute('id', tabId);
+            tab.setAttribute('panel-id', panelId);
+            // Assign `tab-id` and `id` to each panel
+            (_a = this.panelElements[index]) === null || _a === void 0 ? void 0 : _a.setAttribute('tab-id', tabId);
+            (_b = this.panelElements[index]) === null || _b === void 0 ? void 0 : _b.setAttribute('id', panelId);
+            return this;
+        });
+    }
+    _disableTabIfPanelDisabled() {
+        if (!this.isDisabledPanel)
+            return;
+        this.panelElements.forEach(panel => {
+            if (panel.hasAttribute('disabled')) {
+                const tabEl = Array.from(this.tabElements).find(tab => tab.getAttribute('id') === panel.getAttribute('tab-id'));
+                tabEl.setAttribute('disabled', 'true');
+            }
+        });
+    }
+    transliterateToKebabCase(label) {
+        // Normalize and replace accents/diacritics
+        let latinLabel = label.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+        // Replace common non-Latin characters with approximate Latin equivalents
+        latinLabel = latinLabel
+            .replace(/ß/g, "ss") // German Eszett
+            .replace(/æ/g, "ae") // Scandinavian
+            .replace(/ø/g, "o") // Scandinavian
+            .replace(/đ/g, "d") // Croatian/Serbian
+            .replace(/ł/g, "l"); // Polish
+        latinLabel = latinLabel.toLowerCase();
+        // Replace spaces and underscores with dashes
+        latinLabel = latinLabel.replace(/[ _]+/g, "-");
+        // Remove non-alphanumeric and non-dash characters
+        latinLabel = latinLabel.replace(/[^a-z0-9-]/g, "");
+        // Remove consecutive dashes and trim
+        latinLabel = latinLabel.replace(/-+/g, "-").replace(/^-+|-+$/g, "");
+        return latinLabel;
+    }
+    get tabIdFromUrl() {
+        const url = new URL(window.location.href);
+        return url.searchParams.get('tab') || null;
+    }
+    get tabsGroupFromUrl() {
+        const url = new URL(window.location.href);
+        return url.searchParams.get('tabs-group') || '0';
+    }
+    get groupFromData() {
+        return this.host.getAttribute('data-group');
+    }
+    _getTabElFromUrl() {
+        if (!this.navigation)
+            return;
+        const isCurrentGroup = this.groupFromData === this.tabsGroupFromUrl;
+        if (!isCurrentGroup)
+            return;
+        // Find the tab that matches the `tabId`
+        const tabEl = Array.from(this.tabElements).find(tab => tab.id === this.tabIdFromUrl);
+        if (!tabEl)
+            return null;
+        return tabEl;
+    }
+    _defineInitiallyActiveTab() {
+        if (this.tabIdFromUrl)
+            return this._getTabElFromUrl();
+        if (this.hasActiveTabElement && !this.isActiveTabElementDisabled)
+            return this.activeTabElement;
+        return this.host.querySelector('r-tab:not([disabled])');
+    }
+    _selectInitialTabAndPanel() {
+        const tabEl = this._defineInitiallyActiveTab();
+        tabEl && this._selectTab(tabEl);
+    }
+    _selectTab(tabEl) {
+        // Pass active tab to state
+        this.activeTab = tabEl;
+        // Mark active tab element
+        this.tabElements.forEach(element => {
+            element.active = element.id === tabEl.id;
+            element.active ? element.setAttribute('active', '') : element.removeAttribute('active');
+        });
+        // Mark active panel element
+        this.panelElements.forEach(element => {
+            element.active = element.id === tabEl.panelId;
+            element.active ? element.setAttribute('active', '') : element.removeAttribute('active');
+        });
+        // If URL contains tabId --> scroll active tab into view
+        if (this.tabIdFromUrl)
+            this.host.scrollIntoView({ behavior: 'smooth' });
+    }
+    handlePopState(event) {
+        var _a, _b;
+        if (!this.navigation)
+            return;
+        const tabId = (_a = event.state) === null || _a === void 0 ? void 0 : _a.tabId;
+        const tabsGroup = (_b = event.state) === null || _b === void 0 ? void 0 : _b.tabsGroup;
+        const isInGroup = tabsGroup === this.host.getAttribute('data-group');
+        if (!tabId)
+            window.location.reload();
+        if (!isInGroup)
+            return;
+        const tab = Array.from(this.tabElements).find(tab => tab.id === tabId);
+        if (!tab)
+            return;
+        this._selectTab(tab);
+    }
+    handleHistory(tab) {
+        const tabId = tab.getAttribute('id');
+        const tabsGroup = tab.closest('r-tabs').getAttribute('data-group');
+        const url = new URL(window.location.href);
+        url.searchParams.set('tab', tabId);
+        if (this.tabGroupsAmount > 1)
+            url.searchParams.set('tabs-group', tabsGroup);
+        history.pushState({ tabId, tabsGroup }, '', url.toString());
+    }
+    _changeFocusTab(tab, keycode) {
+        const tabs = Array.from(this.tabElements).filter(element => !element.disabled);
+        const index = tabs.indexOf(tab);
+        let nextTab;
+        switch (keycode) {
+            case 'ArrowLeft':
+                nextTab = index === 0 ? tabs[tabs.length - 1] : tabs[index - 1];
+                break;
+            case 'ArrowRight':
+                nextTab = index === tabs.length - 1 ? tabs[0] : tabs[index + 1];
+                break;
+            case 'Home':
+                nextTab = tabs[0];
+                break;
+            case 'End':
+                nextTab = tabs[tabs.length - 1];
+                break;
+        }
+        if (nextTab) {
+            nextTab.focus();
+            this.scrollTabIntoView(nextTab);
+        }
+    }
+    scrollTabIntoView(tab) {
+        var _a;
+        const tabsList = this.host.querySelector('r-tabs-list');
+        if (!tabsList)
+            return;
+        const container = (_a = tabsList.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.r-tabs-list--tabs-container');
+        if (!container)
+            return;
+        const containerRect = container.getBoundingClientRect();
+        const tabRect = tab.getBoundingClientRect();
+        // Check if tab is fully visible
+        const isFullyVisible = tabRect.left >= containerRect.left - 1 &&
+            tabRect.right <= containerRect.right + 1;
+        if (isFullyVisible)
+            return;
+        // Calculate scroll offset to center the tab
+        const centerOffset = (tabRect.left - containerRect.left) -
+            (containerRect.width / 2) +
+            (tabRect.width / 2);
+        container.scrollBy({
+            left: centerOffset,
+            behavior: 'smooth'
+        });
+    }
+    /** Listen for "click" event on `<r-tab>` */
+    tabChangeAction(event) {
+        event.stopPropagation();
+        const tab = event.target;
+        this._selectTab(tab);
+        if (this.navigation)
+            this.handleHistory(tab);
+        this.rChange.emit({ element: tab });
+    }
+    componentWillLoad() {
+        // If no tabs or no panels, skip the rest of initiation
+        if (!this.isStructureCorrect)
+            return;
+        // If panel is missing, tab is disabled
+        this._disableTabIfPanelMissing();
+        // Establish connection between tabs and panels through id
+        this._connectTabsAndPanelsById();
+        // If panel is disabled, tab is disabled
+        this._disableTabIfPanelDisabled();
+        // Active initial tab and panel
+        this._selectInitialTabAndPanel();
+    }
+    connectedCallback() {
+        // Listen for popstate events (when the user navigates back/forward)
+        window.addEventListener('popstate', this.handlePopState.bind(this));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('popstate', this.handlePopState.bind(this));
+    }
+    /** Listen for "moveTabFocus" event on `<r-tab>` */
+    moveTabFocusAction(e) {
+        e.stopPropagation();
+        this._changeFocusTab(e.target, e.detail.keycode);
+    }
+    render() {
+        return (h(Host, { key: 'a1ff15e7b90774486932acd7035839fc8794e10b', class: "r-tabs" }, h("slot", { key: '4d8a00d7344c8cbc69896b43da740009fa54cab9' })));
+    }
+    static get is() { return "r-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "navigation": {
+                "type": "boolean",
+                "attribute": "navigation",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines if the tabs should update the browser's URL and allow navigation via history changes"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeTab": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rChange",
+                "name": "rChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits `rChange` event when active `<r-tab>` changes"
+                },
+                "complexType": {
+                    "original": "{\n    element: HTMLRTabElement\n  }",
+                    "resolved": "{ element: HTMLRTabElement; }",
+                    "references": {
+                        "HTMLRTabElement": {
+                            "location": "global",
+                            "id": "global::HTMLRTabElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "tabChange",
+                "method": "tabChangeAction",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "moveTabFocus",
+                "method": "moveTabFocusAction",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

package/dist/collection/components/tabs-list/exports.js

@@ -0,0 +1,2 @@
+export const TabListVariantArray = ['expanded', 'compact'];
+export const ActiveTabBorderArray = ['standard', 'branded'];

package/dist/collection/components/tabs-list/tabs-list.css

@@ -0,0 +1,58 @@
+:host {
+  display: block;
+}
+
+:host([variant=compact]) {
+  --r-tabs-list--r-tab--margin-right: 0;
+  --r-tabs-list--r-tab--flex: 1;
+  --r-tab--width: 100%;
+}
+
+:host([scrollable=true]) {
+  --r-tabs-list--tabs-container--margin: -6px 4px ;
+}
+
+:host([border=branded]) {
+  --r-tab--marker--background-color: var(--r-border-brand-vanguard, #527a42);
+}
+
+.r-tabs-list {
+  display: var(--r-tabs-list--display, flex);
+  margin-bottom: var(--r-tabs-list--margin-bottom, var(--r-spacing-250, 2.5rem));
+  border-bottom-width: var(--r-tabs-list--border-bottom-width, 1px);
+  border-bottom-style: var(--r-tabs-list--border-bottom-style, solid);
+  border-bottom-color: var(--r-tabs-list--border-bottom-color, var(--r-border-softer, #c9c9c9));
+}
+.r-tabs-list--scroll-button {
+  --r-icon-button--border-radius: var(--r-tabs-list--border-radius, 0);
+  --r-icon-button--width: var(--r-tabs-list--scroll-button--width, var(--r-spacing-200, 2rem));
+  --r-icon-button--height: var(--r-tabs-list--scroll-button--height, var(--r-spacing-200, 2rem));
+}
+.r-tabs-list--tabs-container {
+  display: var(--r-tabs-list--tabs-container--display, flex);
+  flex: var(--r-tabs-list--tabs-container--flex, 1);
+  overflow: var(--r-tabs-list--tabs-container--overflow, scroll hidden);
+  scroll-snap-type: var(--r-tabs-list--tabs-container--scroll-snap-type, x proximity);
+  scrollbar-width: var(--r-tabs-list--tabs-container--scrollbar-width, none);
+  margin: var(--r-tabs-list--tabs-container--margin, -6px);
+  padding: var(--r-tabs-list--tabs-container--padding, 6px);
+}
+.r-tabs-list--scroll-button-container {
+  display: var(--r-tabs-list--scroll-button-container--display, flex);
+  align-items: var(--r-tabs-list--scroll-button-container--align-items, start);
+  gap: var(--r-tabs-list--scroll-button-container--gap, var(--r-spacing-025, 0.25rem));
+}
+.r-tabs-list--scroll-indicator {
+  margin-top: var(--r-tabs-list--scroll-indicator--margin, 2px);
+  width: var(--r-tabs-list--scroll-button--after--width, 1px);
+  height: var(--r-tabs-list--scroll-button--after--height, var(--r-spacing-175, 1.75rem));
+  background-color: var(--r-tabs-list----scroll-indicator--background-color, var(--r-border-softer, #c9c9c9));
+  z-index: var(--r-tabs-list----scroll-indicator--z-index, 1);
+}
+.r-tabs-list ::slotted(r-tab) {
+  margin-right: var(--r-tabs-list--r-tab--margin-right, var(--r-spacing-250, 2.5rem));
+  flex: var(--r-tabs-list--r-tab--flex, none);
+}
+.r-tabs-list ::slotted(r-tab:last-of-type) {
+  margin-right: var(--r-tabs-list--r-tab--last-of-type--margin-right, 0);
+}