@public-ui/components 2.2.16-rc.1 → 2.2.16-rc.2

package/dist/kolibri/kol-select.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","options","find","option","Array","isArray","undefined","filterValuesInOptions","values","filter","afterPatchOptions","_state","_component","setFormAssociatedValue","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","validateOptions","validateOptionsWithOptgroup","hooks","afterPatch","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","componentWillLoad","_required","_rows","defaultStyleCss","KolSelectDefaultStyle0","isSelected","valueList","optionValue","includes","KolSelect","getValue","focus","kolFocus","_a","selectRef","renderOptgroup","optgroup","preKey","h","disabled","label","map","index","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","Host","class","_hasValue","KolInputTag","_hideLabel","select","_accessKey","_alert","showAsAlert","_disabled","_hideError","_hint","_icons","_id","_msg","_shortKey","_tooltipAlign","_touched","onClick","role","slot","Fragment","InternalUnderlinedBadgeText","badgeText","buildBadgeTextString","onSubmit","event","preventDefault","propagateSubmitEventToForm","form","ref","type","hidden","Object","assign","catchRef","title","accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","controller","onFacade","onInput","bind","onChange","onFocus","inputHasFocus","onBlur","hostRef","nonce","Boolean","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched","addValueChangeListener","v","from","tryToDispatchKoliBriEvent","_c","_b","_on","call","stopPropagation"],"sources":["src/components/select/controller.ts","src/components/select/style.scss?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/shadow.tsx"],"sourcesContent":["import type {\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectOption,\n\tSelectProps,\n\tSelectWatches,\n\tStringified,\n\tW3CInputValue,\n} from '../../schema';\nimport { validateOptionsWithOptgroup, validateRows, watchBoolean, watchJsonArrayString } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class SelectController extends InputIconController implements SelectWatches {\n\tprotected readonly component: Generic.Element.Component & SelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & SelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t\t: false,\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprivate readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[],\n\t\t\t);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\toptions[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Currently, multiple selection is not yet supported. We are working on implementing it to be functional, as there are some gaps in the browser standard.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] For multiple selections, the list length (size) should also be set.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@use '../style' as *;\n@use '../input-line' as *;\n\n@layer kol-component {\n\toption:checked::before {\n\t\tcontent: '✓ ';\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tFocusableElement,\n\tHideErrorPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectAPI,\n\tSelectOption,\n\tSelectStates,\n\tShortKeyPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { buildBadgeTextString, showExpertSlot } from '../../schema';\n\nimport { KolInputTag } from '../../core/component-names';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';\nimport { SelectController } from './controller';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate selectRef?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.selectRef = ref;\n\t};\n\n\t/**\n\t * Returns the selected values.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<W3CInputValue[]> | undefined> {\n\t\treturn this.state._value;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t/**\n\t * Focuses the select element.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.selectRef?.focus();\n\t}\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'kol-select': true, 'has-value': this.state._hasValue }}>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_alert={this.showAsAlert()}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_shortKey={this.state._shortKey}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.selectRef?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<kbd class=\"badge-text-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}\n\t\t\t\t\t\t\t\t</kbd>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<form\n\t\t\t\t\t\t\tonSubmit={(event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tpropagateSubmitEventToForm({\n\t\t\t\t\t\t\t\t\tform: this.host,\n\t\t\t\t\t\t\t\t\tref: this.selectRef,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<input type=\"submit\" hidden />\n\t\t\t\t\t\t\t<select\n\t\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\t\t// removed the aria-hidden attribute because the browser caused errors and ignores it\n\t\t\t\t\t\t\t\t\t\t\t\t// see also:\n\t\t\t\t\t\t\t\t\t\t\t\t// - https://github.com/public-ui/kolibri/issues/7755\n\t\t\t\t\t\t\t\t\t\t\t\t// - https://github.com/public-ui/public-ui.github.io/issues/336\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * 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.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options!: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: SelectStates = {\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onInput(event: Event): void {\n\t\tthis._value = Array.from(this.selectRef?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\t// Event handling\n\t\ttryToDispatchKoliBriEvent('input', this.host, this._value);\n\n\t\t// Callback\n\t\tthis.state._on?.onInput?.(event, this._value);\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\n\t\tthis.state._on?.onChange?.(event, this._value);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","options","find","option","Array","isArray","undefined","filterValuesInOptions","values","filter","afterPatchOptions","_state","_component","setFormAssociatedValue","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","validateOptions","validateOptionsWithOptgroup","hooks","afterPatch","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","componentWillLoad","_required","_rows","defaultStyleCss","KolSelectDefaultStyle0","isSelected","valueList","optionValue","includes","KolSelect","getValue","focus","kolFocus","_a","selectRef","renderOptgroup","optgroup","preKey","h","disabled","label","map","index","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","Host","class","_hasValue","KolInputTag","_hideLabel","select","_accessKey","_alert","showAsAlert","_disabled","_hideError","_hint","_icons","_id","_msg","_shortKey","_tooltipAlign","_touched","onClick","role","slot","Fragment","InternalUnderlinedBadgeText","badgeText","buildBadgeTextString","onSubmit","event","preventDefault","propagateSubmitEventToForm","form","ref","type","hidden","Object","assign","catchRef","title","accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","controller","onFacade","onInput","bind","onChange","onFocus","inputHasFocus","onBlur","hostRef","nonce","Boolean","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched","addValueChangeListener","v","from","tryToDispatchKoliBriEvent","_c","_b","_on","call","stopPropagation"],"sources":["src/components/select/controller.ts","src/components/select/style.scss?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/shadow.tsx"],"sourcesContent":["import type {\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectOption,\n\tSelectProps,\n\tSelectWatches,\n\tStringified,\n\tW3CInputValue,\n} from '../../schema';\nimport { validateOptionsWithOptgroup, validateRows, watchBoolean, watchJsonArrayString } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class SelectController extends InputIconController implements SelectWatches {\n\tprotected readonly component: Generic.Element.Component & SelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & SelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t\t: false,\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprivate readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[],\n\t\t\t);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\toptions[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Currently, multiple selection is not yet supported. We are working on implementing it to be functional, as there are some gaps in the browser standard.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] For multiple selections, the list length (size) should also be set.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@use '../style' as *;\n@use '../input-line' as *;\n\n@layer kol-component {\n\toption:checked::before {\n\t\tcontent: '✓ ';\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tFocusableElement,\n\tHideErrorPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectAPI,\n\tSelectOption,\n\tSelectStates,\n\tShortKeyPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { buildBadgeTextString, showExpertSlot } from '../../schema';\n\nimport { KolInputTag } from '../../core/component-names';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';\nimport { SelectController } from './controller';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate selectRef?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.selectRef = ref;\n\t};\n\n\t/**\n\t * Returns the selected values.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<W3CInputValue[]> | undefined> {\n\t\treturn this.state._value;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t/**\n\t * Focuses the select element.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.selectRef?.focus();\n\t}\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'kol-select': true, 'has-value': this.state._hasValue }}>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_alert={this.showAsAlert()}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_shortKey={this.state._shortKey}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.selectRef?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<kbd class=\"badge-text-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}\n\t\t\t\t\t\t\t\t</kbd>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<form\n\t\t\t\t\t\t\tonSubmit={(event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tpropagateSubmitEventToForm({\n\t\t\t\t\t\t\t\t\tform: this.host,\n\t\t\t\t\t\t\t\t\tref: this.selectRef,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<input type=\"submit\" hidden />\n\t\t\t\t\t\t\t<select\n\t\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-keyshortcuts={this.state._shortKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\t\t// removed the aria-hidden attribute because the browser caused errors and ignores it\n\t\t\t\t\t\t\t\t\t\t\t\t// see also:\n\t\t\t\t\t\t\t\t\t\t\t\t// - https://github.com/public-ui/kolibri/issues/7755\n\t\t\t\t\t\t\t\t\t\t\t\t// - https://github.com/public-ui/public-ui.github.io/issues/336\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component’s interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * 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.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options!: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: SelectStates = {\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onInput(event: Event): void {\n\t\tthis._value = Array.from(this.selectRef?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\t// Event handling\n\t\ttryToDispatchKoliBriEvent('input', this.host, this._value);\n\n\t\t// Callback\n\t\tthis.state._on?.onInput?.(event, this._value);\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\n\t\tthis.state._on?.onChange?.(event, this._value);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/kolibri/kol-single-select.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as i,r as n,g as s}from"./index-e850ccc2.js";import{j as o,w as a,y as l,F as r,A as d,B as h}from"./index-7a63e9eb.js";import{c}from"./clsx-09a06a12.js";import{l as u,g as p}from"./component-names-4cb1c62b.js";import{t as f}from"./i18n-3dd5729d.js";import{n as b}from"./dev.utils-da85e627.js";import{t as v}from"./events-29e84d75.js";import{g as m}from"./controller-c87b8bd9.js";import{I as y}from"./InternalUnderlinedBadgeText-40aac46d.js";import{I as g}from"./controller-icon-b3eb5a58.js";import{f as k,b as w}from"./controller-06c08e87.js";import"./i18n-b14e6088.js";import"./associated.controller-d302adf7.js";import"./access-and-short-key-914780a7.js";import"./hide-label-0d754c8e.js";import"./label-7d1ce375.js";import"./tooltip-align-6964dd71.js";import"./align-f3101425.js";import"./icons-adcda9b0.js";class _ extends g{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.afterPatchOptions=(t,e,i,n)=>{"_value"===n&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(i)&&i.length>0&&(this.keyOptionMap.clear(),k(this.keyOptionMap,i))},this.component=t}validateOptions(t){w(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){o(this.component,"_required",t)}validateValue(t){a(this.component,"_value",t=>void 0!==t,new Set(["KoliBriUnknown"]),t)}validatePlaceholder(t){l(this.component,"_placeholder",t)}validateHideClearButton(t){o(this.component,"_hideClearButton",t)}validateRows(t){r(this.component,"_rows",t)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHideClearButton(this.component._hideClearButton),this.validateRows(this.component._rows)}}const x="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .single-select {\n    position: relative;\n  }\n  .single-select.disabled, .single-select.disabled * {\n    cursor: not-allowed !important;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .single-select__input {\n    flex-grow: 1;\n  }\n  .single-select__button {\n    width: var(--a11y-min-size);\n    height: auto;\n  }\n  .single-select__listbox {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .single-select__item.highlighted {\n    background-color: #f0f0f0;\n  }\n  .single-select__listbox--cursor-hidden .single-select__item {\n    cursor: none !important;\n  }\n  .single-select__no-results-message {\n    display: flex;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n}",z=x,j=class{async getValue(){return this._value}async kolFocus(){var t;null===(t=this.refInput)||void 0===t||t.focus()}onBlur(){var t,e,i;const n=null===(t=this.state._options)||void 0===t?void 0:t.find(t=>{var e,i;return(null===(e=t.label)||void 0===e?void 0:e.toLowerCase())===(null===(i=this._inputValue)||void 0===i?void 0:i.toLowerCase())});n?this.selectOption(n):(this._inputValue=null===(i=null===(e=this.state._options)||void 0===e?void 0:e.find(t=>t.value===this._value))||void 0===i?void 0:i.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1,this._hasOpened=!1}createEventWithTarget(t,e){const i=new CustomEvent(t,{bubbles:!0,detail:e});return this.refInput&&(Object.defineProperty(i,"target",{value:this.refInput}),Object.defineProperty(i,"currentTarget",{value:this.refInput})),i}clearSelection(){if(!this.state._disabled){const t=null;this._focusedOptionIndex=-1,this._value=t,this._inputValue="",this._filteredOptions=[...this.state._options];const e=this.createEventWithTarget("input",{name:this.state._name,value:t}),i=this.createEventWithTarget("change",{name:this.state._name,value:t});this.controller.onFacade.onInput(e,!0,{value:t}),this.controller.onFacade.onChange(i,{value:t})}}selectOption(t){var e,i;this._value=t.value,this._inputValue=t.label;const n=this.createEventWithTarget("input",{name:null!==(e=this.state._name)&&void 0!==e?e:"",value:t.value}),s=this.createEventWithTarget("change",{name:null!==(i=this.state._name)&&void 0!==i?i:"",value:t.value});this.controller.onFacade.onInput(n,!1,t.value),this.controller.onFacade.onChange(s,t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(t){const e=t.target;this._inputValue=e.value,this._isOpen=!0,this.setFilteredOptionsByQuery(e.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(t){1===t.key.length&&/[a-z0-9]/i.test(t.key)&&(t.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(t.key))}setFilteredOptionsByQuery(t){""===(null==t?void 0:t.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&t.length>0&&(this._filteredOptions=this.state._options.filter(e=>{var i,n;return null===(n=null===(i=e.label)||void 0===i?void 0:i.toLowerCase())||void 0===n?void 0:n.includes(null==t?void 0:t.toLowerCase())}))}moveFocus(t){if(!this._filteredOptions)return;let e=this._focusedOptionIndex+t;e>=this._filteredOptions.length&&(e=0),e<0&&(e=this._filteredOptions.length-1),this._focusedOptionIndex=e,this.focusOption(this._focusedOptionIndex)}focusOption(t){if(this.refOptions){const e=this.refOptions[t];null==e||e.focus()}}focusSuggestionStartingWith(t){const e=t.toLowerCase(),i=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex(t=>t.label.toLowerCase().startsWith(e));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){var n;const s=h(this.state._label),{ariaDescribedBy:o}=m(this.state);return t(i,{key:"dc3138e5d26bf2378a912798f4d74df22b9f40e5",class:"kol-single-select"},t("div",{key:"0e66657247dd08a547763a40f11d1bd265cca470",class:`single-select ${!0===this.state._disabled?"disabled":""} `},t(u,{key:"3bf80abe04b484fd849936644c4de583ea08160b",_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,role:"presentation"},t("span",{key:"3a27fc72a26d502f5f1a50656e39f81f9c0d9d26",slot:"label"},s?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(y,{badgeText:d(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",t("kbd",{class:"badge-text-hint","aria-hidden":"true"},d(this.state._accessKey||this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"287432b2cc43c8536d0b59e9e4495a12227e6916",slot:"input"},t("div",{key:"feb7b795dc4a6ab2447167222d9a3973f868a7da",class:"single-select__group"},t("input",Object.assign({key:"0269ac20421be08d3bcbcaed90e9537805144265",ref:this.catchRef,class:"single-select__input","data-testid":"single-select-input",type:"text","aria-autocomplete":"both","aria-controls":"listbox",value:this._inputValue,accessKey:this.state._accessKey,"aria-describedby":o.length>0?o.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoComplete:"off",autoCorrect:"off",disabled:this.state._disabled,name:this.state._name,required:this.state._required},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onClick:this.toggleListbox.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},placeholder:this.state._placeholder})),this._inputValue&&!this.state._hideClearButton&&t(p,{key:"c164fce346fa45496dbfbd00eaf4f233b2dd2d0e",_icons:"codicon codicon-close",_label:f("kol-delete-selection"),onClick:()=>{var t;this.clearSelection(),null===(t=this.refInput)||void 0===t||t.focus()},class:"single-select__delete"}),t("button",{key:"7789846b0cf22c722d3829e40f1d080c74dbdb35",tabindex:"-1",class:"single-select__button",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},t(p,{key:"271820f17ac5c260ca3c84d558d50357dad2de11",_icons:"codicon codicon-triangle-down",_label:f("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&t("ul",{key:"32a63fa612e7142e4b85ead40ee6ff2edeeae6b2",role:"listbox",class:c("single-select__listbox",this.blockSuggestionMouseOver&&"single-select__listbox--cursor-hidden"),style:{"--visible-options":`${null!==(n=this._rows)&&void 0!==n?n:5}`},onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map((e,i)=>t("li",{id:`option-${i}`,key:`-${i}`,ref:t=>{t&&(this.refOptions[i]=t)},tabIndex:-1,role:"option","aria-selected":this._value===e.value?"true":void 0,onClick:t=>{var i;this.selectOption(e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t),this._isOpen=!1,this._hasOpened=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=i,this.focusOption(i))},onFocus:()=>{this._focusedOptionIndex=i,this.focusOption(i)},class:"single-select__item",onKeyDown:t=>{var i;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t),t.preventDefault())}},t("input",{class:"visually-hidden",type:"radio",name:"options",id:`option-radio-${i}`,value:e.value,checked:this._value===e.value||i===this._focusedOptionIndex}),t("label",{htmlFor:`option-radio-${i}`,class:"radio-label"},e.label))):t("li",{class:"single-select__no-results-message"},f("kol-no-results-message")," "))))))}handleFocusOut(){setTimeout(()=>{var t;(null===(t=this.host)||void 0===t?void 0:t.contains(document.activeElement))||this.onBlur()},0)}handleWindowBlur(){this.onBlur()}handleKeyDown(t){var e,i;const n=(e,i)=>{var n;t.preventDefault(),void 0!==e&&(this._isOpen=e,e||null===(n=this.refInput)||void 0===n||n.focus()),null==i||i()};switch(t.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,n(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,n(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus());break;case"Esc":case"Escape":this._hasOpened=!1,this._isOpen=!1,n(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),null===(i=this.refInput)||void 0===i||i.focus(),n(!1)):this.toggleListbox(t);break;case"NumpadEnter":case"Enter":this.toggleListbox(t),this._hasOpened=!1,this._isOpen=!1;break;case"Home":this.blockSuggestionMouseOver=!0,n(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))});break;case"End":this.blockSuggestionMouseOver=!0,n(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))});break;case"PageUp":this.blockSuggestionMouseOver=!0,n(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,n(void 0,()=>this._isOpen&&this.moveFocus(10))}}constructor(t){n(this,t),this.refOptions=[],this.catchRef=t=>{this.refInput=t},this.toggleListbox=t=>{var e;if(null==t||t.preventDefault(),!this.state._disabled&&!this._hasOpened){this._isOpen=!0,this._hasOpened=!0,null===(e=this.refInput)||void 0===e||e.focus();const t=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex(t=>t.label===this._inputValue):-1,i=this.refOptions[t];null==i||i.scrollIntoView({block:"nearest"}),this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._hasOpened=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._accessKey=void 0,this._placeholder=void 0,this._alert=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this._hideClearButton=!1,this._rows=void 0,this.state={_hideError:!1,_id:`id-${b()}`,_label:"",_options:[],_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new _(this,"single-select",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t),this._filteredOptions=t,this.updateInputValue(this._value)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t,this.updateInputValue(t)}validateHideClearButton(t){this.controller.validateHideClearButton(t)}validateRows(t){this.controller.validateRows(t)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(t){if(Array.isArray(this._options)){const e=this._options.find(e=>e.value===t);this._inputValue=e?String(e.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(t){var e,i,n,s;this.oldValue!==(null===(e=this.refInput)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.refInput)||void 0===i?void 0:i.value),v("change",this.host,this._value),"function"!=typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)||this._isOpen||this.state._on.onChange(t,this._value&&this.oldValue!==(null===(s=this.refInput)||void 0===s?void 0:s.value))}static get delegatesFocus(){return!0}get host(){return s(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],"_hideClearButton ":["validateHideClearButton"],_rows:["validateRows"]}}};j.style={default:z};export{j as kol_single_select};
+import{h as t,F as e,H as i,r as n,g as s}from"./index-37144985.js";import{j as o,w as a,y as l,F as r,A as h,B as d}from"./index-7a63e9eb.js";import{c}from"./clsx-09a06a12.js";import{l as u,g as p}from"./component-names-4cb1c62b.js";import{t as f}from"./i18n-3dd5729d.js";import{n as b}from"./dev.utils-e3951d7e.js";import{t as v}from"./events-29e84d75.js";import{g as m}from"./controller-c87b8bd9.js";import{I as y}from"./InternalUnderlinedBadgeText-579eb59f.js";import{I as g}from"./controller-icon-b3eb5a58.js";import{f as k,b as w}from"./controller-06c08e87.js";import"./i18n-b14e6088.js";import"./associated.controller-d302adf7.js";import"./access-and-short-key-914780a7.js";import"./hide-label-0d754c8e.js";import"./label-7d1ce375.js";import"./tooltip-align-6964dd71.js";import"./align-f3101425.js";import"./icons-adcda9b0.js";class _ extends g{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.afterPatchOptions=(t,e,i,n)=>{"_value"===n&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(i)&&i.length>0&&(this.keyOptionMap.clear(),k(this.keyOptionMap,i))},this.component=t}validateOptions(t){w(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){o(this.component,"_required",t)}validateValue(t){a(this.component,"_value",t=>void 0!==t,new Set(["KoliBriUnknown"]),t)}validatePlaceholder(t){l(this.component,"_placeholder",t)}validateHideClearButton(t){o(this.component,"_hideClearButton",t)}validateRows(t){r(this.component,"_rows",t)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder),this.validateHideClearButton(this.component._hideClearButton),this.validateRows(this.component._rows)}}const x="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    background-color: white;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .single-select {\n    position: relative;\n  }\n  .single-select.disabled, .single-select.disabled * {\n    cursor: not-allowed !important;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .single-select__input {\n    flex-grow: 1;\n  }\n  .single-select__button {\n    width: var(--a11y-min-size);\n    height: auto;\n  }\n  .single-select__listbox {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc((40rem / var(--kolibri-root-font-size, 16)) * var(--visible-options, 5) + (2rem / var(--kolibri-root-font-size, 16))) !important;\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .single-select__item.highlighted {\n    background-color: #f0f0f0;\n  }\n  .single-select__listbox--cursor-hidden .single-select__item {\n    cursor: none !important;\n  }\n  .single-select__no-results-message {\n    display: flex;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    justify-content: center;\n    cursor: default;\n  }\n}",z=x,j=class{async getValue(){return this._value}async kolFocus(){var t;null===(t=this.refInput)||void 0===t||t.focus()}onBlur(){var t,e,i;const n=null===(t=this.state._options)||void 0===t?void 0:t.find(t=>{var e,i;return(null===(e=t.label)||void 0===e?void 0:e.toLowerCase())===(null===(i=this._inputValue)||void 0===i?void 0:i.toLowerCase())});n?this.selectOption(n):(this._inputValue=null===(i=null===(e=this.state._options)||void 0===e?void 0:e.find(t=>t.value===this._value))||void 0===i?void 0:i.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1,this._hasOpened=!1}createEventWithTarget(t,e){const i=new CustomEvent(t,{bubbles:!0,detail:e});return this.refInput&&(Object.defineProperty(i,"target",{value:this.refInput}),Object.defineProperty(i,"currentTarget",{value:this.refInput})),i}clearSelection(){if(!this.state._disabled){const t=null;this._focusedOptionIndex=-1,this._value=t,this._inputValue="",this._filteredOptions=[...this.state._options];const e=this.createEventWithTarget("input",{name:this.state._name,value:t}),i=this.createEventWithTarget("change",{name:this.state._name,value:t});this.controller.onFacade.onInput(e,!0,{value:t}),this.controller.onFacade.onChange(i,{value:t})}}selectOption(t){var e,i;this._value=t.value,this._inputValue=t.label;const n=this.createEventWithTarget("input",{name:null!==(e=this.state._name)&&void 0!==e?e:"",value:t.value}),s=this.createEventWithTarget("change",{name:null!==(i=this.state._name)&&void 0!==i?i:"",value:t.value});this.controller.onFacade.onInput(n,!1,t.value),this.controller.onFacade.onChange(s,t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(t){const e=t.target;this._inputValue=e.value,this._isOpen=!0,this.setFilteredOptionsByQuery(e.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(t){1===t.key.length&&/[a-z0-9]/i.test(t.key)&&(t.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(t.key))}setFilteredOptionsByQuery(t){""===(null==t?void 0:t.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&t.length>0&&(this._filteredOptions=this.state._options.filter(e=>{var i,n;return null===(n=null===(i=e.label)||void 0===i?void 0:i.toLowerCase())||void 0===n?void 0:n.includes(null==t?void 0:t.toLowerCase())}))}moveFocus(t){if(!this._filteredOptions)return;let e=this._focusedOptionIndex+t;e>=this._filteredOptions.length&&(e=0),e<0&&(e=this._filteredOptions.length-1),this._focusedOptionIndex=e,this.focusOption(this._focusedOptionIndex)}focusOption(t){if(this.refOptions){const e=this.refOptions[t];null==e||e.focus()}}focusSuggestionStartingWith(t){const e=t.toLowerCase(),i=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex(t=>t.label.toLowerCase().startsWith(e));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){var n;const s=d(this.state._label),{ariaDescribedBy:o}=m(this.state);return t(i,{key:"dc3138e5d26bf2378a912798f4d74df22b9f40e5",class:"kol-single-select"},t("div",{key:"0e66657247dd08a547763a40f11d1bd265cca470",class:`single-select ${!0===this.state._disabled?"disabled":""} `},t(u,{key:"3bf80abe04b484fd849936644c4de583ea08160b",_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,role:"presentation"},t("span",{key:"3a27fc72a26d502f5f1a50656e39f81f9c0d9d26",slot:"label"},s?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(y,{badgeText:h(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",t("kbd",{class:"badge-text-hint","aria-hidden":"true"},h(this.state._accessKey||this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"287432b2cc43c8536d0b59e9e4495a12227e6916",slot:"input"},t("div",{key:"feb7b795dc4a6ab2447167222d9a3973f868a7da",class:"single-select__group"},t("input",Object.assign({key:"1da2b138947d26efc863041ee43ba7bf6432d1e6",ref:this.catchRef,class:"single-select__input","data-testid":"single-select-input",type:"text","aria-autocomplete":"both","aria-controls":"listbox",value:this._inputValue,accessKey:this.state._accessKey,"aria-keyshortcuts":this.state._shortKey,"aria-describedby":o.length>0?o.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoComplete:"off",autoCorrect:"off",disabled:this.state._disabled,name:this.state._name,required:this.state._required},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onClick:this.toggleListbox.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},placeholder:this.state._placeholder})),this._inputValue&&!this.state._hideClearButton&&t(p,{key:"14de8f1c01f2ae1f373ed4d5fea93f85b179b9fa",_icons:"codicon codicon-close",_label:f("kol-delete-selection"),onClick:()=>{var t;this.clearSelection(),null===(t=this.refInput)||void 0===t||t.focus()},class:"single-select__delete"}),t("button",{key:"5b295d620df8af1c6ac7f9144111924aaf1c3240",tabindex:"-1",class:"single-select__button",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},t(p,{key:"a75954be59a425c82f23eddb41deb2549ddff6bd",_icons:"codicon codicon-triangle-down",_label:f("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&t("ul",{key:"f7f1523a0f99559b50ef009f3ba7a9e2a2d596e6",role:"listbox",class:c("single-select__listbox",this.blockSuggestionMouseOver&&"single-select__listbox--cursor-hidden"),style:{"--visible-options":`${null!==(n=this._rows)&&void 0!==n?n:5}`},onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map((e,i)=>t("li",{id:`option-${i}`,key:`-${i}`,ref:t=>{t&&(this.refOptions[i]=t)},tabIndex:-1,role:"option","aria-selected":this._value===e.value?"true":void 0,onClick:t=>{var i;this.selectOption(e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t),this._isOpen=!1,this._hasOpened=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=i,this.focusOption(i))},onFocus:()=>{this._focusedOptionIndex=i,this.focusOption(i)},class:"single-select__item",onKeyDown:t=>{var i;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t),t.preventDefault())}},t("input",{class:"visually-hidden",type:"radio",name:"options",id:`option-radio-${i}`,value:e.value,checked:this._value===e.value||i===this._focusedOptionIndex}),t("label",{htmlFor:`option-radio-${i}`,class:"radio-label"},e.label))):t("li",{class:"single-select__no-results-message"},f("kol-no-results-message")," "))))))}handleFocusOut(){setTimeout(()=>{var t;(null===(t=this.host)||void 0===t?void 0:t.contains(document.activeElement))||this.onBlur()},0)}handleWindowBlur(){this.onBlur()}handleKeyDown(t){var e,i;const n=(e,i)=>{var n;t.preventDefault(),void 0!==e&&(this._isOpen=e,e||null===(n=this.refInput)||void 0===n||n.focus()),null==i||i()};switch(t.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,n(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,n(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus());break;case"Esc":case"Escape":this._hasOpened=!1,this._isOpen=!1,n(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(this._filteredOptions[this._focusedOptionIndex]),null===(i=this.refInput)||void 0===i||i.focus(),n(!1)):this.toggleListbox(t);break;case"NumpadEnter":case"Enter":this.toggleListbox(t),this._hasOpened=!1,this._isOpen=!1;break;case"Home":this.blockSuggestionMouseOver=!0,n(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))});break;case"End":this.blockSuggestionMouseOver=!0,n(void 0,()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))});break;case"PageUp":this.blockSuggestionMouseOver=!0,n(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,n(void 0,()=>this._isOpen&&this.moveFocus(10))}}constructor(t){n(this,t),this.refOptions=[],this.catchRef=t=>{this.refInput=t},this.toggleListbox=t=>{var e;if(null==t||t.preventDefault(),!this.state._disabled&&!this._hasOpened){this._isOpen=!0,this._hasOpened=!0,null===(e=this.refInput)||void 0===e||e.focus();const t=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex(t=>t.label===this._inputValue):-1,i=this.refOptions[t];null==i||i.scrollIntoView({block:"nearest"}),this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._hasOpened=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._accessKey=void 0,this._placeholder=void 0,this._alert=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this._hideClearButton=!1,this._rows=void 0,this.state={_hideError:!1,_id:`id-${b()}`,_label:"",_options:[],_hideClearButton:!1},this.inputHasFocus=!1,this.controller=new _(this,"single-select",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t),this._filteredOptions=t,this.updateInputValue(this._value)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t,this.updateInputValue(t)}validateHideClearButton(t){this.controller.validateHideClearButton(t)}validateRows(t){this.controller.validateRows(t)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(t){if(Array.isArray(this._options)){const e=this._options.find(e=>e.value===t);this._inputValue=e?String(e.label):""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(t){var e,i,n,s;this.oldValue!==(null===(e=this.refInput)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.refInput)||void 0===i?void 0:i.value),v("change",this.host,this._value),"function"!=typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)||this._isOpen||this.state._on.onChange(t,this._value&&this.oldValue!==(null===(s=this.refInput)||void 0===s?void 0:s.value))}static get delegatesFocus(){return!0}get host(){return s(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],"_hideClearButton ":["validateHideClearButton"],_rows:["validateRows"]}}};j.style={default:z};export{j as kol_single_select};

package/dist/kolibri/kol-single-select.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["SingleSelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","afterPatchOptions","value","_state","_component","key","setFormAssociatedValue","beforePatchOptions","_value","nextState","options","has","get","state","_options","Array","isArray","length","clear","fillKeyOptionMap","validateOptions","hooks","afterPatch","beforePatch","validateRequired","watchBoolean","validateValue","watchValidator","v","undefined","Set","validatePlaceholder","watchString","validateHideClearButton","validateRows","watchNumber","componentWillLoad","_required","_placeholder","_hideClearButton","_rows","defaultStyleCss","KolSingleSelectDefaultStyle0","KolSingleSelect","getValue","kolFocus","_a","refInput","focus","onBlur","matchingOption","find","option","_b","label","toLowerCase","_inputValue","selectOption","_c","_filteredOptions","_isOpen","_hasOpened","createEventWithTarget","type","detail","event","CustomEvent","bubbles","Object","defineProperty","clearSelection","_disabled","emptyValue","_focusedOptionIndex","inputEvent","_name","changeEvent","controller","onFacade","onInput","onChange","target","setFilteredOptionsByQuery","handleKeyDownDropdown","test","preventDefault","focusSuggestionStartingWith","query","trim","filter","includes","moveFocus","delta","newIndex","focusOption","index","refOptions","optionElement","char","charLowerCase","findIndex","startsWith","render","hasExpertSlot","showExpertSlot","_label","ariaDescribedBy","getRenderStates","h","Host","class","KolInputTag","_accessKey","_alert","showAsAlert","_hideError","_hideLabel","_hint","_icons","_id","_msg","_shortKey","_tooltipAlign","_touched","role","slot","Fragment","InternalUnderlinedBadgeText","badgeText","buildBadgeTextString","assign","ref","catchRef","accessKey","join","autoCapitalize","autoComplete","autoCorrect","disabled","required","bind","onClick","toggleListbox","onFocus","inputHasFocus","placeholder","KolIconTag","translate","tabindex","clsx","blockSuggestionMouseOver","style","onKeyDown","map","id","el","tabIndex","onMouseOver","e","checked","htmlFor","handleFocusOut","setTimeout","contains","document","activeElement","handleWindowBlur","handleKeyDown","handleEvent","isOpen","callback","hostRef","selectedIndex","selectedOptionElement","scrollIntoView","block","nonce","Boolean","validateAccessKey","validateAlert","validateDisabled","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","updateInputValue","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched","oldValue","handleMouseEvent","matchedOption","String","tryToDispatchKoliBriEvent","_on","_d"],"sources":["src/components/single-select/controller.ts","src/components/single-select/style.scss?tag=kol-single-select&mode=default&encapsulation=shadow","src/components/single-select/shadow.tsx"],"sourcesContent":["import type { Option, OptionsPropType, SelectOption, SingleSelectProps, SingleSelectWatches, StencilUnknown, W3CInputValue } from '../../schema';\nimport { validateOptions, watchBoolean, watchNumber, watchString, watchValidator } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class SingleSelectController extends InputIconController implements SingleSelectWatches {\n\tprotected readonly component: Generic.Element.Component & SingleSelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<string>>();\n\n\tpublic constructor(component: Generic.Element.Component & SingleSelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprotected readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tvalidateOptions(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\twatchValidator(this.component, '_value', (v) => v !== undefined, new Set([`StencilUnknown`]), value);\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\tpublic validateHideClearButton(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hideClearButton', value);\n\t}\n\tpublic validateRows(value?: number): void {\n\t\twatchNumber(this.component, '_rows', value);\n\t}\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateHideClearButton(this.component._hideClearButton);\n\t\tthis.validateRows(this.component._rows);\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../style' as *;\n@use '../input-line' as *;\n\n$option-height: to-rem(40);\n$visible-options: var(--visible-options, 5);\n\n@layer kol-component {\n\t.single-select {\n\t\tposition: relative;\n\n\t\t&.disabled,\n\t\t&.disabled * {\n\t\t\tcursor: not-allowed !important;\n\t\t}\n\n\t\t&__group {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__input {\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\t&__button {\n\t\t\twidth: var(--a11y-min-size);\n\t\t\theight: auto;\n\t\t}\n\n\t\t&__listbox {\n\t\t\tbackground-color: white;\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\tz-index: 2;\n\t\t\tmax-height: calc($option-height * $visible-options + to-rem(2)) !important;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\toverflow-x: hidden;\n\t\t\toverflow-y: auto;\n\t\t\tlist-style-type: none;\n\t\t}\n\n\t\t&__item {\n\t\t\t&.highlighted {\n\t\t\t\tbackground-color: #f0f0f0;\n\t\t\t}\n\n\t\t\t.single-select__listbox--cursor-hidden & {\n\t\t\t\tcursor: none !important;\n\t\t\t}\n\t\t}\n\n\t\t&__no-results-message {\n\t\t\tdisplay: flex;\n\t\t\tmin-height: to-rem(50);\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tcursor: default;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tHideErrorPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOption,\n\tOptionsPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSingleSelectAPI,\n\tSingleSelectStates,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { buildBadgeTextString, showExpertSlot } from '../../schema';\n\nimport clsx from 'clsx';\nimport { KolIconTag, KolInputTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { EventDetail } from '../../schema/interfaces/EventDetail';\nimport { nonce } from '../../utils/dev.utils';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';\nimport { SingleSelectController } from './controller';\n\n/**\n * @slot - The input field label.\n */\n@Component({\n\ttag: 'kol-single-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSingleSelect implements SingleSelectAPI {\n\t@Element() private readonly host?: HTMLKolSingleSelectElement;\n\tprivate refInput?: HTMLInputElement;\n\tprivate refOptions: HTMLLIElement[] = [];\n\tprivate oldValue?: StencilUnknown;\n\n\t/**\n\t * Returns the selected value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown | undefined> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Focuses the input element.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInput?.focus();\n\t}\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.refInput = ref;\n\t};\n\n\tprivate toggleListbox = (event: Event) => {\n\t\tevent?.preventDefault();\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tif (!this._hasOpened) {\n\t\t\t\tthis._isOpen = true;\n\t\t\t\tthis._hasOpened = true;\n\t\t\t\tthis.refInput?.focus();\n\t\t\t\tconst selectedIndex = Array.isArray(this._filteredOptions) ? this._filteredOptions.findIndex((option) => option.label === this._inputValue) : -1;\n\t\t\t\tconst selectedOptionElement = this.refOptions[selectedIndex];\n\t\t\t\tselectedOptionElement?.scrollIntoView({ block: 'nearest' });\n\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * If there are options and the current input value doesn't match any option's label,\n\t * resets the input value to match the label of the currently selected option.\n\t * Closes the dropdown and resets the opened state.\n\t */\n\tprivate onBlur() {\n\t\tconst matchingOption = this.state._options?.find((option) => (option.label as string)?.toLowerCase() === this._inputValue?.toLowerCase());\n\n\t\tif (matchingOption) {\n\t\t\tthis.selectOption(matchingOption as Option<string>);\n\t\t} else {\n\t\t\tthis._inputValue = this.state._options?.find((option) => (option as Option<string>).value === this._value)?.label as string;\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t}\n\n\t\tthis._isOpen = false;\n\t\tthis._hasOpened = false;\n\t}\n\n\tprivate createEventWithTarget(type: string, detail: EventDetail): CustomEvent<EventDetail> {\n\t\tconst event = new CustomEvent<EventDetail>(type, {\n\t\t\tbubbles: true,\n\t\t\tdetail,\n\t\t});\n\n\t\tif (this.refInput) {\n\t\t\tObject.defineProperty(event, 'target', {\n\t\t\t\tvalue: this.refInput,\n\t\t\t});\n\n\t\t\tObject.defineProperty(event, 'currentTarget', {\n\t\t\t\tvalue: this.refInput,\n\t\t\t});\n\t\t}\n\t\treturn event;\n\t}\n\n\tprivate clearSelection() {\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tconst emptyValue = null;\n\t\t\tthis._focusedOptionIndex = -1;\n\t\t\tthis._value = emptyValue;\n\t\t\tthis._inputValue = '';\n\t\t\tthis._filteredOptions = [...this.state._options];\n\n\t\t\tconst inputEvent = this.createEventWithTarget('input', {\n\t\t\t\tname: this.state._name as string,\n\t\t\t\tvalue: emptyValue,\n\t\t\t});\n\t\t\tconst changeEvent = this.createEventWithTarget('change', {\n\t\t\t\tname: this.state._name as string,\n\t\t\t\tvalue: emptyValue,\n\t\t\t});\n\n\t\t\tthis.controller.onFacade.onInput(inputEvent, true, { value: emptyValue });\n\t\t\tthis.controller.onFacade.onChange(changeEvent, { value: emptyValue });\n\t\t}\n\t}\n\n\tprivate selectOption(option: Option<string>) {\n\t\tthis._value = option.value;\n\t\tthis._inputValue = option.label as string;\n\n\t\tconst inputEvent = this.createEventWithTarget('input', {\n\t\t\tname: this.state._name ?? '',\n\t\t\tvalue: option.value,\n\t\t});\n\t\tconst changeEvent = this.createEventWithTarget('change', {\n\t\t\tname: this.state._name ?? '',\n\t\t\tvalue: option.value,\n\t\t});\n\n\t\tthis.controller.onFacade.onInput(inputEvent, false, option.value);\n\t\tthis.controller.onFacade.onChange(changeEvent, option.value);\n\n\t\tthis._filteredOptions = [...this.state._options];\n\n\t\tthis.controller.setFormAssociatedValue(this._value);\n\t}\n\n\tprivate onInput(event: Event) {\n\t\tconst target = event.target as HTMLInputElement;\n\t\tthis._inputValue = target.value;\n\t\tthis._isOpen = true;\n\t\tthis.setFilteredOptionsByQuery(target.value);\n\t\tthis._focusedOptionIndex = -1;\n\t}\n\n\tprivate handleKeyDownDropdown(event: KeyboardEvent) {\n\t\tif (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t\tthis._isOpen = true;\n\t\t\tthis.focusSuggestionStartingWith(event.key);\n\t\t}\n\t}\n\n\tprivate setFilteredOptionsByQuery(query: string) {\n\t\tif (query?.trim() === '') {\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t} else if (Array.isArray(this.state._options) && this.state._options.length > 0 && query.length > 0) {\n\t\t\tthis._filteredOptions = this.state._options.filter((option) => {\n\t\t\t\treturn (option.label as string)?.toLowerCase()?.includes(query?.toLowerCase());\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate _focusedOptionIndex: number = -1;\n\n\tprivate moveFocus(delta: number) {\n\t\tif (!this._filteredOptions) {\n\t\t\treturn;\n\t\t}\n\t\tlet newIndex = this._focusedOptionIndex + delta;\n\n\t\tif (newIndex >= this._filteredOptions.length) {\n\t\t\tnewIndex = 0;\n\t\t}\n\n\t\tif (newIndex < 0) {\n\t\t\tnewIndex = this._filteredOptions.length - 1;\n\t\t}\n\n\t\tthis._focusedOptionIndex = newIndex;\n\t\tthis.focusOption(this._focusedOptionIndex);\n\t}\n\n\tprivate focusOption(index: number) {\n\t\tif (this.refOptions) {\n\t\t\tconst optionElement = this.refOptions[index];\n\t\t\toptionElement?.focus();\n\t\t}\n\t}\n\n\tprivate focusSuggestionStartingWith(char: string) {\n\t\tconst charLowerCase = char.toLowerCase();\n\n\t\tconst index =\n\t\t\tArray.isArray(this._filteredOptions) && this._filteredOptions.findIndex((option) => (option.label as string).toLowerCase().startsWith(charLowerCase));\n\n\t\tif (typeof index === 'number') {\n\t\t\tthis._focusedOptionIndex = index;\n\t\t\tthis.focusOption(index);\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\n\t\treturn (\n\t\t\t<Host class=\"kol-single-select\">\n\t\t\t\t<div class={`single-select ${this.state._disabled === true ? 'disabled' : ''} `}>\n\t\t\t\t\t<KolInputTag\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_alert={this.showAsAlert()}\n\t\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t_shortKey={this.state._shortKey}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey || this.state._shortKey)} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t\t<kbd class=\"badge-text-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t{buildBadgeTextString(this.state._accessKey || this.state._shortKey)}\n\t\t\t\t\t\t\t\t\t</kbd>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t\t<div class=\"single-select__group\">\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\t\t\tclass=\"single-select__input\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"single-select-input\"\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\t\t\t\t\t\taria-controls=\"listbox\"\n\t\t\t\t\t\t\t\t\tvalue={this._inputValue}\n\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\t\taria-activedescendant={this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined}\n\t\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tautoComplete=\"off\" /* disable browser's not accessible autocomplete popup */\n\t\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\t\tonClick={this.toggleListbox.bind(this)}\n\t\t\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{this._inputValue && !this.state._hideClearButton && (\n\t\t\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t\t\t_icons=\"codicon codicon-close\"\n\t\t\t\t\t\t\t\t\t\t_label={translate('kol-delete-selection')}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tthis.clearSelection();\n\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tclass=\"single-select__delete\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t<button tabindex=\"-1\" class=\"single-select__button\" onClick={this.toggleListbox.bind(this)} disabled={this.state._disabled}>\n\t\t\t\t\t\t\t\t\t<KolIconTag _icons=\"codicon codicon-triangle-down\" _label={translate('kol-dropdown')} />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{this._isOpen && !(this.state._disabled === true) && (\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\t\t\t\tclass={clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden')}\n\t\t\t\t\t\t\t\t\tstyle={{ '--visible-options': `${this._rows ?? 5}` }}\n\t\t\t\t\t\t\t\t\tonKeyDown={this.handleKeyDownDropdown.bind(this)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\tthis._filteredOptions.map((option, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tid={`option-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) this.refOptions[index] = el;\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-selected={this._value === (option as Option<string>).value ? 'true' : undefined}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(event: Event) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis._isOpen = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis._hasOpened = false;\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!this.blockSuggestionMouseOver) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"single-select__item\"\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === 'NumpadEnter') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(e);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tname=\"options\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tid={`option-radio-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={(option as Option<string>).value}\n\t\t\t\t\t\t\t\t\t\t\t\t\tchecked={this._value === (option as Option<string>).value || index === this._focusedOptionIndex}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<label htmlFor={`option-radio-${index}`} class=\"radio-label\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<li class=\"single-select__no-results-message\">{translate('kol-no-results-message')} </li>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolInputTag>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('focusout', { target: 'window' })\n\tpublic handleFocusOut() {\n\t\tsetTimeout(() => {\n\t\t\tif (!this.host?.contains(document.activeElement)) {\n\t\t\t\tthis.onBlur();\n\t\t\t}\n\t\t}, 0);\n\t}\n\t@Listen('blur', { target: 'window' })\n\tpublic handleWindowBlur() {\n\t\tthis.onBlur();\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst handleEvent = (isOpen?: boolean, callback?: () => void): void => {\n\t\t\tevent.preventDefault();\n\n\t\t\tif (isOpen !== undefined) {\n\t\t\t\tthis._isOpen = isOpen;\n\t\t\t\tif (!isOpen) {\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t\tcallback?.();\n\t\t};\n\n\t\tswitch (event.key) {\n\t\t\tcase 'Down':\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Up':\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(-1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Tab':\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tthis._isOpen = !this._isOpen;\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Esc':\n\t\t\tcase 'Escape': {\n\t\t\t\tthis._hasOpened = false;\n\t\t\t\tthis._isOpen = false;\n\n\t\t\t\thandleEvent(false);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase ' ': {\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tif (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0) {\n\t\t\t\t\t\tthis.selectOption(this._filteredOptions[this._focusedOptionIndex] as Option<string>);\n\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\thandleEvent(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'NumpadEnter':\n\t\t\tcase 'Enter': {\n\t\t\t\tthis.toggleListbox(event);\n\t\t\t\tthis._hasOpened = false;\n\t\t\t\tthis._isOpen = false;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = this._filteredOptions ? this._filteredOptions.length - 1 : 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(-10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly controller: SingleSelectController;\n\t@State()\n\tprivate _isOpen = false;\n\t@State()\n\tprivate _hasOpened = false;\n\t@State()\n\tprivate _filteredOptions?: OptionsPropType = [];\n\t@State()\n\tprivate _inputValue: string = '';\n\t@State()\n\tprivate blockSuggestionMouseOver: boolean = false;\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * 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.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options!: OptionsPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: StencilUnknown;\n\n\t/**\n\t * Defines the whether the clear button should be hidden.\n\t */\n\t@Prop() public _hideClearButton?: boolean = false;\n\n\t/**\n\t * Maximum number of visible rows in the options dropdown before scrolling.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t@State() public state: SingleSelectStates = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_hideClearButton: false,\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SingleSelectController(this, 'single-select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t\tthis._filteredOptions = value;\n\t\tthis.updateInputValue(this._value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.oldValue = value;\n\t\tthis.updateInputValue(value);\n\t}\n\n\t@Watch('_hideClearButton ')\n\tpublic validateHideClearButton(value?: boolean): void {\n\t\tthis.controller.validateHideClearButton(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Listen('mousemove')\n\tpublic handleMouseEvent() {\n\t\tthis.blockSuggestionMouseOver = false;\n\t}\n\n\tprivate updateInputValue(value?: StencilUnknown) {\n\t\tif (Array.isArray(this._options)) {\n\t\t\tconst matchedOption = this._options.find((option) => option.value === value);\n\t\t\tthis._inputValue = matchedOption ? String(matchedOption.label) : '';\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.refOptions = [];\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.oldValue = this._value;\n\t\tthis._filteredOptions = this.state._options;\n\t\tthis.updateInputValue(this._value);\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\tif (this.oldValue !== this.refInput?.value) {\n\t\t\tthis.oldValue = this.refInput?.value;\n\t\t}\n\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function' && !this._isOpen) {\n\t\t\tthis.state._on.onChange(event, this._value && this.oldValue !== this.refInput?.value);\n\t\t}\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["SingleSelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","afterPatchOptions","value","_state","_component","key","setFormAssociatedValue","beforePatchOptions","_value","nextState","options","has","get","state","_options","Array","isArray","length","clear","fillKeyOptionMap","validateOptions","hooks","afterPatch","beforePatch","validateRequired","watchBoolean","validateValue","watchValidator","v","undefined","Set","validatePlaceholder","watchString","validateHideClearButton","validateRows","watchNumber","componentWillLoad","_required","_placeholder","_hideClearButton","_rows","defaultStyleCss","KolSingleSelectDefaultStyle0","KolSingleSelect","getValue","kolFocus","_a","refInput","focus","onBlur","matchingOption","find","option","_b","label","toLowerCase","_inputValue","selectOption","_c","_filteredOptions","_isOpen","_hasOpened","createEventWithTarget","type","detail","event","CustomEvent","bubbles","Object","defineProperty","clearSelection","_disabled","emptyValue","_focusedOptionIndex","inputEvent","_name","changeEvent","controller","onFacade","onInput","onChange","target","setFilteredOptionsByQuery","handleKeyDownDropdown","test","preventDefault","focusSuggestionStartingWith","query","trim","filter","includes","moveFocus","delta","newIndex","focusOption","index","refOptions","optionElement","char","charLowerCase","findIndex","startsWith","render","hasExpertSlot","showExpertSlot","_label","ariaDescribedBy","getRenderStates","h","Host","class","KolInputTag","_accessKey","_alert","showAsAlert","_hideError","_hideLabel","_hint","_icons","_id","_msg","_shortKey","_tooltipAlign","_touched","role","slot","Fragment","InternalUnderlinedBadgeText","badgeText","buildBadgeTextString","assign","ref","catchRef","accessKey","join","autoCapitalize","autoComplete","autoCorrect","disabled","required","bind","onClick","toggleListbox","onFocus","inputHasFocus","placeholder","KolIconTag","translate","tabindex","clsx","blockSuggestionMouseOver","style","onKeyDown","map","id","el","tabIndex","onMouseOver","e","checked","htmlFor","handleFocusOut","setTimeout","contains","document","activeElement","handleWindowBlur","handleKeyDown","handleEvent","isOpen","callback","hostRef","selectedIndex","selectedOptionElement","scrollIntoView","block","nonce","Boolean","validateAccessKey","validateAlert","validateDisabled","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","updateInputValue","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched","oldValue","handleMouseEvent","matchedOption","String","tryToDispatchKoliBriEvent","_on","_d"],"sources":["src/components/single-select/controller.ts","src/components/single-select/style.scss?tag=kol-single-select&mode=default&encapsulation=shadow","src/components/single-select/shadow.tsx"],"sourcesContent":["import type { Option, OptionsPropType, SelectOption, SingleSelectProps, SingleSelectWatches, StencilUnknown, W3CInputValue } from '../../schema';\nimport { validateOptions, watchBoolean, watchNumber, watchString, watchValidator } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class SingleSelectController extends InputIconController implements SingleSelectWatches {\n\tprotected readonly component: Generic.Element.Component & SingleSelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<string>>();\n\n\tpublic constructor(component: Generic.Element.Component & SingleSelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprotected readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tvalidateOptions(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\twatchValidator(this.component, '_value', (v) => v !== undefined, new Set([`StencilUnknown`]), value);\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\tpublic validateHideClearButton(value?: boolean): void {\n\t\twatchBoolean(this.component, '_hideClearButton', value);\n\t}\n\tpublic validateRows(value?: number): void {\n\t\twatchNumber(this.component, '_rows', value);\n\t}\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateHideClearButton(this.component._hideClearButton);\n\t\tthis.validateRows(this.component._rows);\n\t}\n}\n","@use '../@shared/mixins' as *;\n@use '../style' as *;\n@use '../input-line' as *;\n\n$option-height: to-rem(40);\n$visible-options: var(--visible-options, 5);\n\n@layer kol-component {\n\t.single-select {\n\t\tposition: relative;\n\n\t\t&.disabled,\n\t\t&.disabled * {\n\t\t\tcursor: not-allowed !important;\n\t\t}\n\n\t\t&__group {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t}\n\n\t\t&__input {\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\t&__button {\n\t\t\twidth: var(--a11y-min-size);\n\t\t\theight: auto;\n\t\t}\n\n\t\t&__listbox {\n\t\t\tbackground-color: white;\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\tz-index: 2;\n\t\t\tmax-height: calc($option-height * $visible-options + to-rem(2)) !important;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\toverflow-x: hidden;\n\t\t\toverflow-y: auto;\n\t\t\tlist-style-type: none;\n\t\t}\n\n\t\t&__item {\n\t\t\t&.highlighted {\n\t\t\t\tbackground-color: #f0f0f0;\n\t\t\t}\n\n\t\t\t.single-select__listbox--cursor-hidden & {\n\t\t\t\tcursor: none !important;\n\t\t\t}\n\t\t}\n\n\t\t&__no-results-message {\n\t\t\tdisplay: flex;\n\t\t\tmin-height: to-rem(50);\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tcursor: default;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tHideErrorPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOption,\n\tOptionsPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSingleSelectAPI,\n\tSingleSelectStates,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { buildBadgeTextString, showExpertSlot } from '../../schema';\n\nimport clsx from 'clsx';\nimport { KolIconTag, KolInputTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { EventDetail } from '../../schema/interfaces/EventDetail';\nimport { nonce } from '../../utils/dev.utils';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';\nimport { SingleSelectController } from './controller';\n\n/**\n * @slot - The input field label.\n */\n@Component({\n\ttag: 'kol-single-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSingleSelect implements SingleSelectAPI {\n\t@Element() private readonly host?: HTMLKolSingleSelectElement;\n\tprivate refInput?: HTMLInputElement;\n\tprivate refOptions: HTMLLIElement[] = [];\n\tprivate oldValue?: StencilUnknown;\n\n\t/**\n\t * Returns the selected value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown | undefined> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Focuses the input element.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInput?.focus();\n\t}\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.refInput = ref;\n\t};\n\n\tprivate toggleListbox = (event: Event) => {\n\t\tevent?.preventDefault();\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tif (!this._hasOpened) {\n\t\t\t\tthis._isOpen = true;\n\t\t\t\tthis._hasOpened = true;\n\t\t\t\tthis.refInput?.focus();\n\t\t\t\tconst selectedIndex = Array.isArray(this._filteredOptions) ? this._filteredOptions.findIndex((option) => option.label === this._inputValue) : -1;\n\t\t\t\tconst selectedOptionElement = this.refOptions[selectedIndex];\n\t\t\t\tselectedOptionElement?.scrollIntoView({ block: 'nearest' });\n\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * If there are options and the current input value doesn't match any option's label,\n\t * resets the input value to match the label of the currently selected option.\n\t * Closes the dropdown and resets the opened state.\n\t */\n\tprivate onBlur() {\n\t\tconst matchingOption = this.state._options?.find((option) => (option.label as string)?.toLowerCase() === this._inputValue?.toLowerCase());\n\n\t\tif (matchingOption) {\n\t\t\tthis.selectOption(matchingOption as Option<string>);\n\t\t} else {\n\t\t\tthis._inputValue = this.state._options?.find((option) => (option as Option<string>).value === this._value)?.label as string;\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t}\n\n\t\tthis._isOpen = false;\n\t\tthis._hasOpened = false;\n\t}\n\n\tprivate createEventWithTarget(type: string, detail: EventDetail): CustomEvent<EventDetail> {\n\t\tconst event = new CustomEvent<EventDetail>(type, {\n\t\t\tbubbles: true,\n\t\t\tdetail,\n\t\t});\n\n\t\tif (this.refInput) {\n\t\t\tObject.defineProperty(event, 'target', {\n\t\t\t\tvalue: this.refInput,\n\t\t\t});\n\n\t\t\tObject.defineProperty(event, 'currentTarget', {\n\t\t\t\tvalue: this.refInput,\n\t\t\t});\n\t\t}\n\t\treturn event;\n\t}\n\n\tprivate clearSelection() {\n\t\tif (this.state._disabled) {\n\t\t\treturn;\n\t\t} else {\n\t\t\tconst emptyValue = null;\n\t\t\tthis._focusedOptionIndex = -1;\n\t\t\tthis._value = emptyValue;\n\t\t\tthis._inputValue = '';\n\t\t\tthis._filteredOptions = [...this.state._options];\n\n\t\t\tconst inputEvent = this.createEventWithTarget('input', {\n\t\t\t\tname: this.state._name as string,\n\t\t\t\tvalue: emptyValue,\n\t\t\t});\n\t\t\tconst changeEvent = this.createEventWithTarget('change', {\n\t\t\t\tname: this.state._name as string,\n\t\t\t\tvalue: emptyValue,\n\t\t\t});\n\n\t\t\tthis.controller.onFacade.onInput(inputEvent, true, { value: emptyValue });\n\t\t\tthis.controller.onFacade.onChange(changeEvent, { value: emptyValue });\n\t\t}\n\t}\n\n\tprivate selectOption(option: Option<string>) {\n\t\tthis._value = option.value;\n\t\tthis._inputValue = option.label as string;\n\n\t\tconst inputEvent = this.createEventWithTarget('input', {\n\t\t\tname: this.state._name ?? '',\n\t\t\tvalue: option.value,\n\t\t});\n\t\tconst changeEvent = this.createEventWithTarget('change', {\n\t\t\tname: this.state._name ?? '',\n\t\t\tvalue: option.value,\n\t\t});\n\n\t\tthis.controller.onFacade.onInput(inputEvent, false, option.value);\n\t\tthis.controller.onFacade.onChange(changeEvent, option.value);\n\n\t\tthis._filteredOptions = [...this.state._options];\n\n\t\tthis.controller.setFormAssociatedValue(this._value);\n\t}\n\n\tprivate onInput(event: Event) {\n\t\tconst target = event.target as HTMLInputElement;\n\t\tthis._inputValue = target.value;\n\t\tthis._isOpen = true;\n\t\tthis.setFilteredOptionsByQuery(target.value);\n\t\tthis._focusedOptionIndex = -1;\n\t}\n\n\tprivate handleKeyDownDropdown(event: KeyboardEvent) {\n\t\tif (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {\n\t\t\tevent.preventDefault();\n\t\t\tthis._isOpen = true;\n\t\t\tthis.focusSuggestionStartingWith(event.key);\n\t\t}\n\t}\n\n\tprivate setFilteredOptionsByQuery(query: string) {\n\t\tif (query?.trim() === '') {\n\t\t\tthis._filteredOptions = [...this.state._options];\n\t\t} else if (Array.isArray(this.state._options) && this.state._options.length > 0 && query.length > 0) {\n\t\t\tthis._filteredOptions = this.state._options.filter((option) => {\n\t\t\t\treturn (option.label as string)?.toLowerCase()?.includes(query?.toLowerCase());\n\t\t\t});\n\t\t}\n\t}\n\n\tprivate _focusedOptionIndex: number = -1;\n\n\tprivate moveFocus(delta: number) {\n\t\tif (!this._filteredOptions) {\n\t\t\treturn;\n\t\t}\n\t\tlet newIndex = this._focusedOptionIndex + delta;\n\n\t\tif (newIndex >= this._filteredOptions.length) {\n\t\t\tnewIndex = 0;\n\t\t}\n\n\t\tif (newIndex < 0) {\n\t\t\tnewIndex = this._filteredOptions.length - 1;\n\t\t}\n\n\t\tthis._focusedOptionIndex = newIndex;\n\t\tthis.focusOption(this._focusedOptionIndex);\n\t}\n\n\tprivate focusOption(index: number) {\n\t\tif (this.refOptions) {\n\t\t\tconst optionElement = this.refOptions[index];\n\t\t\toptionElement?.focus();\n\t\t}\n\t}\n\n\tprivate focusSuggestionStartingWith(char: string) {\n\t\tconst charLowerCase = char.toLowerCase();\n\n\t\tconst index =\n\t\t\tArray.isArray(this._filteredOptions) && this._filteredOptions.findIndex((option) => (option.label as string).toLowerCase().startsWith(charLowerCase));\n\n\t\tif (typeof index === 'number') {\n\t\t\tthis._focusedOptionIndex = index;\n\t\t\tthis.focusOption(index);\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\n\t\treturn (\n\t\t\t<Host class=\"kol-single-select\">\n\t\t\t\t<div class={`single-select ${this.state._disabled === true ? 'disabled' : ''} `}>\n\t\t\t\t\t<KolInputTag\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_alert={this.showAsAlert()}\n\t\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t_shortKey={this.state._shortKey}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey || this.state._shortKey)} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t\t<kbd class=\"badge-text-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t{buildBadgeTextString(this.state._accessKey || this.state._shortKey)}\n\t\t\t\t\t\t\t\t\t</kbd>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t\t<div class=\"single-select__group\">\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\t\t\tclass=\"single-select__input\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"single-select-input\"\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\t\t\t\t\t\taria-controls=\"listbox\"\n\t\t\t\t\t\t\t\t\tvalue={this._inputValue}\n\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\t\taria-keyshortcuts={this.state._shortKey}\n\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\t\taria-activedescendant={this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined}\n\t\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tautoComplete=\"off\" /* disable browser's not accessible autocomplete popup */\n\t\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\t\tonClick={this.toggleListbox.bind(this)}\n\t\t\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{this._inputValue && !this.state._hideClearButton && (\n\t\t\t\t\t\t\t\t\t<KolIconTag\n\t\t\t\t\t\t\t\t\t\t_icons=\"codicon codicon-close\"\n\t\t\t\t\t\t\t\t\t\t_label={translate('kol-delete-selection')}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tthis.clearSelection();\n\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tclass=\"single-select__delete\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t<button tabindex=\"-1\" class=\"single-select__button\" onClick={this.toggleListbox.bind(this)} disabled={this.state._disabled}>\n\t\t\t\t\t\t\t\t\t<KolIconTag _icons=\"codicon codicon-triangle-down\" _label={translate('kol-dropdown')} />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{this._isOpen && !(this.state._disabled === true) && (\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\t\t\t\tclass={clsx('single-select__listbox', this.blockSuggestionMouseOver && 'single-select__listbox--cursor-hidden')}\n\t\t\t\t\t\t\t\t\tstyle={{ '--visible-options': `${this._rows ?? 5}` }}\n\t\t\t\t\t\t\t\t\tonKeyDown={this.handleKeyDownDropdown.bind(this)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\tthis._filteredOptions.map((option, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tid={`option-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) this.refOptions[index] = el;\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-selected={this._value === (option as Option<string>).value ? 'true' : undefined}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(event: Event) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis._isOpen = false;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis._hasOpened = false;\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!this.blockSuggestionMouseOver) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis._focusedOptionIndex = index;\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"single-select__item\"\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === 'NumpadEnter') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(option as Option<string>);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox(e);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tname=\"options\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tid={`option-radio-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tvalue={(option as Option<string>).value}\n\t\t\t\t\t\t\t\t\t\t\t\t\tchecked={this._value === (option as Option<string>).value || index === this._focusedOptionIndex}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t\t\t\t\t<label htmlFor={`option-radio-${index}`} class=\"radio-label\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<li class=\"single-select__no-results-message\">{translate('kol-no-results-message')} </li>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolInputTag>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('focusout', { target: 'window' })\n\tpublic handleFocusOut() {\n\t\tsetTimeout(() => {\n\t\t\tif (!this.host?.contains(document.activeElement)) {\n\t\t\t\tthis.onBlur();\n\t\t\t}\n\t\t}, 0);\n\t}\n\t@Listen('blur', { target: 'window' })\n\tpublic handleWindowBlur() {\n\t\tthis.onBlur();\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst handleEvent = (isOpen?: boolean, callback?: () => void): void => {\n\t\t\tevent.preventDefault();\n\n\t\t\tif (isOpen !== undefined) {\n\t\t\t\tthis._isOpen = isOpen;\n\t\t\t\tif (!isOpen) {\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t\tcallback?.();\n\t\t};\n\n\t\tswitch (event.key) {\n\t\t\tcase 'Down':\n\t\t\tcase 'ArrowDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Up':\n\t\t\tcase 'ArrowUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(-1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Tab':\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tthis._isOpen = !this._isOpen;\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Esc':\n\t\t\tcase 'Escape': {\n\t\t\t\tthis._hasOpened = false;\n\t\t\t\tthis._isOpen = false;\n\n\t\t\t\thandleEvent(false);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase ' ': {\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tif (Array.isArray(this._filteredOptions) && this._filteredOptions.length > 0) {\n\t\t\t\t\t\tthis.selectOption(this._filteredOptions[this._focusedOptionIndex] as Option<string>);\n\t\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t\t\thandleEvent(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tthis.toggleListbox(event);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'NumpadEnter':\n\t\t\tcase 'Enter': {\n\t\t\t\tthis.toggleListbox(event);\n\t\t\t\tthis._hasOpened = false;\n\t\t\t\tthis._isOpen = false;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis._focusedOptionIndex = this._filteredOptions ? this._filteredOptions.length - 1 : 0;\n\t\t\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageUp': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(-10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageDown': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly controller: SingleSelectController;\n\t@State()\n\tprivate _isOpen = false;\n\t@State()\n\tprivate _hasOpened = false;\n\t@State()\n\tprivate _filteredOptions?: OptionsPropType = [];\n\t@State()\n\tprivate _inputValue: string = '';\n\t@State()\n\tprivate blockSuggestionMouseOver: boolean = false;\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component’s interactive element.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * 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.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options!: OptionsPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: StencilUnknown;\n\n\t/**\n\t * Defines the whether the clear button should be hidden.\n\t */\n\t@Prop() public _hideClearButton?: boolean = false;\n\n\t/**\n\t * Maximum number of visible rows in the options dropdown before scrolling.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t@State() public state: SingleSelectStates = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_hideClearButton: false,\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SingleSelectController(this, 'single-select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t\tthis._filteredOptions = value;\n\t\tthis.updateInputValue(this._value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: StencilUnknown): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.oldValue = value;\n\t\tthis.updateInputValue(value);\n\t}\n\n\t@Watch('_hideClearButton ')\n\tpublic validateHideClearButton(value?: boolean): void {\n\t\tthis.controller.validateHideClearButton(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Listen('mousemove')\n\tpublic handleMouseEvent() {\n\t\tthis.blockSuggestionMouseOver = false;\n\t}\n\n\tprivate updateInputValue(value?: StencilUnknown) {\n\t\tif (Array.isArray(this._options)) {\n\t\t\tconst matchedOption = this._options.find((option) => option.value === value);\n\t\t\tthis._inputValue = matchedOption ? String(matchedOption.label) : '';\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.refOptions = [];\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.oldValue = this._value;\n\t\tthis._filteredOptions = this.state._options;\n\t\tthis.updateInputValue(this._value);\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\tif (this.oldValue !== this.refInput?.value) {\n\t\t\tthis.oldValue = this.refInput?.value;\n\t\t}\n\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function' && !this._isOpen) {\n\t\t\tthis.state._on.onChange(event, this._value && this.oldValue !== this.refInput?.value);\n\t\t}\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/kolibri/kol-skip-nav.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-e850ccc2.js";import"./index-7a63e9eb.js";import{r as i,a as o}from"./unique-nav-labels-4be6182a.js";import{w as a}from"./validation-7170ea32.js";import{j as s}from"./component-names-4cb1c62b.js";import{v as l}from"./label-7d1ce375.js";const r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  ul {\n    display: grid;\n    place-items: center;\n    list-style: none;\n  }\n  ul li {\n    height: 0;\n  }\n  .kol-link-wc a {\n    position: absolute;\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-link-wc a:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n  }\n}",d=r,c=class{constructor(e){n(this,e),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e(t,{key:"f29c8a4158c4341821fcad18594cd382ef61ccd9",class:"kol-skip-nav"},e("nav",{key:"e747f5e6fe1d2da606d507983e008657f57dcede","aria-label":this.state._label},e("ul",{key:"719ba2c745ee86290bb2f232a6c09610059f86b2"},this.state._links.map((n,t)=>e("li",{key:t},e(s,Object.assign({},n)))))))}validateLabel(n,e,t=!1){t||i(this.state._label),l(this,n,{required:!0}),o(this.state._label)}validateLinks(n){a("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};c.style={default:d};export{c as kol_skip_nav};
+import{r as n,h as e,H as t}from"./index-37144985.js";import"./index-7a63e9eb.js";import{r as i,a as o}from"./unique-nav-labels-4be6182a.js";import{w as a}from"./validation-7170ea32.js";import{j as s}from"./component-names-4cb1c62b.js";import{v as l}from"./label-7d1ce375.js";const r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  ul {\n    display: grid;\n    place-items: center;\n    list-style: none;\n  }\n  ul li {\n    height: 0;\n  }\n  .kol-link-wc a {\n    position: absolute;\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .kol-link-wc a:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n  }\n}",d=r,h=class{constructor(e){n(this,e),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e(t,{key:"f29c8a4158c4341821fcad18594cd382ef61ccd9",class:"kol-skip-nav"},e("nav",{key:"e747f5e6fe1d2da606d507983e008657f57dcede","aria-label":this.state._label},e("ul",{key:"719ba2c745ee86290bb2f232a6c09610059f86b2"},this.state._links.map((n,t)=>e("li",{key:t},e(s,Object.assign({},n)))))))}validateLabel(n,e,t=!1){t||i(this.state._label),l(this,n,{required:!0}),o(this.state._label)}validateLinks(n){a("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};h.style={default:d};export{h as kol_skip_nav};