@public-ui/components 1.6.0-rc.1 → 1.6.0-rc.10

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

@@ -1 +1 @@
-{"version":3,"names":["validateInputSelectList","option","label","length","disabled","trim","hasEnoughReadableChars","containsOnlyNumbers","a11yHint","Array","isArray","options","find","item","undefined","SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","filterValuesInOptions","values","filter","beforePatchListValue","_value","nextState","list","has","state","_list","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateList","watchJsonArrayString","hooks","beforePatch","validateMultiple","watchBoolean","validateRequired","validateSize","watchNumber","min","validateValue","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_required","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","_a","map","index","render","ariaDescribedBy","getRenderStates","showExpertSlot","_label","showDefaultSlot","Host","class","_hasValue","select","_disabled","_error","_hideLabel","_hint","_icon","_id","_touched","onClick","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","onBlur","onFocus","hostRef","propagateFocus","event","from","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateName","validateOn","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["./src/utils/validators/list.ts","./src/components/select/controller.ts","./src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","./src/components/select/component.tsx"],"sourcesContent":["import { Optgroup, SelectOption } from '../../types/input/types';\nimport { a11yHint } from '../a11y.tipps';\nimport { containsOnlyNumbers, hasEnoughReadableChars } from '../../types/props/label';\n\nexport const validateInputSelectList = <T>(option: SelectOption<T>): boolean => {\n\tif (typeof option === 'object' && option !== null) {\n\t\tif (typeof option.label === 'string' && option.label.length > 0) {\n\t\t\toption.disabled = option.disabled === true;\n\t\t\toption.label = `${option.label}`.trim();\n\t\t\tif (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {\n\t\t\t\ta11yHint(\n\t\t\t\t\t`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (Array.isArray((option as Optgroup<T>).options)) {\n\t\t\t\treturn (\n\t\t\t\t\t(option as Optgroup<T>).options.find((item) => {\n\t\t\t\t\t\treturn validateInputSelectList(item) === false;\n\t\t\t\t\t}) === undefined\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn true;\n\t\t} else if (typeof option.label === 'number') {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n};\n","import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchNumber, 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 { validateInputSelectList } from '../../utils/validators/list';\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 beforePatchListValue = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst list = nextState.has('_list') ? nextState.get('_list') : this.component.state._list;\n\t\tif (Array.isArray(list) && list.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, list 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(Array.isArray(value) && value.length > 0 ? (value as string[]) : [], list as SelectOption<W3CInputValue>[]);\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\tlist[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 validateList<T>(value?: SelectOption<T>[] | string): void {\n\t\twatchJsonArrayString(this.component, '_list', validateInputSelectList, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\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.beforePatchListValue,\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 validateSize(value?: number): void {\n\t\twatchNumber(this.component, '_size', value, {\n\t\t\tmin: 1,\n\t\t});\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.beforePatchListValue,\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.validateList(this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSize(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';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { ComponentApi, States } from './types';\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 ComponentApi {\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 === true} 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 === true}\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 showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\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<span slot=\"label\">{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t\t/**\n\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 * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\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} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\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\tvalue={key}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</option>\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</select>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t *\n\t * @deprecated Use _size instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Das Label dient der Beschriftung unterschiedlicher Elemente.\n\t * - Button -> label text\n\t * - Heading -> headline text\n\t * - Input, Select und Textarea -> label text\n\t * - Summary -> summary text\n\t * - Table -> caption text\n\t * - etc.\n\t *\n\t * Das Label ist häufig ein Pflichtattribut und kann leer gesetzt werden,\n\t * wenn man das Label mittels dem Expert-Slot überschreiben will.\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _list!: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean = false;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\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 * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_id: nonce(), // ⚠ required\n\t\t_label: '…', // ⚠ required\n\t\t_list: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'textarea', 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?: string): 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.controller.validateList(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('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(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\t/**\n\t\t * TODO: Find values via value keys.\n\t\t */\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\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\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":["validateInputSelectList","option","label","length","disabled","trim","hasEnoughReadableChars","containsOnlyNumbers","a11yHint","Array","isArray","options","find","item","undefined","SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","filterValuesInOptions","values","filter","beforePatchListValue","_value","nextState","list","has","state","_list","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateList","watchJsonArrayString","hooks","beforePatch","validateMultiple","watchBoolean","validateRequired","validateSize","watchNumber","min","validateValue","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_required","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","_a","map","index","render","ariaDescribedBy","getRenderStates","showExpertSlot","_label","showDefaultSlot","Host","class","_hasValue","_hideLabel","select","_disabled","_error","_hint","_icon","_id","_touched","onClick","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","onBlur","onFocus","hostRef","propagateFocus","event","from","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["src/utils/validators/list.ts","src/components/select/controller.ts","src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import { Optgroup, SelectOption } from '../../types/input/types';\nimport { containsOnlyNumbers, hasEnoughReadableChars } from '../../types/props/label';\nimport { a11yHint } from '../a11y.tipps';\n\nexport const validateInputSelectList = <T>(option: SelectOption<T>): boolean => {\n\tif (typeof option === 'object' && option !== null) {\n\t\tif (typeof option.label === 'string' && option.label.length > 0) {\n\t\t\toption.disabled = option.disabled === true;\n\t\t\toption.label = `${option.label}`.trim();\n\t\t\tif (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {\n\t\t\t\ta11yHint(\n\t\t\t\t\t`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (Array.isArray((option as Optgroup<T>).options)) {\n\t\t\t\treturn (\n\t\t\t\t\t(option as Optgroup<T>).options.find((item) => {\n\t\t\t\t\t\treturn validateInputSelectList(item) === false;\n\t\t\t\t\t}) === undefined\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn true;\n\t\t} else if (typeof option.label === 'number') {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { validateInputSelectList } from '../../utils/validators/list';\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 beforePatchListValue = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst list = nextState.has('_list') ? nextState.get('_list') : this.component.state._list;\n\t\tif (Array.isArray(list) && list.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, list 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(Array.isArray(value) && value.length > 0 ? (value as string[]) : [], list as SelectOption<W3CInputValue>[]);\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\tlist[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 validateList<T>(value?: SelectOption<T>[] | string): void {\n\t\twatchJsonArrayString(this.component, '_list', validateInputSelectList, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\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.beforePatchListValue,\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 validateSize(value?: number): void {\n\t\twatchNumber(this.component, '_size', value, {\n\t\t\tmin: 1,\n\t\t});\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.beforePatchListValue,\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.validateList(this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSize(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 { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { ComponentApi, States } from './types';\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 ComponentApi {\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 === true} 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 === true}\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 showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\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<span slot=\"label\">{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t\t/**\n\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 * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\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} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\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\tvalue={key}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</option>\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</select>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t *\n\t * @deprecated Use _size instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _list!: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Macht das Eingabeelementzu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\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?: string;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (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 * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_id: nonce(), // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_list: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'textarea', 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.controller.validateList(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('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): 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\t/**\n\t\t * TODO: Find values via value keys.\n\t\t */\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\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\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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"}

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-34c3d6f8.js";import{b as e}from"./a11y.tipps-2e27f8e6.js";import{w as a}from"./prop.validators-2c20cdf8.js";import{w as n}from"./validation-7df9acd0.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";const s=":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}",r=class{constructor(t){i(this,t),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._ariaLabel},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link",Object.assign({},i,{_stealth:!0})))))))}validateAriaLabel(i){a(this,"_ariaLabel",i,{required:!0}),e(i)}validateLinks(i){n("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};r.style={default:s};export{r as kol_skip_nav};
+import{r as i,h as t}from"./index-2c046ff1.js";import{v as e}from"./label-2a601017.js";import{w as n}from"./validation-1f01325c.js";import"./a11y.tipps-e607b8b3.js";import"./dev.utils-8aef00f6.js";import"./reuse-c2156413.js";import"./prop.validators-683bb1d0.js";import"./index-37b5cbcf.js";const a=":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}",s=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){e(this,i)}validateLinks(i){n("KolSkipNav",this,i)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};s.style={default:a};export{s as kol_skip_nav};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNav","_ariaLabel","_links","render","h","this","state","map","link","index","key","Object","assign","_stealth","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"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}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { watchNavLinks } from '../nav/validation';\n\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<LinkProps[]>;\n};\ntype OptionalProps = unknown;\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: LinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\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 Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\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{/*\n\t\t\t\t\t\t\t\t\tThis stealth link should be replaced with the kol-link-wc and\n\t\t\t\t\t\t\t\t\tstyled only inside skip-nav css.\n\t\t\t\t\t\t\t\t*/}\n\t\t\t\t\t\t\t\t<kol-link {...link} _stealth={true}></kol-link>\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 * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Setzt die Liste der darzustellenden Links.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\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.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mRAAA,MAAMA,EAAkB,yvB,MC8BXC,EAAU,M,oFA+BU,CAC/BC,WAAY,IACZC,OAAQ,G,CAhCFC,SACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,YAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GAKRL,EAAA,WAAAO,OAAAC,OAAA,GAAcJ,EAAI,CAAEK,SAAU,Y,CAyB9BC,kBAAkBC,GACxBC,EAAYX,KAAM,aAAcU,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAIpBI,cAAcJ,GACpBK,EAAc,aAAcf,KAAMU,E,CAG5BM,oBACNhB,KAAKS,kBAAkBT,KAAKJ,YAC5BI,KAAKc,cAAcd,KAAKH,O"}
+{"version":3,"names":["defaultStyleCss","KolSkipNav","_label","_links","render","h","this","state","map","link","index","key","Object","assign","validateAriaLabel","value","validateLabel","validateLinks","watchNavLinks","componentWillLoad","_ariaLabel"],"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 '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNavLinks } from '../nav/validation';\nimport { KoliBriSkipNavAPI, KoliBriSkipNavStates } from './types';\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 KoliBriSkipNavAPI {\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 * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t *  @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: KoliBriSkipNavStates = {\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): void {\n\t\tvalidateLabel(this, value);\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);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mSAAA,MAAMA,EAAkB,25B,MCeXC,EAAU,M,0GAkCwB,CAC7CC,OAAQ,IACRC,OAAQ,G,CAnCFC,SACN,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,CAmCjBK,kBAAkBC,GACxBT,KAAKU,cAAcD,E,CAIbC,cAAcD,GACpBC,EAAcV,KAAMS,E,CAIdE,cAAcF,GACpBG,EAAc,aAAcZ,KAAMS,E,CAG5BI,oBACNb,KAAKU,cAAcV,KAAKJ,QAAUI,KAAKc,YACvCd,KAAKW,cAAcX,KAAKH,O"}

package/dist/kolibri/kol-span-wc.entry.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{r as i,h as s,H as t}from"./index-2c046ff1.js";import{v as e}from"./hide-label-e9f288ac.js";import{v as l}from"./icon-278d567d.js";import{a}from"./label-2a601017.js";import"./prop.validators-683bb1d0.js";import"./a11y.tipps-e607b8b3.js";import"./dev.utils-8aef00f6.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const o=class{constructor(t){i(this,t),this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this.state={_hideLabel:!1,_icon:{},_label:!1}}render(){const i="string"==typeof this.state._label;return s(t,{class:{"icon-only":!!this.state._hideLabel,"hide-label":!!this.state._hideLabel}},this.state._icon.top&&s("kol-icon",{class:"icon top",style:this.state._icon.top.style,_label:"",_icon:this.state._icon.top.icon}),s("span",null,this.state._icon.left&&s("kol-icon",{class:"icon left",style:this.state._icon.left.style,_label:"",_icon:this.state._icon.left.icon}),!this.state._hideLabel&&i?s("span",null,this.state._label):"",s("span",{"aria-hidden":i?"true":void 0,hidden:i},s("slot",{name:"expert"})),this.state._icon.right&&s("kol-icon",{class:"icon right",style:this.state._icon.right.style,_label:"",_icon:this.state._icon.right.icon})),this.state._icon.bottom&&s("kol-icon",{class:"icon bottom",style:this.state._icon.bottom.style,_label:"",_icon:this.state._icon.bottom.icon}))}validateHideLabel(t){e(this,t)}validateIcon(t){l(this,t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){a(this,t)}componentWillLoad(){this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label)}static get watchers(){return{_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"]}}};export{o as kol_span_wc};

package/dist/kolibri/kol-span-wc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["KolSpanWc","_hideLabel","_icon","_label","render","hideExpertSlot","this","state","h","Host","class","top","style","icon","left","undefined","hidden","name","right","bottom","validateHideLabel","value","validateIcon","validateIconOnly","validateLabel","validateLabelWithExpertSlot","componentWillLoad","_iconOnly"],"sources":["src/components/span/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { validateHideLabel } from '../../types/props/hide-label';\nimport { validateIcon } from '../../types/props/icon';\nimport { LabelWithExpertSlotPropType, validateLabelWithExpertSlot } from '../../types/props/label';\nimport { KolibriSpanAPI, KolibriSpanStates } from './types';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements KolibriSpanAPI {\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot: boolean = typeof this.state._label === 'string';\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': !!this.state._hideLabel, // @deprecated in v2\n\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && <kol-icon class=\"icon top\" style={this.state._icon.top.style} _label=\"\" _icon={this.state._icon.top.icon} />}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && <kol-icon class=\"icon left\" style={this.state._icon.left.style} _label=\"\" _icon={this.state._icon.left.icon} />}\n\t\t\t\t\t{!this.state._hideLabel && hideExpertSlot ? <span>{this.state._label}</span> : ''}\n\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && <kol-icon class=\"icon right\" style={this.state._icon.right.style} _label=\"\" _icon={this.state._icon.right.icon} />}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && <kol-icon class=\"icon bottom\" style={this.state._icon.bottom.style} _label=\"\" _icon={this.state._icon.bottom.icon} />}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t@State() public state: KolibriSpanStates = {\n\t\t_hideLabel: false,\n\t\t_icon: {},\n\t\t_label: false, // ⚠ required\n\t};\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tvalidateLabelWithExpertSlot(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;kVAgBaA,EAAS,M,yCA2BiB,M,+EAkBK,CAC1CC,WAAY,MACZC,MAAO,GACPC,OAAQ,M,CA/CFC,SACN,MAAMC,SAAiCC,KAAKC,MAAMJ,SAAW,SAC7D,OACCK,EAACC,EAAI,CACJC,MAAO,CACN,cAAeJ,KAAKC,MAAMN,WAC1B,eAAgBK,KAAKC,MAAMN,aAG3BK,KAAKC,MAAML,MAAMS,KAAOH,EAAA,YAAUE,MAAM,WAAWE,MAAON,KAAKC,MAAML,MAAMS,IAAIC,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMS,IAAIE,OAC7HL,EAAA,YACEF,KAAKC,MAAML,MAAMY,MAAQN,EAAA,YAAUE,MAAM,YAAYE,MAAON,KAAKC,MAAML,MAAMY,KAAKF,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMY,KAAKD,QAC/HP,KAAKC,MAAMN,YAAcI,EAAiBG,EAAA,YAAOF,KAAKC,MAAMJ,QAAiB,GAC/EK,EAAA,sBAAmBH,EAAiB,OAASU,UAAWC,OAAQX,GAC/DG,EAAA,QAAMS,KAAK,YAEXX,KAAKC,MAAML,MAAMgB,OAASV,EAAA,YAAUE,MAAM,aAAaE,MAAON,KAAKC,MAAML,MAAMgB,MAAMN,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMgB,MAAML,QAErIP,KAAKC,MAAML,MAAMiB,QAAUX,EAAA,YAAUE,MAAM,cAAcE,MAAON,KAAKC,MAAML,MAAMiB,OAAOP,MAAOT,OAAO,GAAGD,MAAOI,KAAKC,MAAML,MAAMiB,OAAON,O,CAiCrIO,kBAAkBC,GACxBD,EAAkBd,KAAMe,E,CAIlBC,aAAaD,GACnBC,EAAahB,KAAMe,E,CAObE,iBAAiBF,GACvBf,KAAKc,kBAAkBC,E,CAIjBG,cAAcH,GACpBI,EAA4BnB,KAAMe,E,CAG5BK,oBACNpB,KAAKc,kBAAkBd,KAAKL,YAAcK,KAAKqB,WAC/CrB,KAAKgB,aAAahB,KAAKJ,OACvBI,KAAKkB,cAAclB,KAAKH,O"}

package/dist/kolibri/kol-span.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n}from"./index-34c3d6f8.js";const i=":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}",e=class{constructor(n){t(this,n),this._icon=void 0,this._iconOnly=!1,this._label=void 0}render(){return n("kol-span-wc",{_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label},n("slot",{name:"expert",slot:"expert"}))}};e.style={default:i};export{e as kol_span};
+import{r as t,h as n}from"./index-2c046ff1.js";const i=":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}",e=class{constructor(i){t(this,i),this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0}render(){return n("kol-span-wc",{_icon:this._icon,_hideLabel:this._hideLabel,_label:this._label},n("slot",{name:"expert",slot:"expert"}))}};e.style={default:i};export{e as kol_span};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSpan","render","h","_icon","this","_iconOnly","_label","name","slot"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _iconOnly={this._iconOnly} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Iconklasse (z.B.: \"codicon codicon-home\")\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Gibt an, ob nur das Icon angezeigt wird.\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Setzt den sichtbaren Text des Elements.\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,urB,MCaXC,EAAO,M,6DAiBmC,M,sBAhB/CC,SACN,OACCC,EAAA,eAAaC,MAAOC,KAAKD,MAAOE,UAAWD,KAAKC,UAAWC,OAAQF,KAAKE,QACvEJ,EAAA,QAAMK,KAAK,SAASC,KAAK,W"}
+{"version":3,"names":["defaultStyleCss","KolSpan","render","h","_icon","this","_hideLabel","_label","name","slot"],"sources":["src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { KolibriSpanProps } from './types';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements KolibriSpanProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _hideLabel={this._hideLabel} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,urB,MCcXC,EAAO,M,yCAYmB,M,oEAX/BC,SACN,OACCC,EAAA,eAAaC,MAAOC,KAAKD,MAAOE,WAAYD,KAAKC,WAAYC,OAAQF,KAAKE,QACzEJ,EAAA,QAAMK,KAAK,SAASC,KAAK,W"}

package/dist/kolibri/kol-spin.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as n,H as t,F as e}from"./index-34c3d6f8.js";import{a}from"./i18n-b8589f01.js";import{a as o,b as r}from"./prop.validators-2c20cdf8.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";const s=(i,n)=>{o(i,"_variant",(i=>"cycle"===i||"dot"===i||"none"===i),new Set(["cycle","dot","none"]),n)},l=":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}.spin.cycle{width:3rem;height:3rem}.spin.cycle>.loader{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:2s linear infinite rotate}.spin.cycle>.loader::before{content:'';box-sizing:border-box;position:absolute;inset:0px;border-radius:50%;border:5px solid #333;animation:3s linear infinite prixClipFix}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes prixClipFix{0%{border-color:#fff;clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{border-color:#666;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{border-color:#fc0;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{border-color:red;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{border-color:#000;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@media (prefers-reduced-motion){.spin.cycle>.loader{animation-duration:4s}.spin.cycle>.loader::before{animation-duration:6s}}.spin.dot{height:1rem;width:3rem}.spin.dot>span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin.dot>span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin.dot>span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin.dot>span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin.dot>span:nth-child(4){background-color:#666;z-index:0;animation:1s infinite spin3;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}@media (prefers-reduced-motion){.spin.dot>span:first-child,.spin.dot>span:nth-child(2),.spin.dot>span:nth-child(3),.spin.dot>span:nth-child(4){animation-duration:2s}}.spin{display:block;padding:0.125rem;position:relative}";function p(i){switch(i){case"cycle":return n("span",{class:"loader"});case"none":return n("slot",{name:"expert"});default:return n(e,null,n("span",{class:"bg-spin-1"}),n("span",{class:"bg-spin-2"}),n("span",{class:"bg-spin-3"}),n("span",{class:"bg-neutral"}))}}const d=class{constructor(n){i(this,n),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return n(t,null,this.state._show?n("span",{"aria-busy":"true","aria-label":a("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},p(this.state._variant)):this.showToggled&&n("span",{"aria-label":a("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,r(this,"_show",i)}validateVariant(i){s(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};d.style={default:l};export{d as kol_spin};
+import{r as i,h as n,H as t,F as e}from"./index-2c046ff1.js";import{a}from"./i18n-64b07ed9.js";import{a as o,b as r}from"./prop.validators-683bb1d0.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./a11y.tipps-e607b8b3.js";import"./dev.utils-8aef00f6.js";import"./reuse-c2156413.js";const s=(i,n)=>{o(i,"_variant",(i=>"cycle"===i||"dot"===i||"none"===i),new Set(["cycle","dot","none"]),n)},l=":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}.spin.cycle{width:3rem;height:3rem}.spin.cycle>.loader{display:block;width:100%;height:100%;border-radius:50%;position:relative;animation:2s linear infinite rotate}.spin.cycle>.loader::before{content:'';box-sizing:border-box;position:absolute;inset:0px;border-radius:50%;border:5px solid #333;animation:3s linear infinite prixClipFix}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes prixClipFix{0%{border-color:#fff;clip-path:polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)}25%{border-color:#666;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)}50%{border-color:#fc0;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)}75%{border-color:red;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)}100%{border-color:#000;clip-path:polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)}}@media (prefers-reduced-motion){.spin.cycle>.loader{animation-duration:4s}.spin.cycle>.loader::before{animation-duration:6s}}.spin.dot{height:1rem;width:3rem}.spin.dot>span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border-radius:50%;border:0.1rem solid #fff;height:0.8rem;position:absolute;top:0.1rem;width:0.8rem}.spin.dot>span:first-child{background-color:#fc0;z-index:0;animation:1s infinite spin1;left:0.1rem}.spin.dot>span:nth-child(2){background-color:red;z-index:1;animation:1s infinite spin2;left:0.1rem}.spin.dot>span:nth-child(3){background-color:#000;z-index:1;animation:1s infinite spin2;left:1.1rem}.spin.dot>span:nth-child(4){background-color:#666;z-index:0;animation:1s infinite spin3;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}@media (prefers-reduced-motion){.spin.dot>span:first-child,.spin.dot>span:nth-child(2),.spin.dot>span:nth-child(3),.spin.dot>span:nth-child(4){animation-duration:2s}}.spin{display:block;padding:0.125rem;position:relative}";function p(i){switch(i){case"cycle":return n("span",{class:"loader"});case"none":return n("slot",{name:"expert"});default:return n(e,null,n("span",{class:"bg-spin-1"}),n("span",{class:"bg-spin-2"}),n("span",{class:"bg-spin-3"}),n("span",{class:"bg-neutral"}))}}const d=class{constructor(n){i(this,n),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return n(t,null,this.state._show?n("span",{"aria-busy":"true","aria-label":a("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},p(this.state._variant)):this.showToggled&&n("span",{"aria-label":a("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,r(this,"_show",i)}validateVariant(i){s(this,i)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};d.style={default:l};export{d as kol_spin};

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

@@ -1 +1 @@
-{"version":3,"names":["validateSpinVariant","component","value","watchValidator","Set","defaultStyleCss","renderSpin","variant","h","class","name","Fragment","KolSpin","this","showToggled","_variant","render","Host","state","_show","translate","spin","role","validateShow","watchBoolean","validateVariant","componentWillLoad"],"sources":["./src/types/props/variant/spin.ts","./src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","./src/components/spin/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types */\n/**\n * Loadingspinner\n * - https://github.com/vineethtrv/css-loader\n */\nexport type SpinVariant = 'cycle' | 'dot' | 'none';\n\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariant;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariant): void => {\n\twatchValidator(component, '_variant', (value) => value === 'cycle' || value === 'dot' || value === 'none', new Set(['cycle', 'dot', 'none']), value);\n};\n","@import url(../style.css);\n@import url(cycle.css);\n@import url(dot.css);\n.spin {\n\tdisplay: block;\n\tpadding: 0.125rem;\n\tposition: relative;\n}\n","import { Component, Fragment, Host, JSX, Prop, State, Watch, h } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport { PropSpinVariant, SpinVariant, validateSpinVariant } from '../../types/props/variant/spin';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { PropShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropSpinVariant & PropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropSpinVariant;\ntype OptionalStates = PropShow;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nfunction renderSpin(variant: SpinVariant): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<Fragment>\n\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t</Fragment>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate showToggled = false;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\tspin: true,\n\t\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t\t/* [`spin--${this.state._variant}`]: true, witch benefit have this notation? */\n\t\t\t\t\t\t}}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Ladeanzeige eingeblendet wird oder nicht.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Gibt an, welche Ladeanimation oder ob keine Animation verwendet werden soll.\n\t */\n\t@Prop() public _variant?: SpinVariant = 'dot';\n\n\t@State() public state: States = {\n\t\t_variant: 'dot',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariant): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":";;;6SAqBO,MAAMA,EAAsB,CAACC,EAAsCC,KACzEC,EAAeF,EAAW,YAAaC,GAAUA,IAAU,SAAWA,IAAU,OAASA,IAAU,QAAQ,IAAIE,IAAI,CAAC,QAAS,MAAO,SAAUF,EAAM,ECtBrJ,MAAMG,EAAkB,0nFCgBxB,SAASC,EAAWC,GACnB,OAAQA,GACP,IAAK,QACJ,OAAOC,EAAA,QAAMC,MAAM,WACpB,IAAK,OACJ,OAAOD,EAAA,QAAME,KAAK,WACnB,QACC,OACCF,EAACG,EAAQ,KACRH,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,gBAIjB,C,MASaG,EAAO,M,yBACXC,KAAAC,YAAc,M,WA6B4B,M,cAKV,M,WAER,CAC/BC,SAAU,M,CAnCJC,SACN,OACCR,EAACS,EAAI,KACHJ,KAAKK,MAAMC,MACXX,EAAA,oBACW,OAAM,aACJY,EAAU,sBAAqB,YACjC,SACVX,MAAO,CACNY,KAAM,KACN,CAACR,KAAKK,MAAMH,UAAW,MAGxBO,KAAK,SAEJhB,EAAWO,KAAKK,MAAMH,WAGxBF,KAAKC,aAAeN,EAAA,qBAAkBY,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAqB3GC,aAAarB,GACnBW,KAAKC,YAAcD,KAAKK,MAAMC,QAAU,MAAQN,KAAKM,QAAU,MAC/DK,EAAaX,KAAM,QAASX,E,CAItBuB,gBAAgBvB,GACtBF,EAAoBa,KAAMX,E,CAGpBwB,oBACNb,KAAKU,aAAaV,KAAKM,OACvBN,KAAKY,gBAAgBZ,KAAKE,S"}
+{"version":3,"names":["validateSpinVariant","component","value","watchValidator","Set","defaultStyleCss","renderSpin","variant","h","class","name","Fragment","KolSpin","this","showToggled","_variant","render","Host","state","_show","translate","spin","role","validateShow","watchBoolean","validateVariant","componentWillLoad"],"sources":["src/types/props/variant/spin.ts","src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","src/components/spin/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types */\n/**\n * Loadingspinner\n * - https://github.com/vineethtrv/css-loader\n */\nexport type SpinVariant = 'cycle' | 'dot' | 'none';\n\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariant;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariant): void => {\n\twatchValidator(component, '_variant', (value) => value === 'cycle' || value === 'dot' || value === 'none', new Set(['cycle', 'dot', 'none']), value);\n};\n","@import url(../style.css);\n@import url(cycle.css);\n@import url(dot.css);\n.spin {\n\tdisplay: block;\n\tpadding: 0.125rem;\n\tposition: relative;\n}\n","import { Component, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { SpinVariant, validateSpinVariant } from '../../types/props/variant/spin';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { KoliBriSpinAPI, KoliBriSpinStates } from './types';\n\nfunction renderSpin(variant: SpinVariant): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<Fragment>\n\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t</Fragment>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements KoliBriSpinAPI {\n\tprivate showToggled = false;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\tspin: true,\n\t\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t\t/* [`spin--${this.state._variant}`]: true, witch benefit have this notation? */\n\t\t\t\t\t\t}}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist.\n\t */\n\t@Prop() public _show?: boolean = false;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: SpinVariant = 'dot';\n\n\t@State() public state: KoliBriSpinStates = {\n\t\t_variant: 'dot',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariant): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":";;;6SAsBO,MAAMA,EAAsB,CAACC,EAAsCC,KACzEC,EAAeF,EAAW,YAAaC,GAAUA,IAAU,SAAWA,IAAU,OAASA,IAAU,QAAQ,IAAIE,IAAI,CAAC,QAAS,MAAO,SAAUF,EAAM,ECvBrJ,MAAMG,EAAkB,0nFCOxB,SAASC,EAAWC,GACnB,OAAQA,GACP,IAAK,QACJ,OAAOC,EAAA,QAAMC,MAAM,WACpB,IAAK,OACJ,OAAOD,EAAA,QAAME,KAAK,WACnB,QACC,OACCF,EAACG,EAAQ,KACRH,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,gBAIjB,C,MASaG,EAAO,M,yBACXC,KAAAC,YAAc,M,WA6BW,M,cAKO,M,WAEG,CAC1CC,SAAU,M,CAnCJC,SACN,OACCR,EAACS,EAAI,KACHJ,KAAKK,MAAMC,MACXX,EAAA,oBACW,OAAM,aACJY,EAAU,sBAAqB,YACjC,SACVX,MAAO,CACNY,KAAM,KACN,CAACR,KAAKK,MAAMH,UAAW,MAGxBO,KAAK,SAEJhB,EAAWO,KAAKK,MAAMH,WAGxBF,KAAKC,aAAeN,EAAA,qBAAkBY,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAqB3GC,aAAarB,GACnBW,KAAKC,YAAcD,KAAKK,MAAMC,QAAU,MAAQN,KAAKM,QAAU,MAC/DK,EAAaX,KAAM,QAASX,E,CAItBuB,gBAAgBvB,GACtBF,EAAoBa,KAAMX,E,CAGpBwB,oBACNb,KAAKU,aAAaV,KAAKM,OACvBN,KAAKY,gBAAgBZ,KAAKE,S"}

package/dist/kolibri/kol-split-button.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-34c3d6f8.js";import{w as a,b as e,s as o}from"./prop.validators-2c20cdf8.js";import{a as n,b as h}from"./label-58f2333f.js";import{g as l}from"./a11y.tipps-2e27f8e6.js";import{v as d}from"./tab-index-2de507bb.js";import{w as r}from"./button-link-abc9999d.js";import{a as c,w as p}from"./controller-c92d85d6.js";import{v as u,a as b}from"./aria-selected-0f45e2c3.js";import{v as f,a as v}from"./disabled-7ea66fab.js";import{v as _}from"./hide-label-1fa80b94.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";const m=":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}:host{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",w=class{constructor(i){t(this,i),this.clickHandler=t=>{"function"==typeof this.state._on.onClick?this.state._on.onClick(t):this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._showDropdown)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._showDropdown&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._on=void 0,this._role=void 0,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:"",_label:"",_on:{},_showDropdown:!1}}render(){return i(s,null,i("kol-button-wc",{class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_iconOnly:this._hideLabel,_label:this._label,_on:{onClick:this.clickHandler},_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),i("div",{class:"horizontal-line"}),i("kol-button-wc",{class:"secondary-button",_disabled:this._disabled,"_icon-only":!0,_icon:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._showDropdown?"schließen":"öffnen"),_on:{onClick:()=>this.toggleDropdown()}}),i("div",{class:"popover",ref:this.catchDropdownElements},i("div",{class:"popover-content"},i("slot",null))))}validateAccessKey(t){a(this,"_accessKey",t)}validateAriaControls(t){a(this,"_ariaControls",t)}validateAriaCurrent(t){u(this,t)}validateAriaExpanded(t){f(this,t)}validateAriaLabel(t){n(this,t)}validateAriaSelected(t){b(this,t)}validateCustomClass(t){a(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){v(this,t),t&&l()}validateHideLabel(t){_(this,t)}validateIcon(t){a(this,"_icon",t)}validateIconOnly(t){_(this,t)}validateLabel(t){h(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){a(this,"_role",t)}validateShowDropdown(t){e(this,"_showDropdown",t),this.toggleDropdown(t)}validateTabIndex(t){d(this,t)}validateTooltipAlign(t){r(this,"_tooltipAlign",t)}validateType(t){c(this,"_type",t)}validateValue(t){o(this,"_value",t)}validateVariant(t){p(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel),this.validateIcon(this._icon),this.validateIconOnly(this._iconOnly),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShowDropdown(this._showDropdown),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_showDropdown:["validateShowDropdown"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};w.style={default:m};export{w as kol_split_button};
+import{r as t,h as i,H as s}from"./index-2c046ff1.js";import{w as e}from"./button-link-2ad7f3cf.js";import{v as a,a as o}from"./aria-selected-d90aa300.js";import{v as n,a as h}from"./disabled-cac31f02.js";import{v as l}from"./hide-label-e9f288ac.js";import{v as d}from"./label-2a601017.js";import{g as r}from"./a11y.tipps-e607b8b3.js";import{w as c,b as p,s as u}from"./prop.validators-683bb1d0.js";import{v as b}from"./tab-index-6d37f269.js";import{a as f,w as v}from"./controller-d064cead.js";import"./dev.utils-8aef00f6.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const _=":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}:host{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",m=class{constructor(i){t(this,i),this.clickHandler=t=>{"function"==typeof this.state._on.onClick?this.state._on.onClick(t):this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._showDropdown)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._showDropdown&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:"",_label:"",_on:{},_showDropdown:!1}}render(){return i(s,null,i("kol-button-wc",{class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_hideLabel:this._hideLabel,_label:this._label,_on:{onClick:this.clickHandler},_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),i("div",{class:"horizontal-line"}),i("kol-button-wc",{class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icon:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._showDropdown?"schließen":"öffnen"),_on:{onClick:()=>this.toggleDropdown()}}),i("div",{class:"popover",ref:this.catchDropdownElements},i("div",{class:"popover-content"},i("slot",null))))}validateAccessKey(t){c(this,"_accessKey",t)}validateAriaControls(t){c(this,"_ariaControls",t)}validateAriaCurrent(t){a(this,t)}validateAriaExpanded(t){n(this,t)}validateAriaLabel(t){this.validateLabel(t)}validateAriaSelected(t){o(this,t)}validateCustomClass(t){c(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){h(this,t),t&&r()}validateHideLabel(t){l(this,t)}validateIcon(t){c(this,"_icon",t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){d(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){c(this,"_role",t)}validateShowDropdown(t){p(this,"_showDropdown",t),this.toggleDropdown(t)}validateTabIndex(t){b(this,t)}validateTooltipAlign(t){e(this,"_tooltipAlign",t)}validateType(t){f(this,"_type",t)}validateValue(t){u(this,"_value",t)}validateVariant(t){v(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label||this._ariaLabel),this.validateOn(this._on),this.validateRole(this._role),this.validateShowDropdown(this._showDropdown),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_showDropdown:["validateShowDropdown"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};m.style={default:_};export{m as kol_split_button};

package/dist/kolibri/kol-split-button.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSplitButton","this","clickHandler","e","state","_on","onClick","toggleDropdown","openDropdown","dropdown","dropdownContent","style","height","clientHeight","Object","assign","_showDropdown","closeDropdown","value","openIt","forceCounter","forceOpenDropdown","_a","setTimeout","catchDropdownElements","firstChild","_icon","_label","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_iconOnly","_hideLabel","_role","_tabIndex","_tooltipAlign","_type","_value","ref","validateAccessKey","watchString","validateAriaControls","validateAriaCurrent","validateAriaExpanded","validateAriaLabel","validateAriaLabelWithLabel","validateAriaSelected","validateCustomClass","defaultValue","undefined","validateDisabled","a11yHintDisabled","validateHideLabel","validateIcon","validateIconOnly","validateLabel","validateLabelWithAriaLabel","validateOn","validateRole","validateShowDropdown","watchBoolean","validateTabIndex","validateTooltipAlign","watchTooltipAlignment","validateType","watchButtonType","validateValue","setState","validateVariant","watchButtonVariant","componentWillLoad"],"sources":["./src/components/split-button/style.css?tag=kol-split-button&mode=default&encapsulation=shadow","./src/components/split-button/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host {\n\tdisplay: flex;\n\tposition: relative;\n}\n.main-button {\n\tflex-grow: 1;\n\ttext-align: left;\n}\n.main-button kol-span-wc {\n\tplace-items: start;\n}\n.secondary-button button {\n\theight: 100%;\n}\n.horizontal-line {\n\tbackground-color: rgba(0, 0, 0, 0.2);\n\tborder-radius: 2px;\n\theight: 70%;\n\tmargin-block: auto;\n\twidth: 1px;\n}\n/* popover */\n.popover {\n\theight: 0;\n\tleft: 0;\n\tmin-width: 100%;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 100%;\n\ttransition: height 0.3s ease-in-out;\n}\n.popover-content {\n\tinset: 0 0 auto 0;\n\tmin-width: 100%;\n\tposition: absolute;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { API, KoliBriSplitButtonCallback, States } from './types';\nimport { Alignment, AlternativButtonLinkRole, AriaCurrent, KoliBriButtonType, KoliBriButtonVariant, Stringified } from '../../components';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { validateAriaCurrent, validateAriaExpanded, validateAriaSelected, validateDisabled, validateHideLabel } from '../../types/props';\nimport { validateAriaLabelWithLabel, validateLabelWithAriaLabel } from '../../types/props/label';\nimport { a11yHintDisabled } from '../../utils/a11y.tipps';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\nimport { watchTooltipAlignment } from '../../types/button-link';\nimport { watchButtonType, watchButtonVariant } from '../button/controller';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements API {\n\tprivate dropdown: HTMLDivElement | undefined;\n\tprivate dropdownContent: HTMLDivElement | undefined;\n\n\tprivate readonly clickHandler = (e: Event) => {\n\t\tif (typeof this.state._on.onClick === 'function') this.state._on.onClick(e);\n\t\telse this.toggleDropdown();\n\t};\n\n\tprivate readonly openDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;\n\t\t\tthis.state = { ...this.state, _showDropdown: true };\n\t\t}\n\t};\n\tprivate readonly closeDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = ``;\n\t\t\tthis.state = { ...this.state, _showDropdown: false };\n\t\t}\n\t};\n\tprivate readonly toggleDropdown = (value?: boolean) => {\n\t\tconst openIt = typeof value === 'boolean' ? value : !this.state._showDropdown;\n\t\tif (openIt) this.openDropdown();\n\t\telse this.closeDropdown();\n\t};\n\tprivate forceCounter = 100; // because the dropdown could be empty\n\tprivate readonly forceOpenDropdown = () => {\n\t\tif (this.forceCounter > 0) {\n\t\t\tif (this.dropdownContent?.clientHeight) this.openDropdown();\n\t\t\telse setTimeout(this.forceOpenDropdown, 10);\n\t\t\tthis.forceCounter--;\n\t\t}\n\t};\n\n\tprivate readonly catchDropdownElements = (e?: HTMLDivElement | null) => {\n\t\tif (e) {\n\t\t\tthis.dropdown = e;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.dropdownContent = e.firstChild as HTMLDivElement;\n\t\t\t\tif (this._showDropdown) this.forceOpenDropdown();\n\t\t\t});\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'main-button': true,\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_iconOnly={this._hideLabel}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={{ onClick: this.clickHandler }}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon-only\n\t\t\t\t\t_icon=\"codicon codicon-triangle-down\"\n\t\t\t\t\t_label={`dropdown ${this.state._showDropdown ? 'schließen' : 'öffnen'}`}\n\t\t\t\t\t_on={{ onClick: () => this.toggleDropdown() }}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"popover\" ref={this.catchDropdownElements}>\n\t\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop({ reflect: true }) public _ariaExpanded?: boolean;\n\n\t/**\n\t * Gibt einen beschreibenden Text für den Screenreader an. Damit die\n\t * Sprachsteuerung von interaktiven Elementen funktioniert, muss der\n\t * Aria-Label-Text mit dem Label-Text des Buttons beginnen.\n\t *\n\t * - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop({ reflect: true }) public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Gibt an, ob der Button deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Iconklasse (z.B.: \"codicon codicon-home\")\n\t */\n\t@Prop() public _icon?: string;\n\n\t/**\n\t * Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean = false;\n\n\t/**\n\t * Setzt den sichtbaren Text des Elements.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _label!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: { onClick: KoliBriSplitButtonCallback };\n\n\t/**\n\t * Gibt an, welche Rolle der Schalter hat.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welche Rolle der Schalter hat.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _showDropdown?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Tab-Index der Button hat. (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 * Setzt die gewünschte Ausrichtung des Tooltips (`_icon-only`).\n\t */\n\t@Prop() public _tooltipAlign?: Alignment = 'top';\n\n\t/**\n\t * Setzt den Typ der Schaltfläche.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/**\n\t * Gibt an, welche Ausprägung der Button hat.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t@State() public state: States = {\n\t\t_icon: '',\n\t\t_label: '',\n\t\t_on: {},\n\t\t_showDropdown: false,\n\t};\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this, '_accessKey', value);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\twatchString(this, '_ariaControls', value);\n\t}\n\n\t@Watch('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrent): void {\n\t\tvalidateAriaCurrent(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tvalidateAriaLabelWithLabel(this, value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, { defaultValue: undefined });\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tvalidateDisabled(this, value);\n\t\tif (value) a11yHintDisabled();\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: string): void {\n\t\twatchString(this, '_icon', value);\n\t}\n\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: { onClick: KoliBriSplitButtonCallback }): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativButtonLinkRole): void {\n\t\twatchString(this, '_role', value);\n\t}\n\n\t@Watch('_showDropdown')\n\tpublic validateShowDropdown(value?: boolean): void {\n\t\twatchBoolean(this, '_showDropdown', value);\n\t\tthis.toggleDropdown(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Alignment): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriButtonType): void {\n\t\twatchButtonType(this, '_type', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tsetState(this, '_value', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaCurrent(this._ariaCurrent);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateIconOnly(this._iconOnly);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShowDropdown(this._showDropdown);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","KolSplitButton","this","clickHandler","e","state","_on","onClick","toggleDropdown","openDropdown","dropdown","dropdownContent","style","height","clientHeight","Object","assign","_showDropdown","closeDropdown","value","openIt","forceCounter","forceOpenDropdown","_a","setTimeout","catchDropdownElements","firstChild","_icon","_label","render","h","Host","class","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaSelected","_disabled","_hideLabel","_role","_tabIndex","_tooltipAlign","_type","_value","ref","validateAccessKey","watchString","validateAriaControls","validateAriaCurrent","validateAriaExpanded","validateAriaLabel","validateLabel","validateAriaSelected","validateCustomClass","defaultValue","undefined","validateDisabled","a11yHintDisabled","validateHideLabel","validateIcon","validateIconOnly","validateOn","validateRole","validateShowDropdown","watchBoolean","validateTabIndex","validateTooltipAlign","watchTooltipAlignment","validateType","watchButtonType","validateValue","setState","validateVariant","watchButtonVariant","componentWillLoad","_iconOnly","_ariaLabel"],"sources":["src/components/split-button/style.css?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/component.tsx"],"sourcesContent":["@import url(../style.css);\n:host {\n\tdisplay: flex;\n\tposition: relative;\n}\n.main-button {\n\tflex-grow: 1;\n\ttext-align: left;\n}\n.main-button kol-span-wc {\n\tplace-items: start;\n}\n.secondary-button button {\n\theight: 100%;\n}\n.horizontal-line {\n\tbackground-color: rgba(0, 0, 0, 0.2);\n\tborder-radius: 2px;\n\theight: 70%;\n\tmargin-block: auto;\n\twidth: 1px;\n}\n/* popover */\n.popover {\n\theight: 0;\n\tleft: 0;\n\tmin-width: 100%;\n\toverflow: hidden;\n\tposition: absolute;\n\ttop: 100%;\n\ttransition: height 0.3s ease-in-out;\n}\n.popover-content {\n\tinset: 0 0 auto 0;\n\tmin-width: 100%;\n\tposition: absolute;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { AlternativButtonLinkRole, KoliBriButtonType, KoliBriButtonVariant, watchTooltipAlignment } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { Align } from '../../types/props/align';\nimport { AriaCurrent, validateAriaCurrent } from '../../types/props/aria-current';\nimport { validateAriaExpanded } from '../../types/props/aria-expanded';\nimport { validateAriaSelected } from '../../types/props/aria-selected';\nimport { validateDisabled } from '../../types/props/disabled';\nimport { validateHideLabel } from '../../types/props/hide-label';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { a11yHintDisabled } from '../../utils/a11y.tipps';\nimport { setState, watchBoolean, watchString } from '../../utils/prop.validators';\nimport { validateTabIndex } from '../../utils/validators/tab-index';\nimport { watchButtonType, watchButtonVariant } from '../button/controller';\nimport { KoliBriSplitButtonAPI, KoliBriSplitButtonAStates, KoliBriSplitButtonCallback } from './types';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSplitButton implements KoliBriSplitButtonAPI {\n\tprivate dropdown: HTMLDivElement | undefined;\n\tprivate dropdownContent: HTMLDivElement | undefined;\n\n\tprivate readonly clickHandler = (e: Event) => {\n\t\tif (typeof this.state._on.onClick === 'function') this.state._on.onClick(e);\n\t\telse this.toggleDropdown();\n\t};\n\n\tprivate readonly openDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = `${this.dropdownContent.clientHeight}px`;\n\t\t\tthis.state = { ...this.state, _showDropdown: true };\n\t\t}\n\t};\n\tprivate readonly closeDropdown = () => {\n\t\tif (this.dropdown && this.dropdownContent) {\n\t\t\tthis.dropdown.style.height = ``;\n\t\t\tthis.state = { ...this.state, _showDropdown: false };\n\t\t}\n\t};\n\tprivate readonly toggleDropdown = (value?: boolean) => {\n\t\tconst openIt = typeof value === 'boolean' ? value : !this.state._showDropdown;\n\t\tif (openIt) this.openDropdown();\n\t\telse this.closeDropdown();\n\t};\n\tprivate forceCounter = 100; // because the dropdown could be empty\n\tprivate readonly forceOpenDropdown = () => {\n\t\tif (this.forceCounter > 0) {\n\t\t\tif (this.dropdownContent?.clientHeight) this.openDropdown();\n\t\t\telse setTimeout(this.forceOpenDropdown, 10);\n\t\t\tthis.forceCounter--;\n\t\t}\n\t};\n\n\tprivate readonly catchDropdownElements = (e?: HTMLDivElement | null) => {\n\t\tif (e) {\n\t\t\tthis.dropdown = e;\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.dropdownContent = e.firstChild as HTMLDivElement;\n\t\t\t\tif (this._showDropdown) this.forceOpenDropdown();\n\t\t\t});\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'main-button': true,\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={{ onClick: this.clickHandler }}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t<kol-button-wc\n\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_icon=\"codicon codicon-triangle-down\"\n\t\t\t\t\t_label={`dropdown ${this.state._showDropdown ? 'schließen' : 'öffnen'}`}\n\t\t\t\t\t_on={{ onClick: () => this.toggleDropdown() }}\n\t\t\t\t></kol-button-wc>\n\t\t\t\t<div class=\"popover\" ref={this.catchDropdownElements}>\n\t\t\t\t\t<div class=\"popover-content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t * @deprecated use _label\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: string;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Button-Events an.\n\t */\n\t@Prop() public _on?: { onClick: KoliBriSplitButtonCallback };\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _showDropdown?: boolean = false;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (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 * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\n\t */\n\t@Prop() public _type?: KoliBriButtonType = 'button';\n\n\t/**\n\t * Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.\n\t */\n\t@Prop() public _value?: Stringified<unknown>;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n\n\t@State() public state: KoliBriSplitButtonAStates = {\n\t\t_icon: '',\n\t\t_label: '',\n\t\t_on: {},\n\t\t_showDropdown: false,\n\t};\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\twatchString(this, '_accessKey', value);\n\t}\n\n\t@Watch('_ariaControls')\n\tpublic validateAriaControls(value?: string): void {\n\t\twatchString(this, '_ariaControls', value);\n\t}\n\n\t@Watch('_ariaCurrent')\n\tpublic validateAriaCurrent(value?: AriaCurrent): void {\n\t\tvalidateAriaCurrent(this, value);\n\t}\n\n\t@Watch('_ariaExpanded')\n\tpublic validateAriaExpanded(value?: boolean): void {\n\t\tvalidateAriaExpanded(this, value);\n\t}\n\n\t/**\n\t * @deprecated use _label\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_ariaSelected')\n\tpublic validateAriaSelected(value?: boolean): void {\n\t\tvalidateAriaSelected(this, value);\n\t}\n\n\t@Watch('_customClass')\n\tpublic validateCustomClass(value?: string): void {\n\t\twatchString(this, '_customClass', value, { defaultValue: undefined });\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tvalidateDisabled(this, value);\n\t\tif (value) a11yHintDisabled();\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: string): void {\n\t\twatchString(this, '_icon', value);\n\t}\n\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: { onClick: KoliBriSplitButtonCallback }): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_role')\n\tpublic validateRole(value?: AlternativButtonLinkRole): void {\n\t\twatchString(this, '_role', value);\n\t}\n\n\t@Watch('_showDropdown')\n\tpublic validateShowDropdown(value?: boolean): void {\n\t\twatchBoolean(this, '_showDropdown', value);\n\t\tthis.toggleDropdown(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tvalidateTabIndex(this, value);\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: Align): void {\n\t\twatchTooltipAlignment(this, '_tooltipAlign', value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriButtonType): void {\n\t\twatchButtonType(this, '_type', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tsetState(this, '_value', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriButtonVariant): void {\n\t\twatchButtonVariant(this, '_variant', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAccessKey(this._accessKey);\n\t\tthis.validateAriaControls(this._ariaControls);\n\t\tthis.validateAriaCurrent(this._ariaCurrent);\n\t\tthis.validateAriaExpanded(this._ariaExpanded);\n\t\tthis.validateAriaSelected(this._ariaSelected);\n\t\tthis.validateCustomClass(this._customClass);\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRole(this._role);\n\t\tthis.validateShowDropdown(this._showDropdown);\n\t\tthis.validateTabIndex(this._tabIndex);\n\t\tthis.validateTooltipAlign(this._tooltipAlign);\n\t\tthis.validateType(this._type);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":"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"}

package/dist/kolibri/kol-symbol.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as a,H as t}from"./index-34c3d6f8.js";import{w as r}from"./prop.validators-2c20cdf8.js";import{a as s}from"./i18n-b8589f01.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";import"./index-0962b5a1.js";const e=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._symbol=void 0,this.state={_ariaLabel:s("kol-warning"),_symbol:"…"}}render(){return a(t,null,a("span",{"aria-label":this.state._ariaLabel,role:"term"},this.state._symbol))}validateAriaLabel(a){r(this,"_ariaLabel",a,{required:!0})}validateSymbol(a){r(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_symbol:["validateSymbol"]}}};export{e as kol_symbol};
+import{r as i,h as a,H as t}from"./index-2c046ff1.js";import{a as s}from"./i18n-64b07ed9.js";import{v as e}from"./label-2a601017.js";import{w as r}from"./prop.validators-683bb1d0.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./a11y.tipps-e607b8b3.js";import"./dev.utils-8aef00f6.js";import"./reuse-c2156413.js";const l=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._label=void 0,this._symbol=void 0,this.state={_label:s("kol-warning"),_symbol:"…"}}render(){return a(t,null,a("span",{"aria-label":this.state._label,role:"term"},this.state._symbol))}validateAriaLabel(a){this.validateLabel(a)}validateLabel(a){e(this,a)}validateSymbol(a){r(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_symbol:["validateSymbol"]}}};export{l as kol_symbol};

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

@@ -1 +1 @@
-{"version":3,"names":["KolSymbol","_ariaLabel","translate","_symbol","render","h","Host","this","state","role","validateAriaLabel","value","watchString","required","validateSymbol","componentWillLoad"],"sources":["./src/components/symbol/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { watchString } from '../../utils/prop.validators';\nimport { translate } from '../../i18n';\n\ntype RequiredProps = {\n\tariaLabel: string;\n\tsymbol: string;\n};\ntype OptionalProps = unknown;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps;\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-symbol',\n\tshadow: false,\n})\nexport class KolSymbol implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span aria-label={this.state._ariaLabel} role=\"term\">\n\t\t\t\t\t{this.state._symbol}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, was der Screenreader ausgeben soll\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Dieses Property gibt den String an der angezeigt werden soll.\n\t */\n\t@Prop() public _symbol!: string;\n\n\t@State() public state: States = {\n\t\t_ariaLabel: translate('kol-warning'),\n\t\t_symbol: '…', // ⚠ required\n\t};\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_symbol')\n\tpublic validateSymbol(value?: string): void {\n\t\twatchString(this, '_symbol', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateSymbol(this._symbol);\n\t}\n}\n"],"mappings":";;;0SAqBaA,EAAS,M,qFAqBW,CAC/BC,WAAYC,EAAU,eACtBC,QAAS,I,CAtBHC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,qBAAkBE,KAAKC,MAAMP,WAAYQ,KAAK,QAC5CF,KAAKC,MAAML,S,CAsBTO,kBAAkBC,GACxBC,EAAYL,KAAM,aAAcI,EAAO,CACtCE,SAAU,M,CAKLC,eAAeH,GACrBC,EAAYL,KAAM,UAAWI,EAAO,CACnCE,SAAU,M,CAILE,oBACNR,KAAKG,kBAAkBH,KAAKN,YAC5BM,KAAKO,eAAeP,KAAKJ,Q"}
+{"version":3,"names":["KolSymbol","_label","translate","_symbol","render","h","Host","this","state","role","validateAriaLabel","value","validateLabel","validateSymbol","watchString","required","componentWillLoad","_ariaLabel"],"sources":["src/components/symbol/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchString } from '../../utils/prop.validators';\nimport { KoliBriSymbolAPI, KoliBriSymbolStates } from './types';\n\n@Component({\n\ttag: 'kol-symbol',\n\tshadow: false,\n})\nexport class KolSymbol implements KoliBriSymbolAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<span aria-label={this.state._label} role=\"term\">\n\t\t\t\t\t{this.state._symbol}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t * @deprecated use _label\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t// TODO v2: make required\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Dieses Property gibt den String an der angezeigt werden soll.\n\t */\n\t@Prop() public _symbol!: string;\n\n\t@State() public state: KoliBriSymbolStates = {\n\t\t_label: translate('kol-warning'),\n\t\t_symbol: '…', // ⚠ required\n\t};\n\n\t/**\n\t * @deprecated use _label\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): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_symbol')\n\tpublic validateSymbol(value?: string): void {\n\t\twatchString(this, '_symbol', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateSymbol(this._symbol);\n\t}\n}\n"],"mappings":";;;kVAWaA,EAAS,M,2GA4BwB,CAC5CC,OAAQC,EAAU,eAClBC,QAAS,I,CA7BHC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,qBAAkBE,KAAKC,MAAMP,OAAQQ,KAAK,QACxCF,KAAKC,MAAML,S,CAgCTO,kBAAkBC,GACxBJ,KAAKK,cAAcD,E,CAIbC,cAAcD,GACpBC,EAAcL,KAAMI,E,CAIdE,eAAeF,GACrBG,EAAYP,KAAM,UAAWI,EAAO,CACnCI,SAAU,M,CAILC,oBACNT,KAAKK,cAAcL,KAAKN,QAAUM,KAAKU,YACvCV,KAAKM,eAAeN,KAAKJ,Q"}

package/dist/kolibri/kol-table.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-34c3d6f8.js";import{s as n,w as o,g as s,p as a,a as l,o as r}from"./prop.validators-2c20cdf8.js";import{a as h}from"./i18n-b8589f01.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-f4596895.js";import"./index-0962b5a1.js";const d=":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}:host{display:block}:host{display:grid}:host>div.table{max-width:100%;order:1;overflow-x:auto;overflow-y:hidden}:host>div.table table{width:100%}th>div{display:grid;grid-template-columns:1fr auto;place-items:center}div.pagination{order:2}div.pagination,div.pagination>div:last-child{display:grid;place-items:center}@media (min-width: 1024px){div.pagination,div.pagination>div:last-child{grid-auto-flow:column}div.pagination kol-pagination{display:flex}}",c=[10,20,50,100],f=new Map,p=class{constructor(i){t(this,i),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),n(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),n(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,e,a)=>{"_pagination"===a&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=()=>{let t=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"NOS":t=[...this.state._data];break;case"ASC":t=this.sortFunction([...this.state._data]);break;default:t=this.sortFunction([...this.state._data]).reverse()}n(this,"_sortedData",t)},this._caption=void 0,this._data=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"…",_data:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){o(this,"_caption",t,{required:!0})}validateData(t){s(t,(()=>{r(t,(()=>{void 0===t&&(t=[]);try{t=a(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&n(this,"_data",t,{afterPatch:()=>{const t=setTimeout((()=>{clearTimeout(t),this.updateSortedData()}))}})}))}))}validateHeaders(t){s(t,(()=>{r(t,(()=>{try{t=a(t)}catch(t){}l(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,e;const a=t;null===(i=a.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(e=a.vertical)||void 0===e||e.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))}))}}})}))}))}validateMinWidth(t){o(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=a(t)}catch(t){}l(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.colSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}getNumberOfRows(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.rowSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,e;let a=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(e=t.vertical)&&void 0!==e?e:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,i){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const e=this.getPrimaryHeader(i),a=this.getNumberOfCols(i.horizontal,t),o=this.getNumberOfRows(i.vertical,t),n=[],s=[],r=[];i.vertical.forEach(((t,i)=>{s[i]=0,r[i]=[]}));for(let l=0;l<o;l++){const o=[];i.vertical.forEach(((t,i)=>{let e=0;if(r[i].forEach((t=>e+=t)),e<=l){const a=t[l-e+s[i]];if("object"==typeof a){o.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),r[i].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let e=1;e<a.colSpan;e++)r[i+e].push(t);s[i]++}}}));for(let i=0;i<a;i++)!0===this.horizontal?"object"==typeof e[i]&&null!==e[i]&&"string"==typeof e[i].key&&"object"==typeof t[l]&&null!==t[l]&&o.push(Object.assign(Object.assign({},e[i]),{colSpan:void 0,data:t[l],label:t[l][e[i].key],rowSpan:void 0})):"object"==typeof e[l]&&null!==e[l]&&"string"==typeof e[l].key&&"object"==typeof t[i]&&null!==t[i]&&o.push(Object.assign(Object.assign({},e[l]),{colSpan:void 0,data:t[i],label:t[i][e[l].key],rowSpan:void 0}));n.push(o)}if(0===t.length){let t=0,e=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{e+=t.rowSpan||1})));const a={colSpan:t,label:h("kol-no-entries"),render:void 0,rowSpan:Math.max(e,1)};0===n.length?n.push([a]):n[0].push(a)}return n}selectDisplayedData(t,i,e){return"number"==typeof i&&i>0&&"number"==typeof e&&e>0?(this.pageStartSlice=i*(e-1),this.pageEndSlice=i*e>t.length?t.length:i*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(f.get(i)),f.set(i,setTimeout((()=>{if(clearTimeout(f.get(i)),"function"==typeof t.render){const e=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof e&&(i.innerHTML=e)}}))))}render(){var t,a;const o=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(a=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==a?a:10:this.state._sortedData.length,this.state._pagination._page||1),n=this.createDataField(o,this.state._headers);return i(e,null,this.pageEndSlice>0&&this.showPagination&&i("div",{class:"pagination"},i("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),i("div",null,i("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||c,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))),i("div",{class:"table",tabindex:"0"},i("table",{style:{minWidth:this.state._minWidth}},i("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&i("thead",null,this.state._headers.horizontal.map(((t,e)=>i("tr",{key:`thead-${e}`},t.map(((t,a)=>!0===t.asTd?i("td",{key:`thead-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}):i("th",{key:`thead-${e}-${a}-${t.label}`,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"icon",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))))))))),i("tbody",null,n.map(((t,e)=>i("tr",{key:`tbody-${e}`},t.map(((t,a)=>!1===t.asTd?i("th",{key:`tbody-${e}-${a}-${t.label}`,scope:"number"==typeof t.rowSpan&&t.rowSpan>1?"rowgroup":"row",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&i("kol-button",{exportparts:"icon",_ariaLabel:h("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_iconOnly:!0,_label:h("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))):i("td",{key:`tbody-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}))))))))))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};p.style={default:d};export{p as kol_table};
+import{r as t,h as i,H as e}from"./index-2c046ff1.js";import{a as n}from"./i18n-64b07ed9.js";import{d as o}from"./a11y.tipps-e607b8b3.js";import{s,w as a,g as l,p as h,a as r,o as d}from"./prop.validators-683bb1d0.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./dev.utils-8aef00f6.js";import"./reuse-c2156413.js";const c=":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}:host{display:block}:host{display:grid}:host>div.table{max-width:100%;order:1;overflow-x:auto;overflow-y:hidden}:host>div.table table{width:100%}th>div{display:grid;grid-template-columns:1fr auto;place-items:center}div.pagination{order:2}div.pagination,div.pagination>div:last-child{display:grid;place-items:center}@media (min-width: 1024px){div.pagination,div.pagination>div:last-child{grid-auto-flow:column}div.pagination kol-pagination{display:flex}}",f=[10,20,50,100],p=new Map,u=class{constructor(e){t(this,e),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),s(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),s(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),s(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),s(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,e,a)=>{"_pagination"===a&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=()=>{let t=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"NOS":t=[...this.state._data];break;case"ASC":t=this.sortFunction([...this.state._data]);break;default:t=this.sortFunction([...this.state._data]).reverse()}s(this,"_sortedData",t)},this.renderTableRow=(t,e)=>i("tr",{key:`tbody-${e}`},t.map(((t,i)=>this.renderTableCell(t,e,i)))),this.renderTableCell=(t,e,a)=>!1===t.asTd?i("th",{key:`tbody-${e}-${a}-${t.label}`,scope:"number"==typeof t.rowSpan&&t.rowSpan>1?"rowgroup":"row",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":this.disableSort||"function"!=typeof t.sort?void 0:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending","data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),!this.disableSort&&"function"==typeof t.sort&&i("kol-button",{exportparts:"icon",_ariaLabel:n("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_hideLabel:!0,_label:n("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))):i("td",{key:`tbody-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}),this.renderFoot=()=>{const t=this.createDataField(this.state._dataFoot,this.state._headers,!0);return i("tfoot",null,t.map(this.renderTableRow))},this._caption=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"…",_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){a(this,"_caption",t,{required:!0})}validateData(t){l(t,(()=>{d(t,(()=>{void 0===t&&(t=[]);try{t=h(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&s(this,"_data",t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}))}))}validateDataFoot(t){l(t,(()=>{d(t,(()=>{void 0===t&&(t=[]);try{t=h(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&s(this,"_dataFoot",t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}))}))}validateHeaders(t){l(t,(()=>{d(t,(()=>{try{t=h(t)}catch(t){}r(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,e,a,n;const s=t;null===(i=s.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(e=s.vertical)||void 0===e||e.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),s.horizontal&&s.vertical&&(null===(a=s.horizontal)||void 0===a?void 0:a.length)>0&&(null===(n=s.vertical)||void 0===n?void 0:n.length)>0&&(this.disableSort=!0,o("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateMinWidth(t){a(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=h(t)}catch(t){}r(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.colSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}getNumberOfRows(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.rowSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e?e=i.length:e-=this.state._dataFoot.length,e}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,e;let a=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(e=t.vertical)&&void 0!==e?e:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,i,e){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const a=this.getPrimaryHeader(i),o=this.getNumberOfCols(i.horizontal,t);let s=this.getNumberOfRows(i.vertical,t),r=0;e&&(r=s,s+=this.state._dataFoot.length);const l=[],h=[],c=[];i.vertical.forEach(((t,i)=>{h[i]=0,c[i]=[]}));for(let n=r;n<s;n++){const s=[];i.vertical.forEach(((t,i)=>{let e=0;if(c[i].forEach((t=>e+=t)),e<=n){const a=t[n-e+h[i]];if("object"==typeof a){s.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),c[i].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let e=1;e<a.colSpan;e++)c[i+e].push(t);h[i]++}}}));for(let i=0;i<o;i++)if(!0===this.horizontal){const o=e?this.state._dataFoot[n-r]:t[n];"object"==typeof a[i]&&null!==a[i]&&"string"==typeof a[i].key&&"object"==typeof o&&null!==o&&s.push(Object.assign(Object.assign({},a[i]),{colSpan:void 0,data:o,label:o[a[i].key],rowSpan:void 0}))}else"object"==typeof a[n]&&null!==a[n]&&"string"==typeof a[n].key&&"object"==typeof t[i]&&null!==t[i]&&s.push(Object.assign(Object.assign({},a[n]),{colSpan:void 0,data:t[i],label:t[i][a[n].key],rowSpan:void 0}));l.push(s)}if(0===t.length){let t=0,e=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{e+=t.rowSpan||1})));const a={colSpan:t,label:n("kol-no-entries"),render:void 0,rowSpan:Math.max(e,1)};0===l.length?l.push([a]):l[0].push(a)}return l}selectDisplayedData(t,i,e){return"number"==typeof i&&i>0&&"number"==typeof e&&e>0?(this.pageStartSlice=i*(e-1),this.pageEndSlice=i*e>t.length?t.length:i*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(p.get(i)),p.set(i,setTimeout((()=>{clearTimeout(p.get(i));const e=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof e&&(i.innerHTML=e)}))))}render(){var t,a;const o=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(a=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==a?a:10:this.state._sortedData.length,this.state._pagination._page||1),s=this.createDataField(o,this.state._headers);return i(e,null,this.pageEndSlice>0&&this.showPagination&&i("div",{class:"pagination"},i("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),i("div",null,i("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||f,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))),i("div",{class:"table",tabindex:"0"},i("table",{style:{minWidth:this.state._minWidth}},i("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&i("thead",null,this.state._headers.horizontal.map(((t,e)=>i("tr",{key:`thead-${e}`},t.map(((t,a)=>!0===t.asTd?i("td",{key:`thead-${e}-${a}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}):i("th",{key:`thead-${e}-${a}-${t.label}`,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":this.disableSort||"function"!=typeof t.sort?void 0:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending","data-sort":`sort-${this.sortDirections.get(t.sort)}`},i("div",{class:"w-full flex gap-1 items-center"},i("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),!this.disableSort&&"function"==typeof t.sort&&i("kol-button",{exportparts:"icon",_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"codicon codicon-fold":"ASC"===this.sortDirections.get(t.sort)?"codicon codicon-chevron-up":"codicon codicon-chevron-down",_hideLabel:!0,_label:n("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))))))))),i("tbody",null,s.map(this.renderTableRow)),this.state._dataFoot.length>0?this.renderFoot():"")))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};u.style={default:c};export{u as kol_table};