@riverty/web-components 6.2.0 → 6.3.0

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

@@ -1,169 +0,0 @@
-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: '270a02c942f223ef5ac0f9f83d33c51bfd88c1c7', onClick: this.handleClick, onKeyUp: this.handleKeyup, onKeyDown: this.handleKeydown }, hostAttrs), h("span", { key: '60bbf17ad69478028579b61d03ca316a55ce52ea', class: "r-tab" }, disabled ?
-            h("r-icon", { class: "r-tab--disabled-icon", size: "s", name: "circle-slash" })
-            : h("slot", { name: "icon" }), h("slot", { key: '5b0582bebdf14a0de908d23d2a08d80cf1850b50' }))));
-    }
-    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

@@ -1,19 +0,0 @@
-: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

@@ -1,72 +0,0 @@
-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: 'f58718704b5625e82bfa531bcbf2b6c94c2e1ae3', class: "r-typography" }, hostAttrs), h("div", { key: '75dc2720b47da749a4d1e168e20338b94724a369', class: "r-tab-panel" }, h("slot", { key: '9710a7fc07751091c4ec0c97ae1d205ae540fdfd' }))));
-    }
-    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

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

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

@@ -1,345 +0,0 @@
-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: '0737bf78e596f8fb9d4a2ec10f1503d1072f2683', class: "r-tabs" }, h("slot", { key: '5bc87b17930c9ea159ef29335c6b11f0f4c7d43e' })));
-    }
-    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

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

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

@@ -1,58 +0,0 @@
-: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);
-}