@riverty/web-components 6.3.0 → 6.3.1

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

@@ -0,0 +1,294 @@
+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: '3a43356d4178acc008f6213b4f27488740582497', scrollable: `${this.scrollable}`, role: "tablist" }, h("div", { key: 'aa5fdb9a8e8445b083a9ac17d0b6c72f8693e181', class: "r-tabs-list" }, this.scrollable &&
+            h("div", { key: '2ba0a3eeae8fd073016af13c9781a20b3c1078cd', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, this.renderScrollButton('left', this.firstItemVisible, this.scrollLeft, this.scrollLeftTooltip), !this.firstItemVisible && h("div", { key: '132141c530c86a0cb5abb48ae5ab55fe00c33444', class: "r-tabs-list--scroll-indicator" })), h("div", { key: 'bbad4d5cf268fa5e15f2e83050ab4f40ec284cbc', class: "r-tabs-list--tabs-container", ref: (el) => this.containerRef = el, onScroll: this.updateScrollState }, h("slot", { key: '8531037917ff783f4467e232ffafff4f2fd0be1f' })), this.scrollable &&
+            h("div", { key: 'e39465fadb91478adf2f2ed529a89038ff6695c3', "aria-hidden": "true", class: "r-tabs-list--scroll-button-container" }, !this.lastItemVisible && h("div", { key: 'a4d5660cde041b1ab6ef77c8498e74a85fb79289', 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

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

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

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