@public-ui/components 1.6.0-rc.9 → 1.6.1

package/dist/kolibri/kol-input-range.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","watchJsonArrayString","item","label","length","validateMax","watchNumber","validateMin","validateStep","validateValue","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_list","_max","_min","_step","defaultStyleCss","KolInputRange","render","ariaDescribedBy","getRenderStates","hasList","Array","isArray","showExpertSlot","_label","showDefaultSlot","h","Host","class","range","_hideLabel","_disabled","_error","_hint","_icon","_id","_touched","slot","Object","assign","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","list","max","min","_name","spellcheck","step","tabIndex","type","controller","onFacade","onChange","ref","catchInputNumberRef","id","onKeyUp","map","option","hostRef","element","propagateFocus","_a","parseFloat","event","target","_on","_b","code","propagateSubmitEventToForm","form","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { watchJsonArrayString, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\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 validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateList(value?: Stringified<Option<number>[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis.component,\n\t\t\t'_list',\n\t\t\t(item: Option<number>) => typeof item === 'object' && typeof item.label === 'string' && item.label.length > 0,\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n/*\n * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n */\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 1px solid #000;\n\tdisplay: inline-block;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\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, InputTypeOnOff, Option } from '../../types/input/types';\nimport { nonce } from '../../utils/dev.utils';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { propagateFocus } from '../../utils/reuse';\n\n/**\n * @slot - Die Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.ref = element;\n\t\t\tpropagateFocus(this.host, element);\n\t\t\tif (!this._value && this.ref?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.ref.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tlet value = parseFloat((event.target as HTMLInputElement).value);\n\t\tif (this.state._max && value > this.state._max) value = this.state._max;\n\t\tif (this.state._min && value < this.state._min) value = this.state._min;\n\t\tthis.validateValue(value);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on?.onChange(event, value);\n\t\t}\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\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\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\trange: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\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_touched={this.state._touched}\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<div slot=\"input\" class=\"inputs-wrapper\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchInputNumberRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-number` : undefined}\n\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{hasList && [\n\t\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t\t{this.state._list.map((option: Option<number>) => (\n\t\t\t\t\t\t\t\t\t<option value={option.value}></option>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t\t//   {this.state._list.map((option: InputOption<number>) => (\n\t\t\t\t\t\t\t//     <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t\t//   ))}\n\t\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t\t]}\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\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 * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\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 * 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!: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<Option<number>[]>;\n\n\t/**\n\t * Gibt den größtmöglichen Eingabewert an.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Gibt den kleinstmöglichen Eingabewert an.\n\t */\n\t@Prop() public _min?: number;\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 * Gibt die Schrittweite der Wertveränderung an.\n\t */\n\t@Prop() public _step?: 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() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: nonce(), // ⚠ required\n\t\t_label: '…', // ⚠ required\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', 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('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(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('_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<Option<number>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(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('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(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?: number): 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();\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","Array","isArray","validateSuggestions","map","option","validateMax","watchNumber","validateMin","validateStep","validateValue","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_list","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRange","render","ariaDescribedBy","getRenderStates","hasSuggestions","length","hasExpertSlot","_label","h","Host","class","range","_hideLabel","_disabled","_error","_hint","_icon","_id","_touched","slot","style","Object","assign","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","list","max","min","_name","spellcheck","step","tabIndex","type","controller","onFacade","onChange","ref","catchInputNumberRef","id","onKeyUp","hidden","_align","_tooltipAlign","hostRef","element","propagateFocus","_a","parseFloat","event","target","_on","_b","code","propagateSubmitEventToForm","form","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\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 validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @deprecated use _suggestions\n\t */\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tif (Array.isArray(value)) {\n\t\t\tthis.validateSuggestions(value.map((option) => option.value));\n\t\t}\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n.inputs-wrapper {\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n}\ninput[type='number'] {\n\tmin-height: var(--a11y-min-size);\n\tmin-width: var(--a11y-min-size);\n\twidth: var(--kolibri-input-range--input-number--width);\n}\n/*\n * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n */\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 1px solid #000;\n\tdisplay: inline-block;\n\tflex-grow: 1;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n\twidth: 0; /* Design-Hack - related with flex-grow */\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, InputTypeOnOff, Option } from '../../types/input/types';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { SuggestionsPropType } from '../../types/props/suggestions';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { API, States } from './types';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { IdPropType } from '../../types/props/id';\nimport { NamePropType } from '../../types/props/name';\n\n/**\n * @slot - Die Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements API {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.ref = element;\n\t\t\tpropagateFocus(this.host, element);\n\t\t\tif (!this._value && this.ref?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.ref.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tlet value = parseFloat((event.target as HTMLInputElement).value);\n\t\tif (this.state._max && value > this.state._max) value = this.state._max;\n\t\tif (this.state._min && value < this.state._min) value = this.state._min;\n\t\tthis.validateValue(value);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on?.onChange(event, value);\n\t\t}\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\trange: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\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_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"inputs-wrapper\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tref={this.catchInputNumberRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-number` : undefined}\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<kol-tooltip-wc\n\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tclass=\"input-tooltip\"\n\t\t\t\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t\t></kol-tooltip-wc>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{hasSuggestions && [\n\t\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t\t{this.state._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t\t//   {this.state._suggestions.map((option: InputOption<number>) => (\n\t\t\t\t\t\t\t//     <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t\t//   ))}\n\t\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t\t]}\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the label.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icon=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Vorschlagswörter an.\n\t * @deprecated Use _suggestions.\n\t */\n\t@Prop() public _list?: Stringified<Option<W3CInputValue>[]>;\n\n\t/**\n\t * Defines the largest possible input value.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: false, // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'input-range', 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('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(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('_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<Option<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(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('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): 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();\n\t}\n}\n"],"mappings":"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"}

package/dist/kolibri/kol-input-text.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-2c046ff1.js";import{f as s}from"./a11y.tipps-e607b8b3.js";import{a as n}from"./reuse-c2156413.js";import{p as l}from"./controller-ca0fe64f.js";import{g as d}from"./controller-df83465a.js";import{a as o}from"./controller-264c992a.js";import{b as r,s as h}from"./prop.validators-683bb1d0.js";import{v as u}from"./has-counter-12b4504c.js";import{v as p}from"./hide-label-e9f288ac.js";import"./dev.utils-8aef00f6.js";import"./tab-index-6d37f269.js";import"./label-6047ed81.js";import"./controller-12aadfcd.js";import"./controller-icon-94ad4fd6.js";import"./icon-278d567d.js";import"./index-37b5cbcf.js";const c=(t,e)=>{r(t,"_alert",e)},f=(t,e)=>{r(t,"_readOnly",e)},v=(t,e)=>{r(t,"_required",e)},m=(t,e)=>{r(t,"_touched",e)},y=":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}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}";s("[KolInputText] Pre- und post-Label für Währung usw.");const b=class{render(){const{ariaDescribedBy:a}=d(this.state),i=Array.isArray(this.state._list)&&this.state._list.length>0,l=""===this.state._label,s="…"===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},l?t("slot",{name:"expert"}):s?t("slot",null):this.state._label),t("input",Object.assign({ref:this.catchRef,accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:i?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",title:"",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){i(this,t),this.catchRef=t=>{var e;this.ref=t,n(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{h(this,"_currentLength",t.target.value.length),"Enter"===t.code||"NumpadEnter"===t.code?l({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,a;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(a=this.ref)||void 0===a?void 0:a.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hasCounter=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._size=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_id:"id",_hasValue:!1,_label:"…",_list:[],_type:"text"},this.controller=new o(this,"text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){c(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){u(this,t)}validateHideLabel(t){p(this,t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){f(this,t)}validateRequired(t){v(this,t)}validateSize(t){this.controller.validateSize(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){m(this,t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t)),this.validateHasCounter(this._hasCounter)}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};b.style={default:y};export{b as kol_input_text};
+import{h as t,H as e,r as i,g as a}from"./index-5ab2ea42.js";import{a as s,s as n}from"./prop.validators-fba03cca.js";import{f as l}from"./a11y.tipps-3205ae7d.js";import{n as d}from"./dev.utils-c0c1c4e5.js";import{a as o}from"./reuse-c2156413.js";import{p as r}from"./controller-c37fdd5f.js";import{g as h}from"./controller-ac00e430.js";import{a as u}from"./controller-dc4b7a0e.js";import"./index-37b5cbcf.js";import"./label-f1600f9b.js";import"./associated.controller-e261bc1a.js";import"./tab-index-047d5fa8.js";import"./hide-label-7ff2d26a.js";import"./controller-b538f5cd.js";import"./controller-icon-caaea418.js";import"./icon-995dad86.js";import"./suggestions-ec4c5896.js";const p=(t,e)=>{s(t,"_alert",e)},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}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}";l("[KolInputText] Pre- und post-Label für Währung usw.");const f=class{render(){const{ariaDescribedBy:i}=h(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,l=!1===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_suggestions:this.state._suggestions,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},l?t("slot",null):this.state._label),t("div",{slot:"input"},t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})),t("kol-tooltip-wc",{"aria-hidden":"true",class:"input-tooltip",hidden:l||!this.state._hideLabel,_align:this._tooltipAlign,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(t){i(this,t),this.catchRef=t=>{var e;this.ref=t,o(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{n(this,"_currentLength",t.target.value.length),"Enter"===t.code||"NumpadEnter"===t.code?r({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,i;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.ref)||void 0===i?void 0:i.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hasCounter=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._size=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_id:`id-${d()}`,_hasValue:!1,_label:!1,_suggestions:[],_type:"text"},this.controller=new u(this,"input-text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){p(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};f.style={default:c};export{f as kol_input_text};

package/dist/kolibri/kol-input-text.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["validateAlert","component","value","watchBoolean","validateReadOnly","validateRequired","validateTouched","defaultStyleCss","featureHint","KolInputText","render","ariaDescribedBy","getRenderStates","this","state","hasList","Array","isArray","_list","length","showExpertSlot","_label","showDefaultSlot","h","Host","class","_hasValue","_type","_hideLabel","_currentLength","_disabled","_error","_hasCounter","_hint","_icon","_id","_maxLength","_readOnly","_required","_smartButton","_touched","onClick","_a","ref","focus","slot","name","Object","assign","catchRef","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","list","maxlength","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","title","type","_value","controller","onFacade","onKeyUp","constructor","hostRef","propagateFocus","host","disconnectedCallback","addEventListener","onChange","event","setState","target","code","propagateSubmitEventToForm","form","oldValue","_b","InputTextController","validateAccessKey","validateAutoComplete","validateDisabled","validateError","validateHasCounter","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateList","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateSize","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateType","validateValue","componentWillLoad","_alert","addValueChangeListener","v","removeEventListener"],"sources":["src/types/props/alert.ts","src/types/props/read-only.ts","src/types/props/required.ts","src/types/props/touched.ts","src/components/input-text/style.css?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropAlert = {\n\talert: boolean;\n};\n\n/* validator */\nexport const validateAlert = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Setzt den Zugriff auf dieses Eingabeelement auf nur lesen.\n */\n/** en\n * Makes the input element read only.\n */\nexport type PropReadOnly = {\n\treadOnly: boolean;\n};\n\n/* validator */\nexport const validateReadOnly = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_readOnly', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Macht das Eingabeelement zu einem Pflichtfeld.\n */\n/** en\n * Makes the input element required.\n */\nexport type PropRequired = {\n\trequired: boolean;\n};\n\n/* validator */\nexport const validateRequired = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_required', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n */\n/** en\n * Shows if the input was touched by a user.\n */\nexport type PropTouched = {\n\ttouched: boolean;\n};\n\n/* validator */\nexport const validateTouched = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_touched', value);\n};\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTextType } from '../../types/input/control/text';\n\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { validateAlert, validateHasCounter, validateHideLabel, validateReadOnly, validateRequired, validateTouched } from '../../types/props';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { setState } from '../../utils/prop.validators';\n\nfeatureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t\tthis.disconnectedCallback();\n\t\tthis.ref?.addEventListener('search', this.onChange);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tsetState(this, '_currentLength', (event.target as HTMLInputElement).value.length);\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\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\t[this.state._type]: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_currentLength={this.state._currentLength}\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_hasCounter={this.state._hasCounter}\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_list={this.state._list}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\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<input\n\t\t\t\t\t\tref={this.catchRef}\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\tautoComplete={this.state._autoComplete}\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\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\treadOnly={this.state._readOnly}\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\ttitle=\"\"\n\t\t\t\t\t\t// title={this.state._title}\n\t\t\t\t\t\ttype={this.state._type}\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t// onInput={this.controller.onFacade.onChange}\n\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputTextController;\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 * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\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 * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t */\n\t@Prop() public _hasCounter?: boolean;\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!: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt an, wie viele Zeichen maximal eingegeben werden können.\n\t */\n\t@Prop() public _maxLength?: number;\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 * Gibt ein Prüfmuster (Pattern) für das Eingabefeld an.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop() public _readOnly?: boolean;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\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 * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_id: 'id',\n\t\t_hasValue: false,\n\t\t_label: '…', // ⚠ required\n\t\t_list: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', 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\tvalidateAlert(this, value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(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('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tvalidateHasCounter(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, 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<string[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(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('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tvalidateReadOnly(this, value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tvalidateRequired(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(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\tvalidateTouched(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): 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.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\n\t\tthis.validateHasCounter(this._hasCounter);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ref?.removeEventListener('search', this.onChange);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateAlert","component","value","watchBoolean","defaultStyleCss","featureHint","KolInputText","render","ariaDescribedBy","getRenderStates","this","state","hasSuggestions","Array","isArray","_suggestions","length","hasExpertSlot","_label","h","Host","class","_hasValue","_type","_hideLabel","_currentLength","_disabled","_error","_hasCounter","_hint","_icon","_id","_maxLength","_readOnly","_required","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","list","maxlength","name","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","type","_value","controller","onFacade","onKeyUp","hidden","_align","_tooltipAlign","constructor","hostRef","propagateFocus","host","disconnectedCallback","addEventListener","onChange","event","setState","target","code","propagateSubmitEventToForm","form","oldValue","_b","nonce","InputTextController","validateAccessKey","validateAutoComplete","validateDisabled","validateError","validateHasCounter","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateList","validateSuggestions","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","validateType","validateValue","componentWillLoad","_alert","addValueChangeListener","v","removeEventListener"],"sources":["src/types/props/alert.ts","src/components/input-text/style.css?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type AlertPropType = boolean;\n\n/**\n * Defines whether the screen-readers should read out the notification.\n */\nexport type PropAlert = {\n\talert: AlertPropType;\n};\n\n/* validator */\nexport const validateAlert = (component: Generic.Element.Component, value?: AlertPropType): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Props as ButtonProps } from '../button/types';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTextType } from '../../types/input/control/text';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { AlertPropType, validateAlert } from '../../types/props/alert';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { SuggestionsPropType } from '../../types/props/suggestions';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { API, States } from './types';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { IdPropType } from '../../types/props/id';\nimport { NamePropType } from '../../types/props/name';\n\nfeatureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements API {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t\tthis.disconnectedCallback();\n\t\tthis.ref?.addEventListener('search', this.onChange);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tsetState(this, '_currentLength', (event.target as HTMLInputElement).value.length);\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _label\n\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\t[this.state._type]: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_currentLength={this.state._currentLength}\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_hasCounter={this.state._hasCounter}\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_suggestions={this.state._suggestions}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype={this.state._type}\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t// onInput={this.controller.onFacade.onChange}\n\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<kol-tooltip-wc\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\tclass=\"input-tooltip\"\n\t\t\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip-wc>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputTextController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @TODO: Change type back to `AlertPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean;\n\n\t/**\n\t * Hides the label.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icon=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Vorschlagswörter an.\n\t * @deprecated Use _suggestions.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines a validation pattern for the input field.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_hasValue: false,\n\t\t_label: false, // ⚠ required\n\t\t_suggestions: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'input-text', 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?: AlertPropType): void {\n\t\tvalidateAlert(this, value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(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('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(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?: SuggestionsPropType): void {\n\t\tthis.validateSuggestions(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(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('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(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/**\n\t * @deprecated\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): 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.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ref?.removeEventListener('search', this.onChange);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as i}from"./index-2c046ff1.js";import{c as o,v as a}from"./color-9d0ce5e3.js";import{a as s}from"./i18n-08ede0fc.js";import{b as r}from"./prop.validators-683bb1d0.js";import{d as n}from"./a11y.tipps-e607b8b3.js";import"./index-4e5a5ff3.js";import"./index-37b5cbcf.js";import"./dev.utils-8aef00f6.js";import"./reuse-c2156413.js";const 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}text{font-size:90px;letter-spacing:normal;word-spacing:normal}",h=360;function d(t){return t*Math.PI/180}function c(t){return Math.round((Math.cos(d(t))+1)/2*225)}const p=class{constructor(e){t(this,e),this.handleColorChange=(t,e)=>{if("string"==typeof t){const a=o(t);e.set("_color",{red:a[0],green:a[1],blue:a[2]})}else n("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._animate=void 0,this._color="#003c78",this._labeled=void 0,this.state={_animate:!1,_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const t=!0===this.state._animate?`rgb(${c(this.state._color.red)},${c(this.state._color.green)},${c(this.state._color.blue)})`:`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e(i,null,e("svg",{role:"img","aria-label":s("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:t},e("path",{d:"M353 322L213 304V434L353 322Z"}),e("path",{d:"M209 564V304L149 434L209 564Z"}),e("path",{d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{d:"M353 318L35 36L213 300L353 318Z"}),e("path",{d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{x:"250",y:"525",fill:t},"KoliBri")))}validateAnimate(t){r(this,"_animate",t)}validateColor(t){a(this,t,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(t){r(this,"_labeled",t)}componentWillLoad(){this.validateAnimate(this._animate),this.validateColor(this._color),this.validateLabeled(this._labeled)}componentDidRender(){clearInterval(this.interval),this.state._animate&&(this.interval=setInterval((()=>{this.state=Object.assign(Object.assign({},this.state),{_color:{red:(this.state._color.red+1)%h,green:(this.state._color.green+2)%h,blue:(this.state._color.blue+3)%h}})}),50))}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_animate:["validateAnimate"],_color:["validateColor"],_labeled:["validateLabeled"]}}};p.style={default:l};export{p as kol_kolibri};
+import{r as t,h as e,H as i}from"./index-5ab2ea42.js";import{a}from"./i18n-45aa3c6d.js";import{c as o,v as s}from"./color-e03668b8.js";import{d as r}from"./a11y.tipps-3205ae7d.js";import{a as n}from"./prop.validators-fba03cca.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./dev.utils-c0c1c4e5.js";import"./reuse-c2156413.js";const 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}text{font-size:90px;letter-spacing:normal;word-spacing:normal}",h=360;function c(t){return t*Math.PI/180}function d(t){return Math.round((Math.cos(c(t))+1)/2*225)}const p=class{constructor(e){t(this,e),this.handleColorChange=(t,e)=>{if("string"==typeof t){const a=o(t);e.set("_color",{red:a[0],green:a[1],blue:a[2]})}else r("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._animate=void 0,this._color="#003c78",this._labeled=void 0,this.state={_animate:!1,_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const t=!0===this.state._animate?`rgb(${d(this.state._color.red)},${d(this.state._color.green)},${d(this.state._color.blue)})`:`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e(i,null,e("svg",{role:"img","aria-label":a("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:t},e("path",{d:"M353 322L213 304V434L353 322Z"}),e("path",{d:"M209 564V304L149 434L209 564Z"}),e("path",{d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{d:"M353 318L35 36L213 300L353 318Z"}),e("path",{d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{x:"250",y:"525",fill:t},"KoliBri")))}validateAnimate(t){n(this,"_animate",t)}validateColor(t){s(this,t,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(t){n(this,"_labeled",t)}componentWillLoad(){this.validateAnimate(this._animate),this.validateColor(this._color),this.validateLabeled(this._labeled)}componentDidRender(){clearInterval(this.interval),this.state._animate&&(this.interval=setInterval((()=>{this.state=Object.assign(Object.assign({},this.state),{_color:{red:(this.state._color.red+1)%h,green:(this.state._color.green+2)%h,blue:(this.state._color.blue+3)%h}})}),50))}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_animate:["validateAnimate"],_color:["validateColor"],_labeled:["validateLabeled"]}}};p.style={default:l};export{p as kol_kolibri};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","max","degreeToRadians","degree","Math","PI","getColorNumber","round","cos","KolKolibri","this","handleColorChange","nextValue","nextState","rgba","colorRgba","set","red","green","blue","devHint","_animate","_color","_labeled","render","fillColor","state","h","Host","role","translate","xmlns","viewBox","fill","d","x","y","validateAnimate","value","watchBoolean","validateColor","defaultValue","hooks","beforePatch","validateLabeled","componentWillLoad","componentDidRender","clearInterval","interval","setInterval","Object","assign","disconnectedCallback"],"sources":["src/components/kolibri/style.css?tag=kol-kolibri&mode=default&encapsulation=shadow","src/components/kolibri/component.tsx"],"sourcesContent":["@import url(../style.css);\ntext {\n\tfont-size: 90px;\n\tletter-spacing: normal;\n\tword-spacing: normal;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { colorRgba } from '../badge/color-rgba';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport { PropColor, validateColor } from '../../types/props/color';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { Stringified } from '../../components';\nimport { KoliBriKolibriAPI, KoliBriKolibriStates } from './types';\n\nconst max = 360;\nfunction degreeToRadians(degree: number): number {\n\treturn (degree * Math.PI) / 180;\n}\nfunction getColorNumber(degree: number): number {\n\treturn Math.round(((Math.cos(degreeToRadians(degree)) + 1) / 2) * 225);\n}\n\n@Component({\n\ttag: 'kol-kolibri',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolKolibri implements KoliBriKolibriAPI {\n\tpublic render(): JSX.Element {\n\t\tconst fillColor: string =\n\t\t\tthis.state._animate === true\n\t\t\t\t? `rgb(${getColorNumber(this.state._color.red)},${getColorNumber(this.state._color.green)},${getColorNumber(this.state._color.blue)})`\n\t\t\t\t: `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<svg role=\"img\" aria-label={translate('kol-kolibri-logo')} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 600 600\" fill={fillColor}>\n\t\t\t\t\t<path d=\"M353 322L213 304V434L353 322Z\" />\n\t\t\t\t\t<path d=\"M209 564V304L149 434L209 564Z\" />\n\t\t\t\t\t<path d=\"M357 316L417 250L361 210L275 244L357 316Z\" />\n\t\t\t\t\t<path d=\"M329 218L237 92L250 222L272 241L329 218Z\" />\n\t\t\t\t\t<path d=\"M353 318L35 36L213 300L353 318Z\" />\n\t\t\t\t\t<path d=\"M391 286L565 272L421 252L391 286Z\" />\n\t\t\t\t\t{this.state._labeled === true && (\n\t\t\t\t\t\t<text x=\"250\" y=\"525\" fill={fillColor}>\n\t\t\t\t\t\t\tKoliBri\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t</svg>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate interval?: NodeJS.Timer;\n\n\t/**\n\t * Gibt an, ob das Bild-Logo farblich animiert werden soll.\n\t */\n\t@Prop() public _animate?: boolean;\n\n\t/**\n\t * Gibt an, in welcher Farbe das Bild-Logo initial dargestellt werden soll.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#003c78';\n\n\t/**\n\t * Gibt an, ob die Logo-Beschriftung angezeigt werden soll.\n\t */\n\t@Prop() public _labeled?: boolean;\n\n\t@State() public state: KoliBriKolibriStates = {\n\t\t_animate: false,\n\t\t_color: {\n\t\t\tred: 0,\n\t\t\tgreen: 60,\n\t\t\tblue: 120,\n\t\t},\n\t\t_labeled: true,\n\t};\n\n\t@Watch('_animate')\n\tpublic validateAnimate(value?: boolean): void {\n\t\twatchBoolean(this, '_animate', value);\n\t}\n\n\tprivate handleColorChange: Generic.Element.NextStateHooksCallback = (nextValue: unknown, nextState: Map<string, unknown>): void => {\n\t\tif (typeof nextValue === 'string') {\n\t\t\tconst rgba = colorRgba(nextValue);\n\t\t\tnextState.set('_color', {\n\t\t\t\tred: rgba[0],\n\t\t\t\tgreen: rgba[1],\n\t\t\t\tblue: rgba[2],\n\t\t\t});\n\t\t} else {\n\t\t\tdevHint(`[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.`);\n\t\t}\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#003c78',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_labeled')\n\tpublic validateLabeled(value?: boolean): void {\n\t\twatchBoolean(this, '_labeled', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAnimate(this._animate);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabeled(this._labeled);\n\t}\n\n\tpublic componentDidRender(): void {\n\t\tclearInterval(this.interval as NodeJS.Timer);\n\t\tif (this.state._animate) {\n\t\t\tthis.interval = setInterval(() => {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_color: {\n\t\t\t\t\t\tred: (this.state._color.red + 1) % max,\n\t\t\t\t\t\tgreen: (this.state._color.green + 2) % max,\n\t\t\t\t\t\tblue: (this.state._color.blue + 3) % max,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}, 50);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval as NodeJS.Timer);\n\t}\n}\n"],"mappings":";;;+VAAA,MAAMA,EAAkB,qvBCYxB,MAAMC,EAAM,IACZ,SAASC,EAAgBC,GACxB,OAAQA,EAASC,KAAKC,GAAM,GAC7B,CACA,SAASC,EAAeH,GACvB,OAAOC,KAAKG,OAAQH,KAAKI,IAAIN,EAAgBC,IAAW,GAAK,EAAK,IACnE,C,MASaM,EAAU,M,yBAyDdC,KAAAC,kBAA4D,CAACC,EAAoBC,KACxF,UAAWD,IAAc,SAAU,CAClC,MAAME,EAAOC,EAAUH,GACvBC,EAAUG,IAAI,SAAU,CACvBC,IAAKH,EAAK,GACVI,MAAOJ,EAAK,GACZK,KAAML,EAAK,I,KAEN,CACNM,EAAQ,uG,uCA/BuC,U,mCAOH,CAC7CC,SAAU,MACVC,OAAQ,CACPL,IAAK,EACLC,MAAO,GACPC,KAAM,KAEPI,SAAU,K,CAhDJC,SACN,MAAMC,EACLf,KAAKgB,MAAML,WAAa,KACrB,OAAOf,EAAeI,KAAKgB,MAAMJ,OAAOL,QAAQX,EAAeI,KAAKgB,MAAMJ,OAAOJ,UAAUZ,EAAeI,KAAKgB,MAAMJ,OAAOH,SAC5H,OAAOT,KAAKgB,MAAMJ,OAAOL,OAAOP,KAAKgB,MAAMJ,OAAOJ,SAASR,KAAKgB,MAAMJ,OAAOH,QACjF,OACCQ,EAACC,EAAI,KACJD,EAAA,OAAKE,KAAK,MAAK,aAAaC,EAAU,oBAAqBC,MAAM,6BAA6BC,QAAQ,cAAcC,KAAMR,GACzHE,EAAA,QAAMO,EAAE,kCACRP,EAAA,QAAMO,EAAE,kCACRP,EAAA,QAAMO,EAAE,8CACRP,EAAA,QAAMO,EAAE,6CACRP,EAAA,QAAMO,EAAE,oCACRP,EAAA,QAAMO,EAAE,sCACPxB,KAAKgB,MAAMH,WAAa,MACxBI,EAAA,QAAMQ,EAAE,MAAMC,EAAE,MAAMH,KAAMR,GAAS,Y,CAqCnCY,gBAAgBC,GACtBC,EAAa7B,KAAM,WAAY4B,E,CAiBzBE,cAAcF,GACpBE,EAAc9B,KAAM4B,EAAO,CAC1BG,aAAc,UACdC,MAAO,CACNC,YAAajC,KAAKC,oB,CAMdiC,gBAAgBN,GACtBC,EAAa7B,KAAM,WAAY4B,E,CAGzBO,oBACNnC,KAAK2B,gBAAgB3B,KAAKW,UAC1BX,KAAK8B,cAAc9B,KAAKY,QACxBZ,KAAKkC,gBAAgBlC,KAAKa,S,CAGpBuB,qBACNC,cAAcrC,KAAKsC,UACnB,GAAItC,KAAKgB,MAAML,SAAU,CACxBX,KAAKsC,SAAWC,aAAY,KAC3BvC,KAAKgB,MAAKwB,OAAAC,OAAAD,OAAAC,OAAA,GACNzC,KAAKgB,OAAK,CACbJ,OAAQ,CACPL,KAAMP,KAAKgB,MAAMJ,OAAOL,IAAM,GAAKhB,EACnCiB,OAAQR,KAAKgB,MAAMJ,OAAOJ,MAAQ,GAAKjB,EACvCkB,MAAOT,KAAKgB,MAAMJ,OAAOH,KAAO,GAAKlB,IAEtC,GACC,G,EAIEmD,uBACNL,cAAcrC,KAAKsC,S"}
+{"version":3,"names":["defaultStyleCss","max","degreeToRadians","degree","Math","PI","getColorNumber","round","cos","KolKolibri","this","handleColorChange","nextValue","nextState","rgba","colorRgba","set","red","green","blue","devHint","_animate","_color","_labeled","render","fillColor","state","h","Host","role","translate","xmlns","viewBox","fill","d","x","y","validateAnimate","value","watchBoolean","validateColor","defaultValue","hooks","beforePatch","validateLabeled","componentWillLoad","componentDidRender","clearInterval","interval","setInterval","Object","assign","disconnectedCallback"],"sources":["src/components/kolibri/style.css?tag=kol-kolibri&mode=default&encapsulation=shadow","src/components/kolibri/component.tsx"],"sourcesContent":["@import url(../style.css);\ntext {\n\tfont-size: 90px;\n\tletter-spacing: normal;\n\tword-spacing: normal;\n}\n","import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { PropColor, validateColor } from '../../types/props/color';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { colorRgba } from '../badge/color-rgba';\nimport { API, States } from './types';\n\nconst max = 360;\nfunction degreeToRadians(degree: number): number {\n\treturn (degree * Math.PI) / 180;\n}\nfunction getColorNumber(degree: number): number {\n\treturn Math.round(((Math.cos(degreeToRadians(degree)) + 1) / 2) * 225);\n}\n\n@Component({\n\ttag: 'kol-kolibri',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolKolibri implements API {\n\tpublic render(): JSX.Element {\n\t\tconst fillColor: string =\n\t\t\tthis.state._animate === true\n\t\t\t\t? `rgb(${getColorNumber(this.state._color.red)},${getColorNumber(this.state._color.green)},${getColorNumber(this.state._color.blue)})`\n\t\t\t\t: `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<svg role=\"img\" aria-label={translate('kol-kolibri-logo')} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 600 600\" fill={fillColor}>\n\t\t\t\t\t<path d=\"M353 322L213 304V434L353 322Z\" />\n\t\t\t\t\t<path d=\"M209 564V304L149 434L209 564Z\" />\n\t\t\t\t\t<path d=\"M357 316L417 250L361 210L275 244L357 316Z\" />\n\t\t\t\t\t<path d=\"M329 218L237 92L250 222L272 241L329 218Z\" />\n\t\t\t\t\t<path d=\"M353 318L35 36L213 300L353 318Z\" />\n\t\t\t\t\t<path d=\"M391 286L565 272L421 252L391 286Z\" />\n\t\t\t\t\t{this.state._labeled === true && (\n\t\t\t\t\t\t<text x=\"250\" y=\"525\" fill={fillColor}>\n\t\t\t\t\t\t\tKoliBri\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t</svg>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate interval?: number;\n\n\t/**\n\t * Gibt an, ob das Bild-Logo farblich animiert werden soll.\n\t */\n\t@Prop() public _animate?: boolean;\n\n\t/**\n\t * Gibt an, in welcher Farbe das Bild-Logo initial dargestellt werden soll.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#003c78';\n\n\t/**\n\t * Defines whether the component has a label.\n\t */\n\t@Prop() public _labeled?: boolean;\n\n\t@State() public state: States = {\n\t\t_animate: false,\n\t\t_color: {\n\t\t\tred: 0,\n\t\t\tgreen: 60,\n\t\t\tblue: 120,\n\t\t},\n\t\t_labeled: true,\n\t};\n\n\t@Watch('_animate')\n\tpublic validateAnimate(value?: boolean): void {\n\t\twatchBoolean(this, '_animate', value);\n\t}\n\n\tprivate handleColorChange: Generic.Element.NextStateHooksCallback = (nextValue: unknown, nextState: Map<string, unknown>): void => {\n\t\tif (typeof nextValue === 'string') {\n\t\t\tconst rgba = colorRgba(nextValue);\n\t\t\tnextState.set('_color', {\n\t\t\t\tred: rgba[0],\n\t\t\t\tgreen: rgba[1],\n\t\t\t\tblue: rgba[2],\n\t\t\t});\n\t\t} else {\n\t\t\tdevHint(`[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.`);\n\t\t}\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#003c78',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_labeled')\n\tpublic validateLabeled(value?: boolean): void {\n\t\twatchBoolean(this, '_labeled', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAnimate(this._animate);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabeled(this._labeled);\n\t}\n\n\tpublic componentDidRender(): void {\n\t\tclearInterval(this.interval);\n\t\tif (this.state._animate) {\n\t\t\tthis.interval = setInterval(() => {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_color: {\n\t\t\t\t\t\tred: (this.state._color.red + 1) % max,\n\t\t\t\t\t\tgreen: (this.state._color.green + 2) % max,\n\t\t\t\t\t\tblue: (this.state._color.blue + 3) % max,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}, 50) as unknown as number;\n\t\t}\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"mappings":";;;0VAAA,MAAMA,EAAkB,qvBCWxB,MAAMC,EAAM,IACZ,SAASC,EAAgBC,GACxB,OAAQA,EAASC,KAAKC,GAAM,GAC7B,CACA,SAASC,EAAeH,GACvB,OAAOC,KAAKG,OAAQH,KAAKI,IAAIN,EAAgBC,IAAW,GAAK,EAAK,IACnE,C,MASaM,EAAU,M,yBAyDdC,KAAAC,kBAA4D,CAACC,EAAoBC,KACxF,UAAWD,IAAc,SAAU,CAClC,MAAME,EAAOC,EAAUH,GACvBC,EAAUG,IAAI,SAAU,CACvBC,IAAKH,EAAK,GACVI,MAAOJ,EAAK,GACZK,KAAML,EAAK,I,KAEN,CACNM,EAAQ,uG,uCA/BuC,U,mCAOjB,CAC/BC,SAAU,MACVC,OAAQ,CACPL,IAAK,EACLC,MAAO,GACPC,KAAM,KAEPI,SAAU,K,CAhDJ,MAAAC,GACN,MAAMC,EACLf,KAAKgB,MAAML,WAAa,KACrB,OAAOf,EAAeI,KAAKgB,MAAMJ,OAAOL,QAAQX,EAAeI,KAAKgB,MAAMJ,OAAOJ,UAAUZ,EAAeI,KAAKgB,MAAMJ,OAAOH,SAC5H,OAAOT,KAAKgB,MAAMJ,OAAOL,OAAOP,KAAKgB,MAAMJ,OAAOJ,SAASR,KAAKgB,MAAMJ,OAAOH,QACjF,OACCQ,EAACC,EAAI,KACJD,EAAA,OAAKE,KAAK,MAAK,aAAaC,EAAU,oBAAqBC,MAAM,6BAA6BC,QAAQ,cAAcC,KAAMR,GACzHE,EAAA,QAAMO,EAAE,kCACRP,EAAA,QAAMO,EAAE,kCACRP,EAAA,QAAMO,EAAE,8CACRP,EAAA,QAAMO,EAAE,6CACRP,EAAA,QAAMO,EAAE,oCACRP,EAAA,QAAMO,EAAE,sCACPxB,KAAKgB,MAAMH,WAAa,MACxBI,EAAA,QAAMQ,EAAE,MAAMC,EAAE,MAAMH,KAAMR,GAAS,Y,CAqCnC,eAAAY,CAAgBC,GACtBC,EAAa7B,KAAM,WAAY4B,E,CAiBzB,aAAAE,CAAcF,GACpBE,EAAc9B,KAAM4B,EAAO,CAC1BG,aAAc,UACdC,MAAO,CACNC,YAAajC,KAAKC,oB,CAMd,eAAAiC,CAAgBN,GACtBC,EAAa7B,KAAM,WAAY4B,E,CAGzB,iBAAAO,GACNnC,KAAK2B,gBAAgB3B,KAAKW,UAC1BX,KAAK8B,cAAc9B,KAAKY,QACxBZ,KAAKkC,gBAAgBlC,KAAKa,S,CAGpB,kBAAAuB,GACNC,cAAcrC,KAAKsC,UACnB,GAAItC,KAAKgB,MAAML,SAAU,CACxBX,KAAKsC,SAAWC,aAAY,KAC3BvC,KAAKgB,MAAKwB,OAAAC,OAAAD,OAAAC,OAAA,GACNzC,KAAKgB,OAAK,CACbJ,OAAQ,CACPL,KAAMP,KAAKgB,MAAMJ,OAAOL,IAAM,GAAKhB,EACnCiB,OAAQR,KAAKgB,MAAMJ,OAAOJ,MAAQ,GAAKjB,EACvCkB,MAAOT,KAAKgB,MAAMJ,OAAOH,KAAO,GAAKlB,IAEtC,GACC,G,EAIE,oBAAAmD,GACNL,cAAcrC,KAAKsC,S"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e,g as n}from"./index-2c046ff1.js";import{a as s}from"./i18n-08ede0fc.js";import{a as o}from"./reuse-c2156413.js";import"./index-4e5a5ff3.js";import"./index-37b5cbcf.js";import"./a11y.tipps-e607b8b3.js";import"./dev.utils-8aef00f6.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}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",r=class{constructor(i){t(this,i),this.catchRef=t=>{this.ref=t,o(this.host,this.ref)},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._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription=s("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal"}render(){return i(e,null,i("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icon:this._icon,_label:this._label,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},i("slot",{name:"expert",slot:"expert"})))}get host(){return n(this)}};r.style={default:a};export{r as kol_link_button};
+import{r as t,h as i,H as e,g as n}from"./index-5ab2ea42.js";import{a as s}from"./i18n-45aa3c6d.js";import{a}from"./reuse-c2156413.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./a11y.tipps-3205ae7d.js";import"./dev.utils-c0c1c4e5.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",r=class{constructor(i){t(this,i),this.catchRef=t=>{this.ref=t,a(this.host,this.ref)},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._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._listenAriaCurrent=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription=s("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal"}render(){return i(e,null,i("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icon:this._icon,_label:this._label,_listenAriaCurrent:this._listenAriaCurrent,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},i("slot",{name:"expert",slot:"expert"})))}get host(){return n(this)}};r.style={default:o};export{r as kol_link_button};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolLinkButton","this","catchRef","ref","propagateFocus","host","translate","render","h","Host","class","button","_variant","_customClass","length","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_download","_hideLabel","_href","_icon","_label","_on","_role","_tabIndex","_target","_targetDescription","_tooltipAlign","name","slot"],"sources":["src/components/link-button/style.css?tag=kol-link-button&mode=default&encapsulation=shadow","src/components/link-button/component.tsx"],"sourcesContent":["@import url(../button.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport {\n\tAlternativButtonLinkRole,\n\tKoliBriButtonVariant,\n\tLinkOnCallbacks,\n\tLinkTarget,\n\tOptionalLinkButtonProps,\n\tRequiredLinkButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { AriaCurrent, Align } from '../../types/props';\nimport { propagateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton implements Generic.Element.Members<RequiredLinkButtonProps, OptionalLinkButtonProps> {\n\t@Element() private readonly host?: HTMLKolLinkButtonElement;\n\tprivate ref?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-link-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\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_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_disabled={this._disabled}\n\t\t\t\t\t_download={this._download}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"button\"\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_targetDescription={this._targetDescription}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-link-wc>\n\t\t\t</Host>\n\t\t);\n\t}\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 *\n\t *  @deprecated use _label instead\n\t */\n\t@Prop() 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 * Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.\n\t */\n\t@Prop() public _download?: boolean | string = 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 * Gibt die Ziel-Url des Links an.\n\t */\n\t@Prop() public _href!: string;\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!: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für den Link an.\n\t * @deprecated\n\t */\n\t@Prop() public _on?: LinkOnCallbacks;\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 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 wo der Link geöffnet werden soll.\n\t */\n\t@Prop() public _target?: LinkTarget;\n\n\t/**\n\t * Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.\n\t */\n\t@Prop() public _targetDescription?: string = translate('kol-open-link-in-tab');\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 = 'right';\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"],"mappings":";;;qQAAA,MAAMA,EAAkB,w5B,MCwBXC,EAAa,M,yBAIRC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAeH,KAAKI,KAAMJ,KAAKE,IAAI,E,wLAwEC,M,eAKS,M,gBAKR,M,yMA+COG,EAAU,wB,mBAKhB,Q,cAKU,Q,CAxI1CC,SACN,OACCC,EAACC,EAAI,KACJD,EAAA,eACCL,IAAKF,KAAKC,SACVQ,MAAO,CACNC,OAAQ,KACR,CAACV,KAAKW,UAAqBX,KAAKW,WAAa,SAC7C,CAACX,KAAKY,cAAyBZ,KAAKW,WAAa,iBAAmBX,KAAKY,eAAiB,UAAYZ,KAAKY,aAAaC,OAAS,GAElIC,cAAed,KAAKc,cACpBC,aAAcf,KAAKe,aACnBC,cAAehB,KAAKgB,cACpBC,WAAYjB,KAAKiB,WACjBC,cAAelB,KAAKkB,cACpBC,UAAWnB,KAAKmB,UAChBC,UAAWpB,KAAKoB,UAChBC,WAAYrB,KAAKqB,WACjBC,MAAOtB,KAAKsB,MACZC,MAAOvB,KAAKuB,MACZC,OAAQxB,KAAKwB,OACbC,IAAKzB,KAAKyB,IACVC,MAAM,SACNC,UAAW3B,KAAK2B,UAChBC,QAAS5B,KAAK4B,QACdC,mBAAoB7B,KAAK6B,mBACzBC,cAAe9B,KAAK8B,eAEpBvB,EAAA,QAAMwB,KAAK,SAASC,KAAK,Y"}
+{"version":3,"names":["defaultStyleCss","KolLinkButton","this","catchRef","ref","propagateFocus","host","translate","render","h","Host","class","button","_variant","_customClass","length","_ariaControls","_ariaCurrent","_ariaExpanded","_ariaLabel","_ariaSelected","_disabled","_download","_hideLabel","_href","_icon","_label","_listenAriaCurrent","_on","_role","_tabIndex","_target","_targetDescription","_tooltipAlign","name","slot"],"sources":["src/components/link-button/style.css?tag=kol-link-button&mode=default&encapsulation=shadow","src/components/link-button/component.tsx"],"sourcesContent":["@import url(../button.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { AriaCurrentPropType } from '../../types/props/aria-current';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { propagateFocus } from '../../utils/reuse';\nimport { DownloadPropType } from '../../types/props/download';\nimport { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';\nimport { ButtonVariantPropType } from '../../types/props/button-variant';\nimport { LinkTargetPropType } from '../../types/props/link-target';\nimport { Props } from './types';\nimport { CustomClassPropType } from '../../types/props/custom-class';\nimport { HrefPropType } from '../../types/props/href';\nimport { IconPropType } from '../../types/props/icon';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { LinkOnCallbacksPropType } from '../../types/props/link-on-callbacks';\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton implements Props {\n\t@Element() private readonly host?: HTMLKolLinkButtonElement;\n\tprivate ref?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-link-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\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_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_disabled={this._disabled}\n\t\t\t\t\t_download={this._download}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_listenAriaCurrent={this._listenAriaCurrent}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"button\"\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_targetDescription={this._targetDescription}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-link-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Deprecated: Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t *\n\t * @deprecated will be removed in v2\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Deprecated: Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t *\n\t * @deprecated use _listen-aria-current instead\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrentPropType;\n\n\t/**\n\t * Deprecated: Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t *\n\t * @deprecated will be removed in v2\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Deprecated: Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t *\n\t * @deprecated will be removed in v2\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Deprecated: Makes the element not focusable and ignore all events.\n\t *\n\t * @deprecated Ein Link kann nicht deaktiviert werden, nutzen Sie den Button-Link stattdessen.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Tells the browser that the link contains a file. Optionally sets the filename.\n\t */\n\t@Prop() public _download?: DownloadPropType = false;\n\n\t/**\n\t * Hides the label and shows the description in a Tooltip instead.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icon=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icon?: IconPropType;\n\n\t/**\n\t * Deprecated: Hides the label and shows the description in a Tooltip instead.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Listen on a aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.\n\t */\n\t@Prop() public _listenAriaCurrent?: AriaCurrentPropType;\n\n\t/**\n\t * Defines the callback functions for links.\n\t */\n\t@Prop() public _on?: LinkOnCallbacksPropType;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to open the link.\n\t */\n\t@Prop() public _target?: LinkTargetPropType;\n\n\t/**\n\t * Defines the description to use when the link is going to be opened in another application.\n\t */\n\t@Prop() public _targetDescription?: string = translate('kol-open-link-in-tab');\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'right';\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"mappings":";;;gQAAA,MAAMA,EAAkB,w5B,MCwBXC,EAAa,M,yBAIRC,KAAAC,SAAYC,IAC5BF,KAAKE,IAAMA,EACXC,EAAeH,KAAKI,KAAMJ,KAAKE,IAAI,E,wLAmFC,M,eAKS,M,gBAMR,M,2OAmDOG,EAAU,wB,mBAKD,Q,cAKJ,Q,CAxJ3C,MAAAC,GACN,OACCC,EAACC,EAAI,KACJD,EAAA,eACCL,IAAKF,KAAKC,SACVQ,MAAO,CACNC,OAAQ,KACR,CAACV,KAAKW,UAAqBX,KAAKW,WAAa,SAC7C,CAACX,KAAKY,cAAyBZ,KAAKW,WAAa,iBAAmBX,KAAKY,eAAiB,UAAYZ,KAAKY,aAAaC,OAAS,GAElIC,cAAed,KAAKc,cACpBC,aAAcf,KAAKe,aACnBC,cAAehB,KAAKgB,cACpBC,WAAYjB,KAAKiB,WACjBC,cAAelB,KAAKkB,cACpBC,UAAWnB,KAAKmB,UAChBC,UAAWpB,KAAKoB,UAChBC,WAAYrB,KAAKqB,WACjBC,MAAOtB,KAAKsB,MACZC,MAAOvB,KAAKuB,MACZC,OAAQxB,KAAKwB,OACbC,mBAAoBzB,KAAKyB,mBACzBC,IAAK1B,KAAK0B,IACVC,MAAM,SACNC,UAAW5B,KAAK4B,UAChBC,QAAS7B,KAAK6B,QACdC,mBAAoB9B,KAAK8B,mBACzBC,cAAe/B,KAAK+B,eAEpBxB,EAAA,QAAMyB,KAAK,SAASC,KAAK,Y"}

package/dist/kolibri/kol-link-group.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t}from"./index-2c046ff1.js";import{w as e,a,b as l}from"./prop.validators-683bb1d0.js";import{w as n}from"./validation-0efb75d3.js";import{w as s}from"./validation-1f01325c.js";import{v as r}from"./label-6047ed81.js";import"./a11y.tipps-e607b8b3.js";import"./dev.utils-8aef00f6.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{list-style:none;margin:0;padding:0}nav.horizontal ul{display:flex;flex-wrap:wrap}nav.horizontal li{margin-left:1.25rem;margin-right:0.25rem}nav.horizontal li:first-child{margin-left:0}nav.horizontal li:last-child{margin-right:0}nav.vertical li{margin-left:1.75rem;margin-right:0.5rem}li.list-none{list-style-type:none !important;margin-left:0}",h=i=>{const e=[];return i.links.map(((a,l)=>{e.push(t("li",{key:l,class:{ident:l>0&&"vertical"===i.orientation,"list-none":0===l&&"horizontal"===i.orientation},style:{listStyleType:i.listStyleType}},t("kol-link",Object.assign({},a))))})),e},d=class{constructor(t){i(this,t),this.isUl=!0,this._ariaLabel=void 0,this._listStyleType=void 0,this._heading=void 0,this._label=void 0,this._level=void 0,this._links=void 0,this._ordered=void 0,this._orientation="vertical",this.state={_label:"…",_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){var i;return t("nav",{"aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},"string"==typeof this.state._heading&&(null===(i=this.state._heading)||void 0===i?void 0:i.length)>0&&t("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),!1===this.isUl?t("ol",null,t(h,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})):t("ul",null,t(h,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateAriaLabel(t){this.validateLabel(t)}validateHeading(t){e(this,"_heading",t)}validateLabel(t){r(this,t)}validateLevel(t){n(this,t)}validateListStyleType(t){a(this,"_listStyleType",(t=>{switch(t){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),t)}validateLinks(t){s("KolLinkGroup",this,t)}validateOrdered(t){l(this,"_ordered",t)}validateOrientation(t){a(this,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}componentWillLoad(){this.validateHeading(this._heading),this.validateLabel(this._label||this._ariaLabel),this.validateLevel(this._level),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_listStyleType:["validateListStyleType"],_links:["validateLinks"],_ordered:["validateOrdered"],_orientation:["validateOrientation"]}}};d.style={default:o};export{d as kol_link_group};
+import{r as i,h as t}from"./index-5ab2ea42.js";import{v as e}from"./label-f1600f9b.js";import{d as a,w as l,a as n}from"./prop.validators-fba03cca.js";import{w as s}from"./validation-5a1145b4.js";import{w as r}from"./validation-e77a4410.js";import"./a11y.tipps-3205ae7d.js";import"./dev.utils-c0c1c4e5.js";import"./reuse-c2156413.js";import"./index-37b5cbcf.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{list-style:none;margin:0;padding:0}nav.horizontal ul{display:flex;flex-wrap:wrap}nav.horizontal li{margin-left:1.25rem;margin-right:0.25rem}nav.horizontal li:first-child{margin-left:0}nav.horizontal li:last-child{margin-right:0}nav.vertical li{margin-left:1.75rem;margin-right:0.5rem}li.list-none{list-style-type:none !important;margin-left:0}",h=i=>{const e=[];return i.links.map(((a,l)=>{e.push(t("li",{key:l,class:{ident:l>0&&"vertical"===i.orientation,"list-none":0===l&&"horizontal"===i.orientation},style:{listStyleType:i.listStyleType}},t("kol-link",Object.assign({},a))))})),e},d=class{constructor(t){i(this,t),this.isUl=!0,this._ariaLabel=void 0,this._listStyleType=void 0,this._heading=void 0,this._label=void 0,this._level=void 0,this._links=void 0,this._ordered=void 0,this._orientation="vertical",this.state={_label:"…",_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){var i;return t("nav",{"aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},"string"==typeof this.state._heading&&(null===(i=this.state._heading)||void 0===i?void 0:i.length)>0&&t("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),!1===this.isUl?t("ol",null,t(h,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})):t("ul",null,t(h,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateAriaLabel(t){this.validateLabel(t)}validateHeading(t){a(this,"_heading",t)}validateLabel(t){e(this,t)}validateLevel(t){s(this,t)}validateListStyleType(t){l(this,"_listStyleType",(t=>{switch(t){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),t)}validateLinks(t){r("KolLinkGroup",this,t)}validateOrdered(t){n(this,"_ordered",t)}validateOrientation(t){l(this,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}componentWillLoad(){this.validateHeading(this._heading),this.validateLabel(this._label||this._ariaLabel),this.validateLevel(this._level),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_listStyleType:["validateListStyleType"],_links:["validateLinks"],_ordered:["validateOrdered"],_orientation:["validateOrientation"]}}};d.style={default:o};export{d as kol_link_group};

package/dist/kolibri/kol-link-group.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","ListItem","props","list","links","map","link","index","push","h","key","class","ident","orientation","style","listStyleType","Object","assign","KolLinkGroup","this","isUl","_label","_listStyleType","_links","_orientation","render","state","vertical","horizontal","_heading","_a","length","_level","validateAriaLabel","value","validateLabel","validateHeading","watchString","validateLevel","watchHeadingLevel","validateListStyleType","watchValidator","Set","validateLinks","watchNavLinks","validateOrdered","watchBoolean","validateOrientation","defaultValue","componentWillLoad","_ariaLabel"],"sources":["src/components/link-group/style.css?tag=kol-link-group&mode=default&encapsulation=shadow","src/components/link-group/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\nnav.horizontal ul {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\nnav.horizontal li {\n\tmargin-left: 1.25rem;\n\tmargin-right: 0.25rem;\n}\nnav.horizontal li:first-child {\n\tmargin-left: 0;\n}\nnav.horizontal li:last-child {\n\tmargin-right: 0;\n}\nnav.vertical li {\n\tmargin-left: 1.75rem;\n\tmargin-right: 0.5rem;\n}\nli.list-none {\n\tlist-style-type: none !important;\n\tmargin-left: 0;\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 { HeadingLevel } from '../../types/heading-level';\nimport { Orientation } from '../../types/orientation';\nimport { watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { watchNavLinks } from '../nav/validation';\nimport { validateLabel } from '../../types/props';\nimport { KoliBriLinkGroupAPI, KoliBriLinkGroupStates, ListStyleType } from './types';\n\nconst ListItem = (props: { links: LinkProps[]; orientation: Orientation; listStyleType: ListStyleType }): JSX.Element => {\n\tconst list: JSX.Element[] = [];\n\tprops.links.map((link, index: number) => {\n\t\tlist.push(\n\t\t\t(\n\t\t\t\t<li\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tident: index > 0 && props.orientation === 'vertical',\n\t\t\t\t\t\t'list-none': index === 0 && props.orientation === 'horizontal',\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tlistStyleType: props.listStyleType,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-link {...link}></kol-link>\n\t\t\t\t</li>\n\t\t\t) as JSX.Element\n\t\t);\n\t});\n\treturn list;\n};\n\n@Component({\n\ttag: 'kol-link-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkGroup implements KoliBriLinkGroupAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tclass={{\n\t\t\t\t\tvertical: this.state._orientation === 'vertical',\n\t\t\t\t\thorizontal: this.state._orientation === 'horizontal',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{typeof this.state._heading === 'string' && this.state._heading?.length > 0 && (\n\t\t\t\t\t<kol-heading-wc _label={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t)}\n\n\t\t\t\t{this.isUl === false ? (\n\t\t\t\t\t<ol>\n\t\t\t\t\t\t<ListItem links={this.state._links} orientation={this.state._orientation} listStyleType={this.state._listStyleType} />\n\t\t\t\t\t</ol>\n\t\t\t\t) : (\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<ListItem links={this.state._links} orientation={this.state._orientation} listStyleType={this.state._listStyleType} />\n\t\t\t\t\t</ul>\n\t\t\t\t)}\n\t\t\t</nav>\n\t\t);\n\t}\n\n\tprivate isUl = true;\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 * Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet\n\t */\n\t@Prop() public _listStyleType?: ListStyleType;\n\n\t/**\n\t * Gibt die optionale Überschrift zur Link-Gruppe an.\n\t */\n\t@Prop() public _heading?: 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?: string; // TODO: required in v2\n\n\t/**\n\t * Gibt an, welchen H-Level von 1 bis 6 die Überschrift hat. Oder bei 0, ob es keine Überschrift ist und als fett gedruckter Text angezeigt werden soll.\n\t */\n\t@Prop() public _level?: HeadingLevel;\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/**\n\t * Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll.\n\t * @deprecated Wird mittels der Property _list-style-type automatisch gesteuert.\n\t */\n\t@Prop() public _ordered?: boolean;\n\n\t/**\n\t * Gibt die horizontale oder vertikale Ausrichtung der Komponente an.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: KoliBriLinkGroupStates = {\n\t\t_label: '…', // '⚠'\n\t\t_listStyleType: 'disc',\n\t\t_links: [],\n\t\t_orientation: 'vertical',\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('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_listStyleType')\n\tpublic validateListStyleType(value?: ListStyleType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_listStyleType',\n\t\t\t(value) => {\n\t\t\t\tswitch (value) {\n\t\t\t\t\tcase 'disc':\n\t\t\t\t\tcase 'circle':\n\t\t\t\t\tcase 'square':\n\t\t\t\t\tcase 'none':\n\t\t\t\t\t\tthis.isUl = true;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tcase 'decimal':\n\t\t\t\t\tcase 'decimal-leading-zero':\n\t\t\t\t\tcase 'lower-alpha':\n\t\t\t\t\tcase 'lower-latin':\n\t\t\t\t\tcase 'lower-greek':\n\t\t\t\t\tcase 'lower-roman':\n\t\t\t\t\tcase 'upper-alpha':\n\t\t\t\t\tcase 'upper-latin':\n\t\t\t\t\tcase 'upper-roman':\n\t\t\t\t\t\tthis.isUl = false;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t},\n\t\t\tnew Set(['https://www.w3schools.com/tags/tag_ol.asp']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolLinkGroup', this, value);\n\t}\n\n\t@Watch('_ordered')\n\tpublic validateOrdered(value?: boolean): void {\n\t\twatchBoolean(this, '_ordered', value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t}\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateListStyleType(this._listStyleType);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: 'Fehler 1', _id: '#anschrift_anschrift_adresse_strasse', _icon: 'error' },\n//     { _label: 'Fehler 2', _id: '#anschrift_anschrift_adresse_hausnummer', _icon: 'error' },\n//   ])\n// );\n"],"mappings":";;;qWAAA,MAAMA,EAAkB,ihCCYxB,MAAMC,EAAYC,IACjB,MAAMC,EAAsB,GAC5BD,EAAME,MAAMC,KAAI,CAACC,EAAMC,KACtBJ,EAAKK,KAEHC,EAAA,MACCC,IAAKH,EACLI,MAAO,CACNC,MAAOL,EAAQ,GAAKL,EAAMW,cAAgB,WAC1C,YAAaN,IAAU,GAAKL,EAAMW,cAAgB,cAEnDC,MAAO,CACNC,cAAeb,EAAMa,gBAGtBN,EAAA,WAAAO,OAAAC,OAAA,GAAcX,KAGhB,IAEF,OAAOH,CAAI,E,MAUCe,EAAY,M,yBA2BhBC,KAAAC,KAAO,K,4LA2C6B,W,WAEI,CAC/CC,OAAQ,IACRC,eAAgB,OAChBC,OAAQ,GACRC,aAAc,W,CA3ERC,S,MACN,OACChB,EAAA,oBACaU,KAAKO,MAAML,OACvBV,MAAO,CACNgB,SAAUR,KAAKO,MAAMF,eAAiB,WACtCI,WAAYT,KAAKO,MAAMF,eAAiB,sBAGjCL,KAAKO,MAAMG,WAAa,YAAYC,EAAAX,KAAKO,MAAMG,YAAQ,MAAAC,SAAA,SAAAA,EAAEC,QAAS,GACzEtB,EAAA,kBAAgBY,OAAQF,KAAKO,MAAMG,SAAUG,OAAQb,KAAKO,MAAMM,SAGhEb,KAAKC,OAAS,MACdX,EAAA,UACCA,EAACR,EAAQ,CAACG,MAAOe,KAAKO,MAAMH,OAAQV,YAAaM,KAAKO,MAAMF,aAAcT,cAAeI,KAAKO,MAAMJ,kBAGrGb,EAAA,UACCA,EAACR,EAAQ,CAACG,MAAOe,KAAKO,MAAMH,OAAQV,YAAaM,KAAKO,MAAMF,aAAcT,cAAeI,KAAKO,MAAMJ,kB,CA+DlGW,kBAAkBC,GACxBf,KAAKgB,cAAcD,E,CAIbE,gBAAgBF,GACtBG,EAAYlB,KAAM,WAAYe,E,CAIxBC,cAAcD,GACpBC,EAAchB,KAAMe,E,CAIdI,cAAcJ,GACpBK,EAAkBpB,KAAMe,E,CAIlBM,sBAAsBN,GAC5BO,EACCtB,KACA,kBACCe,IACA,OAAQA,GACP,IAAK,OACL,IAAK,SACL,IAAK,SACL,IAAK,OACJf,KAAKC,KAAO,KACZ,OAAO,KACR,IAAK,UACL,IAAK,uBACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACJD,KAAKC,KAAO,MACZ,OAAO,KACR,QACC,OAAO,M,GAGV,IAAIsB,IAAI,CAAC,8CACTR,E,CAKKS,cAAcT,GACpBU,EAAc,eAAgBzB,KAAMe,E,CAI9BW,gBAAgBX,GACtBY,EAAa3B,KAAM,WAAYe,E,CAIzBa,oBAAoBb,GAC1BO,EACCtB,KACA,gBACCe,GAAmBA,IAAU,cAAgBA,IAAU,YACxD,IAAIQ,IAAI,CAAC,uCACTR,EACA,CACCc,aAAc,Y,CAKVC,oBACN9B,KAAKiB,gBAAgBjB,KAAKU,UAC1BV,KAAKgB,cAAchB,KAAKE,QAAUF,KAAK+B,YACvC/B,KAAKmB,cAAcnB,KAAKa,QACxBb,KAAKqB,sBAAsBrB,KAAKG,gBAChCH,KAAKwB,cAAcxB,KAAKI,QACxBJ,KAAK4B,oBAAoB5B,KAAKK,a"}
+{"version":3,"names":["defaultStyleCss","ListItem","props","list","links","map","link","index","push","h","key","class","ident","orientation","style","listStyleType","Object","assign","KolLinkGroup","this","isUl","_label","_listStyleType","_links","_orientation","render","state","vertical","horizontal","_heading","_a","length","_level","validateAriaLabel","value","validateLabel","validateHeading","watchString","validateLevel","watchHeadingLevel","validateListStyleType","watchValidator","Set","validateLinks","watchNavLinks","validateOrdered","watchBoolean","validateOrientation","defaultValue","componentWillLoad","_ariaLabel"],"sources":["src/components/link-group/style.css?tag=kol-link-group&mode=default&encapsulation=shadow","src/components/link-group/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\nnav.horizontal ul {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\nnav.horizontal li {\n\tmargin-left: 1.25rem;\n\tmargin-right: 0.25rem;\n}\nnav.horizontal li:first-child {\n\tmargin-left: 0;\n}\nnav.horizontal li:last-child {\n\tmargin-right: 0;\n}\nnav.vertical li {\n\tmargin-left: 1.75rem;\n\tmargin-right: 0.5rem;\n}\nli.list-none {\n\tlist-style-type: none !important;\n\tmargin-left: 0;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LinkProps } from '../link/types';\nimport { Stringified } from '../../types/common';\nimport { HeadingLevel } from '../../types/heading-level';\nimport { Orientation } from '../../types/orientation';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchBoolean, watchString, watchValidator } from '../../utils/prop.validators';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States, ListStyleType } from './types';\n\nconst ListItem = (props: { links: LinkProps[]; orientation: Orientation; listStyleType: ListStyleType }): JSX.Element => {\n\tconst list: JSX.Element[] = [];\n\tprops.links.map((link, index: number) => {\n\t\tlist.push(\n\t\t\t(\n\t\t\t\t<li\n\t\t\t\t\tkey={index}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tident: index > 0 && props.orientation === 'vertical',\n\t\t\t\t\t\t'list-none': index === 0 && props.orientation === 'horizontal',\n\t\t\t\t\t}}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tlistStyleType: props.listStyleType,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<kol-link {...link}></kol-link>\n\t\t\t\t</li>\n\t\t\t) as JSX.Element\n\t\t);\n\t});\n\treturn list;\n};\n\n@Component({\n\ttag: 'kol-link-group',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkGroup implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tclass={{\n\t\t\t\t\tvertical: this.state._orientation === 'vertical',\n\t\t\t\t\thorizontal: this.state._orientation === 'horizontal',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{typeof this.state._heading === 'string' && this.state._heading?.length > 0 && (\n\t\t\t\t\t<kol-heading-wc _label={this.state._heading} _level={this.state._level}></kol-heading-wc>\n\t\t\t\t)}\n\n\t\t\t\t{this.isUl === false ? (\n\t\t\t\t\t<ol>\n\t\t\t\t\t\t<ListItem links={this.state._links} orientation={this.state._orientation} listStyleType={this.state._listStyleType} />\n\t\t\t\t\t</ol>\n\t\t\t\t) : (\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t<ListItem links={this.state._links} orientation={this.state._orientation} listStyleType={this.state._listStyleType} />\n\t\t\t\t\t</ul>\n\t\t\t\t)}\n\t\t\t</nav>\n\t\t);\n\t}\n\n\tprivate isUl = true;\n\n\t/**\n\t * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet\n\t */\n\t@Prop() public _listStyleType?: ListStyleType;\n\n\t/**\n\t * Gibt die optionale Überschrift zur Link-Gruppe an.\n\t */\n\t@Prop() public _heading?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel;\n\n\t/**\n\t * Defines the list of links to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t/**\n\t * Deprecated: Gibt an, ob eine Ordered- oder eine Unordered-List verwendet werden soll.\n\t * @deprecated Wird mittels der Property _list-style-type automatisch gesteuert.\n\t */\n\t@Prop() public _ordered?: boolean;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_listStyleType: 'disc',\n\t\t_links: [],\n\t\t_orientation: 'vertical',\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('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\twatchString(this, '_heading', 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('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_listStyleType')\n\tpublic validateListStyleType(value?: ListStyleType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_listStyleType',\n\t\t\t(value) => {\n\t\t\t\tswitch (value) {\n\t\t\t\t\tcase 'disc':\n\t\t\t\t\tcase 'circle':\n\t\t\t\t\tcase 'square':\n\t\t\t\t\tcase 'none':\n\t\t\t\t\t\tthis.isUl = true;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tcase 'decimal':\n\t\t\t\t\tcase 'decimal-leading-zero':\n\t\t\t\t\tcase 'lower-alpha':\n\t\t\t\t\tcase 'lower-latin':\n\t\t\t\t\tcase 'lower-greek':\n\t\t\t\t\tcase 'lower-roman':\n\t\t\t\t\tcase 'upper-alpha':\n\t\t\t\t\tcase 'upper-latin':\n\t\t\t\t\tcase 'upper-roman':\n\t\t\t\t\t\tthis.isUl = false;\n\t\t\t\t\t\treturn true;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t},\n\t\t\tnew Set(['https://www.w3schools.com/tags/tag_ol.asp']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolLinkGroup', this, value);\n\t}\n\n\t@Watch('_ordered')\n\tpublic validateOrdered(value?: boolean): void {\n\t\twatchBoolean(this, '_ordered', value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t}\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHeading(this._heading);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateListStyleType(this._listStyleType);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: 'Fehler 1', _id: '#anschrift_anschrift_adresse_strasse', _icon: 'error' },\n//     { _label: 'Fehler 2', _id: '#anschrift_anschrift_adresse_hausnummer', _icon: 'error' },\n//   ])\n// );\n"],"mappings":";;;0WAAA,MAAMA,EAAkB,ihCCYxB,MAAMC,EAAYC,IACjB,MAAMC,EAAsB,GAC5BD,EAAME,MAAMC,KAAI,CAACC,EAAMC,KACtBJ,EAAKK,KAEHC,EAAA,MACCC,IAAKH,EACLI,MAAO,CACNC,MAAOL,EAAQ,GAAKL,EAAMW,cAAgB,WAC1C,YAAaN,IAAU,GAAKL,EAAMW,cAAgB,cAEnDC,MAAO,CACNC,cAAeb,EAAMa,gBAGtBN,EAAA,WAAAO,OAAAC,OAAA,GAAcX,KAGhB,IAEF,OAAOH,CAAI,E,MAUCe,EAAY,M,yBA2BhBC,KAAAC,KAAO,K,4LA2C6B,W,WAEZ,CAC/BC,OAAQ,IACRC,eAAgB,OAChBC,OAAQ,GACRC,aAAc,W,CA3ER,MAAAC,G,MACN,OACChB,EAAA,oBACaU,KAAKO,MAAML,OACvBV,MAAO,CACNgB,SAAUR,KAAKO,MAAMF,eAAiB,WACtCI,WAAYT,KAAKO,MAAMF,eAAiB,sBAGjCL,KAAKO,MAAMG,WAAa,YAAYC,EAAAX,KAAKO,MAAMG,YAAQ,MAAAC,SAAA,SAAAA,EAAEC,QAAS,GACzEtB,EAAA,kBAAgBY,OAAQF,KAAKO,MAAMG,SAAUG,OAAQb,KAAKO,MAAMM,SAGhEb,KAAKC,OAAS,MACdX,EAAA,UACCA,EAACR,EAAQ,CAACG,MAAOe,KAAKO,MAAMH,OAAQV,YAAaM,KAAKO,MAAMF,aAAcT,cAAeI,KAAKO,MAAMJ,kBAGrGb,EAAA,UACCA,EAACR,EAAQ,CAACG,MAAOe,KAAKO,MAAMH,OAAQV,YAAaM,KAAKO,MAAMF,aAAcT,cAAeI,KAAKO,MAAMJ,kB,CA+DlG,iBAAAW,CAAkBC,GACxBf,KAAKgB,cAAcD,E,CAIb,eAAAE,CAAgBF,GACtBG,EAAYlB,KAAM,WAAYe,E,CAIxB,aAAAC,CAAcD,GACpBC,EAAchB,KAAMe,E,CAId,aAAAI,CAAcJ,GACpBK,EAAkBpB,KAAMe,E,CAIlB,qBAAAM,CAAsBN,GAC5BO,EACCtB,KACA,kBACCe,IACA,OAAQA,GACP,IAAK,OACL,IAAK,SACL,IAAK,SACL,IAAK,OACJf,KAAKC,KAAO,KACZ,OAAO,KACR,IAAK,UACL,IAAK,uBACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cACJD,KAAKC,KAAO,MACZ,OAAO,KACR,QACC,OAAO,M,GAGV,IAAIsB,IAAI,CAAC,8CACTR,E,CAKK,aAAAS,CAAcT,GACpBU,EAAc,eAAgBzB,KAAMe,E,CAI9B,eAAAW,CAAgBX,GACtBY,EAAa3B,KAAM,WAAYe,E,CAIzB,mBAAAa,CAAoBb,GAC1BO,EACCtB,KACA,gBACCe,GAAmBA,IAAU,cAAgBA,IAAU,YACxD,IAAIQ,IAAI,CAAC,uCACTR,EACA,CACCc,aAAc,Y,CAKV,iBAAAC,GACN9B,KAAKiB,gBAAgBjB,KAAKU,UAC1BV,KAAKgB,cAAchB,KAAKE,QAAUF,KAAK+B,YACvC/B,KAAKmB,cAAcnB,KAAKa,QACxBb,KAAKqB,sBAAsBrB,KAAKG,gBAChCH,KAAKwB,cAAcxB,KAAKI,QACxBJ,KAAK4B,oBAAoB5B,KAAKK,a"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as e,g as s}from"./index-2c046ff1.js";import{a}from"./i18n-08ede0fc.js";import{w as l}from"./button-link-2ad7f3cf.js";import{d as n,g as h}from"./a11y.tipps-e607b8b3.js";import{n as d}from"./dev.utils-8aef00f6.js";import{b as o,w as r,f,h as c,i as v}from"./prop.validators-683bb1d0.js";import{a as p}from"./reuse-c2156413.js";import{v as _,w as b}from"./icon-278d567d.js";import{v as u}from"./label-6047ed81.js";import{v as g}from"./tab-index-6d37f269.js";import{v as m,a as x}from"./aria-selected-d90aa300.js";import{v as j}from"./hide-label-e9f288ac.js";import"./index-4e5a5ff3.js";import"./index-37b5cbcf.js";const A=(t,e)=>{"boolean"==typeof e?o(t,"_download",e):r(t,"_download",e)},k=(t,e)=>{o(t,"_stealth",e)},y=(t,e,i={})=>{r(t,"_href",e,i)},w=class{constructor(t){i(this,t),this.nonce=d(),this.catchRef=t=>{this.ref=t,p(this.host,this.ref)},this.onClick=t=>{var e,i;"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onClick)&&(t.preventDefault(),f(t,this.ref),null===(i=this.state._on)||void 0===i||i.onClick(t,this.state._href))},this.getRenderValues=()=>{let t={};"string"==typeof this.state._selector&&(t={role:"link",tabIndex:0,onClick:()=>{v(this.state._selector)},onKeyPress:()=>{v(this.state._selector)}});const e="string"==typeof this.state._target&&"_self"!==this.state._target,i={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:e?"noopener":void 0};return"image"!==this.state._useCase&&!0!==this.state._hideLabel||this.state._label||n("[KolLink] Es muss ein Aria-Label gesetzt werden, wenn eine Grafik verlinkt oder der _hide-label gesetzt ist."),{isExternal:e,tagAttrs:i,goToProps:t}},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._selector=void 0,this._stealth=!1,this._tabIndex=void 0,this._target=void 0,this._targetDescription=a("kol-open-link-in-tab"),this._tooltipAlign="right",this._useCase="text",this.state={_href:"…",_icon:{}}}render(){const{isExternal:i,tagAttrs:a,goToProps:s}=this.getRenderValues();return t(e,null,t("a",Object.assign({ref:this.catchRef},a,{"aria-controls":this.state._ariaControls,"aria-current":this.state._ariaCurrent,"aria-expanded":c(this.state._ariaExpanded),"aria-labelledby":"image"===this.state._useCase||!0===this.state._hideLabel?this.nonce:void 0,"aria-selected":c(this.state._ariaSelected),class:{disabled:!0===this.state._disabled,"skip ":!1!==this.state._stealth,"icon-only":!0===this.state._hideLabel,"hide-label":!0===this.state._hideLabel,"external-link":i}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick},s,{role:this.state._role,tabIndex:this.state._tabIndex}),t("kol-span-wc",{_icon:this._icon,_hideLabel:this._hideLabel,_label:this.state._label||this.state._href},t("slot",{name:"expert",slot:"expert"})),i&&t("kol-icon",{class:"external-link-icon",_label:this.state._targetDescription,_icon:"codicon codicon-link-external"})),t("kol-tooltip",{"aria-hidden":"true",hidden:!0!==this.state._hideLabel,_align:this.state._tooltipAlign,_id:this.nonce,_label:this.state._label||this.state._href}))}validateAriaControls(t){r(this,"_ariaControls",t)}validateAriaCurrent(t){m(this,t)}validateAriaExpanded(t){o(this,"_ariaExpanded",t)}validateAriaLabel(t){this.validateLabel(t)}validateAriaSelected(t){x(this,t)}validateDisabled(t){o(this,"_disabled",t),!0===t&&h()}validateDownload(t){A(this,t)}validateHideLabel(t){j(this,t)}validateHref(t){y(this,t)}validateIcon(t){_(this,t)}validateIconAlign(t){b(this,t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){u(this,t)}validateOn(t){"object"==typeof t&&"function"==typeof(null==t?void 0:t.onClick)&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){r(this,"_role",t)}validateSelector(t){r(this,"_selector",t)}validateStealth(t){k(this,t)}validateTabIndex(t){g(this,t)}validateTarget(t){r(this,"_target",t)}validateTargetDescription(t){r(this,"_targetDescription",t)}validateTooltipAlign(t){l(this,"_tooltipAlign",t)}validateUseCase(t){"string"==typeof t&&(this.state=Object.assign(Object.assign({},this.state),{_useCase:t}))}componentWillLoad(){this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateHref(this._href),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateLabel(this._label||this._ariaLabel),this.validateOn(this._on),this.validateRole(this._role),this.validateSelector(this._selector),this.validateStealth(this._stealth),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTargetDescription(this._targetDescription),this.validateTooltipAlign(this._tooltipAlign),this.validateUseCase(this._useCase)}get host(){return s(this)}static get watchers(){return{_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_selector:["validateSelector"],_stealth:["validateStealth"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_targetDescription:["validateTargetDescription"],_tooltipAlign:["validateTooltipAlign"],_useCase:["validateUseCase"]}}};export{w as kol_link_wc};
+import{r as i,h as t,H as e,g as s}from"./index-5ab2ea42.js";import{a}from"./i18n-45aa3c6d.js";import{v as l,a as n,b as h,c as d}from"./alternative-button-link-role-3ee6a8a7.js";import{a as o,d as r,f as c,h as f,i as v,j as p}from"./prop.validators-fba03cca.js";import{v as u}from"./hide-label-7ff2d26a.js";import{v as _,w as b}from"./icon-995dad86.js";import{a as g}from"./label-f1600f9b.js";import{d as m,g as j,h as x}from"./a11y.tipps-3205ae7d.js";import{a as A}from"./reuse-c2156413.js";import{v as k}from"./tab-index-047d5fa8.js";import{v as y}from"./tooltip-align-059bc525.js";import"./index-d8ac1088.js";import"./index-37b5cbcf.js";import"./dev.utils-c0c1c4e5.js";import"./alignment-c3101451.js";const C=(t,a)=>{o(t,"_ariaSelected",a)},L=(t,a)=>{"boolean"==typeof a?o(t,"_download",a):r(t,"_download",a)},w=(t,a,e={})=>{r(t,"_href",a,e)},I=(t,a)=>{o(t,"_stealth",a)},T=(t,a)=>{r(t,"_target",a)},O=(t,a)=>{"object"==typeof a&&"function"==typeof(null==a?void 0:a.onClick)&&(t.state=Object.assign(Object.assign({},t.state),{_on:a}))},D=class{constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,A(this.host,this.ref)},this.onClick=t=>{var a,e;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onClick)&&(t.preventDefault(),t.stopPropagation(),c(t,this.ref),null===(e=this.state._on)||void 0===e||e.onClick(t,this.state._href))},this.getRenderValues=()=>{let t={};"string"==typeof this.state._selector&&(t={role:"link",tabIndex:0,onClick:()=>{p(this.state._selector)},onKeyPress:()=>{p(this.state._selector)}});const a="string"==typeof this.state._target&&"_self"!==this.state._target,e={href:"string"==typeof this.state._href&&this.state._href.length>0?this.state._href:"javascript:void(0);",target:"string"==typeof this.state._target&&this.state._target.length>0?this.state._target:void 0,rel:a?"noopener":void 0};return"image"!==this.state._useCase&&!0!==this.state._hideLabel||this.state._label||m("[KolLink] Es muss ein Aria-Label gesetzt werden, wenn eine Grafik verlinkt oder der _hide-label gesetzt ist."),{isExternal:a,tagAttrs:e,goToProps:t}},this.unsubscribeAriaCurrentSubject=f.subscribe((t=>{try{this.state._listenAriaCurrent&&this.state._listenAriaCurrent===t.ariaCurrent&&(this.state._href===t.href?this.validateAriaCurrent(t.ariaCurrent):this.validateAriaCurrent(!1))}catch(t){j("The aria-current event is not valid.")}})),this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._disabled=!1,this._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconAlign=void 0,this._iconOnly=void 0,this._label=void 0,this._listenAriaCurrent=void 0,this._on=void 0,this._role=void 0,this._selector=void 0,this._stealth=!1,this._tabIndex=void 0,this._target=void 0,this._targetDescription=a("kol-open-link-in-tab"),this._tooltipAlign="right",this._useCase="text",this.state={_href:"…",_icon:{},_label:!1}}render(){const{isExternal:a,tagAttrs:i,goToProps:s}=this.getRenderValues(),l=!1===this.state._label;return t(e,null,t("a",Object.assign({ref:this.catchRef},i,{"aria-controls":this.state._ariaControls,"aria-current":this.state._ariaCurrent,"aria-expanded":v(this.state._ariaExpanded),"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-selected":v(this.state._ariaSelected),class:{disabled:!0===this.state._disabled,"skip ":!1!==this.state._stealth,"icon-only":!0===this.state._hideLabel,"hide-label":!0===this.state._hideLabel,"external-link":a}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick},s,{role:this.state._role,tabIndex:this.state._tabIndex}),t("kol-span-wc",{_icon:this.state._icon,_hideLabel:this.state._hideLabel,_label:!l&&(this.state._label||this.state._href)},t("slot",{name:"expert",slot:"expert"})),a&&t("kol-icon",{class:"external-link-icon",_label:this.state._targetDescription,_icon:"codicon codicon-link-external"})),t("kol-tooltip-wc",{"aria-hidden":"true",hidden:l||!this.state._hideLabel,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}))}validateAriaControls(t){l(this,t)}validateAriaCurrent(t){n(this,t)}validateAriaExpanded(t){o(this,"_ariaExpanded",t)}validateAriaLabel(t){this.validateLabel(t)}validateAriaSelected(t){C(this,t)}validateDisabled(t){o(this,"_disabled",t),!0===t&&x()}validateDownload(t){L(this,t)}validateHideLabel(t){u(this,t)}validateHref(t){w(this,t)}validateIcon(t){_(this,t)}validateIconAlign(t){b(this,t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){g(this,t)}validateListenAriaCurrent(t){h(this,t)}validateOn(t){O(this,t)}validateRole(t){d(this,t)}validateSelector(t){r(this,"_selector",t)}validateStealth(t){I(this,t)}validateTabIndex(t){k(this,t)}validateTarget(t){T(this,t)}validateTargetDescription(t){r(this,"_targetDescription",t)}validateTooltipAlign(t){y(this,t)}validateUseCase(t){"string"==typeof t&&(this.state=Object.assign(Object.assign({},this.state),{_useCase:t}))}componentWillLoad(){this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaSelected(this._ariaSelected),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateHref(this._href),this.validateIcon(this._icon),this.validateIconAlign(this._iconAlign),this.validateLabel(this._label||this._ariaLabel),this.validateListenAriaCurrent(this._listenAriaCurrent),this.validateOn(this._on),this.validateRole(this._role),this.validateSelector(this._selector),this.validateStealth(this._stealth),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTargetDescription(this._targetDescription),this.validateTooltipAlign(this._tooltipAlign),this.validateUseCase(this._useCase)}disconnectedCallback(){this.unsubscribeAriaCurrentSubject.unsubscribe()}get host(){return s(this)}static get watchers(){return{_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icon:["validateIcon"],_iconAlign:["validateIconAlign"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_listenAriaCurrent:["validateListenAriaCurrent"],_on:["validateOn"],_role:["validateRole"],_selector:["validateSelector"],_stealth:["validateStealth"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_targetDescription:["validateTargetDescription"],_tooltipAlign:["validateTooltipAlign"],_useCase:["validateUseCase"]}}};export{D as kol_link_wc};