@public-ui/components 1.7.0-rc.11 → 1.7.0-rc.13

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","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateOptions","validateOptionsWithOptgroup","hooks","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_list","_required","_rows","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","disabled","label","_a","map","index","render","ariaDescribedBy","getRenderStates","hasExpertSlot","_label","Host","class","_hasValue","_hideLabel","select","_disabled","_error","_hint","_icon","_id","_touched","onClick","ref","focus","slot","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","onBlur","onFocus","hidden","_align","_tooltipAlign","hostRef","propagateFocus","event","from","stopPropagation","tryToDispatchKoliBriEvent","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateList","validateName","validateOn","validateSize","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["src/components/select/controller.ts","src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { OptionsWithOptgroupPropType, validateOptionsWithOptgroup } from '../../types/props/options';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, 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? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\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\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\tthis.onStateChange();\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\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\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\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] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\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\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateOptions(this.component._options || this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows || this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { OptionsWithOptgroupPropType } from '../../types/props/options';\nimport { RowsPropType } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { API, States } from './types';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { IdPropType } from '../../types/props/id';\nimport { NamePropType } from '../../types/props/name';\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.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements API {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\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 = this.state._label === false; // _label=\"\" or _label\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\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_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\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_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\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\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t/**\n\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 * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\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\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\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\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</option>\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})}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t\t<kol-tooltip-wc\n\t\t\t\t\t/**\n\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t */\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"input-tooltip\"\n\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t></kol-tooltip-wc>\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 */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\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;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Deprecated: Defines an individual height.\n\t *\n\t * @deprecated Use _rows instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Hides the label.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean;\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. `_icon=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\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 * Deprecated: Options the user can choose from, also supporting Optgroup.\n\t * @deprecated use _options\n\t */\n\t@Prop() public _list?: Stringified<SelectOption<W3CInputValue>[]>;\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;\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 * Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t */\n\t@Prop() public _size?: number;\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: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_options: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\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('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(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('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(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('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(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('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateRows(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._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._value = Array.from(this.ref?.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\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\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"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","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHideError","hooks","afterPatch","_hideError","a11yHint","validateHeight","watchString","validateOptions","validateOptionsWithOptgroup","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_list","_required","_rows","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","disabled","label","_a","map","index","render","ariaDescribedBy","getRenderStates","hasExpertSlot","_label","Host","class","_hasValue","_hideLabel","select","_disabled","_error","_hint","_icon","_id","_touched","onClick","ref","focus","slot","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","onBlur","onFocus","hidden","_align","_tooltipAlign","hostRef","propagateFocus","event","from","stopPropagation","tryToDispatchKoliBriEvent","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateList","validateName","validateOn","validateSize","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["src/components/select/controller.ts","src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { OptionsWithOptgroupPropType, validateOptionsWithOptgroup } from '../../types/props/options';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\nimport { HideErrorPropType, validateHideError } from '../../types/props/hide-error';\nimport { a11yHint } from '../../utils/a11y.tipps';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, 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? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\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\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\tthis.onStateChange();\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\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tvalidateHideError(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideError) {\n\t\t\t\t\t\ta11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\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\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] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\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\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateHideError(this.component._hideError);\n\t\tthis.validateOptions(this.component._options || this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows || this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n.error.hidden {\n\tdisplay: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { OptionsWithOptgroupPropType } from '../../types/props/options';\nimport { RowsPropType } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { API, States } from './types';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { IdPropType } from '../../types/props/id';\nimport { NamePropType } from '../../types/props/name';\nimport { HideErrorPropType } from '../../types/props/hide-error';\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.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements API {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\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 = this.state._label === false; // _label=\"\" or _label\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\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_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\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_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\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\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t/**\n\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 * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\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\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\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\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</option>\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})}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t\t<kol-tooltip-wc\n\t\t\t\t\t/**\n\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t */\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tclass=\"input-tooltip\"\n\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t></kol-tooltip-wc>\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 */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\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;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Deprecated: Defines an individual height.\n\t *\n\t * @deprecated Use _rows instead.\n\t */\n\t@Prop() public _height?: 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 label.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean;\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. `_icon=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\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 * Deprecated: Options the user can choose from, also supporting Optgroup.\n\t * @deprecated use _options\n\t */\n\t@Prop() public _list?: Stringified<SelectOption<W3CInputValue>[]>;\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;\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 * Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t */\n\t@Prop() public _size?: number;\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: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\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('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(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('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(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('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(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('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateRows(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._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._value = Array.from(this.ref?.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\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\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":";;;4rBAeaA,UAAyBC,EAKrC,WAAAC,CAAmBC,EAA8CC,EAAcC,GAC9EC,MAAMH,EAAWC,EAAMC,GAHPE,KAAAC,aAAe,IAAIC,IAOpBF,KAAAG,eAAkBC,GAAmDJ,KAAKC,aAAaI,IAAID,GAE1FJ,KAAAM,iBAAmB,CAACC,EAAeC,IAElDA,EAAQC,MAAMC,UACLA,EAAiCH,QAAU,SAC/CG,EAAiCH,QAAUA,EAC5CI,MAAMC,QAASF,EAA4BF,SAC3CR,KAAKM,iBAAiBC,EAAQG,EAA4BF,SAC1D,UACEK,UAISb,KAAAc,sBAAwB,CAACC,EAAkBP,IACpDO,EAAOC,QAAQT,GAAUP,KAAKM,iBAAiBC,EAAOC,KAAaK,YAG1Db,KAAAiB,mBAAqB,CAACC,EAAiBC,KACvD,MAAMX,EAAUW,EAAUC,IAAI,YAAcD,EAAUd,IAAI,YAAcL,KAAKJ,UAAUyB,MAAMC,SAC7F,GAAIX,MAAMC,QAAQJ,IAAYA,EAAQe,OAAS,EAAG,CACjDvB,KAAKC,aAAauB,QAClBC,EAAiBzB,KAAKC,aAAcO,GACpC,MAAMD,EAAQY,EAAUC,IAAI,UAAYD,EAAUd,IAAI,UAAYL,KAAKJ,UAAUyB,MAAMH,OACvF,MAAMQ,EAAW1B,KAAKc,sBACrBH,MAAMC,QAAQL,IAAUA,EAAMgB,OAAS,EAAKhB,EAAqB,GACjEC,GAED,GAAIR,KAAKJ,UAAU+B,YAAc,OAASD,EAASH,SAAW,EAAG,CAChEJ,EAAUS,IAAI,SAAU,CAEtBpB,EAAQ,GAGPD,QAEHP,KAAK6B,e,MACC,GAAIlB,MAAMC,QAAQL,IAAUmB,EAASH,OAAShB,EAAMgB,OAAQ,CAClEJ,EAAUS,IAAI,SAAUF,GACxB1B,KAAK6B,e,IA1CP7B,KAAKJ,UAAYA,C,CA+CX,iBAAAkC,CAAkBvB,GACxBuB,EAAkB9B,KAAKJ,UAAWW,EAAO,CACxCwB,MAAO,CACNC,WAAY,KACX,GAAIhC,KAAKJ,UAAUyB,MAAMY,WAAY,CACpCC,EAAS,2G,MAWP,cAAAC,CAAe5B,GACrB6B,EAAYpC,KAAKJ,UAAW,UAAWW,E,CAGjC,eAAA8B,CAAgB9B,GACtB+B,EAA4BtC,KAAKJ,UAAWW,EAAO,CAClDwB,MAAO,CACNQ,YAAavC,KAAKiB,qB,CAKd,gBAAAuB,CAAiBjC,GACvBkC,EAAazC,KAAKJ,UAAW,YAAaW,EAAO,CAChDwB,MAAO,CACNQ,YAAavC,KAAKiB,qB,CAWd,gBAAAyB,CAAiBnC,GACvBkC,EAAazC,KAAKJ,UAAW,YAAaW,E,CAGpC,YAAAoC,CAAapC,GACnBoC,EAAa3C,KAAKJ,UAAWW,E,CAGvB,aAAAqC,CAAcrC,GACpBsC,EAAqB7C,KAAKJ,UAAW,UAAU,IAAM,MAAMW,EAAOM,UAAW,CAC5EkB,MAAO,CACNQ,YAAavC,KAAKiB,sBAGpBjB,KAAK8C,uBAAuB9C,KAAKJ,UAAUsB,O,CAGrC,iBAAA6B,CAAkBC,GACxBjD,MAAMgD,oBAEN/C,KAAK6B,cAAgB,KACpB,UAAWmB,IAAa,WAAY,CACnC,MAAMC,EAAUC,YAAW,KAC1BC,aAAaF,GACbD,EAASI,EAAmB,G,GAK/BpD,KAAKmC,eAAenC,KAAKJ,UAAUyD,SACnCrD,KAAK8B,kBAAkB9B,KAAKJ,UAAUqC,YACtCjC,KAAKqC,gBAAgBrC,KAAKJ,UAAU0B,UAAYtB,KAAKJ,UAAU0D,OAC/DtD,KAAKwC,iBAAiBxC,KAAKJ,UAAU+B,WACrC3B,KAAK0C,iBAAiB1C,KAAKJ,UAAU2D,WACrCvD,KAAK2C,aAAa3C,KAAKJ,UAAU4D,OAASxD,KAAKJ,UAAU6D,OACzDzD,KAAK4C,cAAc5C,KAAKJ,UAAUsB,O,EClJpC,MAAMwC,EAAkB,+7DCqBxB,MAAMC,EAAa,CAACC,EAA6BC,IACzClD,MAAMC,QAAQgD,IAAcA,EAAUE,SAASD,G,MAa1CE,EAAS,MASb,cAAAC,CAAeC,EAA4BC,G,MAClD,OACCC,EAAA,YAAUC,SAAUH,EAASG,SAAUC,MAAOJ,EAASI,QACrDC,EAAAL,EAASzD,WAAO,MAAA8D,SAAA,SAAAA,EAAEC,KAAI,CAAC7D,EAAqC8D,KAC5D,MAAMpE,EAAM,GAAG8D,KAAUM,IACzB,GAAI7D,MAAMC,QAASF,EAA4BF,SAAU,CACxD,OAAOR,KAAKgE,eAAetD,EAA4BN,E,KACjD,CACN,OACC+D,EAAA,UACCC,SAAU1D,EAAO0D,SACjBhE,IAAKA,EAELsB,SAAUiC,EAAW3D,KAAKqB,MAAMH,OAASR,EAAiCH,OAC1EA,MAAOH,GAENM,EAAO2D,M,MASR,MAAAI,GACN,MAAMC,gBAAEA,GAAoBC,EAAgB3E,KAAKqB,OACjD,MAAMuD,EAAgB5E,KAAKqB,MAAMwD,SAAW,MAE5C,OACCV,EAACW,EAAI,CAACC,MAAO,CAAE,YAAa/E,KAAKqB,MAAM2D,YACtCb,EAAA,aACCY,MAAO,CACN,eAAgB/E,KAAKqB,MAAM4D,WAC3BC,OAAQ,MAETC,UAAWnF,KAAKqB,MAAM8D,UACtBC,OAAQpF,KAAKqB,MAAM+D,OACnBnD,WAAYjC,KAAKqB,MAAMY,WACvBgD,WAAYjF,KAAKqB,MAAM4D,WACvBI,MAAOrF,KAAKqB,MAAMgE,MAClBC,MAAOtF,KAAKqB,MAAMiE,MAClBC,IAAKvF,KAAKqB,MAAMkE,IAChBhC,UAAWvD,KAAKqB,MAAMkC,UACtBiC,SAAUxF,KAAKqB,MAAMmE,SACrBC,QAAS,SAAAnB,EAAM,OAAAA,EAAAtE,KAAK0F,OAAG,MAAApB,SAAA,SAAAA,EAAEqB,OAAO,GAGhCxB,EAAA,QAAMyB,KAAK,SAAShB,EAAgBT,EAAA,aAAgBnE,KAAKqB,MAAMwD,QAC/DV,EAAA,OAAKyB,KAAK,SACTzB,EAAA,UACCuB,IAAK1F,KAAK6F,SACVC,MAAM,GACNC,UAAW/F,KAAKqB,MAAM2E,WAAU,mBACdtB,EAAgBnD,OAAS,EAAImD,EAAgBuB,KAAK,KAAOpF,UAAS,aACxEb,KAAKqB,MAAM4D,mBAAqBjF,KAAKqB,MAAMwD,SAAW,SAAW7E,KAAKqB,MAAMwD,OAAShE,UACjGqF,eAAe,MACfC,YAAY,MACZ/B,SAAUpE,KAAKqB,MAAM8D,UACrBiB,GAAIpG,KAAKqB,MAAMkE,IACfc,SAAUrG,KAAKqB,MAAMM,UACrB9B,KAAMG,KAAKqB,MAAMiF,MACjBC,SAAUvG,KAAKqB,MAAMkC,UACrBiD,KAAMxG,KAAKqB,MAAMmC,MACjBiD,WAAW,QACXC,MAAO,CACNC,OAAQ3G,KAAKqB,MAAMgC,SAGnBoC,QAASzF,KAAK4G,WAAWC,SAASpB,QAClCqB,OAAQ9G,KAAK4G,WAAWC,SAASC,OACjCC,QAAS/G,KAAK4G,WAAWC,SAASE,QAEnC/D,SAAUhD,KAAKgD,UAEdhD,KAAKqB,MAAMC,SAASiD,KAAI,CAAC7D,EAAQ8D,KAMjC,MAAMpE,EAAM,IAAIoE,IAChB,GAAI7D,MAAMC,QAASF,EAAuCF,SAAU,CACnE,OAAOR,KAAKgE,eAAetD,EAAuCN,E,KAC5D,CACN,OACC+D,EAAA,UACCC,SAAU1D,EAAO0D,SACjBhE,IAAKA,EAELsB,SAAUiC,EAAW3D,KAAKqB,MAAMH,OAASR,EAA4CH,OACrFA,MAAOH,GAENM,EAAO2D,M,QAQfF,EAAA,gCAKa,OACZY,MAAM,gBACNiC,OAAQpC,IAAkB5E,KAAKqB,MAAM4D,WACrCgC,OAAQjH,KAAKkH,cACbrC,cAAe7E,KAAKqB,MAAMwD,SAAW,SAAW7E,KAAKqB,MAAMwD,OAAS,K,CAqJxE,WAAAlF,CAAAwH,G,UAxQiBnH,KAAA6F,SAAYH,IAC5B1F,KAAK0F,IAAMA,EACX0B,EAAepH,KAAKF,KAAME,KAAK0F,IAAI,EAsY5B1F,KAAAgD,SAAYqE,I,QACnBrH,KAAKkB,OAASP,MAAM2G,OAAKhD,EAAAtE,KAAK0F,OAAG,MAAApB,SAAA,SAAAA,EAAE9D,UAAW,IAC5CQ,QAAQN,GAAWA,EAAOgB,WAAa,OACvC6C,KAAK7D,IAAM,IAAA4D,EAAK,OAAAA,EAAAtE,KAAK4G,WAAWzG,eAAeO,EAAOH,UAAM,MAAA+D,SAAA,SAAAA,EAAE/D,KAAe,IAG/EgH,EAAgBF,GAChBG,EAA0B,SAAUxH,KAAKF,KAAME,KAAKkB,QAGpDlB,KAAK4G,WAAW9D,uBAAuB9C,KAAKkB,QAG5C,WAAWuG,EAAAzH,KAAKqB,MAAMqG,OAAG,MAAAD,SAAA,SAAAA,EAAEzE,YAAa,WAAY,CACnDhD,KAAKqB,MAAMqG,IAAI1E,SAASqE,EAAOrH,KAAKkB,O,yCAnR4B,K,sFAwBI,M,qCAWtC,G,kGA2BK,M,mNA+CiB,M,cAMc,M,iCAOpC,CAC/B8D,UAAW,MACX3B,QAAS,GACTpB,WAAY,MACZsD,IAAK,MAAMoC,MACX9C,OAAQ,MACRlD,UAAW,MACXL,SAAU,GACVJ,OAAQ,IAIRlB,KAAK4G,WAAa,IAAInH,EAAiBO,KAAM,SAAUA,KAAKF,K,CAItD,iBAAA8H,CAAkBrH,GACxBP,KAAK4G,WAAWgB,kBAAkBrH,E,CAI5B,aAAAsH,CAActH,GACpBP,KAAK4G,WAAWiB,cAActH,E,CAIxB,gBAAAuH,CAAiBvH,GACvBP,KAAK4G,WAAWkB,iBAAiBvH,E,CAI3B,aAAAwH,CAAcxH,GACpBP,KAAK4G,WAAWmB,cAAcxH,E,CAIxB,cAAA4B,CAAe5B,GACrBP,KAAK4G,WAAWzE,eAAe5B,E,CAIzB,iBAAAuB,CAAkBvB,GACxBP,KAAK4G,WAAW9E,kBAAkBvB,E,CAI5B,iBAAAyH,CAAkBzH,GACxBP,KAAK4G,WAAWoB,kBAAkBzH,E,CAI5B,YAAA0H,CAAa1H,GACnBP,KAAK4G,WAAWqB,aAAa1H,E,CAIvB,YAAA2H,CAAa3H,GACnBP,KAAK4G,WAAWsB,aAAa3H,E,CAIvB,UAAA4H,CAAW5H,GACjBP,KAAK4G,WAAWuB,WAAW5H,E,CAIrB,aAAA6H,CAAc7H,GACpBP,KAAK4G,WAAWwB,cAAc7H,E,CAIxB,YAAA8H,CAAa9H,GACnBP,KAAKqC,gBAAgB9B,E,CAIf,gBAAAiC,CAAiBjC,GACvBP,KAAK4G,WAAWpE,iBAAiBjC,E,CAI3B,YAAA+H,CAAa/H,GACnBP,KAAK4G,WAAW0B,aAAa/H,E,CAIvB,UAAAgI,CAAWhI,GACjBP,KAAK4G,WAAW2B,WAAWhI,E,CAIrB,eAAA8B,CAAgB9B,GACtBP,KAAK4G,WAAWvE,gBAAgB9B,E,CAI1B,gBAAAmC,CAAiBnC,GACvBP,KAAK4G,WAAWlE,iBAAiBnC,E,CAI3B,YAAAoC,CAAapC,GACnBP,KAAK4G,WAAWjE,aAAapC,E,CAIvB,YAAAiI,CAAajI,GACnBP,KAAK4G,WAAWjE,aAAapC,E,CAIvB,2BAAAkI,CAA4BlI,GAClCP,KAAK4G,WAAW6B,4BAA4BlI,E,CAItC,gBAAAmI,CAAiBnI,GACvBP,KAAK4G,WAAW8B,iBAAiBnI,E,CAI3B,eAAAoI,CAAgBpI,GACtBP,KAAK4G,WAAW+B,gBAAgBpI,E,CAI1B,aAAAqC,CAAcrC,GACpBP,KAAK4G,WAAWhE,cAAcrC,E,CAGxB,iBAAAwC,GACN/C,KAAK4I,OAAS5I,KAAK4I,SAAW,KAC9B5I,KAAKwF,SAAWxF,KAAKwF,WAAa,KAClCxF,KAAK4G,WAAW7D,kBAAkB/C,KAAKgD,UAEvChD,KAAKqB,MAAM2D,YAAchF,KAAKqB,MAAMH,OACpClB,KAAK4G,WAAWiC,wBAAwBC,GAAO9I,KAAKqB,MAAM2D,YAAc8D,G"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t}from"./index-3702c36f.js";import{v as e}from"./label-448cbd66.js";import{w as a}from"./validation-03615ef3.js";import{r as n,a as s}from"./unique-nav-labels-c6750f60.js";import"./a11y.tipps-696eb980.js";import"./dev.utils-a315a059.js";import"./reuse-3698e2f5.js";import"./prop.validators-63a3830b.js";import"./index-d49940eb.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",l=class{constructor(t){i(this,t),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._label},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link-wc",Object.assign({},i)))))))}validateAriaLabel(i){this.validateLabel(i)}validateLabel(i,t,a=!1){a||n(this.state._label),e(this,i),s(this.state._label)}validateLinks(i){a("KolSkipNav",this,i)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){n(this.state._label)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};l.style={default:o};export{l as kol_skip_nav};
+import{r as i,h as t}from"./index-c51a2b6f.js";import{v as e}from"./label-9b9b703d.js";import{w as a}from"./validation-1f72f65c.js";import{r as n,a as s}from"./unique-nav-labels-c6750f60.js";import"./a11y.tipps-a762de67.js";import"./dev.utils-a3622dee.js";import"./reuse-3698e2f5.js";import"./prop.validators-761de71b.js";import"./index-d49940eb.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",l=class{constructor(t){i(this,t),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._label},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link-wc",Object.assign({},i)))))))}validateAriaLabel(i){this.validateLabel(i)}validateLabel(i,t,a=!1){a||n(this.state._label),e(this,i),s(this.state._label)}validateLinks(i){a("KolSkipNav",this,i)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){n(this.state._label)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};l.style={default:o};export{l as kol_skip_nav};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNav","_label","_links","render","h","this","state","map","link","index","key","Object","assign","validateAriaLabel","value","validateLabel","_oldValue","initial","removeNavLabel","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","_ariaLabel","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LinkProps } from '../link/types';\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._ariaLabel, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;8VAAA,MAAMA,EAAkB,25B,MCgBXC,EAAU,M,0GAkCU,CAC/BC,OAAQ,IACRC,OAAQ,G,CAnCF,MAAAC,GACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,QAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GACRL,EAAA,cAAAO,OAAAC,OAAA,GAAiBJ,Q,CAmCjB,iBAAAK,CAAkBC,GACxBT,KAAKU,cAAcD,E,CAIb,aAAAC,CAAcD,EAAuBE,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAeb,KAAKC,MAAML,O,CAE3Bc,EAAcV,KAAMS,GACpBK,EAAYd,KAAKC,MAAML,O,CAIjB,aAAAmB,CAAcN,GACpBO,EAAc,aAAchB,KAAMS,E,CAG5B,iBAAAQ,GACNjB,KAAKU,cAAcV,KAAKJ,QAAUI,KAAKkB,WAAYC,UAAW,MAC9DnB,KAAKe,cAAcf,KAAKH,O,CAGlB,oBAAAuB,GACNP,EAAeb,KAAKC,MAAML,O"}
+{"version":3,"names":["defaultStyleCss","KolSkipNav","_label","_links","render","h","this","state","map","link","index","key","Object","assign","validateAriaLabel","value","validateLabel","_oldValue","initial","removeNavLabel","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","_ariaLabel","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LinkProps } from '../link/types';\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._ariaLabel, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;8VAAA,MAAMA,EAAkB,+6B,MCgBXC,EAAU,M,0GAkCU,CAC/BC,OAAQ,IACRC,OAAQ,G,CAnCF,MAAAC,GACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,QAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GACRL,EAAA,cAAAO,OAAAC,OAAA,GAAiBJ,Q,CAmCjB,iBAAAK,CAAkBC,GACxBT,KAAKU,cAAcD,E,CAIb,aAAAC,CAAcD,EAAuBE,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAeb,KAAKC,MAAML,O,CAE3Bc,EAAcV,KAAMS,GACpBK,EAAYd,KAAKC,MAAML,O,CAIjB,aAAAmB,CAAcN,GACpBO,EAAc,aAAchB,KAAMS,E,CAG5B,iBAAAQ,GACNjB,KAAKU,cAAcV,KAAKJ,QAAUI,KAAKkB,WAAYC,UAAW,MAC9DnB,KAAKe,cAAcf,KAAKH,O,CAGlB,oBAAAuB,GACNP,EAAeb,KAAKC,MAAML,O"}