ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
448 lines (447 loc) • 33.4 kB
JavaScript
import { _ as S, a as h, c as a, d as u, l as D, n as b, o as w, p as k, r as c, t as m } from "./utils-D1iZnChu.js";
import { t as x } from "./events-C59wGdni.js";
import { _ as v, i as l, m as C, p as g, s as O } from "./factory-ZNhcQ4tf.js";
import { a as f, n as _ } from "./ssr-DSGwPtEd.js";
import { r as E } from "./icon-GZrfSeon.js";
import "./input-ZY2Wumze.js";
import { t as T } from "./arrow-down-Bi5kqUrX.js";
import "./dropdown-CzGAVWYC.js";
var L = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}:host{position:var(--ran-select-host-position, relative);display:var(--ran-select-host-display, inline-block);cursor:var(--ran-select-host-cursor, pointer);height:var(--ran-select-host-height, 32px);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-selection-hover-border, 1px solid var(--ran-color-primary, #006bff))}:host(:not([disabled],[type="text"]):hover) .selection-search{cursor:var(--ran-select-selection-hover-search-cursor, pointer)}:host(:not([disabled],[type="text"]):hover) .selection-item{cursor:var(--ran-select-selection-hover-item-cursor, pointer);color:var(--ran-select-selection-hover-item-color, var(--ran-color-text-disabled, #bfbfbf))}:host([type="text"]) .selection{border:var(--ran-select-selection-text-border, none);background:var(--ran-select-selection-text-background, transparent)}:host([type="text"]) .icon{display:var(--ran-select-icon-text-display, none)}:host(:not([disabled],[type="text"]):focus) .selection{border:var(--ran-select-selection-focus-border, 1px solid var(--ran-color-primary, #006bff))}:host(:not([disabled],[type="text"]):focus) .selection-search{cursor:var(--ran-select-selection-focus-search-cursor, pointer)}:host(:not([disabled],[type="text"]):focus) .selection-item{cursor:var(--ran-select-selection-focus-item-cursor, pointer);color:var(--ran-select-selection-focus-item-color, var(--ran-color-text-disabled, #bfbfbf))}:host .selection-search{display:var(--ran-select-selection-search-display, none)}:host([showSearch]:not([disabled])) .selection-search{cursor:var(--ran-select-selection-search-visible-cursor, text);display:var(--ran-select-selection-search-visible-display, block)}:host([showSearch]:not([disabled])) .selection-item{cursor:var(--ran-select-selection-search-visible-item-cursor, pointer)}:host([showSearch]:not([disabled]):focus) .selection-search{display:var(--ran-select-selection-search-visible-display, block);cursor:var(--ran-select-selection-search-visible-cursor, text);opacity:var(--ran-select-selection-search-visible-opacity, 1)}.ran-select{width:var(--ran-select-root-width, 100%);height:var(--ran-select-root-height, 100%);font-size:var(--ran-select-root-font-size, 14px);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, inline-block)}.ran-select .selection{position:var(--ran-select-selection-position, relative);background-color:var(--ran-select-selection-background-color, var(--ran-color-bg-elevated, #ffffff));background-image:var(--ran-select-selection-background-image, none);border:var(--ran-select-selection-border, 1px solid var(--ran-color-border, #eaeaea));transition:var(--ran-select-selection-transition, none);width:var(--ran-select-selection-width, 100%);height:var(--ran-select-selection-height, 100%);padding:var(--ran-select-selection-padding, 0 11px);box-sizing:var(--ran-select-selection-box-sizing, border-box);margin:var(--ran-select-selection-margin, 0);color:var(--ran-select-selection-color, var(--ran-color-text, rgba(0, 0, 0, .88)));font-size:var(--ran-select-selection-font-size, 14px);line-height:var(--ran-select-selection-line-height, 1.57142857);list-style:var(--ran-select-selection-list-style, none);font-family:var(--ran-select-selection-font-family, inherit);display:var(--ran-select-selection-display, flex);border-radius:var(--ran-select-selection-border-radius, var(--ran-radius-sm, 6px))}.ran-select .selection-search{position:var(--ran-select-selection-search-position, absolute);opacity:var(--ran-select-selection-search-opacity, 0);top:var(--ran-select-selection-search-top, 0);left:var(--ran-select-selection-search-left, 0);height:var(--ran-select-selection-search-height, 100%);inset-inline-start:var(--ran-select-selection-search-inset-inline-start, 11px);inset-inline-end:var(--ran-select-selection-search-inset-inline-end, 11px);margin:var(--ran-select-selection-search-margin, 0);padding:var(--ran-select-selection-search-padding, 0);background:var(--ran-select-selection-search-background, transparent);border:var(--ran-select-selection-search-border, none);outline:var(--ran-select-selection-search-outline, none);appearance:var(--ran-select-selection-search-appearance, none);font-family:var(--ran-select-selection-search-font-family, inherit);cursor:var(--ran-select-selection-search-cursor, not-allowed)}.ran-select .selection-search::-webkit-search-cancel-button{display:var(--ran-select-selection-search-cancel-display, none);-webkit-appearance:var(--ran-select-selection-search-cancel-appearance, none)}.ran-select .selection-search::part(input){border:var(--ran-select-selection-search-input-border, none);padding:var(--ran-select-selection-search-input-padding, 0);height:100%;min-height:100%;box-sizing:border-box;outline:var(--ran-select-selection-search-input-outline, none)}.ran-select .selection-search::part(input):active{border:var(--ran-select-selection-search-input-active-border, none);padding:var(--ran-select-selection-search-input-active-padding, 0);height:var(--ran-select-selection-search-input-active-height, 100%);outline:var(--ran-select-selection-search-input-active-outline, none);border-color:var(--ran-select-selection-search-input-active-border-color, transparent);box-shadow:var(--ran-select-selection-search-input-active-box-shadow, none);border-right-width:var(--ran-select-selection-search-input-active-border-right-width, 0px)}.ran-select .selection-search::part(content){min-height:var(--ran-select-selection-search-input-content-min-height, 0)}.ran-select .selection-item{position:var(--ran-select-selection-item-position, absolute);top:var(--ran-select-selection-item-top, 0);left:var(--ran-select-selection-item-left, 12px);right:var(--ran-select-selection-item-right, 28px);margin:var(--ran-select-selection-item-margin, 0);padding:var(--ran-select-selection-item-padding, 0);background:var(--ran-select-selection-item-background, transparent);border:var(--ran-select-selection-item-border, none);outline:var(--ran-select-selection-item-outline, none);appearance:var(--ran-select-selection-item-appearance, none);font-family:var(--ran-select-selection-item-font-family, inherit);height:var(--ran-select-selection-item-height, 100%);display:var(--ran-select-selection-item-display, flex);align-items:var(--ran-select-selection-item-align-items, center);-webkit-user-select:var(--ran-select-selection-item-user-select, none);user-select:var(--ran-select-selection-item-user-select, none);overflow:var(--ran-select-selection-item-overflow, hidden);white-space:var(--ran-select-selection-item-white-space, nowrap);text-overflow:var(--ran-select-selection-item-text-overflow, ellipsis);cursor:var(--ran-select-selection-item-cursor, pointer)}.ran-select .selection-select{color:var(--ran-select-selection-select-color, var(--ran-color-text-disabled, rgba(0, 0, 0, .25)))}.ran-select .selection .icon{display:var(--ran-select-selection-icon-display, flex);align-items:var(--ran-select-selection-icon-align-items, center);color:var(--ran-select-selection-icon-color, var(--ran-color-text-disabled, rgba(0, 0, 0, .25)));font-style:var(--ran-select-selection-icon-font-style, normal);text-align:var(--ran-select-selection-icon-text-align, center);text-transform:var(--ran-select-selection-icon-text-transform, none);text-rendering:var(--ran-select-selection-icon-text-rendering, optimizeLegibility);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:var(--ran-select-selection-icon-position, absolute);top:var(--ran-select-selection-icon-top, 50%);inset-inline-start:var(--ran-select-selection-icon-inset-inline-start, auto);inset-inline-end:var(--ran-select-selection-icon-inset-inline-end, 8px);height:var(--ran-select-selection-icon-height, 16px);transform:var(--ran-select-selection-icon-transform, translateY(-50%));margin-top:var(--ran-select-selection-icon-margin-top, 0);font-size:var(--ran-select-selection-icon-font-size, 12px);pointer-events:var(--ran-select-selection-icon-pointer-events, none)}', P = class extends _ {
_option;
_optionContent;
_shadowDom;
_slot;
static get observedAttributes() {
return [
"disabled",
"sheet",
"value"
];
}
constructor() {
super(), this._shadowDom = b(this);
const e = m(this._shadowDom, ".ran-select-dropdown-option", () => {
const i = g().build(), s = l().class("ran-select-dropdown-option-content").children(i).build();
return l().class("ran-select-dropdown-option").children(s).build();
}), t = e.querySelector(".ran-select-dropdown-option-content"), o = e.querySelector("slot");
this._slot = o, this._optionContent = t, this._option = e;
}
get value() {
return this.getAttribute("value");
}
set value(e) {
h(this, "value", e);
}
get sheet() {
return this.getAttribute("sheet");
}
set sheet(e) {
h(this, "sheet", e);
}
get disabled() {
return a(this);
}
set disabled(e) {
!e || e === "false" ? this.removeAttribute("disabled") : this.setAttribute("disabled", "");
}
handlerExternalCss() {
w(this, this._shadowDom, "sheet", null, this.sheet);
}
connectedCallback() {
this.classList.contains("ran-option") || this.classList.add("ran-option");
}
attributeChangedCallback(e, t, o) {
t !== o && (e === "disabled" && this._option && (!o || o === "false" ? this._option.setAttribute("disabled", "") : this._option.removeAttribute("disabled")), e === "sheet" && this._shadowDom && this.handlerExternalCss());
}
};
f("r-option", P);
var M = '.remove-wap-active-focus{outline:0;-webkit-tap-highlight-color:transparent}.remove-wap-active-focus:active,.remove-wap-active-focus:focus{outline:0;-webkit-tap-highlight-color:transparent}.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))}', B = class extends _ {
ionDropdownItem;
_slot;
_shadowDom;
ionDropdownItemContent;
static get observedAttributes() {
return [
"active",
"value",
"title",
"sheet"
];
}
constructor() {
super(), this._shadowDom = b(this, M);
const e = m(this._shadowDom, ".ranui-dropdown-option-item", () => {
const i = g().class("slot").build(), s = l().class("ranui-dropdown-option-item-content").part("content").children(i).build();
return l().class("ranui-dropdown-option-item").part("item").children(s).build();
}), t = e.querySelector(".ranui-dropdown-option-item-content"), o = e.querySelector("slot");
this._slot = o, this.ionDropdownItemContent = t, this.ionDropdownItem = e;
}
get value() {
return c(this, "value");
}
set value(e) {
!a(this) && e ? this.setAttribute("value", e) : this.removeAttribute("value");
}
get active() {
return c(this, "active");
}
set active(e) {
e ? this.setAttribute("active", e) : this.removeAttribute("active");
}
get title() {
return c(this, "title");
}
set title(e) {
e ? this.setAttribute("title", e) : this.removeAttribute("title");
}
get sheet() {
return c(this, "sheet");
}
set sheet(e) {
h(this, "sheet", e);
}
handlerExternalCss = () => {
w(this, this._shadowDom, "sheet", null, this.sheet);
};
connectedCallback() {
this.handlerExternalCss(), this.active && D(this.ionDropdownItem, "ranui-dropdown-option-active");
}
attributeChangedCallback(e, t, o) {
if (e === "sheet") {
this.handlerExternalCss();
return;
}
e === "active" && o ? D(this.ionDropdownItem, "ranui-dropdown-option-active") : k(this.ionDropdownItem, "ranui-dropdown-option-active");
}
};
f("r-dropdown-item", B);
var A = {
bottom: {
add: "ran-dropdown-down-in",
remove: "ran-dropdown-down-out"
},
top: {
add: "ran-dropdown-up-in",
remove: "ran-dropdown-up-out"
}
};
E("arrow-down", T);
var V = S(), I = 300, z = class extends _ {
static formAssociated = !0;
_internals;
_events = new x();
_searchEvents = new x();
removeTimeId;
_listboxId;
_activeIndex;
_slot;
_shadowDom;
_select;
_selection;
_search;
_icon;
_selectDropdown;
_selectionDropdown;
_selectDropDownInTimeId;
_selectDropDownOutTimeId;
_optionList;
_optionLabelMapValue;
_optionValueMapLabel;
_activeOption;
_text;
_selector;
onSearch;
static get observedAttributes() {
return [
"disabled",
"sheet",
"type",
"value",
"defaultvalue",
"showsearch",
"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 = b(this, L);
const e = m(this._shadowDom, ".ran-select", () => l().class("ran-select").part("select").children(l().class("selection").part("selection").children(v("r-icon").class("icon").part("icon").attr("name", "arrow-down").attr("color", "var(--ran-color-text-secondary)").attr("size", "16"), l().children(C().class("selection-item").part("selection-item"), O().class("selection-search").part("search").attr("type", "search").attr("autocomplete", "off"))), g().class("slot")).build());
this._select = e, this._selection = e.querySelector(".selection"), this._selector = this._selection.querySelector("div"), this._icon = e.querySelector(".icon"), this._text = e.querySelector(".selection-item"), this._search = e.querySelector(".selection-search"), this._slot = e.querySelector("slot");
}
get value() {
return this.getAttribute("value") || "";
}
set value(e) {
!a(this) && e ? this.setAttribute("value", e) : this.removeAttribute("value"), this.syncFormValue();
}
syncFormValue = () => {
this._internals?.setFormValue?.(this.value);
};
get defaultValue() {
return this.getAttribute("defaultValue") || "";
}
set defaultValue(e) {
this.setAttribute("defaultValue", e || "");
}
get showSearch() {
return this.getAttribute("showSearch") || "";
}
set showSearch(e) {
this.setAttribute("showSearch", e || "");
}
get type() {
return this.getAttribute("type") || "";
}
set type(e) {
this.setAttribute("type", e || "");
}
get placement() {
return this.getAttribute("placement") || "bottom";
}
set placement(e) {
this.setAttribute("placement", e || "");
}
get sheet() {
return c(this, "sheet");
}
set sheet(e) {
h(this, "sheet", e);
}
get getPopupContainerId() {
return this.getAttribute("getPopupContainerId") || "";
}
set getPopupContainerId(e) {
this.setAttribute("getPopupContainerId", e || "");
}
get dropdownclass() {
return this.getAttribute("dropdownclass") || "";
}
set dropdownclass(e) {
this.setAttribute("dropdownclass", e || "");
}
get trigger() {
return this.getAttribute("trigger") || "click";
}
set trigger(e) {
this.setAttribute("trigger", e || "");
}
get disabled() {
return a(this);
}
set disabled(e) {
!e || e === "false" ? (this.removeAttribute("disabled"), this._selection.removeAttribute("disabled"), this.removeAttribute("aria-disabled"), 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 = (e) => {
this.setAttribute("aria-expanded", e ? "true" : "false");
};
getDropdownOptions = () => this._selectionDropdown ? Array.from(this._selectionDropdown.querySelectorAll("r-dropdown-item")) : [];
syncActiveState = () => {
this.getDropdownOptions().forEach((e, t) => {
e.setAttribute("role", "option"), e.setAttribute("aria-selected", e === this._activeOption ? "true" : "false"), e.id || (e.id = `${this._listboxId}-option-${t}`);
}), this._activeOption?.id ? this.setAttribute("aria-activedescendant", this._activeOption.id) : this.removeAttribute("aria-activedescendant");
};
setActiveOptionByIndex = (e) => {
const t = this.getDropdownOptions();
if (t.length === 0) return;
const o = Math.max(0, Math.min(e, t.length - 1)), i = t[o];
if (!i) return;
this._activeOption && this._activeOption !== i && (this._activeOption.removeAttribute("active"), this._activeOption.setAttribute("aria-selected", "false")), this._activeIndex = o, this._activeOption = i;
const s = i.getAttribute("value") || "";
i.setAttribute("active", s), i.setAttribute("aria-selected", "true"), i.scrollIntoView({ block: "nearest" }), this.syncActiveState();
};
selectOptionElement = (e, t = !0) => {
if (!e) return;
const o = e.getAttribute("title") || e.textContent?.trim() || "", i = e.getAttribute("value") || this._optionLabelMapValue.get(o) || "";
if (!i) return;
this.setAttribute("value", i), this.syncFormValue(), this._text.textContent = o, this._text.setAttribute("title", o), this._search.setAttribute("placeholder", o);
const { height: s } = this.getBoundingClientRect();
this._text.style.setProperty("line-height", `${s}px`), this._activeOption && this._activeOption !== e && (this._activeOption.removeAttribute("active"), this._activeOption.setAttribute("aria-selected", "false")), this._activeOption = e, this._activeIndex = this.getDropdownOptions().findIndex((n) => n === e), e.setAttribute("active", i), e.setAttribute("aria-selected", "true"), this.syncActiveState(), this.setSelectDropdownDisplayNone(), t && this.dispatchEvent(new CustomEvent("change", { detail: {
value: i,
label: o
} }));
};
isDropdownOpen = () => this._selectionDropdown ? this._selectionDropdown.style.display === "block" : !1;
_nextEnabledIndex = (e, t) => {
const o = this.getDropdownOptions(), i = o.length;
if (i === 0) return -1;
let s = Math.max(0, Math.min(e, i - 1));
for (let n = 0; n < i; n++) {
if (!a(o[s])) return s;
const r = s + t;
if (r < 0 || r > i - 1) return -1;
s = r;
}
return -1;
};
keydownSelect = (e) => {
if (!this.disabled) {
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
if (e.preventDefault(), this.isDropdownOpen() || this.selectMouseDown(e), this.getDropdownOptions().length === 0) return;
const t = e.key === "ArrowDown" ? 1 : -1, o = this._activeIndex >= 0 ? this._activeIndex : 0, i = this._nextEnabledIndex(o + t, t);
i >= 0 && this.setActiveOptionByIndex(i);
return;
}
if (e.key === "Enter" || e.key === " ") {
if (e.preventDefault(), !this.isDropdownOpen()) {
this.selectMouseDown(e);
return;
}
this._activeOption && this.selectOptionElement(this._activeOption);
return;
}
e.key === "Escape" && (e.preventDefault(), this.setSelectDropdownDisplayNone());
}
};
handlerExternalCss() {
w(this, this._shadowDom, "sheet", null, this.sheet);
}
setSelectDropdownDisplayNone = () => {
this._selectDropDownOutTimeId || (this.updateAriaExpanded(!1), this._selectionDropdown && this._selectionDropdown.style.display !== "none" && (this._detachReposition(), this._selectionDropdown.setAttribute("transit", A[this.placement].remove), this._selectDropDownOutTimeId = setTimeout(() => {
this._selectionDropdown?.style.setProperty("display", "none"), this._selectionDropdown && this._selectionDropdown.removeAttribute("transit"), clearTimeout(this._selectDropDownOutTimeId), this._selectDropDownOutTimeId = void 0;
}, I)));
};
setSelectDropdownDisplayBlock = () => {
this._selectDropDownInTimeId || (this.updateAriaExpanded(!0), this._selectionDropdown && this._selectionDropdown.style.display !== "block" && (this._selectionDropdown.setAttribute("transit", A[this.placement].add), this._selectionDropdown?.style.setProperty("display", "block"), this._attachReposition(), this._selectDropDownInTimeId = setTimeout(() => {
this._selectionDropdown && this._selectionDropdown.removeAttribute("transit"), clearTimeout(this._selectDropDownInTimeId), this._selectDropDownInTimeId = void 0;
}, I)));
};
placementPosition = () => {
!this._selectionDropdown || !this._selectDropdown || requestAnimationFrame(() => {
if (!this._selectionDropdown || !this._selectDropdown) return;
const { top: e, left: t, bottom: o, width: i } = this.getBoundingClientRect(), s = this.getRootNode(), n = (s.getElementById ? s.getElementById(this.getPopupContainerId) : null) || document.getElementById(this.getPopupContainerId);
this._selectionDropdown.style.setProperty("position", "absolute"), this._selectionDropdown.style.setProperty("--ran-x", `${e + window.scrollX}`), this._selectionDropdown.style.setProperty("--ran-y", `${t + window.scrollY}`);
const r = 4;
let d = o + window.scrollY + r, y = t + window.scrollX;
if (this._selectionDropdown.style.setProperty("width", `${i}px`), this.placement === "top" && (d = e + window.scrollY - this._selectionDropdown.clientHeight - r), this.getPopupContainerId && n) {
const p = n.getBoundingClientRect();
y = t - p.left, this.placement === "top" ? d = e - p.top - this._selectionDropdown.clientHeight - r : d = o - p.top + r;
}
this._selectionDropdown.style.setProperty("inset", `${d}px auto auto ${y}px`);
});
};
_repositionBound = !1;
_repositionDropdown = () => {
this._selectionDropdown?.style.display === "block" && this.placementPosition();
};
_attachReposition = () => {
this._repositionBound || typeof window > "u" || (window.addEventListener("scroll", this._repositionDropdown, !0), window.addEventListener("resize", this._repositionDropdown), this._repositionBound = !0);
};
_detachReposition = () => {
!this._repositionBound || typeof window > "u" || (window.removeEventListener("scroll", this._repositionDropdown, !0), window.removeEventListener("resize", this._repositionDropdown), this._repositionBound = !1);
};
selectMouseDown = (e) => {
e.stopPropagation(), !a(this) && (this.removeDropDownTimeId(e), this.setSelectDropdownDisplayNone(), this.setSelectDropdownDisplayBlock(), this.placementPosition());
};
removeDropDownTimeId = (e) => {
e.stopPropagation(), this._search.setAttribute("value", ""), this.trigger.includes("hover") && !u() && (clearTimeout(this.removeTimeId), this.removeTimeId = void 0);
};
selectBlur = (e) => {
e.stopPropagation(), this.removeTimeId && this.removeDropDownTimeId(e), this.removeTimeId = setTimeout(() => {
this.removeDropDownTimeId(e), this.setSelectDropdownDisplayNone();
}, 300);
};
clickOption = (e) => {
e.stopPropagation();
const t = e.target.closest("r-dropdown-item");
if (t && a(t)) {
this.removeDropDownTimeId(e);
return;
}
this.selectOptionElement(t), this.removeDropDownTimeId(e);
};
createOption = () => {
if (!this._selectDropdown) {
const e = this.getRootNode(), t = (e.getElementById ? e.getElementById(this.getPopupContainerId) : null) || document.getElementById(this.getPopupContainerId) || document.body;
this._selectDropdown = l().style("-webkit-tap-highlight-color", "transparent").style("outline", "0").on("click", this.clickOption).build(), this._selectionDropdown = v("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") && !u() && (this._selectDropdown.addEventListener("mouseleave", this.selectBlur), this._selectDropdown.addEventListener("mouseenter", this.removeDropDownTimeId)), this._selectDropdown.appendChild(this._selectionDropdown), t.appendChild(this._selectDropdown);
}
};
removeSelectDropdown = () => {
try {
if (this._selectDropdown) {
const e = this.getRootNode(), t = (e.getElementById ? e.getElementById(this.getPopupContainerId) : null) || document.getElementById(this.getPopupContainerId) || document.body;
t && this._selectDropdown.parentNode === t && t.removeChild(this._selectDropdown);
}
} catch (e) {
console.error("removeSelectDropdown error", e);
}
};
addOptionToSlot = () => {
this._optionList = [], this._optionLabelMapValue.clear(), this._optionValueMapLabel.clear(), this._slot.assignedElements().forEach((e) => {
if (e.tagName !== "R-OPTION") return;
const t = e.innerHTML, o = e.getAttribute("value") || "", i = a(e);
this._optionList?.push({
label: t,
value: o,
disabled: i
}), this._optionLabelMapValue.get(t) && console.warn(`${t} is repeat option`), this._optionValueMapLabel.get(o) && console.warn(`${o} is repeat option`), this._optionLabelMapValue.set(t, o), this._optionValueMapLabel.set(o, t);
}), this.createSelectDropdownContent(this._optionList);
};
createSelectDropdownContent = (e = []) => {
e.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), e.forEach((t) => {
if (this._selectionDropdown) {
const { label: o, value: i, disabled: s } = t, n = v("r-dropdown-item").attr("role", "option").attr("value", `${i}`).attr("title", `${o}`).text(`${o}`).build();
s && (n.setAttribute("disabled", ""), n.setAttribute("aria-disabled", "true")), (this.getAttribute("defaultValue") || this.getAttribute("value")) === i ? (n.setAttribute("active", i), this._activeOption = n) : n.removeAttribute("active"), this._selectionDropdown.appendChild(n);
}
}), this._activeIndex = this.getDropdownOptions().findIndex((t) => t === this._activeOption), this.syncActiveState(), this.setDefaultValue();
};
setDefaultValue = () => {
const e = this.getAttribute("defaultValue") || this.getAttribute("value");
if (!e) return;
const t = this._optionValueMapLabel.get(e);
if (!t) return;
this.setAttribute("value", e);
const { height: o } = this.getBoundingClientRect();
this._text.style.setProperty("line-height", `${o}px`), this._text.textContent = t, this._text.setAttribute("title", t);
const i = this.getDropdownOptions().find((s) => s.getAttribute("value") === e) || null;
i && this.selectOptionElement(i, !1);
};
changeSearch = (e) => {
const t = e.detail.value || "";
if (this.dispatchEvent(new CustomEvent("search", { detail: { value: t } })), this._selectionDropdown && (this._selectionDropdown.innerHTML = ""), t.length > 0) {
const o = this._optionList.map((i) => {
const { label: s } = i;
if (`${s}`.toLowerCase().includes(t)) return {
label: s,
value: i.value,
disabled: i.disabled
};
}).filter((i) => i);
this.createSelectDropdownContent(o);
} else this.createSelectDropdownContent(this._optionList);
};
clickRemoveSelect = (e) => {
e.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") && !u() && 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();
}
_applyShowSearch = () => {
this._searchEvents.abort(), this.showSearch && (this.onSearch = V(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._detachReposition(), this.removeSelectDropdown();
}
attributeChangedCallback(e, t, o) {
t !== o && (e === "disabled" && this._select && (!o || o === "false" ? (this._select.removeAttribute("disabled"), this._selection.removeAttribute("disabled"), this.removeAttribute("aria-disabled"), this.hasAttribute("tabindex") || (this.tabIndex = 0)) : (this._select.setAttribute("disabled", ""), this._selection.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true"), this.tabIndex = -1)), e === "value" && this.syncSelectedFromValue(o), e === "sheet" && this._shadowDom && this.handlerExternalCss(), e === "defaultvalue" && this.setDefaultValue(), e === "showsearch" && this._search && this._applyShowSearch());
}
syncSelectedFromValue = (e) => {
if (!e || this._activeOption?.getAttribute("value") === e) return;
const t = Array.from(this.querySelectorAll("r-option")).find((o) => o.getAttribute("value") === e);
t && this.selectOptionElement(t, !1);
};
};
f("r-select", z);
export {
z as t
};