@riverty/web-components 6.2.0 → 6.3.0

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

@@ -1,294 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class RTabsList {
-    constructor() {
-        /**
-         * Visual variant of the tab list
-         * @defaulr 'expanded'
-         * */
-        this.variant = 'expanded';
-        /**
-         * Border style of the active tab
-         * @default 'standard'
-         * */
-        this.border = 'standard';
-        /** Indicates if the tab list is scrollable */
-        this.scrollable = false;
-        /** Indicates if the first tab is fully visible */
-        this.firstItemVisible = true;
-        /** Indicates if the last tab is fully visible */
-        this.lastItemVisible = false;
-        this.initiatizeResizeObserver = () => {
-            if (!this.containerRef || this.resizeObserver)
-                return;
-            this.resizeObserver = new ResizeObserver(() => this.updateScrollState());
-            this.resizeObserver.observe(this.containerRef);
-        };
-        this.updateScrollState = () => {
-            if (!this.containerRef)
-                return;
-            const { scrollWidth, clientWidth } = this.containerRef;
-            const containerRect = this.containerRef.getBoundingClientRect();
-            const tabs = Array.from(this.tabElements);
-            // Check if content is scrollable
-            this.scrollable = scrollWidth > clientWidth;
-            if (!this.scrollable || tabs.length === 0) {
-                this.firstItemVisible = true;
-                this.lastItemVisible = true;
-                return;
-            }
-            const firstTab = tabs[0];
-            const firstTabRect = firstTab.getBoundingClientRect();
-            this.firstItemVisible = firstTabRect.left >= containerRect.left - 1;
-            const lastTab = tabs[tabs.length - 1];
-            const lastTabRect = lastTab.getBoundingClientRect();
-            this.lastItemVisible = lastTabRect.right <= containerRect.right + 1;
-        };
-        this.getVisibleTabOnLeft = () => {
-            if (!this.containerRef)
-                return null;
-            const containerRect = this.containerRef.getBoundingClientRect();
-            const tabs = Array.from(this.tabElements);
-            // Find first tab that's partially or fully visible from the left
-            for (const tab of tabs) {
-                const tabRect = tab.getBoundingClientRect();
-                if (tabRect.right > containerRect.left + 1) {
-                    return tab;
-                }
-            }
-            return;
-        };
-        this.getVisibleTabOnRight = () => {
-            if (!this.containerRef)
-                return null;
-            const containerRect = this.containerRef.getBoundingClientRect();
-            const tabs = Array.from(this.tabElements);
-            for (let i = tabs.length - 1; i >= 0; i--) {
-                const tab = tabs[i];
-                const tabRect = tab.getBoundingClientRect();
-                if (tabRect.left < containerRect.right - 1) {
-                    return tab;
-                }
-            }
-            return null;
-        };
-        this.scrollLeft = () => {
-            if (!this.containerRef)
-                return;
-            const visibleTab = this.getVisibleTabOnLeft();
-            if (!visibleTab)
-                return;
-            const tabs = Array.from(this.tabElements);
-            const currentIndex = tabs.indexOf(visibleTab);
-            const prevTab = currentIndex > 0 ? tabs[currentIndex - 1] : null;
-            if (!prevTab)
-                return;
-            const containerLeft = this.containerRef.getBoundingClientRect().left;
-            const prevTabLeft = prevTab.getBoundingClientRect().left;
-            const offset = prevTabLeft - containerLeft;
-            this.containerRef.scrollBy({
-                left: offset,
-                behavior: 'smooth'
-            });
-        };
-        this.scrollRight = () => {
-            if (!this.containerRef)
-                return;
-            const visibleTab = this.getVisibleTabOnRight();
-            if (!visibleTab)
-                return;
-            const tabs = Array.from(this.tabElements);
-            const currentIndex = tabs.indexOf(visibleTab);
-            const nextTab = currentIndex < tabs.length - 1 ? tabs[currentIndex + 1] : null;
-            if (!nextTab)
-                return;
-            const containerRight = this.containerRef.getBoundingClientRect().right;
-            const nextTabRight = nextTab.getBoundingClientRect().right;
-            const offset = nextTabRight - containerRight;
-            this.containerRef.scrollBy({
-                left: offset,
-                behavior: 'smooth'
-            });
-        };
-        this.scrollToActiveTab = (activeTabElement) => {
-            if (!this.containerRef || !this.scrollable)
-                return;
-            const activeTab = activeTabElement || this.host.querySelector('r-tab[active]');
-            if (!activeTab)
-                return;
-            const containerRect = this.containerRef.getBoundingClientRect();
-            const activeTabRect = activeTab.getBoundingClientRect();
-            // Check if already fully visible
-            const isVisible = activeTabRect.left >= containerRect.left &&
-                activeTabRect.right <= containerRect.right;
-            if (isVisible)
-                return;
-            // Center the active tab
-            const offset = (activeTabRect.left - containerRect.left) -
-                (containerRect.width / 2) +
-                (activeTabRect.width / 2);
-            this.containerRef.scrollBy({
-                left: offset,
-                behavior: 'smooth'
-            });
-        };
-        this.renderScrollButton = (direction, disabled, onClick, tooltip) => {
-            const iconName = direction === 'left' ? 'angle-left' : 'angle-right';
-            const button = (h("r-icon-button", { onRClick: onClick, disabled: disabled, name: iconName, size: "s", rTabindex: -1, class: "r-tabs-list--scroll-button" }));
-            if (tooltip) {
-                return (h("r-tooltip", { text: tooltip, position: "top" }, button));
-            }
-            return button;
-        };
-    }
-    /** Listen for "click" event on `<r-tab>` */
-    tabChangeAction(event) {
-        this.scrollToActiveTab(event.target);
-    }
-    /** `<r-tab>` group of elements */
-    get tabElements() {
-        return this.host.querySelectorAll('r-tab');
-    }
-    componentDidLoad() {
-        this.updateScrollState();
-        this.initiatizeResizeObserver();
-        this.scrollToActiveTab();
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    render() {
-        return (h(Host, { key: '19666af123fe058aa3e654c153ad84ec16861a59', scrollable: `${this.scrollable}`, role: "tablist" }, h("div", { key: '5de7241f57b419133f81ae565bf517873a8e9268', class: "r-tabs-list" }, this.scrollable &&
-            h("div", { key: 'ff5edcbb61dd4ba9be3e0baf22822edbcbf8ec6d', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, this.renderScrollButton('left', this.firstItemVisible, this.scrollLeft, this.scrollLeftTooltip), !this.firstItemVisible && h("div", { key: '76fbeab529e2a7869ac7e946b1c0863969114888', class: "r-tabs-list--scroll-indicator" })), h("div", { key: 'd520b386242700c000daf85eba8d50fb014fc616', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, h("slot", { key: 'f8534275445ed4d32154519f0a8f592ee7ea3353' })), this.scrollable &&
-            h("div", { key: '8ca03d4864eba5af975de4dd6dc6fd3c3e8be108', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && h("div", { key: '1a0534b79bbe3273a73f48530a3a17ccac0d7826', class: "r-tabs-list--scroll-indicator" }), this.renderScrollButton('right', this.lastItemVisible, this.scrollRight, this.scrollRightTooltip)))));
-    }
-    static get is() { return "r-tabs-list"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["tabs-list.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["tabs-list.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "variant": {
-                "type": "string",
-                "attribute": "variant",
-                "mutable": false,
-                "complexType": {
-                    "original": "TabListVariant",
-                    "resolved": "\"compact\" | \"expanded\"",
-                    "references": {
-                        "TabListVariant": {
-                            "location": "import",
-                            "path": "./exports",
-                            "id": "src/components/tabs-list/exports.ts::TabListVariant"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaulr",
-                            "text": "'expanded'"
-                        }],
-                    "text": "Visual variant of the tab list"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "'expanded'"
-            },
-            "border": {
-                "type": "string",
-                "attribute": "border",
-                "mutable": false,
-                "complexType": {
-                    "original": "ActiveTabBorder",
-                    "resolved": "\"branded\" | \"standard\"",
-                    "references": {
-                        "ActiveTabBorder": {
-                            "location": "import",
-                            "path": "./exports",
-                            "id": "src/components/tabs-list/exports.ts::ActiveTabBorder"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "'standard'"
-                        }],
-                    "text": "Border style of the active tab"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": true,
-                "defaultValue": "'standard'"
-            },
-            "scrollLeftTooltip": {
-                "type": "string",
-                "attribute": "scroll-left-tooltip",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Tooltip visibility for left scroll button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            },
-            "scrollRightTooltip": {
-                "type": "string",
-                "attribute": "scroll-right-tooltip",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Tooltip visibility for left right button"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false
-            }
-        };
-    }
-    static get states() {
-        return {
-            "scrollable": {},
-            "firstItemVisible": {},
-            "lastItemVisible": {}
-        };
-    }
-    static get elementRef() { return "host"; }
-    static get listeners() {
-        return [{
-                "name": "tabChange",
-                "method": "tabChangeAction",
-                "target": undefined,
-                "capture": false,
-                "passive": false
-            }];
-    }
-}

package/dist/collection/components/textarea/exports.js

@@ -1,8 +0,0 @@
-export const textareaResizeArray = [
-    'none',
-    'both',
-    'horizontal',
-    'vertical',
-    'initial',
-    'inherit'
-];

package/dist/collection/components/textarea/textarea.css

@@ -1,148 +0,0 @@
-:host {
-  opacity: 1;
-  display: block;
-  outline: none;
-  --r-label--margin-bottom: 0;
-}
-
-:host(:focus-visible) {
-  outline: none;
-}
-
-:host([resize=none]) {
-  --r-textarea--input--resize: none;
-}
-
-:host([resize=both]) {
-  --r-textarea--input--resize: both;
-}
-
-:host([resize=horizontal]) {
-  --r-textarea--input--resize: horizontal;
-}
-
-:host([resize=vertical]) {
-  --r-textarea--input--resize: vertical;
-}
-
-:host([resize=initial]) {
-  --r-textarea--input--resize: initial;
-}
-
-:host([resize=inherit]) {
-  --r-textarea--input--resize: inherit;
-}
-
-:host([invalid]:not([invalid=false])) {
-  --r-textarea--container--background-color: var(--r-status-error-soft, #fef6f6);
-  --r-textarea--container--border-color: var(--r-status-error-regular, #b00c15);
-}
-
-.r-textarea--label-container {
-  display: var(--r-textarea--label-container--display, flex);
-  gap: var(--r-textarea--label-container--gap, var(--r-spacing-100, 1rem));
-  align-items: var(--r-textarea--label-container--align-items, center);
-  justify-content: var(--r-textarea--label-container--align-items, space-between);
-}
-.r-textarea--label-container ::slotted([slot=popover]) {
-  display: var(--r-textarea--popover--display, inline-flex);
-  height: var(--r-textarea--popover--height, var(--r-spacing-150, 1.5));
-  align-items: var(--r-textarea--popover--align-items, center);
-  justify-content: var(--r-textarea--popover--justify-content, center);
-  margin-right: var(--r-textarea--popover--margin-right, -0.25rem);
-  --r-popover--trigger--min-width: var(--r-textarea--popover-trigger--min-width, var(--r-spacing-150, 1.5));
-}
-.r-textarea--input::placeholder {
-  color: var(--r-textarea--input--placeholder--color, var(--r-text-soft, #686868));
-}
-.r-textarea--input {
-  vertical-align: top;
-  width: var(--r-textarea--input--width, 100%);
-  max-width: var(--r-textarea--input--max-width, 100%);
-  min-height: var(--r-textarea--input--min-height, 8.875em);
-  font-family: var(--r-textarea--input--font-family, var(--r-font-family-text, system-ui));
-  font-weight: var(--r-textarea--input--font-weight, var(--r-font-weight-regular, 400));
-  font-size: var(--r-textarea--input--font-size, var(--r-font-size-400, 1rem));
-  line-height: var(--r-textarea--input--line-height, var(--r-line-height-m, 1.5));
-  color: var(--r-textarea--input--color, var(--r-text-regular, #282828));
-  background-color: var(--r-textarea--input--background-color, transparent);
-  opacity: var(--r-textarea--input--opacity, 1);
-  border-width: var(--r-textarea--input--border-width, 0px);
-  border-style: var(--r-textarea--input--border-style, solid);
-  border-color: var(--r-textarea--input--border-color, var(--r-border-soft, #686868));
-  border-radius: var(--r-textarea--input--border-radius, 0);
-  box-sizing: var(--r-textarea--input--box-sizing, border-box);
-  box-shadow: var(--r-textarea--input--box-shadow, none);
-  padding: var(--r-textarea--input--padding, var(--r-textarea--input--padding-top, 0.688em) var(--r-textarea--input--padding-right, 0.625em) var(--r-textarea--input--padding-bottom, 0.688em) var(--r-textarea--input--padding-left, 0.625em));
-  margin-top: var(--r-textarea--input--margin-top, 0);
-  resize: var(--r-textarea--input--resize, both);
-  z-index: var(--r-textarea--input--z-index, initial);
-  outline: var(--r-textarea--input--outline, none);
-  outline-offset: var(--r-textarea--input--outline-offset, 0);
-  pointer-events: var(--r-textarea--input--pointer-events, auto);
-  cursor: var(--r-textarea--input--cursor, inherit);
-}
-.r-textarea--container {
-  display: flex;
-  align-items: start;
-  overflow: visible;
-  background-color: var(--r-textarea--container--background-color, var(--r-background-interactive-softest, #f7f7f7));
-  border-width: var(--r-textarea--container--border-width, 1px);
-  border-style: var(--r-textarea--container--border-style, solid);
-  border-color: var(--r-textarea--container--border-color, var(--r-border-soft, #686868));
-  padding: var(--r-textarea--container--padding, 0);
-  margin-top: var(--r-textarea--container--margin-top, var(--r-spacing-025, 0.25rem));
-  box-shadow: var(--r-textarea--container--box-shadow, none);
-  outline: var(--r-textarea--container--outline, none);
-  outline-offset: var(--r-textarea--container--outline-offset, none);
-}
-.r-textarea--container[data-readonly=true] {
-  --r-textarea--container--background-color: var(--r-background-soft, #f3f1f0);
-  --r-textarea--container--border-color: transparent transparent var(--r-border-soft, #686868) transparent;
-  --r-textarea--container--cursor: text;
-}
-.r-textarea--container:hover:not([data-disabled=true]):not([data-readonly=true]) {
-  --r-textarea--container--background-color: var(--r-background-interactive-hovered);
-}
-.r-textarea--container:active:not([data-disabled=true]):not([data-readonly=true]) {
-  --r-textarea--container--background-color: var(--r-background-interactive-pressed);
-}
-.r-textarea--container:focus-within {
-  --r-textarea--container--box-shadow: 0 0 0 6px var(--r-border-focused-outlined, #fff);
-  --r-textarea--container--outline: 2px solid var(--r-border-focused, #0071e3);
-  --r-textarea--container--outline-offset: 2px;
-}
-.r-textarea--trailing {
-  display: var(--r-textarea--trailing--display, flex);
-  margin-top: var(--r-textarea--trailing--margin-top, 0.688em);
-  margin-right: var(--r-textarea--trailing--margin-right, 0.625em);
-  margin-left: var(--r-textarea--trailing--margin-left, auto);
-  gap: var(--r-textarea--trailing--gap, 0.625rem);
-}
-.r-textarea--trailing:empty {
-  display: none;
-}
-.r-textarea--readonly-icon {
-  color: var(--r-textarea--readonly-icon--color, var(--r-icon-soft, #686868));
-}
-.r-textarea--messages {
-  display: flex;
-  gap: var(--r-textarea--messages--gap, var(--r-spacing-025, 0.25rem));
-}
-.r-textarea--messages--counter {
-  margin-left: auto;
-}
-.r-textarea--messages:has(r-hint) {
-  margin-top: var(--r-spacing-025, 0.25rem);
-}
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}