ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
529 lines (528 loc) • 34.4 kB
JavaScript
import { T as a, _ as u, c as A, i as h, m as D, p as b, s as I } from "./factory-WDxu11V0.js";
import { t as _ } from "./events-Cqz3ramM.js";
import "./builder-EH76YCFS.js";
import { a as l, i as p, l as c, n as d, o as f, r as S, t as g } from "./utils-U-9uH7EX.js";
import { a as m, n as w } from "./ssr-BzykYefm.js";
import { a as k, n as C, r as O, t as E } from "./a11y-ZSlIUH9B.js";
import { r as L } from "./icon-DgLPjeVe.js";
import "./input-DEoPNM0j.js";
import { t as V } from "./chevron-down-DRUABlJy.js";
import "./dropdown-B6i_Wh9a.js";
import { t as M } from "./floating-C16PP_Xu.js";
import { addClassToElement as y, isMobile as v, range as x, removeClassToElement as T, throttle as B } from "ranuts/utils";
var z = ':host{position:var(--ran-select-host-position, relative);display:var(--ran-select-host-display, inline-block);cursor:var(--ran-select-host-cursor, pointer);outline:var(--ran-select-host-outline, 0);-webkit-tap-highlight-color:var(--ran-select-host-tap-highlight-color, transparent)}:host,:host(:focus),:host(:active){outline:var(--ran-select-host-focus-outline, 0);-webkit-tap-highlight-color:transparent}:host ::slotted(r-option){display:var(--ran-select-option-display, none)}:host([disabled]){cursor:var(--ran-select-host-disabled-cursor, not-allowed);pointer-events:var(--ran-select-host-disabled-pointer-events, all);opacity:var(--ran-select-host-disabled-opacity, .6)}:host(:not([disabled]):hover) .ran-select{cursor:var(--ran-select-host-hover-cursor, pointer)}:host(:not([disabled],[type="text"]):hover) .selection{border:var(--ran-select-hover-border, 1px solid var(--ran-color-primary, #006bff))}:host(:not([disabled],[type="text"]):hover) .selection-search{cursor:var(--ran-select-search-hover-cursor, pointer)}:host(:not([disabled],[type="text"]):hover) .selection-item{cursor:var(--ran-select-item-hover-cursor, pointer);color:var(--ran-select-item-hover-color, var(--ran-color-text-disabled, #bfbfbf))}:host([type="text"]) .selection{border:var(--ran-select-text-border, none);background:var(--ran-select-text-background, transparent)}:host([type="text"]) .icon{display:var(--ran-select-icon-text-display, none)}:host(:not([disabled],[type="text"]):focus-visible) .selection{border:var(--ran-select-focus-border, 1px solid var(--ran-color-primary, #006bff));box-shadow:var(--ran-select-focus-box-shadow, var(--ran-focus-ring))}:host(:not([disabled],[type="text"]):focus-visible) .selection-search{cursor:var(--ran-select-search-focus-cursor, pointer)}:host(:not([disabled],[type="text"]):focus-visible) .selection-item{cursor:var(--ran-select-item-focus-cursor, pointer);color:var(--ran-select-item-focus-color, var(--ran-color-text-disabled, #bfbfbf))}:host .selection-search{display:var(--ran-select-search-display, none)}:host([showSearch]:not([disabled])) .selection-search{cursor:var(--ran-select-search-visible-cursor, text);display:var(--ran-select-search-visible-display, block)}:host([showSearch]:not([disabled])) .selection-item{cursor:var(--ran-select-item-search-cursor, pointer)}:host([showSearch]:not([disabled]):focus) .selection-search{display:var(--ran-select-search-visible-display, block);cursor:var(--ran-select-search-visible-cursor, text);opacity:var(--ran-select-search-visible-opacity, 1)}.ran-select-label{display:var(--ran-select-label-display, block);margin-bottom:var(--ran-select-label-margin-bottom, var(--ran-space-1, 4px));font-size:var(--ran-select-label-font-size, var(--ran-text-label-1, 14px));font-weight:var(--ran-select-label-font-weight, var(--ran-text-label-weight, 500));color:var(--ran-select-label-color, var(--ran-color-text, #171717));cursor:var(--ran-select-label-cursor, pointer)}:host([disabled]) .ran-select-label{color:var(--ran-select-label-disabled-color, var(--ran-color-text-disabled, #999));cursor:var(--ran-select-label-disabled-cursor, not-allowed)}.ran-select{width:var(--ran-select-root-width, 100%);height:var(--ran-select-root-height, 100%);font-size:var(--ran-select-root-font-size, var(--ran-text-label-1, 14px));font-weight:var(--ran-select-root-font-weight, var(--ran-text-label-weight, 500));box-sizing:var(--ran-select-root-box-sizing, border-box);margin:var(--ran-select-root-margin, 0);padding:var(--ran-select-root-padding, 0);color:var(--ran-select-root-color, var(--ran-color-text, rgba(0, 0, 0, .88)));line-height:var(--ran-select-root-line-height, 1.57142857);list-style:var(--ran-select-root-list-style, none);font-family:var(--ran-select-root-font-family, var(--ran-skin-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));position:var(--ran-select-root-position, relative);display:var(--ran-select-root-display, block)}.ran-select .selection{position:var(--ran-select-position, relative);background-color:var(--ran-select-background-color, var(--ran-color-bg-elevated, #ffffff));background-image:var(--ran-select-background-image, none);border:var(--ran-select-border, 1px solid var(--ran-color-border, #eaeaea));transition:var(--ran-select-transition, none);width:var(--ran-select-width, 100%);height:var(--ran-select-height, 100%);min-height:var(--ran-select-min-height, var(--ran-size-7, 32px));padding:var(--ran-select-padding, 0 var(--ran-space-3, 12px));box-sizing:var(--ran-select-box-sizing, border-box);margin:var(--ran-select-margin, 0);color:var(--ran-select-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-select-font-size, var(--ran-text-label-1, 14px));font-weight:var(--ran-select-font-weight, var(--ran-text-label-weight, 500));line-height:var(--ran-select-line-height, 1.57142857);list-style:var(--ran-select-list-style, none);font-family:var(--ran-select-font-family, inherit);display:var(--ran-select-display, flex);border-radius:var(--ran-select-border-radius, var(--ran-radius-sm, 6px))}.ran-select .selection-search{position:var(--ran-select-search-position, absolute);opacity:var(--ran-select-search-opacity, 0);top:var(--ran-select-search-top, 0);left:var(--ran-select-search-left, 0);height:var(--ran-select-search-height, 100%);inset-inline-start:var(--ran-select-search-inset-inline-start, 11px);inset-inline-end:var(--ran-select-search-inset-inline-end, 11px);margin:var(--ran-select-search-margin, 0);padding:var(--ran-select-search-padding, 0);background:var(--ran-select-search-background, transparent);border:var(--ran-select-search-border, none);outline:var(--ran-select-search-outline, none);appearance:var(--ran-select-search-appearance, none);font-family:var(--ran-select-search-font-family, inherit);cursor:var(--ran-select-search-cursor, not-allowed)}.ran-select .selection-search::-webkit-search-cancel-button{display:var(--ran-select-search-cancel-display, none);-webkit-appearance:var(--ran-select-search-cancel-appearance, none)}.ran-select .selection-search::part(input){border:var(--ran-select-search-input-border, none);padding:var(--ran-select-search-input-padding, 0);height:100%;min-height:100%;box-sizing:border-box;outline:var(--ran-select-search-input-outline, none)}.ran-select .selection-search::part(input):active{border:var(--ran-select-search-active-border, none);padding:var(--ran-select-search-active-padding, 0);height:var(--ran-select-search-active-height, 100%);outline:var(--ran-select-search-active-outline, none);border-color:var(--ran-select-search-active-border-color, transparent);box-shadow:var(--ran-select-search-active-box-shadow, none);border-right-width:var(--ran-select-search-active-border-width, 0px)}.ran-select .selection-search::part(content){min-height:var(--ran-select-search-content-min-height, 0)}.ran-select .selection-item{position:var(--ran-select-item-position, absolute);top:var(--ran-select-item-top, 0);left:var(--ran-select-item-left, 12px);right:var(--ran-select-item-right, 28px);margin:var(--ran-select-item-margin, 0);padding:var(--ran-select-item-padding, 0);background:var(--ran-select-item-background, transparent);border:var(--ran-select-item-border, none);outline:var(--ran-select-item-outline, none);appearance:var(--ran-select-item-appearance, none);font-family:var(--ran-select-item-font-family, inherit);height:var(--ran-select-item-height, 100%);display:var(--ran-select-item-display, flex);align-items:var(--ran-select-item-align-items, center);-webkit-user-select:var(--ran-select-item-user-select, none);user-select:var(--ran-select-item-user-select, none);overflow:var(--ran-select-item-overflow, hidden);white-space:var(--ran-select-item-white-space, nowrap);text-overflow:var(--ran-select-item-text-overflow, ellipsis);cursor:var(--ran-select-item-cursor, pointer)}.ran-select .selection-select{color:var(--ran-select-select-color, var(--ran-color-text-disabled, rgba(0, 0, 0, .25)))}.ran-select .selection .icon{display:var(--ran-select-icon-display, flex);align-items:var(--ran-select-icon-align-items, center);color:var(--ran-select-icon-color, var(--ran-color-text-disabled, rgba(0, 0, 0, .25)));font-style:var(--ran-select-icon-font-style, normal);text-align:var(--ran-select-icon-text-align, center);text-transform:var(--ran-select-icon-text-transform, none);text-rendering:var(--ran-select-icon-text-rendering, optimizeLegibility);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:var(--ran-select-icon-position, absolute);top:var(--ran-select-icon-top, 50%);inset-inline-start:var(--ran-select-icon-inset-inline-start, auto);inset-inline-end:var(--ran-select-icon-inset-inline-end, 8px);height:var(--ran-select-icon-height, var(--ran-size-1, 16px));transform:var(--ran-select-icon-transform, translateY(-50%));margin-top:var(--ran-select-icon-margin-top, 0);font-size:var(--ran-select-icon-font-size, var(--ran-text-label-3, 12px));pointer-events:var(--ran-select-icon-pointer-events, none)}', P = class extends w {
_option;
_optionContent;
_shadowDom;
_slot;
static get observedAttributes() {
return [
"disabled",
"sheet",
"value"
];
}
constructor() {
super(), this._shadowDom = g(this);
const t = b().build(), e = h().class("ran-select-dropdown-option-content").children(t).build(), i = h().class("ran-select-dropdown-option").children(e).build();
this._shadowDom.appendChild(i), this._slot = t, this._optionContent = e, this._option = i;
}
get value() {
return this.getAttribute("value");
}
set value(t) {
p(this, "value", t);
}
get sheet() {
return this.getAttribute("sheet");
}
set sheet(t) {
p(this, "sheet", t);
}
get disabled() {
return c(this);
}
set disabled(t) {
!t || t === "false" ? this.removeAttribute("disabled") : this.setAttribute("disabled", "");
}
handlerExternalCss() {
f(this, this._shadowDom, "sheet", null, this.sheet);
}
connectedCallback() {
this.classList.contains("ran-option") || this.classList.add("ran-option");
}
attributeChangedCallback(t, e, i) {
e !== i && (t === "disabled" && this._option && (!i || i === "false" ? this._option.setAttribute("disabled", "") : this._option.removeAttribute("disabled")), t === "sheet" && this._shadowDom && this.handlerExternalCss());
}
};
m("r-option", P);
var R = '.ranui-dropdown-option-item{position:var(--ran-dropdown-option-item-position, relative);display:var(--ran-dropdown-option-item-display, block);padding:var(--ran-dropdown-option-item-padding, 5px 12px);color:var(--ran-dropdown-option-item-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-weight:var(--ran-dropdown-option-item-font-weight, normal);font-size:var(--ran-dropdown-option-item-font-size, 14px);transition:var(--ran-dropdown-option-item-transition, none);border-radius:var(--ran-dropdown-option-item-border-radius, var(--ran-radius-sm, 6px));cursor:var(--ran-dropdown-option-item-cursor, pointer)}.ranui-dropdown-option-item:hover{background-color:var(--ran-dropdown-option-item-hover-background-color, var(--ran-gray-alpha-100, rgba(0, 0, 0, .04)))}.ranui-dropdown-option-item-content{text-align:var(--ran-dropdown-option-item-content-text-align, left);overflow:var(--ran-dropdown-option-item-content-overflow, hidden);white-space:var(--ran-dropdown-option-item-content-white-space, nowrap);text-overflow:var(--ran-dropdown-option-item-content-text-overflow, ellipsis);color:var(--ran-dropdown-option-item-content-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-dropdown-option-item-content-font-size, 14px);line-height:var(--ran-dropdown-option-item-content-line-height, 1.57142857);box-sizing:var(--ran-dropdown-option-item-content-box-sizing, border-box);list-style:var(--ran-dropdown-option-item-content-list-style, none);font-family:var(--ran-dropdown-option-item-content-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-variant:var(--ran-dropdown-option-item-content-font-variant, initial)}.ranui-dropdown-option-active{background-color:var(--ran-dropdown-option-active-background-color, var(--ran-blue-100, #e6f7ff));font-weight:var(--ran-dropdown-option-active-font-weight, bold)}.ranui-dropdown-option-active:hover{background-color:var(--ran-dropdown-option-active-hover-background-color, var(--ran-blue-100, #e6f7ff))}', N = class extends w {
ionDropdownItem;
_slot;
_shadowDom;
ionDropdownItemContent;
static get observedAttributes() {
return [
"active",
"value",
"title",
"sheet"
];
}
constructor() {
super(), this._shadowDom = g(this, R);
const t = a(), e = a(), i = b().class("slot").ref(t).build(), r = h().class("ranui-dropdown-option-item-content").part("content").ref(e).children(i).build(), s = h().class("ranui-dropdown-option-item").part("item").children(r).build();
this._shadowDom.appendChild(s), this._slot = l(t, "slot"), this.ionDropdownItemContent = l(e, "content"), this.ionDropdownItem = s;
}
get value() {
return d(this, "value");
}
set value(t) {
!c(this) && t ? this.setAttribute("value", t) : this.removeAttribute("value");
}
get active() {
return d(this, "active");
}
set active(t) {
t ? this.setAttribute("active", t) : this.removeAttribute("active");
}
get title() {
return d(this, "title");
}
set title(t) {
t ? this.setAttribute("title", t) : this.removeAttribute("title");
}
get sheet() {
return d(this, "sheet");
}
set sheet(t) {
p(this, "sheet", t);
}
handlerExternalCss = () => {
f(this, this._shadowDom, "sheet", null, this.sheet);
};
connectedCallback() {
this.handlerExternalCss(), this.active && y(this.ionDropdownItem, "ranui-dropdown-option-active");
}
attributeChangedCallback(t, e, i) {
if (t === "sheet") {
this.handlerExternalCss();
return;
}
t === "active" && i ? y(this.ionDropdownItem, "ranui-dropdown-option-active") : T(this.ionDropdownItem, "ranui-dropdown-option-active");
}
};
m("r-dropdown-item", N);
L("chevron-down", V);
var q = 0, H = class extends w {
static formAssociated = !0;
_internals;
_events = new _();
_searchEvents = new _();
removeTimeId;
_listboxId;
_activeIndex;
_slot;
_shadowDom;
_select;
_selection;
_search;
_icon;
_selectDropdown;
_selectionDropdown;
_floating = new M({
host: this,
panel: () => this._selectionDropdown,
placement: () => this.placement,
offset: 4,
containerId: () => this.getPopupContainerId,
beforeMeasure: (t, e) => {
e.style.setProperty("width", `${t.width}px`);
},
measurePanel: (t) => {
const e = t._shadowDom?.querySelector(".ranui-dropdown")?.getBoundingClientRect(), i = t.getBoundingClientRect();
return {
width: e?.width ?? i.width,
height: e?.height ?? i.height
};
}
});
_optionList;
_optionLabelMapValue;
_optionValueMapLabel;
_activeOption;
_text;
_selector;
_label;
onSearch;
_typeaheadBuffer = "";
_typeaheadTimeId;
static get observedAttributes() {
return [
"disabled",
"required",
"sheet",
"type",
"value",
"label",
"defaultvalue",
"showsearch",
"open",
"placement",
"getpopupcontainerid",
"dropdownclass",
"trigger"
];
}
constructor() {
super();
try {
this._internals = this.attachInternals();
} catch {
this._internals = void 0;
}
this._listboxId = `ran-select-listbox-${Math.random().toString(36).slice(2, 9)}`, this._activeIndex = -1, this._optionList = [], this._optionLabelMapValue = /* @__PURE__ */ new Map(), this._optionValueMapLabel = /* @__PURE__ */ new Map(), this._shadowDom = g(this, z);
const t = a(), e = a(), i = a(), r = a(), s = a(), o = a(), n = h().class("ran-select").part("select").children(h().class("selection").ref(t).part("selection").children(u("r-icon").class("icon").ref(i).part("icon").attr("name", "chevron-down").attr("color", "var(--ran-color-text-secondary)").attr("size", "16"), h().ref(e).children(D().class("selection-item").ref(r).part("selection-item"), I().class("selection-search").ref(s).part("search").attr("type", "search").attr("autocomplete", "off"))), b().ref(o).class("slot")).build();
this._shadowDom.appendChild(n), this._select = n, this._selection = l(t, "selection"), this._selector = l(e, "selector"), this._icon = l(i, "icon"), this._text = l(r, "selection item"), this._search = l(s, "selection search"), this._slot = l(o, "slot");
}
get value() {
return this.getAttribute("value") || "";
}
set value(t) {
t ? this.setAttribute("value", t) : this.removeAttribute("value"), this.syncFormValue();
}
syncFormValue = () => {
this._internals?.setFormValue?.(this.value), this._updateValidity();
};
get required() {
return this.hasAttribute("required");
}
set required(t) {
S(this, "required", !(!t || t === "false"));
}
get label() {
return this.getAttribute("label") || "";
}
set label(t) {
this.setAttribute("label", t);
}
_syncLabel = (t) => {
t != null ? (this._label ? this._label.innerHTML = t : (this.id || (this.id = `ran-select-${++q}`), this._label = A().class("ran-select-label").part("label").text(t).build(), this._label.id = `${this.id}-label`, this._label.addEventListener("click", () => this.focus()), this._shadowDom.insertBefore(this._label, this._select)), this.setAttribute("aria-label", t)) : this._label && (this._label.remove(), this._label = void 0, this.removeAttribute("aria-label"));
};
_updateValidity = () => {
k(this, this._internals, {
disabled: this.disabled,
required: this.required,
isEmpty: !this.value,
message: "Please select an item in the list.",
anchor: this
});
};
checkValidity() {
return E(this._internals);
}
reportValidity() {
return O(this._internals);
}
get validity() {
return this._internals?.validity;
}
get validationMessage() {
return this._internals?.validationMessage ?? "";
}
formResetCallback() {
const t = this.defaultValue;
if (t) {
this.value = t;
return;
}
this.removeAttribute("value"), this._text.textContent = "", this._text.removeAttribute("title"), this._activeOption && (this._activeOption.removeAttribute("active"), this._activeOption.setAttribute("aria-selected", "false"), this._activeOption = void 0), this._activeIndex = -1, this.syncActiveState(), this.syncFormValue();
}
get defaultValue() {
return this.getAttribute("defaultValue") || "";
}
set defaultValue(t) {
this.setAttribute("defaultValue", t || "");
}
get showSearch() {
return this.getAttribute("showSearch") || "";
}
set showSearch(t) {
this.setAttribute("showSearch", t || "");
}
get type() {
return this.getAttribute("type") || "";
}
set type(t) {
this.setAttribute("type", t || "");
}
get placement() {
return this.getAttribute("placement") || "bottom";
}
set placement(t) {
this.setAttribute("placement", t || "");
}
get sheet() {
return d(this, "sheet");
}
set sheet(t) {
p(this, "sheet", t);
}
get getPopupContainerId() {
return this.getAttribute("getPopupContainerId") || "";
}
set getPopupContainerId(t) {
this.setAttribute("getPopupContainerId", t || "");
}
get dropdownclass() {
return this.getAttribute("dropdownclass") || "";
}
set dropdownclass(t) {
this.setAttribute("dropdownclass", t || "");
}
get trigger() {
return this.getAttribute("trigger") || "click";
}
set trigger(t) {
this.setAttribute("trigger", t || "");
}
get disabled() {
return c(this);
}
set disabled(t) {
!t || t === "false" ? (this.removeAttribute("disabled"), this._selection.removeAttribute("disabled"), this.removeAttribute("aria-disabled"), (this.tabIndex < 0 || !this.hasAttribute("tabindex")) && (this.tabIndex = 0)) : (this.setAttribute("disabled", ""), this._selection.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true"), this.tabIndex = -1);
}
initAria = () => {
this.hasAttribute("tabindex") || (this.tabIndex = 0), this.setAttribute("role", "combobox"), this.setAttribute("aria-haspopup", "listbox"), this.setAttribute("aria-controls", this._listboxId), this.setAttribute("aria-expanded", "false"), this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
};
updateAriaExpanded = (t) => {
this.setAttribute("aria-expanded", t ? "true" : "false");
};
get open() {
return this.hasAttribute("open");
}
set open(t) {
t ? this.setAttribute("open", "") : this.removeAttribute("open");
}
_applyOpen = () => {
this._floating.apply(this.open);
};
show = () => {
this.open = !0;
};
hide = () => {
this.open = !1;
};
toggle = () => {
this.open = !this.open;
};
getDropdownOptions = () => this._selectionDropdown ? Array.from(this._selectionDropdown.querySelectorAll("r-dropdown-item")) : [];
syncActiveState = () => {
this.getDropdownOptions().forEach((t, e) => {
t.setAttribute("role", "option"), t.setAttribute("aria-selected", t === this._activeOption ? "true" : "false"), t.id || (t.id = `${this._listboxId}-option-${e}`);
}), this._activeOption?.id ? this.setAttribute("aria-activedescendant", this._activeOption.id) : this.removeAttribute("aria-activedescendant");
};
setActiveOptionByIndex = (t) => {
const e = this.getDropdownOptions();
if (e.length === 0) return;
const i = x(t, 0, e.length - 1), r = e[i];
if (!r) return;
this._activeOption && this._activeOption !== r && (this._activeOption.removeAttribute("active"), this._activeOption.setAttribute("aria-selected", "false")), this._activeIndex = i, this._activeOption = r;
const s = r.getAttribute("value") || "";
r.setAttribute("active", s), r.setAttribute("aria-selected", "true"), r.scrollIntoView({ block: "nearest" }), this.syncActiveState();
};
applyLabelLineHeight = () => {
if (!this._text) return;
const { height: t } = this.getBoundingClientRect();
t > 0 ? this._text.style.setProperty("line-height", `${t}px`) : this._text.style.removeProperty("line-height");
};
selectOptionElement = (t, e = !0) => {
if (!t) return;
const i = t.getAttribute("title") || t.textContent?.trim() || "", r = t.getAttribute("value") || this._optionLabelMapValue.get(i) || "";
r && (this.setAttribute("value", r), this.syncFormValue(), this._text.textContent = i, this._text.setAttribute("title", i), this._search.setAttribute("placeholder", i), this.applyLabelLineHeight(), this._activeOption && this._activeOption !== t && (this._activeOption.removeAttribute("active"), this._activeOption.setAttribute("aria-selected", "false")), this._activeOption = t, this._activeIndex = this.getDropdownOptions().findIndex((s) => s === t), t.setAttribute("active", r), t.setAttribute("aria-selected", "true"), this.syncActiveState(), this.setSelectDropdownDisplayNone(), e && this.dispatchEvent(new CustomEvent("change", { detail: {
value: r,
label: i
} })));
};
isDropdownOpen = () => this._selectionDropdown ? this._selectionDropdown.style.display === "block" : !1;
_nextEnabledIndex = (t, e) => {
const i = this.getDropdownOptions(), r = i.length;
if (r === 0) return -1;
let s = x(t, 0, r - 1);
for (let o = 0; o < r; o++) {
if (!c(i[s])) return s;
const n = s + e;
if (n < 0 || n > r - 1) return -1;
s = n;
}
return -1;
};
keydownSelect = (t) => {
if (!this.disabled) {
if (t.key === "ArrowDown" || t.key === "ArrowUp") {
t.preventDefault(), this.isDropdownOpen() || this.selectMouseDown(t);
const e = this.getDropdownOptions();
if (e.length === 0) return;
const i = t.key === "ArrowDown" ? 1 : -1, r = this._activeIndex >= 0 ? this._nextEnabledIndex(this._activeIndex + i, i) : this._nextEnabledIndex(i > 0 ? 0 : e.length - 1, i);
r >= 0 && this.setActiveOptionByIndex(r);
return;
}
if (t.key === "Home" || t.key === "End") {
t.preventDefault(), this.isDropdownOpen() || this.selectMouseDown(t);
const e = this.getDropdownOptions();
if (e.length === 0) return;
const i = t.key === "Home" ? 1 : -1, r = this._nextEnabledIndex(t.key === "Home" ? 0 : e.length - 1, i);
r >= 0 && this.setActiveOptionByIndex(r);
return;
}
if (C(t)) {
if (t.preventDefault(), !this.isDropdownOpen()) {
this.selectMouseDown(t);
return;
}
this._activeOption && this.selectOptionElement(this._activeOption);
return;
}
if (t.key === "Escape") {
t.preventDefault(), this.setSelectDropdownDisplayNone();
return;
}
this._handleTypeahead(t);
}
};
_handleTypeahead = (t) => {
if (t.key.length !== 1 || t.ctrlKey || t.altKey || t.metaKey) return;
t.preventDefault(), this.isDropdownOpen() || this.selectMouseDown(t);
const e = this.getDropdownOptions(), i = e.length;
if (i === 0) return;
clearTimeout(this._typeaheadTimeId), this._typeaheadBuffer += t.key.toLowerCase(), this._typeaheadTimeId = setTimeout(() => {
this._typeaheadBuffer = "";
}, 500);
const r = this._activeIndex >= 0 ? this._activeIndex + 1 : 0;
for (let s = 0; s < i; s++) {
const o = (r + s) % i, n = e[o];
if (!c(n) && (n.getAttribute("title") || n.textContent || "").trim().toLowerCase().startsWith(this._typeaheadBuffer)) {
this.setActiveOptionByIndex(o);
return;
}
}
};
handlerExternalCss() {
f(this, this._shadowDom, "sheet", null, this.sheet);
}
setSelectDropdownDisplayNone = () => {
this.open = !1;
};
setSelectDropdownDisplayBlock = () => {
this.open = !0;
};
placementPosition = (t = !1) => {
this._floating.position(t);
};
selectMouseDown = (t) => {
t.stopPropagation(), !c(this) && (this.removeDropDownTimeId(t), this.open = !this.open);
};
removeDropDownTimeId = (t) => {
t.stopPropagation(), this._search.value = "", this.trigger.includes("hover") && !v() && (clearTimeout(this.removeTimeId), this.removeTimeId = void 0);
};
selectBlur = (t) => {
t.stopPropagation(), this.removeTimeId && this.removeDropDownTimeId(t), this.removeTimeId = setTimeout(() => {
this.removeDropDownTimeId(t), this.setSelectDropdownDisplayNone();
}, 300);
};
clickOption = (t) => {
t.stopPropagation();
const e = t.target.closest("r-dropdown-item");
if (e && c(e)) {
this.removeDropDownTimeId(t);
return;
}
this.selectOptionElement(e), this.removeDropDownTimeId(t), this.focus();
};
createOption = () => {
if (!this._selectDropdown) {
const t = this.getRootNode(), e = (t.getElementById ? t.getElementById(this.getPopupContainerId) : null) || document.getElementById(this.getPopupContainerId) || document.body;
this._selectDropdown = h().style("-webkit-tap-highlight-color", "transparent").style("outline", "0").on("click", this.clickOption).build(), this._selectionDropdown = u("r-dropdown").id(this._listboxId).attr("role", "listbox").style("position", "absolute").style("display", "none").build(), this.dropdownclass && this._selectionDropdown.setAttribute("class", this.dropdownclass), this.trigger.includes("hover") && !v() && (this._selectDropdown.addEventListener("mouseleave", this.selectBlur), this._selectDropdown.addEventListener("mouseenter", this.removeDropDownTimeId)), this._selectDropdown.appendChild(this._selectionDropdown), e.appendChild(this._selectDropdown);
}
};
removeSelectDropdown = () => {
try {
if (this._selectDropdown) {
const t = this.getRootNode(), e = (t.getElementById ? t.getElementById(this.getPopupContainerId) : null) || document.getElementById(this.getPopupContainerId) || document.body;
e && this._selectDropdown.parentNode === e && e.removeChild(this._selectDropdown);
}
} catch (t) {
console.error("removeSelectDropdown error", t);
}
};
addOptionToSlot = () => {
this._optionList = [], this._optionLabelMapValue.clear(), this._optionValueMapLabel.clear(), this._slot.assignedElements().forEach((t) => {
if (t.tagName !== "R-OPTION") return;
const e = t.innerHTML, i = t.getAttribute("value") || "", r = c(t);
this._optionList?.push({
label: e,
value: i,
disabled: r
}), this._optionLabelMapValue.get(e) && console.warn(`${e} is repeat option`), this._optionValueMapLabel.get(i) && console.warn(`${i} is repeat option`), this._optionLabelMapValue.set(e, i), this._optionValueMapLabel.set(i, e);
}), this.createSelectDropdownContent(this._optionList), this._selectionDropdown?.style.display === "block" && this.placementPosition();
};
createSelectDropdownContent = (t = []) => {
t.length === 0 ? this._selectDropdown?.style.setProperty("display", "none") : this._selectDropdown?.style.setProperty("display", "block"), this._selectionDropdown && (this._selectionDropdown.innerHTML = "", this._activeOption = void 0, this._activeIndex = -1), t.forEach((e) => {
if (this._selectionDropdown) {
const { label: i, value: r, disabled: s } = e, o = u("r-dropdown-item").attr("role", "option").attr("value", `${r}`).attr("title", `${i}`).text(`${i}`).build();
s && (o.setAttribute("disabled", ""), o.setAttribute("aria-disabled", "true")), (this.getAttribute("defaultValue") || this.getAttribute("value")) === r ? (o.setAttribute("active", r), this._activeOption = o) : o.removeAttribute("active"), this._selectionDropdown.appendChild(o);
}
}), this._activeIndex = this.getDropdownOptions().findIndex((e) => e === this._activeOption), this.syncActiveState(), this.setDefaultValue();
};
setDefaultValue = () => {
const t = this.getAttribute("defaultValue") || this.getAttribute("value");
if (!t) return;
const e = this._optionValueMapLabel.get(t);
if (!e) return;
this.setAttribute("value", t), this._text.textContent = e, this._text.setAttribute("title", e), this.applyLabelLineHeight();
const i = this.getDropdownOptions().find((r) => r.getAttribute("value") === t) || null;
i && this.selectOptionElement(i, !1);
};
changeSearch = (t) => {
const e = t.detail.value || "";
if (this.dispatchEvent(new CustomEvent("search", { detail: { value: e } })), this._selectionDropdown && (this._selectionDropdown.innerHTML = ""), e.length > 0) {
const i = this._optionList.map((r) => {
const { label: s } = r;
if (`${s}`.toLowerCase().includes(e)) return {
label: s,
value: r.value,
disabled: r.disabled
};
}).filter((r) => r);
this.createSelectDropdownContent(i);
} else this.createSelectDropdownContent(this._optionList);
};
clickRemoveSelect = (t) => {
t.stopPropagation(), this.setSelectDropdownDisplayNone();
};
connectedCallback() {
this.handlerExternalCss(), this.createOption(), this.initAria(), this.syncFormValue(), this._events.on(this._slot, "slotchange", this.addOptionToSlot).on(this, "keydown", this.keydownSelect).on(document, "click", this.clickRemoveSelect), this.trigger.includes("hover") && !v() && this._events.on(this, "mouseenter", this.selectMouseDown).on(this, "mouseleave", this.selectBlur), this.trigger.includes("click") && this._events.on(this, "click", this.selectMouseDown).on(this, "blur", this.selectBlur), this._applyShowSearch(), this.reapplyValueAfterConnect(), this.open && this._applyOpen();
}
reapplyValueAfterConnect = () => {
const t = this.getAttribute("value");
t && (this._activeOption = void 0, this.syncSelectedFromValue(t), this.applyLabelLineHeight());
};
_applyShowSearch = () => {
this._searchEvents.abort(), this.showSearch && (this.onSearch = B(this.changeSearch), this.onSearch && this._searchEvents.on(this._search, "change", this.onSearch).on(this._search, "click", this.onSearch));
};
disconnectedCallback() {
this._events.abort(), this._searchEvents.abort(), this._floating.destroy(), this.removeSelectDropdown(), clearTimeout(this._typeaheadTimeId);
}
attributeChangedCallback(t, e, i) {
e !== i && (t === "disabled" && this._select && (this.disabled ? (this._select.setAttribute("disabled", ""), this._selection.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true"), this.tabIndex = -1) : (this._select.removeAttribute("disabled"), this._selection.removeAttribute("disabled"), this.removeAttribute("aria-disabled"), (this.tabIndex < 0 || !this.hasAttribute("tabindex")) && (this.tabIndex = 0))), t === "value" && this.syncSelectedFromValue(i), (t === "required" || t === "disabled") && this._updateValidity(), t === "sheet" && this._shadowDom && this.handlerExternalCss(), t === "label" && this._shadowDom && this._syncLabel(i), t === "defaultvalue" && this.setDefaultValue(), t === "showsearch" && this._search && this._applyShowSearch(), t === "open" && this._applyOpen());
}
syncSelectedFromValue = (t) => {
if (!t || this._activeOption?.getAttribute("value") === t) return;
const e = Array.from(this.querySelectorAll("r-option")).find((i) => i.getAttribute("value") === t);
e && this.selectOptionElement(e, !1);
};
};
m("r-select", H);
export {
H as t
};