@synergy-design-system/components
Version:
This package provides the base of the Synergy Design System as native web components. It uses [lit](https://www.lit.dev) and parts of [shoelace](https://shoelace.style/). Synergy officially supports the latest two versions of all major browsers (as define
939 lines (927 loc) • 31.2 kB
JavaScript
import {
SynOption
} from "./chunk.H44OLU6E.js";
import {
SynPopup
} from "./chunk.6CC5CH2P.js";
import {
defaultOptionRenderer
} from "./chunk.HVVPX2VA.js";
import {
checkValueBelongsToOption,
createOptionFromDifferentTypes,
filterOnlyOptgroups,
getAllOptions,
getAssignedElementsForSlot,
getValueFromOption,
normalizeString
} from "./chunk.BWTMFHNM.js";
import {
scrollIntoView
} from "./chunk.5732DMBC.js";
import {
combobox_custom_styles_default
} from "./chunk.IEVIYOID.js";
import {
combobox_styles_default
} from "./chunk.GTAE5OSA.js";
import {
defaultValue
} from "./chunk.3NXKLKWH.js";
import {
form_control_custom_styles_default,
form_control_styles_default
} from "./chunk.G4URZQCL.js";
import {
FormControlController
} from "./chunk.HP2LEQRU.js";
import {
waitForEvent
} from "./chunk.C2ENQBPM.js";
import {
animateTo,
stopAnimations
} from "./chunk.G6ITZTTW.js";
import {
getAnimation,
setDefaultAnimation
} from "./chunk.7JGKUB4A.js";
import {
SynIcon
} from "./chunk.WFJVDRQR.js";
import {
LocalizeController
} from "./chunk.OAQRCZOO.js";
import {
HasSlotController
} from "./chunk.WVVQK5TE.js";
import {
enableDefaultSettings
} from "./chunk.E5UUNP6E.js";
import {
watch
} from "./chunk.BVZQ6QSY.js";
import {
component_styles_default
} from "./chunk.NLYVOJGK.js";
import {
SynergyElement
} from "./chunk.3AZFEB6D.js";
import {
__decorateClass
} from "./chunk.Z4XV3SMG.js";
// src/components/combobox/combobox.component.ts
import { classMap } from "lit/directives/class-map.js";
import { html } from "lit";
import { property, query, state } from "lit/decorators.js";
var SynCombobox = class extends SynergyElement {
constructor() {
super(...arguments);
this.formControlController = new FormControlController(this, {
assumeInteractionOn: ["syn-blur", "syn-input"]
});
this.hasSlotController = new HasSlotController(this, "help-text", "label");
this.localize = new LocalizeController(this);
this.isOptionRendererTriggered = false;
this.isInitialized = false;
this.hasFocus = false;
this.isUserInput = false;
this.displayLabel = "";
this.numberFilteredOptions = 0;
this.cachedOptions = [];
this.name = "";
this.value = "";
this.defaultValue = "";
this.size = "medium";
this.placeholder = "";
this.disabled = false;
this.clearable = false;
this.open = false;
this.hoist = false;
this.label = "";
this.placement = "bottom";
this.helpText = "";
this.form = "";
this.required = false;
this.restricted = false;
this.getOption = defaultOptionRenderer;
this.filter = (option, queryStr) => {
let content = (option == null ? void 0 : option.textContent) || "";
if (option instanceof SynOption) {
content = option.getTextLabel();
}
const normalizedOption = normalizeString(content);
const normalizedQuery = normalizeString(queryStr);
if (normalizedOption.includes(normalizedQuery)) {
return true;
}
return (option == null ? void 0 : option.value) === queryStr;
};
this.handleDocumentFocusIn = (event) => {
const path = event.composedPath();
if (this && !path.includes(this)) {
this.hide();
}
};
/* eslint-disable @typescript-eslint/no-floating-promises */
// eslint-disable-next-line complexity
this.handleDocumentKeyDown = (event) => {
const target = event.target;
const isClearButton = target.closest(".combobox__clear") !== null;
if (isClearButton) {
return;
}
if (event.key === "Escape") {
if (this.open && !this.closeWatcher) {
event.preventDefault();
event.stopPropagation();
this.hide();
this.displayInput.focus({ preventScroll: true });
} else if (!this.open) {
this.clearCombobox();
}
}
if (event.key === "Enter") {
const currentOption = this.getCurrentOption();
const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
if (!this.open && !hasModifier) {
setTimeout(() => {
if (!event.defaultPrevented) {
this.formControlController.submit();
}
});
return;
}
if (!this.open || currentOption && currentOption.disabled) {
return;
}
if (currentOption) {
const oldValue = this.lastOption ? getValueFromOption(this.lastOption) : void 0;
this.updateSelectedOptionsCacheAndValue(currentOption);
if (this.value !== oldValue) {
this.setSelectedOptionToSelected();
this.updateComplete.then(() => {
this.emit("syn-input");
this.emit("syn-change");
});
}
}
this.hide();
this.displayInput.focus({ preventScroll: true });
return;
}
if (["ArrowUp", "ArrowDown"].includes(event.key)) {
event.preventDefault();
event.stopPropagation();
if (!this.open) {
this.show();
}
this.selectNextOption(event.key === "ArrowDown");
}
if (["Home", "End"].includes(event.key)) {
event.preventDefault();
event.stopPropagation();
if (event.key === "Home") {
this.displayInput.setSelectionRange(0, 0);
} else if (event.key === "End") {
this.displayInput.setSelectionRange(
this.displayInput.value.length,
this.displayInput.value.length
);
}
}
};
/* eslint-enable @typescript-eslint/no-floating-promises */
this.handleDocumentMouseDown = (event) => {
const path = event.composedPath();
if (this && !path.includes(this)) {
this.hide();
}
};
}
/** Gets the validity state object */
get validity() {
return this.valueInput.validity;
}
/** Gets the validation message */
get validationMessage() {
return this.valueInput.validationMessage;
}
connectedCallback() {
super.connectedCallback();
this.open = false;
}
firstUpdated() {
this.isInitialized = true;
this.formControlController.updateValidity();
}
willUpdate(changedProperties) {
super.willUpdate(changedProperties);
if (!this.isInitialized && !this.defaultValue && this.value) {
this.defaultValue = this.value;
}
}
addOpenListeners() {
var _a;
document.addEventListener("focusin", this.handleDocumentFocusIn);
document.addEventListener("keydown", this.handleDocumentKeyDown);
document.addEventListener("mousedown", this.handleDocumentMouseDown);
if (this.getRootNode() !== document) {
this.getRootNode().addEventListener("focusin", this.handleDocumentFocusIn);
}
if ("CloseWatcher" in window) {
(_a = this.closeWatcher) == null ? void 0 : _a.destroy();
this.closeWatcher = new CloseWatcher();
this.closeWatcher.onclose = () => {
if (this.open) {
this.hide();
this.displayInput.focus({ preventScroll: true });
}
};
}
}
removeOpenListeners() {
var _a;
document.removeEventListener("focusin", this.handleDocumentFocusIn);
document.removeEventListener("keydown", this.handleDocumentKeyDown);
document.removeEventListener("mousedown", this.handleDocumentMouseDown);
if (this.getRootNode() !== document) {
this.getRootNode().removeEventListener("focusin", this.handleDocumentFocusIn);
}
(_a = this.closeWatcher) == null ? void 0 : _a.destroy();
}
handleFocus() {
this.hasFocus = true;
this.emit("syn-focus");
}
handleBlur() {
this.hasFocus = false;
this.emit("syn-blur");
}
handleLabelClick() {
this.displayInput.focus();
}
handleComboboxMouseDown(event) {
if (this.disabled) {
return;
}
const toggleListboxOpen = () => this.open ? this.hide() : this.show();
event.preventDefault();
toggleListboxOpen().then(() => {
setTimeout(() => this.displayInput.focus({ preventScroll: true }));
});
}
handleComboboxKeyDown(event) {
if (event.key === "Tab") {
return;
}
this.handleDocumentKeyDown(event);
}
handleClearClick(event) {
event.stopPropagation();
this.clearCombobox();
}
clearCombobox() {
if (this.value !== "") {
this.value = "";
this.displayInput.value = "";
this.lastOption = void 0;
this.updateSelectedOptionsCacheAndValue(void 0);
this.displayInput.focus({ preventScroll: true });
this.setSelectedOptionToSelected();
this.updateComplete.then(() => {
this.emit("syn-clear");
this.emit("syn-input");
this.emit("syn-change");
});
}
}
// eslint-disable-next-line class-methods-use-this
preventLoosingFocus(event) {
event.stopPropagation();
event.preventDefault();
}
/* eslint-disable @typescript-eslint/no-floating-promises */
handleOptionClick(event) {
const target = event.target;
const option = target.closest("syn-option");
const oldValue = this.lastOption ? getValueFromOption(this.lastOption) : void 0;
if (option && !option.disabled) {
this.updateSelectedOptionsCacheAndValue(option);
this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
if (this.value !== oldValue) {
this.setSelectedOptionToSelected();
this.updateComplete.then(() => {
this.emit("syn-input");
this.emit("syn-change");
});
}
this.hide();
this.displayInput.focus({ preventScroll: true });
}
}
/* eslint-enable @typescript-eslint/no-floating-promises */
/**
* Selects the following or previous option.
*
* @param isNext - A boolean indicating whether to select the following option (true)
* or the previous option (false).
*/
selectNextOption(isNext) {
const filteredOptions = this.getAllFilteredOptions();
if (filteredOptions.length === 0) {
return;
}
const currentOption = this.getCurrentOption();
const currentIndex = filteredOptions.indexOf(currentOption);
let newIndex = Math.max(0, currentIndex);
if (isNext) {
const nextIndex = currentIndex + 1;
newIndex = nextIndex > filteredOptions.length - 1 ? 0 : nextIndex;
} else {
const previousIndex = currentIndex - 1;
newIndex = previousIndex < 0 ? filteredOptions.length - 1 : previousIndex;
}
this.setCurrentOption(filteredOptions[newIndex]);
scrollIntoView(this.getCurrentOption(), this.listbox, "vertical", "auto");
}
getAllFilteredOptions() {
return this.getSlottedOptions().filter((option) => !option.hidden);
}
getCurrentOption() {
return this.getAllFilteredOptions().find((option) => option.current);
}
// Sets the current option, which is the option the user is currently interacting with
// (e.g. via keyboard). Only one option may be "current" at a time.
setCurrentOption(option) {
const allOptions = this.getAllFilteredOptions();
this.displayInput.removeAttribute("aria-activedescendant");
allOptions.forEach((el) => {
el.current = false;
el.setAttribute("aria-selected", "false");
});
if (option) {
option.current = true;
option.setAttribute("aria-selected", "true");
this.displayInput.setAttribute("aria-activedescendant", option.id);
}
}
/**
* Updates the selected options cache, the current value, and the display value
*/
// eslint-disable-next-line complexity
updateSelectedOptionsCacheAndValue(option) {
this.selectedOption = option;
let optionValue;
if (option) {
this.lastOption = option;
optionValue = String(getValueFromOption(option));
} else if (this.restricted && !this.isValidValue() && this.value !== "" && !this.isUserInput) {
this.resetToLastValidValue();
return;
}
this.value = optionValue != null ? optionValue : this.displayInput.value;
this.updateComplete.then(() => {
var _a, _b;
this.displayLabel = (_b = (_a = this.selectedOption) == null ? void 0 : _a.getTextLabel()) != null ? _b : this.displayInput.value;
this.formControlController.updateValidity();
});
}
setSelectedOptionToSelected() {
const slottedOptions = this.getSlottedOptions();
slottedOptions.forEach((opt) => {
opt.selected = false;
});
if (this.selectedOption) {
this.selectedOption.selected = true;
}
}
handleInvalid(event) {
this.formControlController.setValidity(false);
this.formControlController.emitInvalidEvent(event);
}
handlePropertiesChange() {
this.createComboboxOptionsFromQuery(this.value);
}
handleDisabledChange() {
this.formControlController.setValidity(this.disabled);
if (this.disabled) {
this.open = false;
this.handleOpenChange();
}
}
handleValueChange() {
this.updateSelectedOptionFromValue();
this.setCurrentOption(null);
}
async handleOpenChange() {
if (this.open && !this.disabled) {
if (this.numberFilteredOptions === 0 && !this.restricted) {
this.open = false;
this.emit("syn-error");
return;
}
this.emit("syn-show");
this.addOpenListeners();
await stopAnimations(this);
this.listbox.hidden = false;
this.popup.active = true;
const { keyframes: keyframes2, options: options2 } = getAnimation(this, "combobox.show", { dir: this.localize.dir() });
await animateTo(this.popup.popup, keyframes2, options2);
this.emit("syn-after-show");
return;
}
this.setCurrentOption(null);
this.displayInput.removeAttribute("aria-activedescendant");
this.emit("syn-hide");
this.removeOpenListeners();
await stopAnimations(this);
const { keyframes, options } = getAnimation(this, "combobox.hide", { dir: this.localize.dir() });
await animateTo(this.popup.popup, keyframes, options);
this.listbox.hidden = true;
this.popup.active = false;
this.emit("syn-after-hide");
}
/**
* Shows the listbox. If it is not possible to open the listbox, because there are no
* appropriate filtered options, a syn-error is emitted and the listbox stays closed.
*/
async show() {
if (this.open || this.disabled) {
this.open = false;
return void 0;
}
this.open = true;
return Promise.race([waitForEvent(this, "syn-after-show"), waitForEvent(this, "syn-error")]);
}
/** Hides the listbox. */
async hide() {
if (!this.open || this.disabled) {
this.open = false;
return void 0;
}
this.open = false;
return waitForEvent(this, "syn-after-hide");
}
/**
* Checks for validity but does not show a validation message.
* Returns `true` when valid and `false` when invalid.
*/
checkValidity() {
return this.valueInput.checkValidity();
}
/** Gets the associated form, if one exists. */
getForm() {
return this.formControlController.getForm();
}
/** Checks for validity and shows the browser's validation message if the control is invalid. */
reportValidity() {
return this.valueInput.reportValidity();
}
/** Sets a custom validation message. Pass an empty string to restore validity. */
setCustomValidity(message) {
this.valueInput.setCustomValidity(message);
this.formControlController.updateValidity();
}
/** Sets focus on the control. */
focus(options) {
this.displayInput.focus(options);
}
/** Removes focus from the control. */
blur() {
this.displayInput.blur();
}
/* eslint-disable no-param-reassign, @typescript-eslint/no-floating-promises */
createComboboxOptionsFromQuery(queryString) {
var _a;
this.numberFilteredOptions = 0;
this.isOptionRendererTriggered = true;
if (this.cachedOptions.length === 0) {
this.cacheSlottedOptionsAndOptgroups();
}
this.getSlottedOptions().forEach((option) => {
const cachedOption = this.cachedOptions.find((o) => o.id === option.id) || option;
const optionResult = this.getOption(cachedOption, queryString);
let updatedOption = createOptionFromDifferentTypes(optionResult);
if (!updatedOption) {
updatedOption = cachedOption;
}
const hideOption = !(this.filter(updatedOption, queryString) || queryString === "");
updatedOption.hidden = hideOption;
option.replaceWith(updatedOption);
if (!hideOption) {
this.numberFilteredOptions += 1;
}
});
const visibleOptgroups = this.getSlottedOptGroups().filter((optgroup) => {
const options = getAllOptions(Array.from(optgroup.children)).flat();
const isVisible = options.some((option) => !option.hidden);
optgroup.hidden = !isVisible;
return isVisible;
});
(_a = visibleOptgroups[0]) == null ? void 0 : _a.style.setProperty("--display-divider", "none");
setTimeout(() => {
this.isOptionRendererTriggered = false;
}, 0);
}
/* eslint-enable no-param-reassign, @typescript-eslint/no-floating-promises */
async handleInput() {
const inputValue = this.displayInput.value;
const cachedLastOption = this.lastOption;
this.isUserInput = true;
this.value = inputValue;
await this.updateComplete;
this.isUserInput = false;
this.lastOption = cachedLastOption;
this.open = this.restricted || this.numberFilteredOptions > 0;
this.selectedOption = void 0;
this.formControlController.updateValidity();
this.emit("syn-input");
}
/**
* Checks if the current value is available in the options list.
* This is used to determine if the value is valid when the combobox is restricted.
*
* @returns `true` if the current value is available in the options list,
* otherwise `false`.
*/
isValidValue() {
const isValid = this.cachedOptions.some(
(option) => getValueFromOption(option) === this.value
);
return isValid;
}
getOptionFromValue() {
return this.cachedOptions.find((option) => checkValueBelongsToOption(this.value, option));
}
/**
* Resets the value to the last valid value or to an empty string.
*/
resetToLastValidValue() {
var _a, _b, _c, _d;
let label = "";
let value = "";
if (this.lastOption) {
value = String(getValueFromOption(this.lastOption));
label = this.lastOption.getTextLabel();
}
const popupAnimations = (_d = (_c = (_b = (_a = this.popup) == null ? void 0 : _a.popup) == null ? void 0 : _b.getAnimations) == null ? void 0 : _c.call(_b)) != null ? _d : [];
const waitForAnimations = popupAnimations.length ? Promise.all(
popupAnimations.map((animation) => animation.playState === "finished" ? Promise.resolve() : new Promise((resolve) => {
animation.addEventListener("finish", () => resolve(), { once: true });
}))
) : Promise.resolve();
waitForAnimations.then(() => {
this.value = value;
this.displayInput.value = label;
this.formControlController.updateValidity();
});
}
handleChange() {
if (this.selectedOption) {
return;
}
if (this.restricted && !this.isValidValue() && this.value !== "") {
this.resetToLastValidValue();
return;
}
this.value = this.displayInput.value;
this.lastOption = this.getOptionFromValue();
this.selectedOption = this.getOptionFromValue();
this.updateComplete.then(() => {
this.formControlController.updateValidity();
});
this.setSelectedOptionToSelected();
this.emit("syn-change");
}
getSlottedOptions() {
return getAllOptions(getAssignedElementsForSlot(this.defaultSlot)).flat();
}
getSlottedOptGroups() {
return filterOnlyOptgroups(getAssignedElementsForSlot(this.defaultSlot));
}
/* eslint-disable no-param-reassign */
cacheSlottedOptionsAndOptgroups() {
const slottedOptions = this.getSlottedOptions();
const slottedOptgroups = this.getSlottedOptGroups();
slottedOptions.forEach((option, index) => {
option.id = option.id || `syn-combobox-option-${index}`;
});
slottedOptgroups.forEach((optgroup, index) => {
optgroup.id = optgroup.id || `syn-combobox-optgroup-${index}`;
});
this.cachedOptions = [...slottedOptions];
}
/* eslint-enable no-param-reassign */
updateSelectedOptionFromValue() {
const option = this.getOptionFromValue();
if (!option) {
this.displayInput.value = this.value;
}
this.updateSelectedOptionsCacheAndValue(option);
this.createComboboxOptionsFromQuery(this.value);
}
/* eslint-disable @typescript-eslint/no-floating-promises, complexity */
/* @internal - used by options to update labels */
handleDefaultSlotChange() {
const slottedOptions = this.getSlottedOptions();
const optionsLength = slottedOptions.length;
const cachedOptionsLength = this.cachedOptions.length;
if (!this.isOptionRendererTriggered || cachedOptionsLength !== optionsLength) {
if (!customElements.get("syn-option")) {
customElements.whenDefined("syn-option").then(() => this.handleDefaultSlotChange());
return;
}
this.cacheSlottedOptionsAndOptgroups();
this.updateSelectedOptionFromValue();
if (this.hasFocus && this.value.length > 0 && !this.open) {
this.show();
}
}
}
/* eslint-enable @typescript-eslint/no-floating-promises, complexity */
/* eslint-disable @typescript-eslint/unbound-method */
// eslint-disable-next-line complexity
render() {
const hasLabelSlot = this.hasSlotController.test("label");
const hasHelpTextSlot = this.hasSlotController.test("help-text");
const hasLabel = this.label ? true : !!hasLabelSlot;
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;
const isPlaceholderVisible = this.placeholder && this.value.length === 0;
return html`
<div
part="form-control"
class=${classMap({
"form-control": true,
"form-control--has-help-text": hasHelpText,
"form-control--has-label": hasLabel,
"form-control--large": this.size === "large",
"form-control--medium": this.size === "medium",
"form-control--small": this.size === "small"
})}
>
<label
id="label"
part="form-control-label"
class="form-control__label"
aria-hidden=${hasLabel ? "false" : "true"}
=${this.handleLabelClick}
>
<slot name="label">${this.label}</slot>
</label>
<div part="form-control-input" class="form-control-input">
<syn-popup
class=${classMap({
combobox: true,
"combobox--bottom": this.placement === "bottom",
"combobox--disabled": this.disabled,
"combobox--focused": this.hasFocus,
"combobox--large": this.size === "large",
"combobox--medium": this.size === "medium",
"combobox--open": this.open,
"combobox--placeholder-visible": isPlaceholderVisible,
"combobox--small": this.size === "small",
"combobox--standard": true,
"combobox--top": this.placement === "top"
})}
placement=${`${this.placement}-start`}
strategy=${this.hoist ? "fixed" : "absolute"}
flip
shift
sync="width"
auto-size="vertical"
auto-size-padding="10"
exportparts="popup"
>
<div
part="combobox"
class="combobox__inputs"
slot="anchor"
=${this.handleComboboxKeyDown}
=${this.handleComboboxMouseDown}
>
<slot part="prefix" name="prefix" class="combobox__prefix"></slot>
<input
part="display-input"
class="combobox__display-input"
type="text"
placeholder=${this.placeholder}
.disabled=${this.disabled}
.value=${this.displayLabel}
autocomplete="off"
spellcheck="false"
autocapitalize="off"
aria-controls="listbox"
aria-expanded=${this.open ? "true" : "false"}
aria-haspopup="listbox"
aria-labelledby="label"
aria-disabled=${this.disabled ? "true" : "false"}
aria-describedby="help-text"
role="combobox"
tabindex="0"
=${this.handleFocus}
=${this.handleBlur}
aria-autocomplete="list"
aria-owns="listbox"
=${this.handleInput}
=${this.handleChange}
/>
<input
class="combobox__value-input"
type="text"
?disabled=${this.disabled}
?required=${this.required}
.value=${this.value}
tabindex="-1"
aria-hidden="true"
=${() => this.focus()}
=${this.handleInvalid}
/>
${hasClearIcon ? html`
<button
part="clear-button"
class="combobox__clear"
type="button"
aria-label=${this.localize.term("clearEntry")}
=${this.preventLoosingFocus}
=${this.handleClearClick}
tabindex="-1"
>
<slot name="clear-icon">
<syn-icon name="x-circle-fill" library="system"></syn-icon>
</slot>
</button>
` : ""}
<slot name="suffix" part="suffix" class="combobox__suffix"></slot>
<slot name="expand-icon" part="expand-icon" class="combobox__expand-icon">
<syn-icon library="system" name="chevron-down"></syn-icon>
</slot>
</div>
<div
id="listbox"
role="listbox"
aria-expanded=${this.open ? "true" : "false"}
aria-labelledby="label"
part="listbox"
class="combobox__listbox"
tabindex="-1"
=${this.preventLoosingFocus}
=${this.handleOptionClick}
>
<div class="listbox__options" part="filtered-listbox">
${this.numberFilteredOptions === 0 ? html`<span
class="listbox__no-results"
aria-hidden="true"
part="no-results"
>${this.localize.term("noResults")}</span
>` : ""}
<slot =${this.handleDefaultSlotChange}></slot>
</div>
</div>
</syn-popup>
</div>
<div
part="form-control-help-text"
id="help-text"
class="form-control__help-text"
aria-hidden=${hasHelpText ? "false" : "true"}
>
<slot name="help-text">${this.helpText}</slot>
</div>
</div>
`;
}
/* eslint-enable @typescript-eslint/unbound-method */
};
SynCombobox.styles = [
component_styles_default,
form_control_styles_default,
combobox_styles_default,
form_control_custom_styles_default,
combobox_custom_styles_default
];
SynCombobox.dependencies = {
"syn-icon": SynIcon,
"syn-popup": SynPopup
};
__decorateClass([
query(".combobox")
], SynCombobox.prototype, "popup", 2);
__decorateClass([
query(".combobox__inputs")
], SynCombobox.prototype, "combobox", 2);
__decorateClass([
query(".combobox__display-input")
], SynCombobox.prototype, "displayInput", 2);
__decorateClass([
query(".combobox__value-input")
], SynCombobox.prototype, "valueInput", 2);
__decorateClass([
query(".combobox__listbox")
], SynCombobox.prototype, "listbox", 2);
__decorateClass([
query("slot:not([name])")
], SynCombobox.prototype, "defaultSlot", 2);
__decorateClass([
state()
], SynCombobox.prototype, "hasFocus", 2);
__decorateClass([
state()
], SynCombobox.prototype, "isUserInput", 2);
__decorateClass([
state()
], SynCombobox.prototype, "displayLabel", 2);
__decorateClass([
state()
], SynCombobox.prototype, "selectedOption", 2);
__decorateClass([
state()
], SynCombobox.prototype, "numberFilteredOptions", 2);
__decorateClass([
state()
], SynCombobox.prototype, "cachedOptions", 2);
__decorateClass([
property()
], SynCombobox.prototype, "name", 2);
__decorateClass([
property()
], SynCombobox.prototype, "value", 2);
__decorateClass([
defaultValue()
], SynCombobox.prototype, "defaultValue", 2);
__decorateClass([
property({ reflect: true })
], SynCombobox.prototype, "size", 2);
__decorateClass([
property()
], SynCombobox.prototype, "placeholder", 2);
__decorateClass([
property({ reflect: true, type: Boolean })
], SynCombobox.prototype, "disabled", 2);
__decorateClass([
property({ type: Boolean })
], SynCombobox.prototype, "clearable", 2);
__decorateClass([
property({ reflect: true, type: Boolean })
], SynCombobox.prototype, "open", 2);
__decorateClass([
property({ type: Boolean })
], SynCombobox.prototype, "hoist", 2);
__decorateClass([
property()
], SynCombobox.prototype, "label", 2);
__decorateClass([
property({ reflect: true })
], SynCombobox.prototype, "placement", 2);
__decorateClass([
property({ attribute: "help-text" })
], SynCombobox.prototype, "helpText", 2);
__decorateClass([
property({ reflect: true })
], SynCombobox.prototype, "form", 2);
__decorateClass([
property({ reflect: true, type: Boolean })
], SynCombobox.prototype, "required", 2);
__decorateClass([
property({ reflect: true, type: Boolean })
], SynCombobox.prototype, "restricted", 2);
__decorateClass([
property()
], SynCombobox.prototype, "getOption", 2);
__decorateClass([
property()
], SynCombobox.prototype, "filter", 2);
__decorateClass([
watch(["filter", "getOption"], { waitUntilFirstUpdate: true })
], SynCombobox.prototype, "handlePropertiesChange", 1);
__decorateClass([
watch("disabled", { waitUntilFirstUpdate: true })
], SynCombobox.prototype, "handleDisabledChange", 1);
__decorateClass([
watch("value", { waitUntilFirstUpdate: true })
], SynCombobox.prototype, "handleValueChange", 1);
__decorateClass([
watch("open", { waitUntilFirstUpdate: true })
], SynCombobox.prototype, "handleOpenChange", 1);
SynCombobox = __decorateClass([
enableDefaultSettings("SynCombobox")
], SynCombobox);
setDefaultAnimation("combobox.show", {
keyframes: [
{ opacity: 0, scale: 0.9 },
{ opacity: 1, scale: 1 }
],
options: { duration: 100, easing: "ease" }
});
setDefaultAnimation("combobox.hide", {
keyframes: [
{ opacity: 1, scale: 1 },
{ opacity: 0, scale: 0.9 }
],
options: { duration: 100, easing: "ease" }
});
export {
SynCombobox
};
//# sourceMappingURL=chunk.RG723DJS.js.map