@riverty/web-components 6.2.1 → 6.3.0

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

@@ -1,128 +0,0 @@
-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: 'd75c7a753d325360d4bee79ef7b96fbedd2d9b96', 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: '8d8d449a5352f90d7731df10ea011856537b02f4', class: "r-select-option" }, icon && h("span", { key: 'f74192805472c8023b921f0a2869772f4c007d78', class: "r-select-option--icon" }, h("r-icon", Object.assign({ key: '6ac112921c222e83df33b2cf0113f3b158a98407' }, iconAttributes))), !icon && hasIconSlot && h("span", { key: '8c5779ab3446a8d4b8880bf1f9958f02d32ca5e4', class: "r-select-option--icon" }, h("slot", { key: '05647b1a0f7fb6f3c996461a825d8d60bb966b50', name: "icon" })), h("span", { key: 'a4de330d788288995da81cd7cbe7a9f8e9ba44c0', class: "r-select-option--label" }, h("slot", { key: '2cb6ac3d005a3bf9b75b0c23d27cbf1930bc15cc' })))));
-    }
-    get host() { return getElement(this); }
-};
-SelectOption.style = selectOptionCss;
-
-export { SelectOption as r_select_option };