@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
1,063 lines (1,062 loc) • 42.2 kB
JavaScript
/*!
* KoliBri - The accessible HTML-Standard
*/
import { __decorate } from "tslib";
import { h } from "@stencil/core";
import { KolButtonWcTag } from "../../core/component-names";
import { getRenderStates } from "../../functional-component-wrappers/_helpers/getRenderStates";
import KolFormFieldStateWrapperFc from "../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper";
import KolInputContainerFc from "../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper";
import KolInputStateWrapperFc from "../../functional-component-wrappers/InputStateWrapper/InputStateWrapper";
import CustomSuggestionsOptionFc from "../../functional-components/CustomSuggestionsOption/CustomSuggestionsOption";
import CustomSuggestionsOptionsGroupFc from "../../functional-components/CustomSuggestionsOptionsGroup";
import { translate } from "../../i18n";
import { IconFC } from "../../internal/functional-components/icon/component";
import clsx from "../../utils/clsx";
import { createUniqueId } from "../../utils/dev.utils";
import { createCtaRef, delegateClick, delegateFocus } from "../../utils/element-interaction";
import { ComboboxController } from "./controller";
export class KolCombobox {
async getValue() {
return this.state._value;
}
async focus() { }
async click() { }
selectOption(option) {
var _a;
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail: { name: this.state._name, value: option } }), true, option);
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail: { name: this.state._name, value: option } }), option);
this.controller.setFormAssociatedValue(option);
this._filteredSuggestions = [...this.state._suggestions];
this.state._value = option;
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
}
clearSelection() {
var _a;
const isDisabled = this.state._disabled === true;
if (isDisabled) {
return;
}
const emptyValue = '';
this._focusedOptionIndex = -1;
this._value = emptyValue;
this.state._value = emptyValue;
this._filteredSuggestions = [...this.state._suggestions];
this._isOpen = false;
const detail = { name: this.state._name, value: emptyValue };
this.controller.onFacade.onInput(new CustomEvent('input', { bubbles: true, detail }), true, emptyValue);
this.controller.onFacade.onChange(new CustomEvent('change', { bubbles: true, detail }), emptyValue);
this.controller.setFormAssociatedValue(emptyValue);
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
}
onInput(event) {
const target = event.target;
this.state._value = target.value;
this._value = target.value;
this.controller.onFacade.onInput(event);
this.setFilteredSuggestionsByQuery(target.value);
this._focusedOptionIndex = -1;
}
handleKeyDownDropdown(event) {
if (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {
this._isOpen = true;
this.focusSuggestionStartingWith(event.key);
}
}
setFilteredSuggestionsByQuery(query) {
var _a;
if (query === undefined) {
return;
}
if (query.trim() === '') {
this._filteredSuggestions = [...this.state._suggestions];
}
else {
this._filteredSuggestions = Array.isArray(this.state._suggestions)
? this.state._suggestions.filter((option) => {
return option.toLowerCase().includes(query.trim().toLowerCase());
})
: this._filteredSuggestions;
if (((_a = this._filteredSuggestions) === null || _a === void 0 ? void 0 : _a.length) === 1 && this._filteredSuggestions[0] === query) {
this._isOpen = false;
}
else if (this._filteredSuggestions && this._filteredSuggestions.length > 0) {
this._isOpen = true;
}
else {
this._isOpen = false;
}
}
}
moveFocus(delta) {
if (!this._filteredSuggestions) {
return;
}
let newIndex = this._focusedOptionIndex + delta;
if (newIndex >= this._filteredSuggestions.length) {
newIndex = 0;
}
if (newIndex < 0) {
newIndex = this._filteredSuggestions.length - 1;
}
this.focusOption(newIndex);
}
focusOption(index) {
this._focusedOptionIndex = index;
if (this.refSuggestions) {
const optionElement = this.refSuggestions[index];
optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
}
}
selectFocusedOption() {
if (this._filteredSuggestions && this._focusedOptionIndex >= 0 && this._focusedOptionIndex < this._filteredSuggestions.length) {
this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]);
return true;
}
return false;
}
focusSuggestionStartingWith(char) {
const charLowerCase = char.toLowerCase();
const index = Array.isArray(this._filteredSuggestions) &&
this._filteredSuggestions.length > 0 &&
this._filteredSuggestions.findIndex((option) => option.toLowerCase().startsWith(charLowerCase));
if (typeof index === 'number') {
this.focusOption(index);
}
}
getFormFieldProps() {
return {
state: this.state,
class: clsx('kol-combobox', {
'has-value': this.state._hasValue,
}),
tooltipAlign: this._tooltipAlign,
alert: this.showAsAlert(),
};
}
getInputProps() {
const { ariaDescribedBy } = getRenderStates(this.state);
const isDisabled = this.state._disabled === true;
return Object.assign(Object.assign({ ref: this.ctaRef, state: this.state, class: 'kol-combobox__input', type: 'text', role: 'combobox', 'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined, 'aria-autocomplete': 'both', 'aria-controls': this.state._id + '-listbox', 'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined, 'aria-expanded': this._isOpen ? 'true' : 'false', 'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined, 'aria-labelledby': this.state._id + '-label', 'aria-keyshortcuts': this.state._shortKey, value: this.state._value, accessKey: this.state._accessKey, autocapitalize: 'off', autocorrect: 'off', disabled: isDisabled, customSuggestions: true, id: this.state._id, name: this.state._name, required: this.state._required }, this.controller.onFacade), { onChange: this.onChange.bind(this), onInput: this.onInput.bind(this), placeholder: this.state._placeholder });
}
render() {
const isDisabled = this.state._disabled === true;
return (h(KolFormFieldStateWrapperFc, Object.assign({ key: 'd40cc02f6a681ae8e0f6e67e73ef77f097604d42' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '335b385682f97b5de3a92a569e2f536438001b82', state: this.state }, h("div", { key: 'a2980ac0e3089745472544c6542b3fe9c483dd2b', class: "kol-combobox__group" }, h(KolInputStateWrapperFc, Object.assign({ key: 'e826b131ca765cf94d735529c00bacd3b838584f' }, this.getInputProps())), this.state._value && this.state._hasClearButton && (h(KolButtonWcTag, { key: '31af956f8bbe0a487632f754d6dcfe223187898b', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "combobox-delete", class: "kol-combobox__delete", hidden: isDisabled, _on: {
onClick: () => {
this.clearSelection();
},
onFocus: () => {
this.clearButtonFocused = true;
},
onBlur: () => {
this.clearButtonFocused = false;
},
} })), h("button", { key: '071132d137881c0fa4cb2fe24c5233c6ad3d6b28', type: "button", tabIndex: -1, class: "kol-combobox-toggle", onClick: this.toggleListbox.bind(this), disabled: this._disabled, hidden: isDisabled }, h(IconFC, { key: '3497d9c30eb58675b33ee840564e7d5c2c4e59be', icons: "kolicon-chevron-down", label: "" }))), h(CustomSuggestionsOptionsGroupFc, { key: 'df461d34efb6db64a8f88998db27b5dc205d8023', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredSuggestions) &&
this._filteredSuggestions.length > 0 &&
this._filteredSuggestions.map((option, index) => (h(CustomSuggestionsOptionFc, { disabled: false, index: index, option: option, searchTerm: this.state._value, ref: (el) => {
if (el)
this.refSuggestions[index] = el;
}, selected: this.state._value === option, onClick: () => {
this.selectOption(option);
this.toggleListbox();
this._isOpen = false;
}, onMouseOver: () => {
if (!this.blockSuggestionMouseOver) {
this.focusOption(index);
}
}, onFocus: () => {
this.focusOption(index);
} })))))));
}
handleKeyDown(event) {
var _a, _b;
const handleEvent = (isOpen, callback) => {
var _a;
event.preventDefault();
if (isOpen !== undefined) {
this._isOpen = isOpen;
if (!isOpen) {
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
}
}
callback === null || callback === void 0 ? void 0 : callback();
};
switch (event.key) {
case 'Down':
case 'ArrowDown': {
this.blockSuggestionMouseOver = true;
handleEvent(true, () => this.moveFocus(1));
break;
}
case 'Up':
case 'ArrowUp': {
this.blockSuggestionMouseOver = true;
handleEvent(true, () => this.moveFocus(-1));
break;
}
case 'Tab':
if (this._isOpen) {
this._isOpen = false;
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
}
break;
case 'Esc':
case 'Escape': {
this._isOpen = false;
event.preventDefault();
(_b = this.ctaRef.el) === null || _b === void 0 ? void 0 : _b.focus();
break;
}
case ' ':
case 'Enter':
case 'NumpadEnter': {
if (this.clearButtonFocused) {
this.clearSelection();
}
else if (this._isOpen) {
if (this.selectFocusedOption()) {
this._isOpen = false;
}
}
else {
this.toggleListbox();
}
event.preventDefault();
break;
}
case 'Space': {
if (this.clearButtonFocused) {
this.clearSelection();
}
break;
}
case 'Home': {
this.blockSuggestionMouseOver = true;
handleEvent(undefined, () => {
if (this._isOpen) {
this.focusOption(0);
}
});
break;
}
case 'End': {
this.blockSuggestionMouseOver = true;
handleEvent(undefined, () => {
if (this._isOpen) {
this.focusOption(this._filteredSuggestions ? this._filteredSuggestions.length - 1 : 0);
}
});
break;
}
case 'PageUp': {
this.blockSuggestionMouseOver = true;
handleEvent(undefined, () => this._isOpen && this.moveFocus(-10));
break;
}
case 'PageDown': {
this.blockSuggestionMouseOver = true;
handleEvent(undefined, () => this._isOpen && this.moveFocus(10));
break;
}
}
}
handleWindowClick(event) {
if (this.host !== undefined && !this.host.contains(event.target)) {
this._isOpen = false;
}
}
constructor() {
this.ctaRef = createCtaRef();
this.refSuggestions = [];
this._focusedOptionIndex = -1;
this.translateDeleteSelection = translate('kol-delete-selection');
this.clearButtonFocused = false;
this.toggleListbox = () => {
var _a;
const isDisabled = this.state._disabled === true;
if (isDisabled) {
this._isOpen = false;
}
else {
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
if (this._isOpen) {
this._isOpen = false;
}
else if (Array.isArray(this._filteredSuggestions) && this._filteredSuggestions.length > 0) {
this._isOpen = true;
const selectedIndex = this._filteredSuggestions.findIndex((option) => option === this.state._value);
this._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : -1;
this.focusOption(this._focusedOptionIndex);
}
}
};
this.blockSuggestionMouseOver = false;
this._isOpen = false;
this._disabled = false;
this._hideMsg = false;
this._hideLabel = false;
this._hint = '';
this._hasClearButton = true;
this._required = false;
this._tooltipAlign = 'top';
this._touched = false;
this.state = {
_hasValue: false,
_hasClearButton: true,
_hideMsg: false,
_id: createUniqueId('combobox'),
_label: '',
_suggestions: [],
_value: '',
};
this.inputHasFocus = false;
this.controller = new ComboboxController(this, 'combobox', this.host);
this.onInput = this.onInput.bind(this);
}
showAsAlert() {
return Boolean(this.state._touched) && !this.inputHasFocus;
}
validatePlaceholder(value) {
this.controller.validatePlaceholder(value);
}
validateAccessKey(value) {
this.controller.validateAccessKey(value);
}
validateDisabled(value) {
this.controller.validateDisabled(value);
}
validateHideMsg(value) {
this.controller.validateHideMsg(value);
}
validateHideLabel(value) {
this.controller.validateHideLabel(value);
}
validateHint(value) {
this.controller.validateHint(value);
}
validateIcons(value) {
this.controller.validateIcons(value);
}
validateLabel(value) {
this.controller.validateLabel(value);
}
validateMsg(value) {
this.controller.validateMsg(value);
}
validateName(value) {
this.controller.validateName(value);
}
validateOn(value) {
this.controller.validateOn(value);
}
validateShortKey(value) {
this.controller.validateShortKey(value);
}
validateSuggestions(value) {
this.controller.validateSuggestions(value);
this._filteredSuggestions = value;
this.setFilteredSuggestionsByQuery(this._value);
}
validateHasClearButton(value) {
this.controller.validateHasClearButton(value);
}
validateRequired(value) {
this.controller.validateRequired(value);
}
validateSyncValueBySelector(value) {
this.controller.validateSyncValueBySelector(value);
}
validateTouched(value) {
this.controller.validateTouched(value);
}
validateValue(value) {
this.controller.validateValue(value);
this.controller.setFormAssociatedValue(value);
}
validateVariant(value) {
this.controller.validateVariant(value);
}
componentWillLoad() {
this.refSuggestions = [];
this._touched = this._touched === true;
this.controller.componentWillLoad();
this.state._hasValue = !!this.state._value;
this.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));
this._filteredSuggestions = this.state._suggestions;
}
handleMouseEvent() {
this.blockSuggestionMouseOver = false;
}
handleFocusIn(event) {
setTimeout(() => {
var _a;
if (((_a = this.host) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement)) && !this.inputHasFocus) {
this.controller.onFacade.onFocus(event);
this.inputHasFocus = true;
}
});
}
handleFocusOut(event) {
setTimeout(() => {
var _a;
if (this.inputHasFocus && !((_a = this.host) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement))) {
this.controller.onFacade.onBlur(event);
this.inputHasFocus = false;
if (this._isOpen) {
this._isOpen = false;
}
}
});
}
onChange(event) {
this.controller.onFacade.onChange(event);
this.controller.setFormAssociatedValue(this.state._value);
}
static get is() { return "kol-combobox"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"default": ["./style.scss"]
};
}
static get styleUrls() {
return {
"default": ["style.css"]
};
}
static get properties() {
return {
"_accessKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the key combination that can be used to trigger or focus the component's interactive element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_access-key"
},
"_placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the placeholder for input field. To be shown when there's no value."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_placeholder"
},
"_disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Makes the element not focusable and ignore all events."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_disabled",
"defaultValue": "false"
},
"_hideMsg": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "TODO",
"text": ": Change type back to `HideMsgPropType` after Stencil#4663 has been resolved."
}],
"text": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_hide-msg",
"defaultValue": "false"
},
"_hideLabel": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "TODO",
"text": ": Change type back to `HideLabelPropType` after Stencil#4663 has been resolved."
}],
"text": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_hide-label",
"defaultValue": "false"
},
"_hint": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the hint text."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_hint",
"defaultValue": "''"
},
"_icons": {
"type": "string",
"mutable": false,
"complexType": {
"original": "IconsHorizontalPropType",
"resolved": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }",
"references": {
"IconsHorizontalPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::IconsHorizontalPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_icons"
},
"_label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "LabelWithExpertSlotPropType",
"resolved": "string",
"references": {
"LabelWithExpertSlotPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::LabelWithExpertSlotPropType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_label"
},
"_msg": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Stringified<MsgPropType>",
"resolved": "Omit<AlertProps, \"_on\" | \"_label\" | \"_level\" | \"_variant\" | \"_hasCloser\"> & { _description: string; } | string | undefined",
"references": {
"Stringified": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::Stringified"
},
"MsgPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::MsgPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the properties for a message rendered as Alert component."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_msg"
},
"_name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "NamePropType",
"resolved": "string | undefined",
"references": {
"NamePropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::NamePropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the technical name of an input field."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_name"
},
"_on": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "InputTypeOnDefault",
"resolved": "InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus & InputTypeOnInput & InputTypeOnKeyDown | undefined",
"references": {
"InputTypeOnDefault": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::InputTypeOnDefault"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Gibt die EventCallback-Funktionen f\u00FCr das Input-Event an."
},
"getter": false,
"setter": false
},
"_hasClearButton": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Shows the clear button if enabled."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_has-clear-button",
"defaultValue": "true"
},
"_suggestions": {
"type": "string",
"mutable": false,
"complexType": {
"original": "SuggestionsPropType",
"resolved": "W3CInputValue[] | string",
"references": {
"SuggestionsPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::SuggestionsPropType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Suggestions to provide for the input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_suggestions"
},
"_required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "TODO",
"text": ": Change type back to `RequiredPropType` after Stencil#4663 has been resolved."
}],
"text": "Makes the input element required."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_required",
"defaultValue": "false"
},
"_shortKey": {
"type": "string",
"mutable": false,
"complexType": {
"original": "ShortKeyPropType",
"resolved": "string | undefined",
"references": {
"ShortKeyPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::ShortKeyPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_short-key"
},
"_syncValueBySelector": {
"type": "string",
"mutable": false,
"complexType": {
"original": "SyncValueBySelectorPropType",
"resolved": "string | undefined",
"references": {
"SyncValueBySelectorPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::SyncValueBySelectorPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "internal",
"text": undefined
}],
"text": "Selector for synchronizing the value with another input element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_sync-value-by-selector"
},
"_tooltipAlign": {
"type": "string",
"mutable": false,
"complexType": {
"original": "TooltipAlignPropType",
"resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
"references": {
"TooltipAlignPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::TooltipAlignPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines where to show the Tooltip preferably: top, right, bottom or left."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_tooltip-align",
"defaultValue": "'top'"
},
"_touched": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "TODO",
"text": ": Change type back to `TouchedPropType` after Stencil#4663 has been resolved."
}],
"text": "Shows if the input was touched by a user."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "_touched",
"defaultValue": "false"
},
"_value": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the value of the element."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "_value"
},
"_variant": {
"type": "string",
"mutable": false,
"complexType": {
"original": "VariantClassNamePropType",
"resolved": "string | undefined",
"references": {
"VariantClassNamePropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::VariantClassNamePropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines which variant should be used for presentation."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_variant"
}
};
}
static get states() {
return {
"blockSuggestionMouseOver": {},
"_isOpen": {},
"_filteredSuggestions": {},
"state": {},
"inputHasFocus": {}
};
}
static get methods() {
return {
"getValue": {
"complexType": {
"signature": "() => Promise<string>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<string>"
},
"docs": {
"text": "Returns the current value.",
"tags": []
}
},
"focus": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Sets focus on the internal element.",
"tags": []
}
},
"click": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Clicks the primary interactive element inside this component.",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
static get watchers() {
return [{
"propName": "_placeholder",
"methodName": "validatePlaceholder"
}, {
"propName": "_accessKey",
"methodName": "validateAccessKey"
}, {
"propName": "_disabled",
"methodName": "validateDisabled"
}, {
"propName": "_hideMsg",
"methodName": "validateHideMsg"
}, {
"propName": "_hideLabel",
"methodName": "validateHideLabel"
}, {
"propName": "_hint",
"methodName": "validateHint"
}, {
"propName": "_icons",
"methodName": "validateIcons"
}, {
"propName": "_label",
"methodName": "validateLabel"
}, {
"propName": "_msg",
"methodName": "validateMsg"
}, {
"propName": "_name",
"methodName": "validateName"
}, {
"propName": "_on",
"methodName": "validateOn"
}, {
"propName": "_shortKey",
"methodName": "validateShortKey"
}, {
"propName": "_suggestions",
"methodName": "validateSuggestions"
}, {
"propName": "_hasClearButton",
"methodName": "validateHasClearButton"
}, {
"propName": "_required",
"methodName": "validateRequired"
}, {
"propName": "_syncValueBySelector",
"methodName": "validateSyncValueBySelector"
}, {
"propName": "_touched",
"methodName": "validateTouched"
}, {
"propName": "_value",
"methodName": "validateValue"
}, {
"propName": "_variant",
"methodName": "validateVariant"
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "click",
"method": "handleWindowClick",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "mousemove",
"method": "handleMouseEvent",
"target": undefined,
"capture": false,
"passive": true
}, {
"name": "focusin",
"method": "handleFocusIn",
"target": undefined,
"capture": false,
"passive": false
}, {
"name": "focusout",
"method": "handleFocusOut",
"target": undefined,
"capture": false,
"passive": false
}];
}
}
__decorate([
delegateFocus('ctaRef')
], KolCombobox.prototype, "focus", null);
__decorate([
delegateClick('ctaRef')
], KolCombobox.prototype, "click", null);
//# sourceMappingURL=shadow.js.map