@public-ui/components 2.2.11 → 3.0.0-0a564237c37a5d1ca12470bdd73e4ea1eac06982.0

package/dist/components/kol-input-range.js.map

@@ -1 +1 @@
-{"file":"kol-input-range.js","mappings":"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","names":["KolInputRange"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.scss?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/shadow.tsx"],"sourcesContent":["import type { InputRangeProps, InputRangeWatches, InputTypeOnOff, SuggestionsPropType } from '../../schema';\nimport { validateSuggestions, watchNumber, watchValidator } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class InputRangeController extends InputIconController implements InputRangeWatches {\n\tprotected readonly component: Generic.Element.Component & InputRangeProps;\n\n\tpublic constructor(component: Generic.Element.Component & InputRangeProps, 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 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.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","@use '../@shared/mixins' as *;\n@use '../style' as *;\n@use '../input-line' as *;\n\n@layer kol-component {\n\t.inputs-wrapper {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\tinput[type='number'] {\n\t\tborder: none;\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t\twidth: var(--kolibri-input-range--input-number--width);\n\t}\n\n\t/*\n   * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n   */\n\tinput[type='range'] {\n\t\tappearance: none;\n\t\tbackground-color: #d3d3d3;\n\t\tborder: 1px solid #000;\n\t\tdisplay: inline-block;\n\t\tflex-grow: 1;\n\t\theight: rem(8);\n\t\tline-height: 1.5;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\t/* Design-Hack - related with flex-grow */\n\t\twidth: 0;\n\t}\n\n\tinput[type='range']::-webkit-slider-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: rem(20);\n\t\twidth: rem(20);\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-webkit-appearance: none;\n\t}\n\n\tinput[type='range']::-moz-range-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: rem(20);\n\t\twidth: rem(20);\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-moz-appearance: none;\n\t}\n}\n\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n\t::-webkit-slider-thumb {\n\t\toutline: 1px solid currentColor;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tFocusableElement,\n\tHideErrorPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputRangeAPI,\n\tInputRangeStates,\n\tInputTypeOnDefault,\n\tInputTypeOnOff,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { buildBadgeTextString, showExpertSlot } from '../../schema';\n\nimport { KolInputTag } from '../../core/component-names';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';\nimport { InputRangeController } from './controller';\n\n/**\n * @slot - Die Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputRange implements InputRangeAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate refInputNumber?: HTMLInputElement;\n\tprivate refInputRange?: HTMLInputElement;\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInputNumber?.focus();\n\t}\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputNumber = element;\n\t\t\tif (!this._value && this.refInputNumber?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.refInputNumber.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly catchInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate getSanitizedFloatValue(value: string): number {\n\t\tconst floatValue = parseFloat(value);\n\t\tif (this.state._max && floatValue > this.state._max) {\n\t\t\treturn this.state._max;\n\t\t}\n\t\tif (this.state._min && floatValue < this.state._min) {\n\t\t\treturn this.state._min;\n\t\t}\n\t\treturn floatValue;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<number | undefined> {\n\t\tif (this.refInputNumber !== undefined) {\n\t\t\tconst value = this.refInputNumber.value;\n\t\t\treturn this.getSanitizedFloatValue(value);\n\t\t}\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tthis.validateValue(floatValue);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on?.onChange(event, floatValue);\n\t\t}\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\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.refInputNumber,\n\t\t\t});\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\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 = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class=\"kol-input-range\">\n\t\t\t\t<KolInputTag\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_accessKey={this.state._accessKey}\n\t\t\t\t\t_alert={this.showAsAlert()}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t_shortKey={this.state._shortKey}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"badge-text-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<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 || 100}`.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\tref={this.catchInputRangeRef}\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\taria-hidden=\"true\"\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\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\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<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\tonKeyDown={this.onKeyDown}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</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</KolInputTag>\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 * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * 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 = false;\n\n\t/**\n\t * Defines the error message text.\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the 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 properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\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: InputRangeStates = {\n\t\t_autoComplete: 'off',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_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('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_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('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(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._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"version":3}
+{"file":"kol-input-range.js","mappings":";;;;;;;;;;;;;;MAMa,oBAAqB,SAAQ,mBAAmB;IAG5D,YAAmB,SAAsD,EAAE,IAAY,EAAE,IAAkB;QAC1G,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC3B;IAEM,oBAAoB,CAAC,KAAsB;QACjD,cAAc,CACb,IAAI,CAAC,SAAS,EACd,eAAe,EACf,CAAC,KAAK,KAAc,OAAO,KAAK,KAAK,QAAQ,KAAK,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,EACpF,IAAI,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,EACrB,KAAK,CACL,CAAC;KACF;IAEM,WAAW,CAAC,KAAc;QAChC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;KAC3C;IAEM,WAAW,CAAC,KAAc;QAChC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;KAC3C;IAEM,YAAY,CAAC,KAAc;QACjC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;KAC5C;IAEM,mBAAmB,CAAC,KAA2B;QACrD,mBAAmB,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KAC3C;IAEM,aAAa,CAAC,KAAc;QAClC,WAAW,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;QAC7C,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAgB,CAAC,CAAC;KACnE;IAEM,iBAAiB;QACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;QACxD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACtC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACtD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;KAC1C;;;ACtDF,MAAM,eAAe,GAAG,kiSAAkiS,CAAC;AAC3jS,mCAAe,eAAe;;MC0CjBA,eAAa;IAOlB,MAAM,QAAQ;;QACpB,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,EAAE,CAAC;KAC7B;IAiBO,sBAAsB,CAAC,KAAa;QAC3C,MAAM,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;YACpD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;SACvB;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;YACpD,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;SACvB;QACD,OAAO,UAAU,CAAC;KAClB;IAIM,MAAM,QAAQ;QACpB,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,EAAE;YACtC,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;YACxC,OAAO,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;SAC1C;KACD;IAkBD,gBAAgB;;QACf,IAAI,CAAC,IAAI,CAAC,MAAM,KAAI,MAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,CAAA,EAAE;YAC9C,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;SACzD;KACD;IAEO,iBAAiB;QACxB,OAAO;YACN,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC;YACvC,YAAY,EAAE,IAAI,CAAC,aAAa;YAChC,OAAO,EAAE,gBAAM,OAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,EAAE,CAAA,EAAA;YAC1C,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;SACzB,CAAC;KACF;IAEO,oBAAoB;cAErB,KAA6B,IAAI,CAAC,KAAK,EAApB,KAAK,cAAxB,gBAA0B,EAAc;QAE9C,qCACC,KAAK,kCAAO,KAAK,KAAE,YAAY,EAAE,EAAE,OAChC,IAAI,CAAC,UAAU,CAAC,QAAQ,KAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,KAAY;gBACrB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACxC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;aAC1B,EACD,MAAM,EAAE,CAAC,KAAY;gBACpB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACvC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;aAC3B,IACA;KACF;IAED,IAAY,cAAc;QACzB,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;KACpF;IAEO,kBAAkB;QACzB,uCACI,IAAI,CAAC,oBAAoB,EAAE,KAC9B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,QAAQ,GAAG,SAAS,EAChE,IAAI,EAAE,IAAI,CAAC,cAAc,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,SAAS,EAChE,IAAI,EAAE,OAAO,EACb,QAAQ,EAAE,CAAC,CAAC,EACZ,EAAE,EAAE,SAAS,EACb,aAAa,EAAE,MAAM,EACrB,GAAG,EAAE,IAAI,CAAC,kBAAkB,IAC3B;KACF;IAEO,mBAAmB;QAC1B,uCACI,IAAI,CAAC,oBAAoB,EAAE,KAC9B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,SAAS,GAAG,SAAS,EACjE,IAAI,EAAE,IAAI,CAAC,cAAc,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,SAAS,EAChE,IAAI,EAAE,QAAQ,EACd,GAAG,EAAE,IAAI,CAAC,mBAAmB,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,IACxB;KACF;IAEM,MAAM;;QACZ,MAAM,kBAAkB,GAAG;YAE1B,4CAA4C,EAAE,QAAQ,MAAM,CAAC,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,mCAAI,IAAI,CAAC,CAAC,MAAM,aAAa;SACzG,CAAC;QAEF,QACC,EAAC,0BAA0B,qEAAK,IAAI,CAAC,iBAAiB,EAAE,GACvD,EAACC,+BAAmB,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IACrC,4DAAK,KAAK,EAAC,iCAAiC,EAAC,KAAK,EAAE,kBAAkB,IACrE,EAAC,sBAAsB,mEAAC,KAAK,EAAC,sDAAsD,IAAK,IAAI,CAAC,kBAAkB,EAAE,EAAI,EACtH,EAAC,sBAAsB,mEAAC,KAAK,EAAC,uDAAuD,IAAK,IAAI,CAAC,mBAAmB,EAAE,EAAI,CACnH,EACL,IAAI,CAAC,cAAc,IAAI,EAAC,gBAAgB,qDAAC,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,GAAI,CACjF,CACM,EAC5B;KACF;IA6HD;;;;QAhQiB,wBAAmB,GAAG,CAAC,OAA0B;;YACjE,IAAI,OAAO,EAAE;gBACZ,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;gBAC9B,IAAI,CAAC,IAAI,CAAC,MAAM,KAAI,MAAA,IAAI,CAAC,cAAc,0CAAE,KAAK,CAAA,EAAE;oBAC/C,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;iBAC1D;aACD;SACD,CAAC;QAEe,uBAAkB,GAAG,CAAC,OAA0B;YAChE,IAAI,OAAO,EAAE;gBACZ,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC;aAC7B;SACD,CAAC;QAsBe,aAAQ,GAAG,CAAC,KAAY;YACxC,MAAM,KAAK,GAAI,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC;YACvD,MAAM,UAAU,GAAG,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,CAAC;YACtD,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAC/B,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;SACrD,CAAC;QAEe,cAAS,GAAG,CAAC,KAAoB;YACjD,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE;gBAC3D,0BAA0B,CAAC;oBAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,GAAG,EAAE,IAAI,CAAC,cAAc;iBACxB,CAAC,CAAC;aACH;SACD,CAAC;;;yBAoGmC,KAAK;wBAM0B,KAAK;0BAOnC,KAAK;qBAKX,EAAE;;;;;;;;;;;;;6BAkEoB,KAAK;wBAMS,KAAK;;qBAO/B;YACzC,aAAa,EAAE,KAAK;YACpB,QAAQ,EAAE,KAAK;YACf,GAAG,EAAE,MAAM,KAAK,EAAE,EAAE;YACpB,MAAM,EAAE,EAAE;YACV,YAAY,EAAE,EAAE;SAChB;6BAEgC,KAAK;QAGrC,IAAI,CAAC,UAAU,GAAG,IAAI,oBAAoB,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACrE;IAEO,WAAW;QAClB,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;KAC3D;IAGM,iBAAiB,CAAC,KAAc;QACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACzC;IAGM,oBAAoB,CAAC,KAAsB;QACjD,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAC5C;IAGM,gBAAgB,CAAC,KAAe;QACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,eAAe,CAAC,KAAuB;QAC7C,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACvC;IAGM,iBAAiB,CAAC,KAAe;QACvC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACzC;IAGM,YAAY,CAAC,KAAc;QACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,aAAa,CAAC,KAA+B;QACnD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACrC;IAGM,UAAU,CAAC,KAAc;QAC/B,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAClC;IAGM,aAAa,CAAC,KAAmC;QACvD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACrC;IAGM,WAAW,CAAC,KAAc;QAChC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACnC;IAGM,WAAW,CAAC,KAAc;QAChC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACnC;IAGM,WAAW,CAAC,KAAgC;QAClD,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACnC;IAGM,YAAY,CAAC,KAAc;QACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,UAAU,CAAC,KAA0B;QAC3C,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAClC;IAGM,gBAAgB,CAAC,KAAwB;QAC/C,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,YAAY,CAAC,KAAc;QACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,mBAAmB,CAAC,KAA2B;QACrD,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;KAC3C;IAGM,2BAA2B,CAAC,KAAmC;QACrE,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;KACnD;IAGM,eAAe,CAAC,KAAe;QACrC,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACvC;IAGM,aAAa,CAAC,KAAc;QAClC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACrC;IAEM,iBAAiB;QACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC;QACvC,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;KACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolInputRange","KolInputContainerFc"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.scss?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/shadow.tsx"],"sourcesContent":["import type { InputRangeProps, InputRangeWatches, InputTypeOnOff, SuggestionsPropType } from '../../schema';\nimport { validateSuggestions, watchNumber, watchValidator } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class InputRangeController extends InputIconController implements InputRangeWatches {\n\tprotected readonly component: Generic.Element.Component & InputRangeProps;\n\n\tpublic constructor(component: Generic.Element.Component & InputRangeProps, 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 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.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.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","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../../styles/kol-input-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-alert;\n@include kol-form-field;\n@include kol-input-container;\n@include kol-input;\n\n@layer kol-component {\n\t.kol-input-range {\n\t\t&__inputs-wrapper {\n\t\t\talign-items: center;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\t&__input {\n\t\t\t$input: &;\n\n\t\t\t&--number {\n\t\t\t\twidth: var(--kolibri-input-range--input-number--width);\n\t\t\t}\n\n\t\t\t&--range {\n\t\t\t\tappearance: none;\n\t\t\t\tbackground-color: #d3d3d3;\n\t\t\t\tborder: 1px solid #000;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tflex-grow: 1;\n\t\t\t\theight: rem(8);\n\t\t\t\tline-height: 1.5;\n\t\t\t\tpadding: 0;\n\t\t\t\tmargin: 0;\n\t\t\t\t/* Design-Hack - related with flex-grow */\n\t\t\t\twidth: 0;\n\n\t\t\t\t&::-webkit-slider-thumb {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tbackground-color: #000;\n\t\t\t\t\theight: rem(20);\n\t\t\t\t\twidth: rem(20);\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\t-webkit-appearance: none;\n\n\t\t\t\t\t@at-root #{$input}:not(:disabled)#{&} {\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\n\t\t\t\t\t@media (prefers-contrast: more) or (forced-colors: active) {\n\t\t\t\t\t\toutline: 1px solid currentColor;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t&::-moz-range-thumb {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tbackground-color: #000;\n\t\t\t\t\theight: rem(20);\n\t\t\t\t\twidth: rem(20);\n\t\t\t\t\tborder-radius: 20px;\n\t\t\t\t\t-moz-appearance: none;\n\n\t\t\t\t\t@at-root #{$input}:not(:disabled)#{&} {\n\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tFocusableElement,\n\tHideMsgPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputRangeAPI,\n\tInputRangeStates,\n\tInputTypeOnDefault,\n\tInputTypeOnOff,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';\nimport { InputRangeController } from './controller';\nimport KolSuggestionsFc from '../../functional-components/Suggestions';\n\n/**\n * @slot - Die Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputRange implements InputRangeAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate refInputNumber?: HTMLInputElement;\n\tprivate refInputRange?: HTMLInputElement;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInputNumber?.focus();\n\t}\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputNumber = element;\n\t\t\tif (!this._value && this.refInputNumber?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.refInputNumber.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly catchInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate getSanitizedFloatValue(value: string): number {\n\t\tconst floatValue = parseFloat(value);\n\t\tif (this.state._max && floatValue > this.state._max) {\n\t\t\treturn this.state._max;\n\t\t}\n\t\tif (this.state._min && floatValue < this.state._min) {\n\t\t\treturn this.state._min;\n\t\t}\n\t\treturn floatValue;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<number | undefined> {\n\t\tif (this.refInputNumber !== undefined) {\n\t\t\tconst value = this.refInputNumber.value;\n\t\t\treturn this.getSanitizedFloatValue(value);\n\t\t}\n\t}\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tthis.validateValue(floatValue);\n\t\tthis.controller.onFacade.onChange(event, floatValue);\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\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.refInputNumber,\n\t\t\t});\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\n\t\t}\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-range', 'range'),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.refInputRange?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getGenericInputProps() {\n\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\tconst { _suggestions, ...other } = this.state;\n\n\t\treturn {\n\t\t\tstate: { ...other, _suggestions: [] },\n\t\t\t...this.controller.onFacade,\n\t\t\tonChange: this.onChange,\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate get hasSuggestions(): boolean {\n\t\treturn Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t}\n\n\tprivate getInputRangeProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-range` : undefined,\n\t\t\tlist: this.hasSuggestions ? `${this.state._id}-list` : undefined,\n\t\t\ttype: 'range',\n\t\t\ttabIndex: -1,\n\t\t\tid: undefined,\n\t\t\t'aria-hidden': 'true',\n\t\t\tref: this.catchInputRangeRef,\n\t\t};\n\t}\n\n\tprivate getInputNumberProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\t...this.getGenericInputProps(),\n\t\t\tname: this.state._name ? `${this.state._name}-number` : undefined,\n\t\t\tlist: this.hasSuggestions ? `${this.state._id}-list` : undefined,\n\t\t\ttype: 'number',\n\t\t\tref: this.catchInputNumberRef,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst inputsWrapperStyle = {\n\t\t\t// use number of digits in max value plus some space for the number input arrow buttons\n\t\t\t'--kolibri-input-range--input-number--width': `calc(${String(this.state._max ?? 1000).length}ch + 1.5em)`,\n\t\t};\n\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<div class=\"kol-input-range__inputs-wrapper\" style={inputsWrapperStyle}>\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--range\" {...this.getInputRangeProps()} />\n\t\t\t\t\t\t<KolInputStateWrapperFc class=\"kol-input-range__input kol-input-range__input--number\" {...this.getInputNumberProps()} />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.hasSuggestions && <KolSuggestionsFc id={this.state._id} suggestions={this.state._suggestions} />}\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\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 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 = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the 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 properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\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 where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: number;\n\n\t@State() public state: InputRangeStates = {\n\t\t_autoComplete: 'off',\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\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('_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('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_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('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(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('_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._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"version":3}

package/dist/components/kol-input-text.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{k as KolInputTag}from"./component-names.js";import{n as nonce}from"./dev.utils2.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{g as getRenderStates}from"./controller2.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText.js";import{a as InputTextController}from"./controller4.js";import{b as watchBoolean,s as setState}from"./prop.validators.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse.js";const validateAlert=(t,e)=>{watchBoolean(t,"_alert",e)},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n    overflow: hidden;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n    overflow: hidden;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: flex;\n  }\n  button:not([role=link]) {\n    min-height: auto;\n  }\n  .input > .kol-icon {\n    display: grid;\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}",KolInputTextDefaultStyle0=defaultStyleCss,KolInputText$1=proxyCustomElement(class extends HTMLElement{async getValue(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,n=showExpertSlot(this.state._label);return h(Host,{key:"727cf67342a485f44aabd47a66ef7c0b014e13d6",class:{"has-value":this.state._hasValue,"kol-input-text":!0}},h(KolInputTag,{key:"b139ab0e80ef9b24de81461a6530c642582cf20e",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_disabled:this.state._disabled,_hasCounter:this.state._hasCounter,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_smartButton:this.state._smartButton,_suggestions:this.state._suggestions,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},role:"presentation"},h("span",{key:"696714aebfc9d399b5a651fca0a29d65b7b6228e",slot:"label"},n?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("span",{class:"badge-text-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey,this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"5cd093503bc6b05c892befce6ff09b3cda8fde4a",slot:"input"},h("input",Object.assign({key:"cbfc8a07c95d791bad53a1d09bc11ee69369228a",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.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:e?`${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,spellcheck:this.state._spellCheck,type:this.state._type,value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onInput:this.onInput,onKeyDown:this.onKeyDown,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.inputRef=t},this.onChange=t=>{var e,n;this.oldValue!==(null===(e=this.inputRef)||void 0===e?void 0:e.value)&&(this.oldValue=null===(n=this.inputRef)||void 0===n?void 0:n.value,this.controller.onFacade.onChange(t))},this.onInput=t=>{setState(this,"_currentLength",t.target.value.length),this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||propagateSubmitEventToForm({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._alert=void 0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._spellCheck=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,_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new InputTextController(this,"text",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){validateAlert(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)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMsg(t){this.controller.validateMsg(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)}validateShortKey(t){this.controller.validateShortKey(t)}validateSpellCheck(t){this.controller.validateSpellCheck(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),this.oldValue=t}componentWillLoad(){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))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}static get style(){return{default:KolInputTextDefaultStyle0}}},[49,"kol-input-text",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[4],_error:[1],_hasCounter:[4,"_has-counter"],_hideError:[1540,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_maxLength:[2,"_max-length"],_msg:[1],_name:[1],_on:[16],_pattern:[1],_placeholder:[1],_readOnly:[4,"_read-only"],_required:[4],_shortKey:[1,"_short-key"],_spellCheck:[4,"_spell-check"],_suggestions:[1],_smartButton:[1,"_smart-button"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_type:[1],_value:[1025],state:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-text"].forEach((t=>{if("kol-input-text"===t)customElements.get(t)||customElements.define(t,KolInputText$1)}))}const KolInputText=KolInputText$1,defineCustomElement=defineCustomElement$1;export{KolInputText,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{n as nonce}from"./dev.utils2.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{a as InputTextController}from"./controller3.js";import{K as KolFormFieldStateWrapperFc}from"./getRenderStates.js";import{K as KolInputContainerStateWrapperFc}from"./InputContainerStateWrapper.js";import{K as KolInputStateWrapperFc}from"./InputStateWrapper.js";import{s as setState}from"./prop.validators.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}",KolInputTextDefaultStyle0=defaultStyleCss,KolInputText$1=proxyCustomElement(class extends HTMLElement{async getValue(){var e;return null===(e=this.inputRef)||void 0===e?void 0:e.value}async kolFocus(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:clsx("kol-input-text",this.state._type,{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.inputRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,onKeyDown:this.onKeyDown})}render(){return h(KolFormFieldStateWrapperFc,Object.assign({key:"03b91cd888725258ffc7d51f35cedd847147babf"},this.getFormFieldProps()),h(KolInputContainerStateWrapperFc,{key:"8a9378fb5d82ab7427c4869899da6326e0b6030d",state:this.state},h(KolInputStateWrapperFc,Object.assign({key:"d78f3ae5645e24c5967922faa3c2b7b0908481e8"},this.getInputProps()))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.inputRef=e},this.onBlur=e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},this.onChange=e=>{var t;const n=null===(t=this.inputRef)||void 0===t?void 0:t.value;this.oldValue!==n&&(this.oldValue=n),this.controller.onFacade.onChange(e)},this.onFocus=e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},this.onInput=e=>{var t,n;const o=null!==(n=null===(t=this.inputRef)||void 0===t?void 0:t.value)&&void 0!==n?n:"";setState(this,"_currentLength",o.length),this._value=o,this.controller.onFacade.onInput(e)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||propagateSubmitEventToForm({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._shortKey=void 0,this._spellCheck=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new InputTextController(this,"text",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAutoComplete(e){this.controller.validateAutoComplete(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePattern(e){this.controller.validatePattern(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateSmartButton(e){this.controller.validateSmartButton(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateType(e){this.controller.validateType(e)}validateValue(e){this.controller.validateValue(e),this.oldValue=e}componentWillLoad(){this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}static get style(){return{default:KolInputTextDefaultStyle0}}},[49,"kol-input-text",{_accessKey:[1,"_access-key"],_autoComplete:[1,"_auto-complete"],_disabled:[4],_hasCounter:[4,"_has-counter"],_hideMsg:[1540,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_maxLength:[2,"_max-length"],_msg:[1],_name:[1],_on:[16],_pattern:[1],_placeholder:[1],_readOnly:[4,"_read-only"],_required:[4],_shortKey:[1,"_short-key"],_spellCheck:[4,"_spell-check"],_suggestions:[1],_smartButton:[1,"_smart-button"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_type:[1],_value:[1537],state:[32],inputHasFocus:[32],getValue:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-text"].forEach((e=>{if("kol-input-text"===e)customElements.get(e)||customElements.define(e,KolInputText$1)}))}const KolInputText=KolInputText$1,defineCustomElement=defineCustomElement$1;export{KolInputText,defineCustomElement};

package/dist/components/kol-input-text.js.map

@@ -1 +1 @@
-{"file":"kol-input-text.js","mappings":";;;;;;;;;;;;;AAeO,MAAM,aAAa,GAAG,CAAC,SAAoC,EAAE,KAAqB;IACxF,YAAY,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;AAC1C,CAAC;;ACjBD,MAAM,eAAe,GAAG,4pPAA4pP,CAAC;AACrrP,kCAAe,eAAe;;MC6CjBA,cAAY;IAgCjB,MAAM,QAAQ;;QACpB,OAAO,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,CAAC;KAC5B;IAMM,MAAM,KAAK;QACjB,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;KACtB;IAIM,MAAM,QAAQ;;QACpB,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAC;KACvB;IAEM,MAAM;QACZ,MAAM,EAAE,eAAe,EAAE,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxD,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC;QACpG,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAExD,QACC,EAAC,IAAI,qDACJ,KAAK,EAAE;gBACN,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;gBACjC,gBAAgB,EAAE,IAAI;aACtB,IAED,EAAC,WAAW,qDACX,KAAK,EAAE;gBACN,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI;gBACxB,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;aACrC,EACD,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,EAC1B,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EACzC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EACnC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EACnB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,OAAO,EAAE,gBAAM,OAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAA,EAAA,EACrC,IAAI,EAAE,cAAc,IAEpB,6DAAM,IAAI,EAAC,OAAO,IAChB,aAAa,IACb,YAAM,IAAI,EAAC,QAAQ,GAAQ,IACxB,OAAO,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,QAAQ,IACxF,kBACC,EAAC,2BAA2B,IAAC,SAAS,EAAE,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAI,EAAC,GAAG,EAC3I,YAAM,KAAK,EAAC,iBAAiB,iBAAa,MAAM,IAC9C,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAC5D,CACL,KAEH,gBAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ,CAChC,CACK,EACP,4DAAK,IAAI,EAAC,OAAO,IAChB,4EACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,EAAE,EACR,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,sBACd,eAAe,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,gBACxE,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,SAAS,EAC1G,cAAc,EAAC,KAAK,EACpB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EACtC,WAAW,EAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC9B,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAClB,IAAI,EAAE,cAAc,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,SAAS,EAC3D,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAChC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC5B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACpC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC9B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC9B,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAClC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAgB,IAC9B,IAAI,CAAC,UAAU,CAAC,QAAQ,IAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,CAAC,KAAK;gBACd,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACxC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;aAC1B,EACD,MAAM,EAAE,CAAC,KAAK;gBACb,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACvC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;aAC3B,IACA,CACG,CACO,CACR,EACN;KACF;IAkLD;;;;QA5TiB,aAAQ,GAAG,CAAC,GAAsB;YAClD,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;SACpB,CAAC;QAEe,aAAQ,GAAG,CAAC,KAAY;;YACxC,IAAI,IAAI,CAAC,QAAQ,MAAK,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,CAAA,EAAE;gBAC3C,IAAI,CAAC,QAAQ,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,CAAC;gBACrC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aACzC;SACD,CAAC;QAEe,YAAO,GAAG,CAAC,KAAiB;YAC5C,QAAQ,CAAC,IAAI,EAAE,gBAAgB,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAClF,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SACxC,CAAC;QAEe,cAAS,GAAG,CAAC,KAAoB;YACjD,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE;gBAC3D,0BAA0B,CAAC;oBAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,GAAG,EAAE,IAAI,CAAC,QAAQ;iBAClB,CAAC,CAAC;aACH;SACD,CAAC;;;;yBA2ImC,KAAK;;2BAYH,KAAK;0BAM0B,KAAK;0BAOrC,KAAK;qBAKX,EAAE;;;;;;;;;;yBAmDG,KAAK;yBAML,KAAK;;;;;;;6BAoCY,KAAK;wBAMS,KAAK;qBAKlC,MAAM;;qBAOJ;YACxC,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,CAAC;YACjB,SAAS,EAAE,KAAK;YAChB,UAAU,EAAE,KAAK;YACjB,GAAG,EAAE,MAAM,KAAK,EAAE,EAAE;YACpB,MAAM,EAAE,EAAE;YACV,YAAY,EAAE,EAAE;YAChB,KAAK,EAAE,MAAM;SACb;6BAEgC,KAAK;QAGrC,IAAI,CAAC,UAAU,GAAG,IAAI,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACnE;IAEO,WAAW;QAClB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,SAAS,EAAE;YACpC,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;SAC3D;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;KACzB;IAGM,iBAAiB,CAAC,KAAyB;QACjD,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACzC;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,oBAAoB,CAAC,KAAsB;QACjD,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAC5C;IAGM,gBAAgB,CAAC,KAAe;QACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,aAAa,CAAC,KAAc;QAClC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACrC;IAGM,kBAAkB,CAAC,KAAe;QACxC,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;KAC1C;IAGM,iBAAiB,CAAC,KAAyB;QACjD,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACzC;IAGM,iBAAiB,CAAC,KAAe;QACvC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACzC;IAGM,YAAY,CAAC,KAAc;QACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,aAAa,CAAC,KAA+B;QACnD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACrC;IAGM,UAAU,CAAC,KAAc;QAC/B,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAClC;IAGM,aAAa,CAAC,KAAmC;QACvD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACrC;IAGM,iBAAiB,CAAC,KAAc;QACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACzC;IAGM,WAAW,CAAC,KAAgC;QAClD,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACnC;IAGM,YAAY,CAAC,KAAc;QACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,UAAU,CAAC,KAA0B;QAC3C,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAClC;IAGM,eAAe,CAAC,KAAc;QACpC,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACvC;IAGM,mBAAmB,CAAC,KAAc;QACxC,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;KAC3C;IAGM,gBAAgB,CAAC,KAAe;QACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,gBAAgB,CAAC,KAAe;QACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,gBAAgB,CAAC,KAAwB;QAC/C,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,kBAAkB,CAAC,KAA0B;QACnD,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;KAC1C;IAGM,mBAAmB,CAAC,KAA2B;QACrD,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;KAC3C;IAGM,mBAAmB,CAAC,KAA4B;QACtD,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;KAC3C;IAGM,2BAA2B,CAAC,KAAmC;QACrE,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;KACnD;IAGM,gBAAgB,CAAC,KAAc;QACrC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,eAAe,CAAC,KAAe;QACrC,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACvC;IAGM,YAAY,CAAC,KAAqB;QACxC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,aAAa,CAAC,KAAc;QAClC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACtB;IAEM,iBAAiB;QACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;QAEpC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAC5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolInputText"],"sources":["src/schema/props/alert.ts","src/components/input-text/style.scss?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\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","@use '../style' as *;\n@use '../input-line' as *;\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tAccessKeyPropType,\n\tAlertPropType,\n\tButtonProps,\n\tFocusableElement,\n\tHideErrorPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTextAPI,\n\tInputTextStates,\n\tInputTextType,\n\tInputTypeOnDefault,\n\tInputTypeOnOff,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { buildBadgeTextString, setState, showExpertSlot, validateAlert } from '../../schema';\n\nimport { KolInputTag } from '../../core/component-names';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedBadgeText } from '../span/InternalUnderlinedBadgeText';\nimport { InputTextController } from './controller';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputText implements InputTextAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate inputRef?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.inputRef?.value) {\n\t\t\tthis.oldValue = this.inputRef?.value;\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tsetState(this, '_currentLength', (event.target as HTMLInputElement).value.length);\n\t\tthis.controller.onFacade.onInput(event);\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\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.inputRef,\n\t\t\t});\n\t\t}\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.inputRef?.value;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.inputRef?.focus();\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 = showExpertSlot(this.state._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\t'kol-input-text': true,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<KolInputTag\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_accessKey={this.state._accessKey}\n\t\t\t\t\t_alert={this.showAsAlert()}\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_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_msg={this.state._msg}\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_shortKey={this.state._shortKey}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_suggestions={this.state._suggestions}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.inputRef?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"badge-text-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<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\tspellcheck={this.state._spellCheck}\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\tonChange={this.onChange}\n\t\t\t\t\t\t\tonInput={this.onInput}\n\t\t\t\t\t\t\tonKeyDown={this.onKeyDown}\n\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: 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?: AccessKeyPropType;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * 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 = false;\n\n\t/**\n\t * Defines the error message text.\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * 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 = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * 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 = false;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines whether the browser should check the spelling and grammar.\n\t */\n\t@Prop() public _spellCheck?: SpellCheckPropType;\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: InputTextStates = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_type: 'text',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): 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('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_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@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(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\tthis.oldValue = value;\n\t}\n\n\tpublic componentWillLoad(): void {\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"],"version":3}
+{"file":"kol-input-text.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,q8OAAq8O,CAAC;AAC99O,kCAAe,eAAe;;MC8CjBA,cAAY;IAiDjB,MAAM,QAAQ;;QACpB,OAAO,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,CAAC;KAC5B;IAIM,MAAM,QAAQ;;QACpB,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAC;KACvB;IAEO,iBAAiB;QACxB,OAAO;YACN,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,KAAe,EAAE;gBACzD,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;aACjC,CAAC;YACF,YAAY,EAAE,IAAI,CAAC,aAAa;YAChC,OAAO,EAAE,gBAAM,OAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,EAAE,CAAA,EAAA;YACrC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;SACzB,CAAC;KACF;IAEO,aAAa;QACpB,qCACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,IACd,IAAI,CAAC,UAAU,CAAC,QAAQ,KAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,IACxB;KACF;IAEM,MAAM;QACZ,QACC,EAAC,0BAA0B,qEAAK,IAAI,CAAC,iBAAiB,EAAE,GACvD,EAACC,+BAAmB,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IACrC,EAAC,sBAAsB,qEAAK,IAAI,CAAC,aAAa,EAAE,EAAI,CAC/B,CACM,EAC5B;KACF;IAiKD;;;;QAxPiB,aAAQ,GAAG,CAAC,GAAsB;YAClD,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;SACpB,CAAC;QAEe,WAAM,GAAG,CAAC,KAAiB;YAC3C,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACvC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;SAC3B,CAAC;QAEe,aAAQ,GAAG,CAAC,KAAY;;YACxC,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,CAAC;YAEnC,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE;gBAC5B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACtB;YAED,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACzC,CAAC;QAEe,YAAO,GAAG,CAAC,KAAiB;YAC5C,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACxC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;SAC1B,CAAC;QAEe,YAAO,GAAG,CAAC,KAAiB;;YAC5C,MAAM,KAAK,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,mCAAI,EAAE,CAAC;YACzC,QAAQ,CAAC,IAAI,EAAE,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;YAE/C,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;YAEpB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SACxC,CAAC;QAEe,cAAS,GAAG,CAAC,KAAoB;YACjD,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE;gBAC3D,0BAA0B,CAAC;oBAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,GAAG,EAAE,IAAI,CAAC,QAAQ;iBAClB,CAAC,CAAC;aACH;SACD,CAAC;;;yBAiEmC,KAAK;2BAMH,KAAK;wBAMwB,KAAK;0BAOnC,KAAK;qBAKX,EAAE;;;;;;;;;;yBAmDG,KAAK;yBAML,KAAK;;;;;;6BA+BY,KAAK;wBAMS,KAAK;qBAKlC,MAAM;;qBAOJ;YACxC,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,CAAC;YACjB,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,GAAG,EAAE,MAAM,KAAK,EAAE,EAAE;YACpB,MAAM,EAAE,EAAE;YACV,YAAY,EAAE,EAAE;YAChB,KAAK,EAAE,MAAM;SACb;6BAEgC,KAAK;QAGrC,IAAI,CAAC,UAAU,GAAG,IAAI,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KACnE;IAEO,WAAW;QAClB,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;KAC3D;IAGM,iBAAiB,CAAC,KAAyB;QACjD,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACzC;IAGM,oBAAoB,CAAC,KAAsB;QACjD,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;KAC5C;IAGM,gBAAgB,CAAC,KAAe;QACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,kBAAkB,CAAC,KAAe;QACxC,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;KAC1C;IAGM,eAAe,CAAC,KAAuB;QAC7C,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACvC;IAGM,iBAAiB,CAAC,KAAe;QACvC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACzC;IAGM,YAAY,CAAC,KAAc;QACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,aAAa,CAAC,KAA+B;QACnD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACrC;IAGM,UAAU,CAAC,KAAc;QAC/B,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAClC;IAGM,aAAa,CAAC,KAAmC;QACvD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACrC;IAGM,iBAAiB,CAAC,KAAc;QACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACzC;IAGM,WAAW,CAAC,KAAgC;QAClD,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACnC;IAGM,YAAY,CAAC,KAAc;QACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,UAAU,CAAC,KAA0B;QAC3C,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAClC;IAGM,eAAe,CAAC,KAAc;QACpC,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACvC;IAGM,mBAAmB,CAAC,KAAc;QACxC,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;KAC3C;IAGM,gBAAgB,CAAC,KAAe;QACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,gBAAgB,CAAC,KAAe;QACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,gBAAgB,CAAC,KAAwB;QAC/C,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,kBAAkB,CAAC,KAA0B;QACnD,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;KAC1C;IAGM,mBAAmB,CAAC,KAA2B;QACrD,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;KAC3C;IAGM,mBAAmB,CAAC,KAA4B;QACtD,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;KAC3C;IAGM,2BAA2B,CAAC,KAAmC;QACrE,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;KACnD;IAGM,eAAe,CAAC,KAAe;QACrC,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACvC;IAGM,YAAY,CAAC,KAAqB;QACxC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,aAAa,CAAC,KAAc;QAClC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;KACtB;IAEM,iBAAiB;QACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC;QACvC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;QAC5B,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;QAEpC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAC5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolInputText","KolInputContainerFc"],"sources":["src/components/input-text/style.scss?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../../styles/kol-input-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@include kol-alert;\n@include kol-form-field;\n@include kol-input-container;\n@include kol-input;\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tAccessKeyPropType,\n\tButtonProps,\n\tFocusableElement,\n\tHideMsgPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTextAPI,\n\tInputTextStates,\n\tInputTextType,\n\tInputTypeOnDefault,\n\tInputTypeOnOff,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { setState } from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';\nimport { InputTextController } from './controller';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputText implements InputTextAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate inputRef?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\tprivate readonly onBlur = (event: FocusEvent) => {\n\t\tthis.controller.onFacade.onBlur(event);\n\t\tthis.inputHasFocus = false;\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tconst value = this.inputRef?.value;\n\n\t\tif (this.oldValue !== value) {\n\t\t\tthis.oldValue = value;\n\t\t}\n\n\t\tthis.controller.onFacade.onChange(event);\n\t};\n\n\tprivate readonly onFocus = (event: FocusEvent) => {\n\t\tthis.controller.onFacade.onFocus(event);\n\t\tthis.inputHasFocus = true;\n\t};\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tconst value = this.inputRef?.value ?? '';\n\t\tsetState(this, '_currentLength', value.length);\n\n\t\tthis._value = value;\n\n\t\tthis.controller.onFacade.onInput(event);\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\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.inputRef,\n\t\t\t});\n\t\t}\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.inputRef?.value;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.inputRef?.focus();\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-input-text', this.state._type as string, {\n\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.inputRef?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getInputProps(): InputStateWrapperProps {\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\t...this.controller.onFacade,\n\t\t\tonBlur: this.onBlur,\n\t\t\tonChange: this.onChange,\n\t\t\tonFocus: this.onFocus,\n\t\t\tonInput: this.onInput,\n\t\t\tonKeyDown: this.onKeyDown,\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<KolInputStateWrapperFc {...this.getInputProps()} />\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\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?: AccessKeyPropType;\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 = false;\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 = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * 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 = false;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines whether the browser should check the spelling and grammar.\n\t */\n\t@Prop() public _spellCheck?: SpellCheckPropType;\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 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, reflect: true }) public _value?: string;\n\n\t@State() public state: InputTextStates = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_type: 'text',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: AccessKeyPropType): void {\n\t\tthis.controller.validateAccessKey(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('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_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@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(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('_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\tthis.oldValue = value;\n\t}\n\n\tpublic componentWillLoad(): void {\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"],"version":3}

package/dist/components/kol-kolibri.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{c as colorRgba,v as validateColor}from"./color.js";import{t as translate}from"./i18n2.js";import{q as devHint,b as watchBoolean}from"./prop.validators.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  text {\n    font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n  svg {\n    max-height: 100%;\n  }\n}",KolKolibriDefaultStyle0=defaultStyleCss,KolKolibri$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=colorRgba(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else devHint("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const e=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return h(Host,{key:"44c7547a3ab268dee95ed8008ab99a39716781d9",class:"kol-kolibri"},h("svg",{key:"a145606f95c961c36c8fe27b25231b3458960293",role:"img","aria-label":translate("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:e},h("path",{key:"730ed71a8afe95b95a651ad97c9545e4f995e552",d:"M353 322L213 304V434L353 322Z"}),h("path",{key:"98f8daab560e8b82a0f8b8e0cc3752bd59e49082",d:"M209 564V304L149 434L209 564Z"}),h("path",{key:"1e88adbf107ed979730950ab2dd4389578f8fabd",d:"M357 316L417 250L361 210L275 244L357 316Z"}),h("path",{key:"8d6631800b256961d0d2e05c0cfee508e01b3cea",d:"M329 218L237 92L250 222L272 241L329 218Z"}),h("path",{key:"ed4c69b401c8ce1cdee7e109b491a00d6bdafb6b",d:"M353 318L35 36L213 300L353 318Z"}),h("path",{key:"e4c892a3db75a4200bfa004826f94fa1cefd352e",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&h("text",{key:"967c204add206cc23d667cf264294ff415469136",x:"250",y:"525",fill:e},"KoliBri")))}validateColor(e){validateColor(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){watchBoolean(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}static get style(){return{default:KolKolibriDefaultStyle0}}},[33,"kol-kolibri",{_color:[1],_labeled:[4],state:[32]},void 0,{_color:["validateColor"],_labeled:["validateLabeled"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-kolibri"].forEach((e=>{if("kol-kolibri"===e)customElements.get(e)||customElements.define(e,KolKolibri$1)}))}const KolKolibri=KolKolibri$1,defineCustomElement=defineCustomElement$1;export{KolKolibri,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as colorRgba,v as validateColor}from"./color.js";import{t as translate}from"./i18n2.js";import{q as devHint,c as watchBoolean}from"./prop.validators.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-kolibri {\n    display: inline-block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-height: 100%;\n  }\n  .kol-kolibri__text {\n    font-size: calc(90rem / var(--kolibri-root-font-size, 16));\n    letter-spacing: normal;\n    word-spacing: normal;\n  }\n}",KolKolibriDefaultStyle0=defaultStyleCss,KolKolibri$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.handleColorChange=(e,n)=>{if("string"==typeof e){const t=colorRgba(e);n.set("_color",{red:t[0],green:t[1],blue:t[2]})}else devHint("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._color="#003c78",this._labeled=!0,this.state={_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const e=`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return h("svg",{key:"490680370f1d5c2e66bd77f3afcd0749d54d0c6e",class:"kol-kolibri",role:"img","aria-label":translate("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:e},h("path",{key:"b5d0186d1d0a1c007a0a9fa84321e4edf0e02dcf",d:"M353 322L213 304V434L353 322Z"}),h("path",{key:"d933f88df67a0e4b2e5c34a6dfb1c5c963a758da",d:"M209 564V304L149 434L209 564Z"}),h("path",{key:"8b3eb704585bac0bfceb99371d6922f4b94b170e",d:"M357 316L417 250L361 210L275 244L357 316Z"}),h("path",{key:"e07349bac5c63d8aa2cdec0929e6663d055491e9",d:"M329 218L237 92L250 222L272 241L329 218Z"}),h("path",{key:"648c28da54defcd245c3dfab02732d7e57ccbd18",d:"M353 318L35 36L213 300L353 318Z"}),h("path",{key:"14a0de9c0455a5a3c8b65cf12b1b47449666448c",d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&h("text",{key:"5e4b6bee08779e34bee19d36ef2efee24312ed62",class:"kol-kolibri__text",x:"250",y:"525",fill:e},"KoliBri"))}validateColor(e){validateColor(this,e,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(e){watchBoolean(this,"_labeled",e,{defaultValue:!0})}componentWillLoad(){this.validateColor(this._color),this.validateLabeled(this._labeled)}static get watchers(){return{_color:["validateColor"],_labeled:["validateLabeled"]}}static get style(){return{default:KolKolibriDefaultStyle0}}},[33,"kol-kolibri",{_color:[1],_labeled:[4],state:[32]},void 0,{_color:["validateColor"],_labeled:["validateLabeled"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-kolibri"].forEach((e=>{if("kol-kolibri"===e)customElements.get(e)||customElements.define(e,KolKolibri$1)}))}const KolKolibri=KolKolibri$1,defineCustomElement=defineCustomElement$1;export{KolKolibri,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-kolibri.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,w+IAAw+I,CAAC;AACjgJ,gCAAe,eAAe;;MCkBjBA,YAAU;;;;;QAyCd,sBAAiB,GAA2C,CAAC,SAAkB,EAAE,SAA+B;YACvH,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;gBAClC,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;gBAClC,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE;oBACvB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;oBACZ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;oBACd,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;iBACb,CAAC,CAAC;aACH;iBAAM;gBACN,OAAO,CAAC,sGAAsG,CAAC,CAAC;aAChH;SACD,CAAC;sBA3B+C,SAAS;wBAKtB,IAAI;qBAED;YACtC,MAAM,EAAE;gBACP,GAAG,EAAE,CAAC;gBACN,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,GAAG;aACT;YACD,QAAQ,EAAE,IAAI;SACd;;IAtCM,MAAM;QACZ,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC;QACvG,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,aAAa,IACxB,4DAAK,IAAI,EAAC,KAAK,gBAAa,SAAS,CAAC,kBAAkB,CAAC,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,IAClI,6DAAM,CAAC,EAAC,+BAA+B,GAAG,EAC1C,6DAAM,CAAC,EAAC,+BAA+B,GAAG,EAC1C,6DAAM,CAAC,EAAC,2CAA2C,GAAG,EACtD,6DAAM,CAAC,EAAC,0CAA0C,GAAG,EACrD,6DAAM,CAAC,EAAC,iCAAiC,GAAG,EAC5C,6DAAM,CAAC,EAAC,mCAAmC,GAAG,EAC7C,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,IAAI,KAC5B,6DAAM,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAE,SAAS,cAE9B,CACP,CACI,CACA,EACN;KACF;IAmCM,aAAa,CAAC,KAA8B;QAClD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE;gBACN,WAAW,EAAE,IAAI,CAAC,iBAAiB;aACnC;SACD,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAAe;QACrC,YAAY,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;YACrC,YAAY,EAAE,IAAI;SAClB,CAAC,CAAC;KACH;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolKolibri"],"sources":["src/components/kolibri/style.scss?tag=kol-kolibri&mode=default&encapsulation=shadow","src/components/kolibri/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../style' as *;\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\ttext {\n\t\tfont-size: rem(90);\n\t\tletter-spacing: normal;\n\t\tword-spacing: normal;\n\t}\n\n\tsvg {\n\t\tmax-height: 100%;\n\t}\n}\n","import { devHint, validateColor, watchBoolean } from '../../schema';\nimport { Component, Host, Prop, State, Watch, h } from '@stencil/core';\n\nimport { colorRgba } from './color-rgba';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\n\nimport type { KolibriAPI, KolibriStates, PropColor, Stringified } from '../../schema';\n\n@Component({\n\ttag: 'kol-kolibri',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolKolibri implements KolibriAPI {\n\tpublic render(): JSX.Element {\n\t\tconst fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;\n\t\treturn (\n\t\t\t<Host class=\"kol-kolibri\">\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\t/**\n\t * Defines the color of the logo and label.\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 = true;\n\n\t@State() public state: KolibriStates = {\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\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\t\tdefaultValue: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabeled(this._labeled);\n\t}\n}\n"],"version":3}
+{"file":"kol-kolibri.js","mappings":";;;;;;;;AAAA,MAAM,eAAe,GAAG,w8IAAw8I,CAAC;AACj+I,gCAAe,eAAe;;MCkBjBA,YAAU;;;;;QAuCd,sBAAiB,GAA2C,CAAC,SAAkB,EAAE,SAA+B;YACvH,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;gBAClC,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC,CAAC;gBAClC,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE;oBACvB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;oBACZ,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;oBACd,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;iBACb,CAAC,CAAC;aACH;iBAAM;gBACN,OAAO,CAAC,sGAAsG,CAAC,CAAC;aAChH;SACD,CAAC;sBA3B+C,SAAS;wBAKtB,IAAI;qBAED;YACtC,MAAM,EAAE;gBACP,GAAG,EAAE,CAAC;gBACN,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,GAAG;aACT;YACD,QAAQ,EAAE,IAAI;SACd;;IApCM,MAAM;QACZ,MAAM,SAAS,GAAG,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC;QACvG,QACC,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,KAAK,gBAAa,SAAS,CAAC,kBAAkB,CAAC,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,IACtJ,6DAAM,CAAC,EAAC,+BAA+B,GAAG,EAC1C,6DAAM,CAAC,EAAC,+BAA+B,GAAG,EAC1C,6DAAM,CAAC,EAAC,2CAA2C,GAAG,EACtD,6DAAM,CAAC,EAAC,0CAA0C,GAAG,EACrD,6DAAM,CAAC,EAAC,iCAAiC,GAAG,EAC5C,6DAAM,CAAC,EAAC,mCAAmC,GAAG,EAC7C,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,IAAI,KAC5B,6DAAM,KAAK,EAAC,mBAAmB,EAAC,CAAC,EAAC,KAAK,EAAC,CAAC,EAAC,KAAK,EAAC,IAAI,EAAE,SAAS,cAExD,CACP,CACI,EACL;KACF;IAmCM,aAAa,CAAC,KAA8B;QAClD,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,YAAY,EAAE,SAAS;YACvB,KAAK,EAAE;gBACN,WAAW,EAAE,IAAI,CAAC,iBAAiB;aACnC;SACD,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAAe;QACrC,YAAY,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE;YACrC,YAAY,EAAE,IAAI;SAClB,CAAC,CAAC;KACH;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolKolibri"],"sources":["src/components/kolibri/style.scss?tag=kol-kolibri&mode=default&encapsulation=shadow","src/components/kolibri/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n\n@layer kol-component {\n\t.kol-kolibri {\n\t\tdisplay: inline-block;\n\t\tfont-size: rem(16);\n\t\tmax-height: 100%;\n\n\t\t&__text {\n\t\t\tfont-size: rem(90);\n\t\t\tletter-spacing: normal;\n\t\t\tword-spacing: normal;\n\t\t}\n\t}\n}\n","import { devHint, validateColor, watchBoolean } from '../../schema';\nimport { Component, Prop, State, Watch, h } from '@stencil/core';\n\nimport { colorRgba } from './color-rgba';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\n\nimport type { KolibriAPI, KolibriStates, PropColor, Stringified } from '../../schema';\n\n@Component({\n\ttag: 'kol-kolibri',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolKolibri implements KolibriAPI {\n\tpublic render(): JSX.Element {\n\t\tconst fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;\n\t\treturn (\n\t\t\t<svg class=\"kol-kolibri\" 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<path d=\"M353 322L213 304V434L353 322Z\" />\n\t\t\t\t<path d=\"M209 564V304L149 434L209 564Z\" />\n\t\t\t\t<path d=\"M357 316L417 250L361 210L275 244L357 316Z\" />\n\t\t\t\t<path d=\"M329 218L237 92L250 222L272 241L329 218Z\" />\n\t\t\t\t<path d=\"M353 318L35 36L213 300L353 318Z\" />\n\t\t\t\t<path d=\"M391 286L565 272L421 252L391 286Z\" />\n\t\t\t\t{this.state._labeled === true && (\n\t\t\t\t\t<text class=\"kol-kolibri__text\" x=\"250\" y=\"525\" fill={fillColor}>\n\t\t\t\t\t\tKoliBri\n\t\t\t\t\t</text>\n\t\t\t\t)}\n\t\t\t</svg>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the color of the logo and label.\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 = true;\n\n\t@State() public state: KolibriStates = {\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\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\t\tdefaultValue: true,\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabeled(this._labeled);\n\t}\n}\n"],"version":3}

package/dist/components/kol-link-button.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{l as KolLinkWcTag}from"./component-names.js";const defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}",KolLinkButtonDefaultStyle0=defaultStyleCss,KolLinkButton$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus())}render(){return h(Host,{key:"17537a98e3d3e082a833b0fd8970d8ed6d5121f0",class:"kol-link-button"},h(KolLinkWcTag,{key:"12115da0c3ed106c7b2954296f5a2529e074897a",ref:this.catchRef,class:{button:!0},_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:"button",_shortKey:this._shortKey,_tabIndex:this._tabIndex,_target:this._target,_tooltipAlign:this._tooltipAlign,_variant:this._variant},h("slot",{key:"9fdb0b15c70fa8c22cfe4e5b28893c5d793a6d51",name:"expert",slot:"expert"})))}static get delegatesFocus(){return!0}static get style(){return{default:KolLinkButtonDefaultStyle0}}},[49,"kol-link-button",{_accessKey:[1,"_access-key"],_ariaCurrentValue:[1,"_aria-current-value"],_ariaDescription:[1,"_aria-description"],_customClass:[1,"_custom-class"],_disabled:[4],_download:[1],_hideLabel:[4,"_hide-label"],_href:[1],_icons:[1],_label:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_tabIndex:[2,"_tab-index"],_target:[1],_tooltipAlign:[1,"_tooltip-align"],_variant:[1],focus:[64],kolFocus:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link-button"].forEach((n=>{if("kol-link-button"===n)customElements.get(n)||customElements.define(n,KolLinkButton$1)}))}const KolLinkButton=KolLinkButton$1,defineCustomElement=defineCustomElement$1;export{KolLinkButton,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{e as KolLinkWcTag}from"./component-names.js";const defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    background-color: lightgray;\n    color: black;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    margin: auto;\n    width: 100%;\n  }\n}",KolLinkButtonDefaultStyle0=defaultStyleCss,KolLinkButton$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=n=>{this.linkWcRef=n},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal"}async kolFocus(){var n;await(null===(n=this.linkWcRef)||void 0===n?void 0:n.kolFocus())}render(){return h(KolLinkWcTag,{key:"63b766a0b393724d79e346a7d23318b5a044d5b8",ref:this.catchRef,_accessKey:this._accessKey,_ariaCurrentValue:this._ariaCurrentValue,_ariaDescription:this._ariaDescription,_customClass:this._customClass,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icons:this._icons,_label:this._label,_on:this._on,_role:"button",_shortKey:this._shortKey,_target:this._target,_tooltipAlign:this._tooltipAlign,_variant:this._variant},h("slot",{key:"c2cdcf59de68e99b8fa026bb7f2f5e99169b945c",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}static get style(){return{default:KolLinkButtonDefaultStyle0}}},[49,"kol-link-button",{_accessKey:[1,"_access-key"],_ariaCurrentValue:[1,"_aria-current-value"],_ariaDescription:[1,"_aria-description"],_customClass:[1,"_custom-class"],_disabled:[4],_download:[1],_hideLabel:[4,"_hide-label"],_href:[1],_icons:[1],_label:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_target:[1],_tooltipAlign:[1,"_tooltip-align"],_variant:[1],kolFocus:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link-button"].forEach((n=>{if("kol-link-button"===n)customElements.get(n)||customElements.define(n,KolLinkButton$1)}))}const KolLinkButton=KolLinkButton$1,defineCustomElement=defineCustomElement$1;export{KolLinkButton,defineCustomElement};

package/dist/components/kol-link-button.js.map

@@ -1 +1 @@
-{"file":"kol-link-button.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,g5LAAg5L,CAAC;AACz6L,mCAAe,eAAe;;MC8BjBA,eAAa;;;;;QAGR,aAAQ,GAAG,CAAC,GAA0B;YACtD,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;SACrB,CAAC;;;;;yBAsEmC,KAAK;;0BAYJ,KAAK;;;;;;;;;6BA6CW,OAAO;wBAKX,QAAQ;;IA9HnD,MAAM,KAAK;QACjB,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;KACtB;IAGM,MAAM,QAAQ;;QACpB,OAAM,MAAA,IAAI,CAAC,SAAS,0CAAE,QAAQ,EAAE,CAAA,CAAC;KACjC;IAEM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,iBAAiB,IAC5B,EAAC,YAAY,qDACZ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE;gBACN,MAAM,EAAE,IAAI;aACZ,EACD,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC3B,CACT,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolLinkButton"],"sources":["src/components/link-button/style.scss?tag=kol-link-button&mode=default&encapsulation=shadow","src/components/link-button/shadow.tsx"],"sourcesContent":["@use '../style' as *;\n@use '../button' as *;\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaCurrentValuePropType,\n\tAriaDescriptionPropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDownloadPropType,\n\tFocusableElement,\n\tHrefPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tLinkButtonProps,\n\tLinkOnCallbacksPropType,\n\tLinkTargetPropType,\n\tShortKeyPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolLinkButton implements LinkButtonProps, FocusableElement {\n\tprivate linkWcRef?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.linkWcRef = ref;\n\t};\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.linkWcRef?.kolFocus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-link-button\">\n\t\t\t\t<KolLinkWcTag\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}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaCurrentValue={this._ariaCurrentValue}\n\t\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t\t_customClass={this._customClass}\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_icons={this._icons}\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_shortKey={this._shortKey}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolLinkWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\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?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-current attribute.\n\t */\n\t@Prop() public _ariaCurrentValue?: AriaCurrentValuePropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\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 * Makes the element not focusable and ignore all events.\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;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the 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 * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\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 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"],"version":3}
+{"file":"kol-link-button.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,2zLAA2zL,CAAC;AACp1L,mCAAe,eAAe;;MC8BjBA,eAAa;;;;;QAGR,aAAQ,GAAG,CAAC,GAA0B;YACtD,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;SACrB,CAAC;;;;;yBAwDmC,KAAK;;0BAYJ,KAAK;;;;;;;;6BAwCW,OAAO;wBAKX,QAAQ;;IA9GnD,MAAM,QAAQ;;QACpB,OAAM,MAAA,IAAI,CAAC,SAAS,0CAAE,QAAQ,EAAE,CAAA,CAAC;KACjC;IAEM,MAAM;QACZ,QACC,EAAC,YAAY,qDACZ,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC3B,EACd;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolLinkButton"],"sources":["src/components/link-button/style.scss?tag=kol-link-button&mode=default&encapsulation=shadow","src/components/link-button/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../@shared/kol-button-mixin' as *;\n\n@include kol-button-styles('kol-link');\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaCurrentValuePropType,\n\tAriaDescriptionPropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tDownloadPropType,\n\tFocusableElement,\n\tHrefPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tLinkButtonProps,\n\tLinkOnCallbacksPropType,\n\tLinkTargetPropType,\n\tShortKeyPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolLinkWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolLinkButton implements LinkButtonProps, FocusableElement {\n\tprivate linkWcRef?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.linkWcRef = ref;\n\t};\n\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.linkWcRef?.kolFocus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolLinkWcTag\n\t\t\t\tref={this.catchRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaCurrentValue={this._ariaCurrentValue}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_download={this._download}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_href={this._href}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_label={this._label}\n\t\t\t\t_on={this._on}\n\t\t\t\t_role=\"button\"\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_target={this._target}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_variant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolLinkWcTag>\n\t\t);\n\t}\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?: AccessKeyPropType;\n\n\t/**\n\t * Defines the value for the aria-current attribute.\n\t */\n\t@Prop() public _ariaCurrentValue?: AriaCurrentValuePropType;\n\n\t/**\n\t * Defines the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\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 * Makes the element not focusable and ignore all events.\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;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the target URI of the link.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the 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 * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\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 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"],"version":3}

package/dist/components/kol-link-wc.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{o as onLocationChange}from"./ariaCurrentService.js";import{p as preventDefaultAndStopPropagation}from"./events.js";import{n as nonce}from"./dev.utils2.js";import{g as KolSpanWcTag,e as KolIconTag,a as KolTooltipWcTag}from"./component-names.js";import{t as translate}from"./i18n2.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{w as watchValidator,d as watchString,l as setEventTarget,q as devHint}from"./prop.validators.js";import{v as validateHref}from"./href.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateAriaDescription,a as validateAriaExpanded,b as validateAlternativeButtonLinkRole,c as validateButtonVariant}from"./button-variant.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateDisabled}from"./disabled.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateIcons}from"./icons.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";const ariaCurrentValuePropTypeOptions=["date","location","page","step","time","true","false"],validateAriaCurrentValue=(a,t)=>{watchValidator(a,"_ariaCurrentValue",(a=>"string"==typeof a&&ariaCurrentValuePropTypeOptions.includes(a)),new Set([`AriaCurrentValue {${ariaCurrentValuePropTypeOptions.join(", ")}`]),t,{defaultValue:"page"})},validateAriaOwns=(a,t)=>{watchString(a,"_ariaOwns",t,{defaultValue:void 0})},validateDownload=(a,t)=>{watchString(a,"_download",t)},validateLinkCallbacks=(a,t)=>{"object"==typeof t&&"function"==typeof(null==t?void 0:t.onClick)&&(a.state=Object.assign(Object.assign({},a.state),{_on:t}))},validateLinkTarget=(a,t)=>{watchString(a,"_target",t)},KolLinkWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.internalDescriptionById=nonce(),this.catchRef=a=>{this.anchorRef=a},this.onClick=a=>{var t,e;!0===this.state._disabled?preventDefaultAndStopPropagation(a):"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&(a.preventDefault(),a.stopPropagation(),setEventTarget(a,this.anchorRef),null===(e=this.state._on)||void 0===e||e.onClick(a,this.state._href))},this.getRenderValues=()=>{const a="string"==typeof this.state._target&&"_self"!==this.state._target,t={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,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||devHint("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:a,tagAttrs:t}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaOwns=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async kolFocus(){var a;null===(a=this.anchorRef)||void 0===a||a.focus()}render(){var a,t;const{isExternal:e,tagAttrs:i}=this.getRenderValues(),s=showExpertSlot(this.state._label),l=Boolean(null===(t=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===t?void 0:t.length);return h(Host,{key:"1d30bedcd820dec1c26c0eff106acc80bedb5cb3",class:"kol-link-wc"},h("a",Object.assign({key:"efc2b3393b67b4744cec4ea94b95014324d899f3",ref:this.catchRef},i,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-describedby":l?this.internalDescriptionById:void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${e?` (${translate("kol-open-link-in-tab")})`:""}`:void 0,class:{disabled:!0===this.state._disabled,"external-link":e,"hide-label":!0===this.state._hideLabel,[this.state._variant]:"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0}},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),h(KolSpanWcTag,{key:"02c28b7d44741668ee5847e454769195810a0958",_badgeText:this.state._accessKey||this.state._shortKey,_icons:this.state._icons,_hideLabel:this.state._hideLabel,_label:s?"":this.state._label||this.state._href},h("slot",{key:"14536938fdd95503bdfdc0bec1e56221a6e075f7",name:"expert",slot:"expert"})),e&&h(KolIconTag,{key:"6624f9d9590bedd38e696d322f988a7ab0d0a6e6",class:"external-link-icon",_label:this.state._hideLabel?"":translate("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),h(KolTooltipWcTag,{key:"c4aea7ed08c840b8352626122c7f5a2c44dbe01a","aria-hidden":"true",hidden:s||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}),l&&h("span",{key:"c2481878f8b0801390a63af0f33ce30ed9024f5e",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}validateAccessKey(a){validateAccessKey(this,a),validateAccessAndShortKey(a,this._shortKey)}validateAriaCurrentValue(a){validateAriaCurrentValue(this,a)}validateAriaDescription(a){validateAriaDescription(this,a)}validateAriaExpanded(a){validateAriaExpanded(this,a)}validateAriaOwns(a){validateAriaOwns(this,a)}validateCustomClass(a){validateCustomClass(this,a)}validateDisabled(a){validateDisabled(this,a)}validateDownload(a){validateDownload(this,a)}validateHideLabel(a){validateHideLabel(this,a)}validateHref(a){validateHref(this,a,{required:!0})}validateIcons(a){validateIcons(this,a)}validateLabel(a){validateLabelWithExpertSlot(this,a)}validateOn(a){validateLinkCallbacks(this,a)}validateRole(a){validateAlternativeButtonLinkRole(this,a)}validateShortKey(a){validateShortKey(this,a),validateAccessAndShortKey(this._accessKey,a)}validateTabIndex(a){validateTabIndex(this,a)}validateTarget(a){validateLinkTarget(this,a)}validateTooltipAlign(a){validateTooltipAlign(this,a)}validateVariant(a){validateButtonVariant(this,a)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.validateVariant(this._variant),this.unsubscribeOnLocationChange=onLocationChange((a=>{this.state._ariaCurrent=a===this.state._href?this.state._ariaCurrentValue:void 0})),validateAccessAndShortKey(this._accessKey,this._shortKey)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_variant:["validateVariant"]}}},[4,"kol-link-wc",{_accessKey:[1,"_access-key"],_ariaCurrentValue:[1,"_aria-current-value"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaOwns:[1,"_aria-owns"],_customClass:[1,"_custom-class"],_disabled:[4],_download:[1],_hideLabel:[4,"_hide-label"],_href:[1],_icons:[1],_label:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_tabIndex:[2,"_tab-index"],_target:[1],_tooltipAlign:[1,"_tooltip-align"],_variant:[1],state:[32],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link-wc"].forEach((a=>{if("kol-link-wc"===a)customElements.get(a)||customElements.define(a,KolLinkWc$1)}))}const KolLinkWc=KolLinkWc$1,defineCustomElement=defineCustomElement$1;export{KolLinkWc,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{o as onLocationChange}from"./ariaCurrentService.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";import{n as nonce}from"./dev.utils2.js";import{c as KolIconTag,f as KolTooltipWcTag}from"./component-names.js";import{t as translate}from"./i18n2.js";import{v as validateAccessKey,a as validateAccessAndShortKey,b as validateShortKey,c as validateTabIndex}from"./access-and-short-key.js";import{c as clsx}from"./clsx.js";import{K as KolSpanFc}from"./Span.js";import{w as watchValidator,g as watchString,n as setEventTarget,q as devHint}from"./prop.validators.js";import{v as validateHref}from"./href.js";import{s as showExpertSlot}from"./reuse.js";import{v as validateAriaDescription,a as validateAriaExpanded,b as validateAlternativeButtonLinkRole,c as validateButtonVariant}from"./button-variant.js";import{v as validateCustomClass}from"./custom-class.js";import{v as validateDisabled}from"./disabled.js";import{v as validateHideLabel}from"./hide-label.js";import{v as validateIcons}from"./icons.js";import{a as validateLabelWithExpertSlot}from"./label.js";import{v as validateTooltipAlign}from"./tooltip-align.js";const ariaCurrentValuePropTypeOptions=["date","location","page","step","time","true","false"],validateAriaCurrentValue=(a,t)=>{watchValidator(a,"_ariaCurrentValue",(a=>"string"==typeof a&&ariaCurrentValuePropTypeOptions.includes(a)),new Set([`AriaCurrentValue {${ariaCurrentValuePropTypeOptions.join(", ")}`]),t,{defaultValue:"page"})},validateAriaOwns=(a,t)=>{watchString(a,"_ariaOwns",t,{defaultValue:void 0})},validateDownload=(a,t)=>{watchString(a,"_download",t)},validateLinkCallbacks=(a,t)=>{"object"==typeof t&&"function"==typeof(null==t?void 0:t.onClick)&&(a.state=Object.assign(Object.assign({},a.state),{_on:t}))},validateLinkTarget=(a,t)=>{watchString(a,"_target",t)},KolLinkWc$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.internalDescriptionById=nonce(),this.catchRef=a=>{this.anchorRef=a},this.onClick=a=>{var t,e;!0===this.state._disabled?a.preventDefault():("function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onClick)&&(a.preventDefault(),setEventTarget(a,this.anchorRef),null===(e=this.state._on)||void 0===e||e.onClick(a,this.state._href)),this.host&&dispatchDomEvent(this.host,KolEvent.click,this.state._href))},this.getRenderValues=()=>{const a="string"==typeof this.state._target&&"_self"!==this.state._target,t={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,download:"string"==typeof this.state._download?this.state._download:void 0};return!0!==this.state._hideLabel||this.state._label||devHint("[KolLink] An aria-label must be set when _hide-label is set."),{isExternal:a,tagAttrs:t}},this._accessKey=void 0,this._ariaCurrentValue=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaOwns=void 0,this._customClass=void 0,this._disabled=!1,this._download=void 0,this._hideLabel=!1,this._href=void 0,this._icons=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._tabIndex=void 0,this._target=void 0,this._tooltipAlign="right",this._variant="normal",this.state={_ariaCurrentValue:"page",_href:"",_icons:{}}}async kolFocus(){var a;null===(a=this.anchorRef)||void 0===a||a.focus()}render(){var a,t;const{isExternal:e,tagAttrs:i}=this.getRenderValues(),s=showExpertSlot(this.state._label),l=Boolean(null===(t=null===(a=this.state._ariaDescription)||void 0===a?void 0:a.trim())||void 0===t?void 0:t.length);return h(Host,{key:"587357d002a1ea7744990f5ce802f96af6baef5a"},h("a",Object.assign({key:"7f3fc17c83bbcfdc184b5edea97d25ce06f55227",ref:this.catchRef},i,{accessKey:this.state._accessKey,"aria-current":this.state._ariaCurrent,"aria-describedby":l?this.internalDescriptionById:void 0,"aria-disabled":this.state._disabled?"true":void 0,"aria-expanded":"boolean"==typeof this.state._ariaExpanded?String(this.state._ariaExpanded):void 0,"aria-owns":this.state._ariaOwns,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?`${this.state._label}${e?` (${translate("kol-open-link-in-tab")})`:""}`:void 0,class:clsx("kol-link",{"kol-link--disabled":!0===this.state._disabled,"kol-link--external-link":e,"kol-link--hide-label":!0===this.state._hideLabel,[`kol-link--${this.state._variant}`]:"button"===this.state._role&&"custom"!==this.state._variant,[this.state._customClass]:"custom"===this.state._variant&&"string"==typeof this.state._customClass&&this.state._customClass.length>0})},this.state._on,{onClick:this.onClick,onKeyPress:this.onClick,role:this.state._role,tabIndex:this.state._disabled?-1:this.state._tabIndex}),h(KolSpanFc,{key:"b806611a5bb089b415a07d55dd6c070c9703c886",class:"kol-link__text",badgeText:this.state._accessKey||this.state._shortKey,icons:this.state._icons,hideLabel:this.state._hideLabel,label:s?"":this.state._label||this.state._href},h("slot",{key:"5a40e834255ae54cf719dd51a521e92874c89c47",name:"expert",slot:"expert"})),e&&h(KolIconTag,{key:"f757a3dc5c051df590dc7048ae15a26e8c28ea8b",class:"kol-link__icon",_label:this.state._hideLabel?"":translate("kol-open-link-in-tab"),_icons:"codicon codicon-link-external","aria-hidden":this.state._hideLabel})),h(KolTooltipWcTag,{key:"1fd1e9b9fcae9a8505f29cc6962d742670d96f84","aria-hidden":"true",class:"kol-link__tooltip",hidden:s||!this.state._hideLabel,_badgeText:this.state._accessKey||this.state._shortKey,_align:this.state._tooltipAlign,_label:this.state._label||this.state._href}),l&&h("span",{key:"4d5d88f8b21c251476b31533e8c54318fd087b27",class:"visually-hidden",id:this.internalDescriptionById},this.state._ariaDescription))}validateAccessKey(a){validateAccessKey(this,a),validateAccessAndShortKey(a,this._shortKey)}validateAriaCurrentValue(a){validateAriaCurrentValue(this,a)}validateAriaDescription(a){validateAriaDescription(this,a)}validateAriaExpanded(a){validateAriaExpanded(this,a)}validateAriaOwns(a){validateAriaOwns(this,a)}validateCustomClass(a){validateCustomClass(this,a)}validateDisabled(a){validateDisabled(this,a)}validateDownload(a){validateDownload(this,a)}validateHideLabel(a){validateHideLabel(this,a)}validateHref(a){validateHref(this,a,{required:!0})}validateIcons(a){validateIcons(this,a)}validateLabel(a){validateLabelWithExpertSlot(this,a)}validateOn(a){validateLinkCallbacks(this,a)}validateRole(a){validateAlternativeButtonLinkRole(this,a)}validateShortKey(a){validateShortKey(this,a),validateAccessAndShortKey(this._accessKey,a)}validateTabIndex(a){validateTabIndex(this,a)}validateTarget(a){validateLinkTarget(this,a)}validateTooltipAlign(a){validateTooltipAlign(this,a)}validateVariant(a){validateButtonVariant(this,a)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateAriaDescription(this._ariaDescription),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaOwns(this._ariaOwns),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateDownload(this._download),this.validateHideLabel(this._hideLabel),this.validateHref(this._href),this.validateIcons(this._icons),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShortKey(this._shortKey),this.validateTabIndex(this._tabIndex),this.validateTarget(this._target),this.validateTooltipAlign(this._tooltipAlign),this.validateVariant(this._variant),this.unsubscribeOnLocationChange=onLocationChange((a=>{this.state._ariaCurrent=a===this.state._href?this.state._ariaCurrentValue:void 0})),validateAccessAndShortKey(this._accessKey,this._shortKey)}disconnectedCallback(){this.unsubscribeOnLocationChange&&this.unsubscribeOnLocationChange()}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_variant:["validateVariant"]}}},[4,"kol-link-wc",{_accessKey:[1,"_access-key"],_ariaCurrentValue:[1,"_aria-current-value"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaOwns:[1,"_aria-owns"],_customClass:[1,"_custom-class"],_disabled:[4],_download:[1],_hideLabel:[4,"_hide-label"],_href:[1],_icons:[1],_label:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_tabIndex:[2,"_tab-index"],_target:[1],_tooltipAlign:[1,"_tooltip-align"],_variant:[1],state:[32],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_ariaCurrentValue:["validateAriaCurrentValue"],_ariaDescription:["validateAriaDescription"],_ariaExpanded:["validateAriaExpanded"],_ariaOwns:["validateAriaOwns"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_download:["validateDownload"],_hideLabel:["validateHideLabel"],_href:["validateHref"],_icons:["validateIcons"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_shortKey:["validateShortKey"],_tabIndex:["validateTabIndex"],_target:["validateTarget"],_tooltipAlign:["validateTooltipAlign"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link-wc"].forEach((a=>{if("kol-link-wc"===a)customElements.get(a)||customElements.define(a,KolLinkWc$1)}))}const KolLinkWc=KolLinkWc$1,defineCustomElement=defineCustomElement$1;export{KolLinkWc,defineCustomElement};