dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
739 lines (738 loc) • 30 kB
JavaScript
var w = Object.getPrototypeOf;
var S = Reflect.get;
var x = (m, e, t) => S(w(m), t, e);
var o = (m, e, t) => new Promise((i, a) => {
var n = (u) => {
try {
c(t.next(u));
} catch (b) {
a(b);
}
}, h = (u) => {
try {
c(t.throw(u));
} catch (b) {
a(b);
}
}, c = (u) => u.done ? i(u.value) : Promise.resolve(u.value).then(n, h);
c((t = t.apply(m, e)).next());
});
import { clsx as g } from "../../node_modules/clsx/dist/clsx.js";
import "../../node_modules/@lit/reactive-element/reactive-element.js";
import { nothing as I } from "../../node_modules/lit-html/lit-html.js";
import "../../node_modules/lit-element/lit-element.js";
import { property as r } from "../../node_modules/@lit/reactive-element/decorators/property.js";
import { state as v } from "../../node_modules/@lit/reactive-element/decorators/state.js";
import { query as C } from "../../node_modules/@lit/reactive-element/decorators/query.js";
import { ifDefined as p } from "../../node_modules/lit-html/directives/if-defined.js";
import { html as d } from "../../node_modules/lit-html/static.js";
import { getValidityStateObject as V } from "../../common/utils.js";
import { GenericFormElement as $ } from "../../internal/mixin/genericFormElement.js";
import "../../localization/localization.js";
import D from "./combobox.scss.js";
import { t as y } from "../../node_modules/i18next/dist/esm/i18next.js";
import { unsafeCSS as O } from "../../node_modules/@lit/reactive-element/css-tag.js";
var T = Object.defineProperty, l = (m, e, t, i) => {
for (var a = void 0, n = m.length - 1, h; n >= 0; n--)
(h = m[n]) && (a = h(e, t, a) || a);
return a && T(e, t, a), a;
};
const f = class f extends $ {
constructor() {
super(...arguments), this.placement = "bottom-start", this.opened = !1, this.searchMode = "autocomplete", this.search = !1, this.clearButton = "true", this.allowManualInput = !1, this.searchForText = !1, this.searchOnValueSet = "false", this.loading = !1, this.selectable = "true", this.noAnimation = !1, this.textComplete = !1, this.openOnEmpty = !1, this.disableViewportAutoClose = !1, this.multiselect = !1, this.clearButtonTestId = "combobox-clear-button", this.searchButtonTestId = "combobox-search-button", this.disableSearchWhenEmpty = !1, this.selectedItems = [], this.optionListObserver = null, this.isUserInteraction = !1, this.pendingInitialValues = [], this.handleClick = () => {
!this.getComboboxOptions().length && !this.openOnEmpty ? this.hideDropDown() : this.opened ? this.hideDropDown() : this.showDropDown();
}, this.handleKeyDown = (e) => o(this, null, function* () {
var t, i;
if (e.key !== "Tab") {
if (e.key === "Enter")
return this.handleEnterKey(e);
if (e.key === "Escape")
return this.hideDropDown(), this.focus();
if (e.key === "Backspace" && this.multiselect && (((t = this.triggerInput) == null ? void 0 : t.value) || "") === "" && this.selectedItems.length > 0) {
e.preventDefault();
const n = this.selectedItems[this.selectedItems.length - 1];
this.removeSelectedItem(n), this.emit("dds-change", {
value: this.selectedItems.map((h) => h.value).join(","),
selectedItems: this.selectedItems,
type: "remove",
item: n
}), this.setValidity();
return;
}
if ((e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft" || e.key === "ArrowRight") && this.isAutoComplete)
return this.handleArrowKeys(e);
if (this.isAutoComplete && ((i = this.triggerInput) != null && i.value) && !this.opened) {
const a = this.getComboboxOptions().length > 0;
(this.openOnEmpty || a) && this.showDropDown();
}
}
}), this.handleInput = (e) => o(this, null, function* () {
const t = this.triggerInput;
if (this.isUserInteraction = !0, e.inputType !== "deleteContentBackward" || e.inputType === "deleteContentBackward" && this.allowManualInput ? (this.selectedText = t.value, this.search && (this.value = t.value)) : this.search ? (this.selectedText = t.value, this.value = t.value) : t.value === "" && e.inputType === "deleteContentBackward" && this.clearSelection(), this.emit("dds-input", { input: t.value, originalEvent: e }), this.setValidity(), this.requestUpdate(), this.isAutoComplete && t.value && !this.opened) {
const i = this.getComboboxOptions().length > 0;
(this.openOnEmpty || i) && this.showDropDown();
}
}), this.handleListKeyDown = (e) => {
e.detail.key === "Escape" && (this.hideDropDown(), this.currentItem = this.selectedItem, this.selectedText = "", this.triggerInput.value = this.selectedItem.text, this.triggerInput.focus());
}, this.handleDocumentMouseDown = (e) => {
const t = e.composedPath();
this && !t.includes(this) && this.hideDropDown();
}, this.handlePopupAutoClose = () => {
this.hideDropDown({ skipFocus: !0 });
}, this.handleFocus = () => {
this.emit("dds-focus");
}, this.handleBlur = () => {
this.emit("dds-blur");
}, this.handleSelectedChange = (e) => o(this, null, function* () {
var t;
if (e.preventDefault(), e.stopPropagation(), this.searchForText)
this.selectedText = e.detail.text, this.value = e.detail.text, this.triggerInput.value = e.detail.text, this.emit("dds-search", { search: this.selectedText }), this.requestUpdate(), this.setValidity();
else if (this.multiselect) {
this.addSelectedItem(e.detail), this.emit("dds-change", {
value: this.selectedItems.map((i) => i.value).join(","),
selectedItems: this.selectedItems,
type: "add",
item: e.detail
}), this.currentItem = null, yield this.updateComplete, this.triggerInput.value = "", this.triggerInput.focus(), this.setValidity();
return;
} else
this.selectedItem = e.detail, this.selectedText = e.detail.text, this.value !== ((t = this.selectedItem) == null ? void 0 : t.value) && (this.triggerInput.value = e.detail.text, this.value = this.selectedItem.value, this.emit("dds-change", {
value: this.selectedItem.value,
selectedItem: this.selectedItem,
type: "select"
}), this.requestUpdate(), yield this.updateComplete, this.currentItem && (this.triggerInput.value = this.currentItem.text), this.triggerInput.focus(), this.setValidity());
this.hideDropDown();
}), this.handleOptionDeselect = (e) => {
e.preventDefault(), e.stopPropagation(), this.selectedItem = null, this.selectedText = "", this.value = void 0, this.triggerInput.value = "", this.emit("dds-change", {
value: void 0,
selectedItem: null,
type: "deselect"
}), this.requestUpdate(), this.setValidity();
}, this.handleCurrentOptionChange = (e) => {
this.currentItem = e.detail, !this.multiselect && e.detail && (this.textComplete && this.searchMode !== "manual" && this.searchMode !== "none" && (this.triggerInput.value = e.detail.text), this.isAutoComplete && this.selectedText && this.selectedText !== "" && !this.allowManualInput && this.textComplete && (this.triggerInput.value = e.detail.text, this.setSelectionRange(
this.selectedText.length,
this.triggerInput.value.length
)));
}, this.handleListChanged = (e) => {
!e.detail.elements.length && !this.openOnEmpty && this.hideDropDown();
}, this.handleClearClick = () => {
this.disabled || (this.multiselect ? this.clearAllSelections() : this.clearSelection(), this.triggerInput.focus(), this.setValidity(), this.openOnEmpty || this.hideDropDown(), this.emit("dds-clear"));
}, this.handleSearchClick = (e) => {
e.stopPropagation(), e.preventDefault(), this.setValidity(), this.emit("dds-search", { search: this.selectedText });
}, this.handleChipRemove = (e, t) => {
e.stopPropagation(), this.removeSelectedItem(t), this.emit("dds-change", {
value: this.selectedItems.map((i) => i.value).join(","),
selectedItems: this.selectedItems,
type: "remove",
item: t
}), this.setValidity(), this.triggerInput.focus();
};
}
/** True when the search input currently holds non-whitespace text. */
get hasSearchText() {
var t;
return (this.selectedText || ((t = this.selectedItem) == null ? void 0 : t.text) || this.value || "").trim().length > 0;
}
firstUpdated(e) {
return o(this, null, function* () {
var a;
x(f.prototype, this, "firstUpdated").call(this, e), yield this.optionList.updateComplete, yield new Promise((n) => requestAnimationFrame(n));
const t = this.getComboboxOptions();
yield Promise.all(t.map((n) => n.updateComplete));
const i = x(f.prototype, this, "value");
if (i)
if (this.multiselect) {
const n = i.split(",").map((h) => h.trim()).filter((h) => h);
this.pendingInitialValues = n, this.updateMultipleSelectionsFromValues(n);
} else
this.selectedItem = (a = this.optionList) == null ? void 0 : a.getAllOptions().find((n) => n.value === i), this.selectedItem ? this.selectedText = this.selectedItem.optionText || "" : this.selectedText = "", !this.selectedText && (this.allowManualInput || this.searchMode === "none") && (this.selectedText = i);
this.setupOptionListObserver();
});
}
updated(e) {
var t;
if (super.updated(e), e.has("value") && this.triggerInput && !this.search && !this.multiselect) {
const i = this.value;
i ? this.handleValueChange(i) : this.clearSelection();
}
if (e.has("value") && this.triggerInput && this.isFreeTextSearch) {
const i = (t = this.value) != null ? t : "";
this.triggerInput.value !== i && (this.triggerInput.value = i), this.selectedText = i;
}
}
get isFreeTextSearch() {
return !!this.search && (this.searchMode === "none" || !!this.allowManualInput);
}
/**
* Handles value changes from outside the component
* This ensures the selection state is updated when the value is set programmatically
*/
handleValueChange(e) {
if (!e) return;
this.isUserInteraction = !1;
const t = this.getComboboxOptions().find((i) => i.value === e);
t ? (this.selectedItem = t, this.selectedText = t.optionText || t.textContent || "", this.triggerInput && (this.triggerInput.value = this.selectedText), this.requestUpdate()) : (this.selectedItem = null, this.search || (this.selectedText = "", this.triggerInput && (this.triggerInput.value = "")), this.requestUpdate());
}
setupOptionListObserver() {
this.optionList && (this.optionListObserver && this.optionListObserver.disconnect(), this.optionListObserver = new MutationObserver((e) => {
let t = !1;
e.forEach((i) => {
if (i.type === "childList") {
const a = Array.from(i.addedNodes).some(
(h) => h.nodeName === "DAP-DS-OPTION-ITEM"
), n = Array.from(i.removedNodes).some(
(h) => h.nodeName === "DAP-DS-OPTION-ITEM"
);
(a || n) && (t = !0);
}
}), t && this.updateComboboxState();
}), this.optionListObserver.observe(this, {
childList: !0,
subtree: !0
}));
}
updateComboboxState() {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
var i;
const e = this.getComboboxOptions().length > 0, t = ((i = this.triggerInput) == null ? void 0 : i.value) && this.triggerInput.value.trim() !== "";
e && t && (this.isAutoComplete || this.search) && this.isUserInteraction ? this.opened || this.showDropDown() : !e && !this.openOnEmpty && t && this.hideDropDown(), e && (this.multiselect ? this.selectedItems.length === 0 && this.pendingInitialValues.length > 0 && this.updateMultipleSelectionsFromValues(this.pendingInitialValues) : this.value && !this.selectedItem && this.updateSelectionFromValue());
});
});
}
/**
* Updates the selection state based on the current value
* This is useful when options are loaded asynchronously
*/
updateSelectionFromValue() {
if (!this.value) return;
this.isUserInteraction = !1;
const e = this.getComboboxOptions().find(
(t) => t.value === this.value
);
e && (this.selectedItem = e, this.selectedText = e.optionText || e.textContent || "", this.triggerInput && (this.triggerInput.value = this.selectedText), this.requestUpdate());
}
cleanupOptionListObserver() {
this.optionListObserver && (this.optionListObserver.disconnect(), this.optionListObserver = null);
}
disconnectedCallback() {
super.disconnectedCallback(), this.cleanupOptionListObserver();
}
attributeChangedCallback(e, t, i) {
e === "value" && !i && this.clearSelection(), super.attributeChangedCallback(e, t, i);
}
get isAutoComplete() {
return this.searchMode === "autocomplete" || this.searchMode === "manual";
}
/**
* Get all option items directly from the combobox element
* This is more reliable for dynamic updates than the option list component
*/
getComboboxOptions() {
return Array.from(this.querySelectorAll("dap-ds-option-item"));
}
get isOpenOnEmpty() {
return this.openOnEmpty || !this.openOnEmpty && this.getComboboxOptions().length > 0;
}
get isOpenOnAutocomplete() {
return this.isAutoComplete && this.isOpenOnEmpty;
}
get shouldHideClearIcon() {
var i;
const e = ((i = this.triggerInput) == null ? void 0 : i.value) || "";
return this.placeholder && this.placeholder.trim() !== "" ? !1 : e === "";
}
handleEnterKey(e) {
return o(this, null, function* () {
return e.preventDefault(), e.stopPropagation(), this.allowManualInput ? this.handleSearchEnter() : this.currentItem && this.opened ? this.handleCurrentItemEnter() : this.search && !this.isAutoComplete ? this.handleSearchEnter() : this.handleDefaultEnter();
});
}
handleCurrentItemEnter() {
return o(this, null, function* () {
var e, t;
if (this.currentItem.value === ((e = this.selectedItem) == null ? void 0 : e.value)) {
this.hideDropDown(), this.triggerInput.value = this.selectedItem.text, this.triggerInput.focus();
return;
}
this.currentItem.value !== ((t = this.selectedItem) == null ? void 0 : t.value) && (this.searchForText ? yield this.handleTextSearch(this.currentItem.text) : yield this.handleSelectedItemChange(this.currentItem));
});
}
handleSearchEnter() {
return o(this, null, function* () {
return this.emit("dds-search", { search: this.selectedText }), this.setValidity(), this.hideDropDown();
});
}
handleDefaultEnter() {
return o(this, null, function* () {
return this.opened ? this.hideDropDown() : (this.openOnEmpty || this.getComboboxOptions().length || this.isAutoComplete) && this.showDropDown();
});
}
handleSelectedItemChange(e) {
return o(this, null, function* () {
this.selectedItem = e, this.emit("dds-change", {
value: this.selectedItem.value,
selectedItem: this.selectedItem,
type: "select"
}), yield this.updateComplete, this.value = this.selectedItem.value, this.selectedText = this.currentItem.text, this.triggerInput.value = this.currentItem.text, this.triggerInput.focus(), this.setValidity();
});
}
handleTextSearch(e) {
return o(this, null, function* () {
this.value = e, this.selectedText = e, this.triggerInput.value = e, this.triggerInput.focus(), this.emit("dds-search", { search: e }), this.setValidity();
});
}
handleArrowKeys(e) {
return o(this, null, function* () {
if (e.preventDefault(), !this.opened)
if (this.openOnEmpty || this.getComboboxOptions().length || this.isAutoComplete)
this.showDropDown();
else
return;
yield this.updateComplete, this.optionList.captureFocus(e.key);
});
}
clearSelection() {
return o(this, null, function* () {
var t;
this.isUserInteraction = !1;
const e = !!(this.value || this.selectedText || (t = this.triggerInput) != null && t.value);
this.triggerInput && (this.triggerInput.value = ""), this.selectedText = "", this.selectedItem = null, this.value = void 0, this.requestUpdate(), yield this.updateComplete, e && this.emit("dds-change", this.selectedItem);
});
}
/**
* Multiselect helper methods
*/
getSelectedValues() {
return this.selectedItems.map((e) => e.value);
}
isMaxSelectionsReached() {
return this.maxSelections ? this.selectedItems.length >= this.maxSelections : !1;
}
addSelectedItem(e) {
if (!this.multiselect || this.selectedItems.some(
(a) => a.value === e.value
) || this.isMaxSelectionsReached()) return;
this.selectedItems = [...this.selectedItems, e];
const i = this.getSelectedValues().join(",");
super.value = i, this.selectedText = "", this.triggerInput && (this.triggerInput.value = ""), this.requestUpdate();
}
removeSelectedItem(e) {
if (this.multiselect) {
if (this.selectedItems = this.selectedItems.filter(
(t) => t.value !== e.value
), this.selectedItems.length === 0)
super.value = void 0;
else {
const t = this.getSelectedValues().join(",");
super.value = t;
}
this.requestUpdate();
}
}
clearAllSelections() {
this.multiselect && (this.selectedItems = [], super.value = void 0, this.selectedText = "", this.triggerInput && (this.triggerInput.value = ""), this.requestUpdate());
}
updateMultipleSelectionsFromValues(e) {
if (!this.multiselect) return;
const t = this.getComboboxOptions();
this.selectedItems.length === 0 && (this.selectedItems = []);
let a = !1;
e.forEach((n) => {
const h = t.find(
(c) => c.value === n || c.getAttribute("value") === n
);
h && (this.selectedItems.some((u) => u.value === n) || (this.selectedItems.push(h), a = !0));
}), a && this.pendingInitialValues.length > 0 && (this.pendingInitialValues = []), this.requestUpdate();
}
/**
* Override value getter/setter to handle multiselect mode
*/
get value() {
if (this.multiselect) {
const e = this.getSelectedValues();
return e.length > 0 ? e.join(",") : void 0;
}
return super.value;
}
set value(e) {
if (this.multiselect) {
const t = e ? e.split(",").map((i) => i.trim()).filter((i) => i) : [];
t.length > 0 && this.selectedItems.length === 0 && (this.pendingInitialValues = t), this.updateMultipleSelectionsFromValues(t), super.value = e;
} else
super.value = e;
}
showDropDown() {
return o(this, null, function* () {
this.disabled || this.readonly || !this.isAutoComplete || this.opened || !this.openOnEmpty && !this.getComboboxOptions().length && !this.isAutoComplete || (this.opened = !0, document.addEventListener("mousedown", this.handleDocumentMouseDown));
});
}
hideDropDown(e) {
return o(this, null, function* () {
this.opened && (this.opened = !1, document.removeEventListener("mousedown", this.handleDocumentMouseDown), yield this.updateComplete, e != null && e.skipFocus || this.focus(), this.clearSelectionRange());
});
}
get focusElement() {
return this.triggerInput;
}
setSelectionRange(e, t) {
this.triggerInput.setSelectionRange(e, t);
}
clearSelectionRange() {
const e = this.triggerInput.value.length;
this.setSelectionRange(e, e);
}
getValidity() {
return this.multiselect ? this.getMultiSelectValidity() : this.isAutoComplete ? this.getAutoCompleteValidity() : this.getBasicValidity();
}
formResetCallback() {
this.internals.setValidity({}), this.internals.setFormValue(this.defaultValue), this.value = this.defaultValue, this.multiselect ? this.selectedItems = [] : this.selectedItem = this.defaultValue;
}
getMultiSelectValidity() {
return !this.required || this.selectedItems.length > 0;
}
getAutoCompleteValidity() {
return this.allowManualInput ? this.getManualInputValidity() : this.searchForText ? this.getSearchTextValidity() : this.getSelectedItemValidity();
}
getManualInputValidity() {
return this.triggerInput.value !== "" || this.selectedItem !== null && this.selectedItem !== void 0;
}
getSearchTextValidity() {
return this.triggerInput.value !== "";
}
getSelectedItemValidity() {
return !!this.selectedItem;
}
getBasicValidity() {
return this.triggerInput.value !== "";
}
// custom validation
get validity() {
return this.internals.validity ? this.internals.validity : V({
valueMissing: this.required && !this.getValidity()
});
}
get validationMessage() {
return y("form.validationMessage.select");
}
checkValidity() {
return this.required ? this.getValidity() : !0;
}
reportValidity() {
return this.required ? this.checkValidity() : !0;
}
setValidity() {
this.checkValidity() ? this.internals.setValidity({}) : this.internals.setValidity(
{
valueMissing: this.required && !this.getValidity()
},
this.validationMessage,
this.triggerInput
);
}
handleInvalid(e) {
e.preventDefault();
}
getActiveDescendant() {
var t;
return this.opened ? (t = this.optionList) == null ? void 0 : t.getActiveOption() : this.triggerInput;
}
getSearchIconSize(e) {
switch (e) {
case "sm":
return "md";
case "lg":
return "lg";
case "xs":
return "sm";
default:
return "md";
}
}
getInnerIconSize(e) {
switch (e) {
case "sm":
return 16;
case "lg":
return 16;
case "xs":
return 10;
default:
return 16;
}
}
renderChip(e) {
const t = e.optionText || e.textContent || e.text || "";
return d`
<dap-ds-chip
size="sm"
removeable
.value=${e.value}
@dds-remove=${(i) => this.handleChipRemove(i, e)}>
${t}
</dap-ds-chip>
`;
}
renderChips() {
return !this.multiselect || this.selectedItems.length === 0 ? I : d`
<div class="combobox__chips" part="chips">
${this.selectedItems.map((e) => this.renderChip(e))}
</div>
`;
}
renderInput() {
var t, i, a;
const e = this.multiselect ? this.selectedText : this.selectedText !== "" ? this.selectedText : ((t = this.selectedItem) == null ? void 0 : t.text) || "";
return d`<input
id="input"
part="input"
role="combobox"
class="${g("input", `input--${this.size}`, {
"input--disabled": this.disabled,
"input--readonly": this.readonly,
"input--multiselect": this.multiselect
})}"
aria-expanded=${this.opened}
aria-haspopup="listbox"
aria-labelledby="label"
aria-describedby="description ${this.feedback ? "feedback" : ""}"
aria-disabled=${this.disabled}
aria-autocomplete="both"
aria-controls="option-list"
aria-activedescendant=${p((i = this.getActiveDescendant()) == null ? void 0 : i.id)}
aria-multiselectable=${this.multiselect ? "true" : "false"}
?required=${this.required}
?readonly=${this.readonly}
?autofocus=${this.autofocus}
autocomplete=${this.autocomplete}
?disabled=${this.disabled}
value=${e}
placeholder=${p((a = this.placeholder) != null ? a : "")}
type=${this.search ? "search" : "text"}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@input=${this.handleInput}
@keydown=${this.handleKeyDown}
@click=${this.handleClick} />`;
}
renderClearButton() {
return this.clearButton !== "true" || this.readonly ? I : d`<div
class="${g("clear-icon", {
"clear-icon--hidden": this.shouldHideClearIcon
})}">
<dap-ds-icon-button
icon="close-line"
data-testid=${this.clearButtonTestId}
aria-label=${y("clear")}
?disabled=${this.disabled}
@click=${this.handleClearClick}></dap-ds-icon-button>
</div>`;
}
renderIndicatorIcon() {
var i;
const e = this.searchMode === "autocomplete" || this.searchMode === "manual", t = this.loading ? d`<dap-ds-icon-loading-spinner></dap-ds-icon-loading-spinner>` : null;
return e && !this.search ? d`<div
class="${g("indicator-icon", {
"indicator-icon--loading": this.loading
})}"
part="indicator-icon">
${t || d`<slot name="indicator-icon"
><dap-ds-icon-arrow-down-s-line
aria-hidden="true"
@click=${this.handleClick}>
</dap-ds-icon-arrow-down-s-line
></slot>`}
</div>` : this.search ? d`<div
class="${g("indicator-icon", {
"indicator-icon--loading": this.loading
})}">
${t || d`<dap-ds-icon-button
part="search-button"
size=${this.getSearchIconSize(this.size)}
variant=${this.subtle ? "neutral" : "inverted-brand"}
icon="search-line"
?disabled=${this.disableSearchWhenEmpty && !this.hasSearchText}
data-testid=${this.searchButtonTestId}
iconSize=${this.getInnerIconSize(this.size)}
aria-label=${(i = this.searchButtonAriaLabel) != null ? i : y("search")}
@click=${this.handleSearchClick}>
</dap-ds-icon-button>`}
</div>` : I;
}
renderSelectActions() {
return d`<div
class="${g("select-action", `select-action--${this.size}`, {
"select-action--disabled": this.disabled,
"select-action--readonly": this.readonly,
"select-action--opened": this.opened,
"select-action--multiselect": this.multiselect
})}">
${this.renderClearButton()} ${this.renderIndicatorIcon()}
</div>`;
}
renderOptionList() {
return d`<dap-ds-option-list
class="option-list"
part="option-list"
id="option-list"
.search=${this.search}
searchMode=${this.allowManualInput ? "none" : this.searchMode}
searchOnValueSet=${this.searchOnValueSet === "true"}
filterText=${this.selectedText}
size=${p(this.size)}
value=${p(this.value)}
selectable=${p(this.selectable)}
@dds-option-change=${this.handleSelectedChange}
@dds-option-deselect=${this.handleOptionDeselect}
@dds-keydown=${this.handleListKeyDown}
@dds-current-change=${this.handleCurrentOptionChange}
@dds-list-changed=${this.handleListChanged}>
<slot></slot>
</dap-ds-option-list>`;
}
renderCombobox() {
return d` ${this.renderLabel()}
<div>
<dap-ds-popup
part="base"
class="select-popup"
overflow
?opened=${this.opened}
?hasArrow=${!1}
placement=${this.placement}
floatingStrategy="fixed"
offset="4"
?sync=${this.sync}
?disableViewportAutoClose=${this.disableViewportAutoClose}
@dds-close=${this.handlePopupAutoClose}
@dds-closed=${this.hideDropDown}
@dds-opened=${this.showDropDown}>
<div
slot="trigger"
part="trigger"
class="${g("select", `select--${this.size}`, {
"select--disabled": this.disabled,
"select--readonly": this.readonly,
"select--opened": this.opened,
"select--loading": this.loading,
"select--success": this.status === "success",
"select--error": this.status === "error",
"select--no-animation": this.noAnimation,
"select--multiselect": this.multiselect
})}">
${this.renderChips()} ${this.renderInput()}
${this.renderSelectActions()}
</div>
${this.renderOptionList()}
</dap-ds-popup>
${this.multiselect ? d`<div
class="sr-only"
role="status"
aria-live="polite"
aria-atomic="true">
${this.selectedItems.length > 0 ? y("combobox.multiselect.selected", {
count: this.selectedItems.length
}) : ""}
</div>` : I}
${this.feedback && d`<dap-ds-feedback
part="feedback"
feedbackType=${p(this.feedbackType)}
feedbackSize="${p(this.size)}"
id="feedback">
${this.feedback}
</dap-ds-feedback>`}
</div>`;
}
};
f.styles = O(D);
let s = f;
l([
C("input")
], s.prototype, "triggerInput");
l([
C("dap-ds-option-list")
], s.prototype, "optionList");
l([
r({ reflect: !0 })
], s.prototype, "placement");
l([
r({ type: Boolean, reflect: !0 })
], s.prototype, "opened");
l([
r()
], s.prototype, "searchMode");
l([
r({ type: Boolean })
], s.prototype, "search");
l([
r()
], s.prototype, "clearButton");
l([
r()
], s.prototype, "placeholder");
l([
r({ type: Boolean })
], s.prototype, "sync");
l([
r({ type: Boolean })
], s.prototype, "allowManualInput");
l([
r({ type: Boolean })
], s.prototype, "searchForText");
l([
r({ type: String })
], s.prototype, "searchOnValueSet");
l([
r({ type: Boolean })
], s.prototype, "loading");
l([
r({ type: String })
], s.prototype, "selectable");
l([
r({ type: Boolean })
], s.prototype, "noAnimation");
l([
r({ type: Boolean })
], s.prototype, "textComplete");
l([
r({ type: Boolean })
], s.prototype, "openOnEmpty");
l([
r({ type: Boolean })
], s.prototype, "disableViewportAutoClose");
l([
r()
], s.prototype, "searchButtonAriaLabel");
l([
r({ type: Boolean })
], s.prototype, "subtle");
l([
r({ type: Boolean, reflect: !0 })
], s.prototype, "multiselect");
l([
r({ type: Number, reflect: !0 })
], s.prototype, "maxSelections");
l([
r()
], s.prototype, "clearButtonTestId");
l([
r()
], s.prototype, "searchButtonTestId");
l([
r({ type: Boolean })
], s.prototype, "disableSearchWhenEmpty");
l([
v()
], s.prototype, "selectedItem");
l([
v()
], s.prototype, "selectedItems");
l([
v()
], s.prototype, "currentItem");
l([
v()
], s.prototype, "selectedText");
export {
s as default
};
//# sourceMappingURL=comboboxBase.js.map