@riverty/web-components 6.3.0 → 6.3.1

package/dist/esm/r-select-option.entry.js

@@ -0,0 +1,128 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CTxpqopm.js';
+
+const selectOptionCss = ":host(:hover){--r-select-option--background-color:var(--r-background-interactive-hovered)}:host(:not([aria-disabled=true]):focus){outline:var(--outline, none);--r-select-option--background-color:var(--r-background-interactive-hovered);--r-select-option--border-color:var(--r-background-interactive-softest);--r-select-option--box-shadow:inset 0px 0px 0px 1px var(--r-border-focused-outlined, #fff), inset 0 0 0 3px var(--r-border-focused, #0071e3), inset 0 0 0 4px var(--r-border-focused-outlined, #fff);--r-select-option--outline:2px solid var(--r-border-focused, #0071e3);--r-select-option--outline-offset:-4px;--r-select-option--z-index:1}:host([data-focused=true]){outline:var(--outline, none);--r-select-option--background-color:var(--r-background-interactive-hovered);--r-select-option--border-color:var(--r-background-interactive-softest);--r-select-option--box-shadow:inset 0px 0px 0px 1px var(--r-border-focused-outlined, #fff), inset 0 0 0 3px var(--r-border-focused, #0071e3), inset 0 0 0 4px var(--r-border-focused-outlined, #fff);--r-select-option--outline:2px solid var(--r-border-focused, #0071e3);--r-select-option--outline-offset:-4px}:host(:not([aria-disabled=true]):active){--r-select-option--background-color:var(--r-background-interactive-pressed)}:host([aria-disabled=true]),:host([aria-disabled=true]:hover),:host([aria-disabled=true]:focus){--r-select-option--opacity:0.4;--r-select-option--background-color:transparent}:host([aria-selected=true]){--r-select-option--font-weight:600;--r-select-option--background-color:var(--r-background-interactive-hovered)}:host([aria-hidden=true]){--r-select-option--display:none}:host([icon-position=end]){--r-select-option--flex-direction:row-reverse;--r-select-option--icon--margin-left:0.75em;--r-select-option--icon--margin-right:0}.r-select-option{box-sizing:var(--r-select-option--box-sizing);position:var(--r-select-option--position);display:var(--r-select-option--display, flex);flex-direction:var(--r-select-option--flex-direction, row);min-height:var(--r-select-option--min-height, 1.125em);width:var(--r-select-option--width, auto);font-size:var(--r-select-option--font-size, 1rem);line-height:var(--r-select-option--line-height, 1.2);font-weight:var(--r-select-option--font-weight, normal);padding-top:var(--r-select-option--padding-top, 0.75em);padding-right:var(--r-select-option--padding-right, 0.75em);padding-bottom:var(--r-select-option--padding-bottom, 0.75em);padding-left:var(--r-select-option--padding-left, 0.75em);align-items:var(--r-select-option--align-items, center);color:var(--r-select-option--color, inherit);background-color:var(--r-select-option--background-color, rgba(0, 0, 0, 0));border-color:var(--r-select-option--border-color, rgba(0, 0, 0, 0));border-radius:var(--r-select-option--border-radius, 0);border-width:var(--r-select-option--border-width, 1px);border-style:var(--r-select-option--border-style, solid);box-shadow:var(--r-select-option--box-shadow, none);outline:var(--r-select-option--outline, none);outline-offset:var(--r-select-option--outline-offset, 0);transform:var(--r-select-option--transform, none);z-index:var(--r-select-option--z-index, 0);opacity:var(--r-select-option--opacity, 1)}.r-select-option--icon{display:var(--r-select-option--icon--display, inline-flex);align-items:var(--r-select-option--icon--align-items, center);justify-content:var(--r-select-option--icon--justify-content, center);margin-top:var(--r-select-option--icon--margin-top, 0.05em);margin-left:var(--r-select-option--icon--margin-left, 0);margin-right:var(--r-select-option--icon--margin-right, 0.75em)}.r-select-option--icon svg{display:var(--r-select-option--icon--svg--display, inline-flex)}.r-select-option--label{max-width:var(--r-select-option--label--max-width, 100%);text-overflow:var(--r-select-option--label--text-overflow, ellipsis);white-space:var(--r-select-option--label--white-space, normal)}";
+
+const SelectOption = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.optionClick = createEvent(this, "optionClick");
+        /**
+         * When true, the option is not focusable or selectable.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Marks the option as selected. Controlled by `<r-select>`; not user‑set in isolation.
+         * @default false
+         */
+        this.selected = false;
+        /**
+         * Icon size (applied when `icon` provided).
+         * @default "m"
+         */
+        this.iconSize = 'm';
+        /**
+         * Icon color token / CSS color value (when `icon` provided).
+         * @default "var(--r-select-option--color)"
+         */
+        this.iconColor = 'var(--r-select-option--color)';
+        /**
+         * Icon position relative to label content.
+         * @default "start"
+         */
+        this.iconPosition = 'start';
+        /** Internal unique id assigned for accessibility / focus tracking. */
+        this.uniqueId = `r-select-option-${Date.now().toString(32)}${Math.random().toString(32)}`.replace(/\./g, '');
+        this.isFocused = false;
+        this.isSelected = false;
+        this.handleClick = event => {
+            event.preventDefault();
+            if (this.disabled)
+                return;
+            const { host, value } = this;
+            this.optionClick.emit({
+                element: host,
+                value
+            });
+        };
+        this.handleKeydown = event => {
+            event.preventDefault();
+            if (this.disabled)
+                return;
+        };
+    }
+    /**
+     * Sets the component's focus state programmatically.
+     * @method
+     * @returns Promise that resolves once the focus state has been applied.
+     */
+    async setFocus() {
+        this.isFocused = true;
+    }
+    /**
+     * Removes the component's focus state programmatically.
+     * @method
+     * @returns Promise that resolves once the focus state has been removed.
+     */
+    async setBlur() {
+        this.isFocused = false;
+    }
+    /**
+     * Marks this option as selected.
+     *
+     * Sets the internal `isSelected` flag to `true`. Declared as `async` to allow for
+     * future asynchronous side effects or integration with async selection workflows,
+     * and may be safely awaited by callers.
+     *
+     * Idempotent: calling it multiple times will keep the option selected.
+     *
+     * @returns Promise that resolves once the selection state has been updated.
+     */
+    async setSelected() {
+        this.isSelected = true;
+    }
+    /**
+     * Clears the current selection state for this option by setting `isSelected` to `false`.
+     *
+     * Intended for use when programmatically resetting or updating the selection (e.g., on form reset
+     * or when enforcing single-selection logic in a parent component).
+     *
+     * Side effects:
+     * - Triggers any reactive updates or re-renders that depend on `isSelected`.
+     *
+     * @returns A promise that resolves after the selection state has been cleared.
+     */
+    async clearSelected() {
+        this.isSelected = false;
+    }
+    get hasIconSlot() {
+        return !!this.host.querySelector('[slot="icon"]');
+    }
+    get definedValue() {
+        var _a, _b;
+        const text = (_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        const label = (_b = this.host.getAttribute('label')) === null || _b === void 0 ? void 0 : _b.trim();
+        return label || text || '';
+    }
+    componentWillLoad() {
+        var _a;
+        const isValue = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0;
+        if (!isValue) {
+            this.host.setAttribute('value', this.definedValue);
+        }
+        this.isSelected = this.selected;
+    }
+    render() {
+        const { disabled, uniqueId, icon, iconSize, iconColor, hasIconSlot } = this;
+        const iconAttributes = {
+            name: icon,
+            size: iconSize,
+            color: iconColor
+        };
+        return (h(Host, { key: 'f55e1ac28062ff9c02ab76c3e1b9aede186743a2', id: uniqueId, role: "option", onClick: this.handleClick, onKeydown: this.handleKeydown, "aria-disabled": `${disabled}`, "aria-selected": `${this.isSelected}`, "data-value": this.definedValue, "data-focused": `${this.isFocused}` }, h("div", { key: '89a1ac5a1cf7e842eb2083469c802b41de0d24a2', class: "r-select-option" }, icon && h("span", { key: '97dfa1b0384b43175e42aab83d27afbca3ba954d', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: 'd22429de6f0f5e44e265a71626eb839129ab0792' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: 'b660efa16353c5f0ad5953e576eb1dab6779da02', class: "r-select-option--icon" }, h("slot", { key: '99495694c323df2122e039414c1fdb1588b3e59f', name: "icon" })), h("span", { key: '0630026934eab56f02a309ae668667fbaf9ec1c9', class: "r-select-option--label" }, h("slot", { key: '2d4fb9319fc58ac4a838f1799046e4822f2bccf3' })))));
+    }
+    get host() { return getElement(this); }
+};
+SelectOption.style = selectOptionCss;
+
+export { SelectOption as r_select_option };