@public-ui/components
Version:
Contains all web components that belong to KoliBri - The accessible HTML-Standard.
1,164 lines (1,163 loc) • 46.5 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, delegateFocus } from "../../utils/element-interaction";
import { SingleSelectController } from "./controller";
export class KolSingleSelect {
async getValue() {
return this._value;
}
async focus() { }
onBlur() {
var _a, _b;
const matchingOption = (_a = this.state._options) === null || _a === void 0 ? void 0 : _a.find((option) => { var _a, _b; return ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === ((_b = this._inputValue) === null || _b === void 0 ? void 0 : _b.toLowerCase()); });
if (matchingOption) {
this.selectOption(matchingOption);
}
else if (this._value !== null && this._value !== undefined) {
this._filteredOptions = [...((_b = this.state._options) !== null && _b !== void 0 ? _b : [])];
}
}
createEventWithTarget(type, detail) {
const event = new CustomEvent(type, {
bubbles: true,
detail,
});
if (this.ctaRef.el) {
Object.defineProperty(event, 'target', {
value: this.ctaRef.el,
});
Object.defineProperty(event, 'currentTarget', {
value: this.ctaRef.el,
});
}
return event;
}
clearSelection() {
var _a;
if (this.state._disabled) {
return;
}
const emptyValue = null;
this._focusedOptionIndex = -1;
this._value = emptyValue;
this._inputValue = '';
this._filteredOptions = [...this.state._options];
const inputEvent = this.createEventWithTarget('input', {
name: this.state._name,
value: emptyValue,
});
const changeEvent = this.createEventWithTarget('change', {
name: this.state._name,
value: emptyValue,
});
this.controller.onFacade.onInput(inputEvent, true, { value: emptyValue });
this.controller.onFacade.onChange(changeEvent, { value: emptyValue });
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
this._isOpen = true;
}
selectOption(option) {
var _a, _b;
if (option.value === this._value) {
this._inputValue = option.label;
this._filteredOptions = [...this.state._options];
return;
}
this._value = option.value;
this._inputValue = option.label;
const inputEvent = this.createEventWithTarget('input', {
name: (_a = this.state._name) !== null && _a !== void 0 ? _a : '',
value: option.value,
});
const changeEvent = this.createEventWithTarget('change', {
name: (_b = this.state._name) !== null && _b !== void 0 ? _b : '',
value: option.value,
});
this.controller.onFacade.onInput(inputEvent, false, option.value);
this.controller.onFacade.onChange(changeEvent, option.value);
this._filteredOptions = [...this.state._options];
this.controller.setFormAssociatedValue(this._value);
}
onInput(event) {
const target = event.target;
this._inputValue = target.value;
this._isOpen = true;
this.setFilteredOptionsByQuery(target.value);
this._focusedOptionIndex = -1;
}
handleKeyDownDropdown(event) {
if (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {
event.preventDefault();
this._isOpen = true;
this.focusSuggestionStartingWith(event.key);
}
}
setFilteredOptionsByQuery(query) {
if (query === undefined) {
return;
}
if ((query === null || query === void 0 ? void 0 : query.trim()) === '') {
this._filteredOptions = [...this.state._options];
}
else if (Array.isArray(this.state._options) && this.state._options.length > 0 && query.length > 0) {
this._filteredOptions = this.state._options.filter((option) => {
var _a, _b;
return (_b = (_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(query === null || query === void 0 ? void 0 : query.toLowerCase());
});
}
}
moveFocus(delta) {
if (!this._filteredOptions) {
return;
}
let newIndex = this._focusedOptionIndex + delta;
let iterations = 0;
let foundEnabledOption = false;
const maxIterations = this._filteredOptions.length;
while (iterations < maxIterations) {
if (newIndex >= this._filteredOptions.length) {
newIndex = 0;
}
if (newIndex < 0) {
newIndex = this._filteredOptions.length - 1;
}
const option = this._filteredOptions[newIndex];
if (!option.disabled) {
foundEnabledOption = true;
break;
}
newIndex += delta;
iterations++;
}
if (foundEnabledOption) {
this._focusedOptionIndex = newIndex;
this.focusOption(this._focusedOptionIndex);
}
}
focusOption(index) {
if (this.refOptions) {
const optionElement = this.refOptions[index];
optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
}
}
selectFocusedOption() {
if (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 && this._focusedOptionIndex >= 0) {
this.selectOption(this._filteredOptions[this._focusedOptionIndex]);
return true;
}
return false;
}
focusSuggestionStartingWith(char) {
const charLowerCase = char.toLowerCase();
const index = Array.isArray(this._filteredOptions) &&
this._filteredOptions.findIndex((option) => option.label.toLowerCase().startsWith(charLowerCase) && !option.disabled);
if (typeof index === 'number' && index >= 0) {
this._focusedOptionIndex = index;
this.focusOption(index);
}
}
getFormFieldProps() {
return {
state: this.state,
class: 'kol-single-select',
tooltipAlign: this._tooltipAlign,
alert: this.showAsAlert(),
};
}
getInputProps() {
const { ariaDescribedBy } = getRenderStates(this.state);
const isDisabled = this.state._disabled === true;
return Object.assign(Object.assign({ '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, accessKey: this.state._accessKey, autocapitalize: 'off', autocorrect: 'off', class: 'kol-single-select__input', disabled: isDisabled, name: this.state._name, placeholder: this.state._placeholder, ref: this.ctaRef, required: this.state._required, role: 'combobox', state: this.state, type: 'text', value: this._inputValue }, this.controller.onFacade), { onChange: this.onChange.bind(this), onClick: this.onClick.bind(this), onInput: this.onInput.bind(this), onBlur: () => {
this.onBlur();
} });
}
render() {
var _a;
const isDisabled = this.state._disabled === true;
return (h(KolFormFieldStateWrapperFc, Object.assign({ key: '8e3e19922baa5e7f6501da6666758ce2021b59c9' }, this.getFormFieldProps()), h(KolInputContainerFc, { key: '206902ed286674c301d26f0f57db149cecda6d6f', state: this.state }, h("div", { key: '70bdda576df36b7e1c154757aa6aaddf13ed4776', class: "kol-single-select__group" }, h(KolInputStateWrapperFc, Object.assign({ key: '88dbcf20d0bd40d98d44b0736b7619fa3592a937' }, this.getInputProps())), this._inputValue && this.state._hasClearButton && (h(KolButtonWcTag, { key: '082ed8710605d9cf6b2a05ced94d48956f33fc59', _icons: "kolicon-cross", _label: this.translateDeleteSelection, _hideLabel: true, _variant: "ghost", _disabled: isDisabled, "data-testid": "single-select-delete", class: "kol-single-select__delete", hidden: isDisabled, _on: {
onClick: () => {
var _a;
this.clearSelection();
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
},
onFocus: () => {
this.clearButtonFocused = true;
},
onBlur: () => {
this.clearButtonFocused = false;
},
} })), h(IconFC, { key: '6b4be5258ecd8a69970f6dd27a81fc245ad51f97', icons: "kolicon-chevron-down", label: "", class: clsx('kol-custom-suggestions-toggle', {
'kol-custom-suggestions-toggle--disabled': isDisabled,
}), onClick: this.toggleListbox.bind(this) })), h(CustomSuggestionsOptionsGroupFc, { key: '1bddbbfd4d8ac09166b0aedd4f3e54d13584f228', blockSuggestionMouseOver: this.blockSuggestionMouseOver, onKeyDown: this.handleKeyDownDropdown.bind(this), style: { '--visible-options': `${(_a = this._rows) !== null && _a !== void 0 ? _a : 5}` }, hidden: !this._isOpen || isDisabled, id: this.state._id + '-listbox' }, Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (this._filteredOptions.map((option, index) => (h(CustomSuggestionsOptionFc, { index: index, option: option.label, searchTerm: this._inputValue, ref: (el) => {
if (el)
this.refOptions[index] = el;
}, selected: this._value === option.value, disabled: option.disabled ? true : false, onClick: (event) => {
var _a;
if (option.disabled) {
return;
}
this.selectOption(option);
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
this.toggleListbox(event);
this._isOpen = false;
}, onMouseOver: () => {
if (!this.blockSuggestionMouseOver) {
this._focusedOptionIndex = index;
this.focusOption(index);
}
}, onFocus: () => {
if (!option.disabled) {
this._focusedOptionIndex = index;
this.focusOption(index);
}
}, onKeyDown: (e) => {
var _a;
if (option.disabled) {
return;
}
if (e.key === 'Enter' || e.key === 'NumpadEnter') {
this.selectOption(option);
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
this.toggleListbox(e);
e.preventDefault();
}
} })))) : (h("li", { class: "kol-single-select__no-results-message", role: "alert" }, this.translateNoResultsMessage, ' '))))));
}
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 = !this._isOpen;
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
}
break;
case 'Esc':
case 'Escape': {
this._isOpen = false;
handleEvent(false);
break;
}
case ' ':
case 'Enter':
case 'NumpadEnter': {
if (this.clearButtonFocused) {
this.clearSelection();
event.preventDefault();
}
else if (this._isOpen) {
if (this.selectFocusedOption()) {
(_b = this.ctaRef.el) === null || _b === void 0 ? void 0 : _b.focus();
handleEvent(false);
}
}
else {
this.toggleListbox(event);
}
break;
}
case 'Home': {
this.blockSuggestionMouseOver = true;
handleEvent(undefined, () => {
if (this._isOpen) {
this._focusedOptionIndex = 0;
this.focusOption(this._focusedOptionIndex);
}
});
break;
}
case 'End': {
this.blockSuggestionMouseOver = true;
handleEvent(undefined, () => {
if (this._isOpen) {
this._focusedOptionIndex = this._filteredOptions ? this._filteredOptions.length - 1 : 0;
this.focusOption(this._focusedOptionIndex);
}
});
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;
}
}
}
constructor() {
this.ctaRef = createCtaRef();
this.refOptions = [];
this.translateDeleteSelection = translate('kol-delete-selection');
this.translateNoResultsMessage = translate('kol-no-results-message');
this.clearButtonFocused = false;
this.toggleListbox = (event) => {
var _a;
event === null || event === void 0 ? void 0 : event.preventDefault();
const isDisabled = this.state._disabled === true;
if (isDisabled) {
return;
}
else {
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
if (this._isOpen) {
this._isOpen = false;
}
else {
this._isOpen = true;
const selectedIndex = Array.isArray(this._filteredOptions) ? this._filteredOptions.findIndex((option) => option.label === this._inputValue) : -1;
this._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : -1;
this.focusOption(this._focusedOptionIndex);
}
}
};
this._focusedOptionIndex = -1;
this._isOpen = false;
this._filteredOptions = [];
this._inputValue = '';
this.blockSuggestionMouseOver = false;
this._disabled = false;
this._hideMsg = false;
this._hideLabel = false;
this._hint = '';
this._required = false;
this._tooltipAlign = 'top';
this._touched = false;
this._value = null;
this._hasClearButton = true;
this.state = {
_hideMsg: false,
_id: createUniqueId('single-select'),
_label: '',
_options: [],
_hasClearButton: true,
};
this.inputHasFocus = false;
this.controller = new SingleSelectController(this, 'single-select', this.host);
}
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);
}
validateOptions(value) {
var _a;
this.controller.validateOptions(value);
this._filteredOptions = [...((_a = this.state._options) !== null && _a !== void 0 ? _a : [])];
if (this._isOpen) {
this.setFilteredOptionsByQuery(this._inputValue);
}
else {
this.updateInputValue(this._value);
}
}
validateRequired(value) {
this.controller.validateRequired(value);
}
validateShortKey(value) {
this.controller.validateShortKey(value);
}
validateSyncValueBySelector(value) {
this.controller.validateSyncValueBySelector(value);
}
validateTouched(value) {
this.controller.validateTouched(value);
}
validateValue(value) {
this.controller.validateValue(value);
this.oldValue = value;
this.updateInputValue(value);
}
validateHasClearButton(value) {
this.controller.validateHasClearButton(value);
}
validateRows(value) {
this.controller.validateRows(value);
}
validateVariant(value) {
this.controller.validateVariant(value);
}
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) {
this.onBlur();
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;
this._isOpen = false;
}
});
}
updateInputValue(value) {
var _a;
const matchedOption = (_a = this.state._options) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === value);
this._inputValue = matchedOption ? String(matchedOption.label) : '';
}
componentWillLoad() {
this.refOptions = [];
this._touched = this._touched === true;
this.controller.componentWillLoad();
this.oldValue = this._value;
this._filteredOptions = this.state._options;
this.updateInputValue(this._value);
}
onChange(event) {
var _a, _b;
if (this.oldValue !== ((_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.value)) {
this.oldValue = (_b = this.ctaRef.el) === null || _b === void 0 ? void 0 : _b.value;
}
if (!this._isOpen) {
this.controller.onFacade.onChange(event, this._value);
}
}
onClick(event) {
var _a;
this.toggleListbox(event);
(_a = this.ctaRef.el) === null || _a === void 0 ? void 0 : _a.focus();
this.controller.onFacade.onClick(event);
}
static get is() { return "kol-single-select"; }
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
},
"_options": {
"type": "string",
"mutable": false,
"complexType": {
"original": "OptionsPropType",
"resolved": "Option<StencilUnknown>[] | string",
"references": {
"OptionsPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::OptionsPropType"
}
}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Options the user can choose from."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_options"
},
"_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": "any",
"mutable": true,
"complexType": {
"original": "StencilUnknown",
"resolved": "boolean | null | number | object | string | undefined",
"references": {
"StencilUnknown": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::StencilUnknown"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Defines the value of the element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_value",
"defaultValue": "null"
},
"_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"
},
"_rows": {
"type": "number",
"mutable": false,
"complexType": {
"original": "RowsPropType",
"resolved": "number | undefined",
"references": {
"RowsPropType": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::RowsPropType"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Maximum number of visible rows of the element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "_rows"
},
"_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 {
"_isOpen": {},
"_filteredOptions": {},
"_inputValue": {},
"blockSuggestionMouseOver": {},
"state": {},
"inputHasFocus": {}
};
}
static get methods() {
return {
"getValue": {
"complexType": {
"signature": "() => Promise<StencilUnknown>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
},
"StencilUnknown": {
"location": "import",
"path": "../../schema",
"id": "src/schema/index.ts::StencilUnknown"
}
},
"return": "Promise<StencilUnknown>"
},
"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": []
}
}
};
}
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": "_options",
"methodName": "validateOptions"
}, {
"propName": "_required",
"methodName": "validateRequired"
}, {
"propName": "_shortKey",
"methodName": "validateShortKey"
}, {
"propName": "_syncValueBySelector",
"methodName": "validateSyncValueBySelector"
}, {
"propName": "_touched",
"methodName": "validateTouched"
}, {
"propName": "_value",
"methodName": "validateValue"
}, {
"propName": "_hasClearButton",
"methodName": "validateHasClearButton"
}, {
"propName": "_rows",
"methodName": "validateRows"
}, {
"propName": "_variant",
"methodName": "validateVariant"
}];
}
static get listeners() {
return [{
"name": "keydown",
"method": "handleKeyDown",
"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')
], KolSingleSelect.prototype, "focus", null);
//# sourceMappingURL=shadow.js.map