@public-ui/components 3.0.2-4633c75bfe6e8436d102c316ead90b0a2b4974ef.0 → 3.0.2-4d9d73e6b2febbdb23cf92ad1926eb0ccb66d12c.0

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

@@ -1 +1 @@
-{"version":3,"names":["InputWrapperFc","_a","class","classNames","other","__rest","h","KolInputFc","Object","assign","clsx","type","RadioFc","inputProps","showMsg","checkHasMsg","msg","touched","cssVariants","checked","Boolean","disabled","required","_b","getRadioProps","state","ariaDescribedBy","getRenderStates","props","id","_id","hideLabel","_hideLabel","label","_label","value","_value","_disabled","name","_name","_required","_touched","convertMsgToInternMsg","_msg","RadioStateWrapper","KolRadioFc","defaultStyleCss","KolInputRadioDefaultStyle0","KolInputRadio","getValue","this","kolFocus","inputRef","focus","getFormFieldProps","component","formFieldLabelProps","formFieldInputProps","_orientation","tooltipAlign","_tooltipAlign","alert","showAsAlert","render","KolFormFieldStateWrapperFc","key","_options","map","option","index","renderOption","getOptionProps","obj","hint","fieldControlLabelProps","showBadge","getInputProps","selected","ref","catchRef","undefined","controller","onFacade","onChange","onClick","onInput","onKeyDown","bind","onFocus","event","inputHasFocus","onBlur","customId","KolFieldControlStateWrapperFc","KolRadioStateWrapperFc","constructor","hostRef","target","HTMLInputElement","getOptionByKey","code","propagateSubmitEventToForm","form","host","_hideMsg","nonce","InputRadioController","validateTooltipAlign","validateDisabled","validateHideLabel","validateHideMsg","validateHint","validateId","validateLabel","validateMsg","validateName","validateOn","validateOptions","validateOrientation","validateRequired","validateSyncValueBySelector","validateTouched","validateValue","componentWillLoad"],"sources":["src/functional-components/inputs/Radio/Radio.tsx","src/functional-component-wrappers/RadioStateWrapper/RadioStateWrapper.tsx","src/components/input-radio/style.scss?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/shadow.tsx"],"sourcesContent":["import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\nimport KolInputFc, { type InputProps } from '../Input';\nimport { checkHasMsg } from '../../../schema';\n\nexport type RadioProps = JSXBase.HTMLAttributes<HTMLLabelElement> & {\n\tinputProps: InputProps;\n};\n\nconst InputWrapperFc: FC<InputProps> = ({ class: classNames, ...other }) => {\n\treturn <KolInputFc class={clsx('kol-input-radio__input', classNames)} {...other} type=\"radio\" />;\n};\n\nconst RadioFc: FC<RadioProps> = ({ class: classNames, inputProps, ...other }) => {\n\tconst showMsg = checkHasMsg(inputProps?.msg, inputProps?.touched);\n\n\tconst cssVariants = {\n\t\t['kol-input-radio--checked']: inputProps?.checked,\n\t\t['kol-input-radio--disabled']: Boolean(inputProps?.disabled),\n\t\t['kol-input-radio--required']: Boolean(inputProps?.required),\n\t\t['kol-input-radio--touched']: Boolean(inputProps?.touched),\n\t\t[`kol-input-radio--${inputProps?.msg?.type || 'error'}`]: Boolean(showMsg),\n\t};\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/label-has-associated-control\n\t\t<label class={clsx('kol-input-radio', cssVariants, classNames)} {...other}>\n\t\t\t<InputWrapperFc {...inputProps} />\n\t\t</label>\n\t);\n};\n\nexport default RadioFc;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport KolRadioFc, { type RadioProps } from '../../functional-components/inputs/Radio';\nimport { type InputProps } from '../../functional-components/inputs/Input';\n\nimport { type InputRadioStates, convertMsgToInternMsg } from '../../schema';\nimport { getRenderStates } from '../_helpers/getRenderStates';\n\nexport type RadioStateWrapperProps = Omit<RadioProps, 'inputProps'> & {\n\tstate: InputRadioStates;\n\tinputProps?: Partial<InputProps>;\n};\n\nfunction getRadioProps(state: InputRadioStates, inputProps: Partial<InputProps> = {}): InputProps {\n\tconst { ariaDescribedBy } = getRenderStates(state);\n\n\tconst props: InputProps = {\n\t\tid: state._id,\n\t\thideLabel: state._hideLabel,\n\t\tlabel: state._label,\n\t\tvalue: state._value as string | number | string[] | undefined,\n\t\tdisabled: state._disabled,\n\t\tname: state._name,\n\t\tariaDescribedBy,\n\t};\n\n\tif ('_required' in state) props.required = state._required;\n\tif ('_touched' in state) props.touched = state._touched;\n\tif ('_msg' in state) props.msg = convertMsgToInternMsg(state._msg);\n\n\treturn { ...props, ...inputProps };\n}\n\nconst RadioStateWrapper: FC<RadioStateWrapperProps> = ({ state, inputProps, ...other }) => {\n\treturn <KolRadioFc inputProps={getRadioProps(state, inputProps)} {...other} />;\n};\n\nexport default RadioStateWrapper;\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-field-control-mixin' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n\n@include kol-alert;\n@include kol-field-control;\n@include kol-form-field;\n@include kol-input-container;\n\n@layer kol-component {\n\t.kol-form-field {\n\t\t--border-width: 2px;\n\t\t--input-size: 1.5em;\n\n\t\t&__label {\n\t\t\tdisplay: contents;\n\t\t}\n\n\t\t&__input {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\n\t\t\t&--orientation-horizontal {\n\t\t\t\tflex-direction: row;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\talign-items: flex-start;\n\t\t\t}\n\t\t}\n\n\t\t&--disabled {\n\t\t\topacity: unset;\n\t\t}\n\t}\n\n\t.kol-input-radio {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tcursor: pointer;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\n\t\t&__input {\n\t\t\tappearance: none;\n\t\t\tborder-width: var(--border-width);\n\t\t\tborder-style: solid;\n\t\t\tborder-radius: 100%;\n\t\t\tcursor: pointer;\n\t\t\tdisplay: flex;\n\t\t\theight: var(--input-size);\n\t\t\tmargin: 0;\n\t\t\tmin-height: var(--input-size);\n\t\t\tmin-width: var(--input-size);\n\t\t\tpadding: 0;\n\t\t\twidth: var(--input-size);\n\n\t\t\t&:before {\n\t\t\t\tborder-radius: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tmargin: auto;\n\t\t\t\theight: calc(var(--input-size) / 2);\n\t\t\t\twidth: calc(var(--input-size) / 2);\n\t\t\t}\n\n\t\t\t&:checked {\n\t\t\t\t&:before {\n\t\t\t\t\tbackground-color: #000;\n\n\t\t\t\t\t@media (forced-colors: active) {\n\t\t\t\t\t\t/* Give it a visible background in forced colors mode */\n\t\t\t\t\t\tbackground-color: selectedItem !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:disabled {\n\t\t\t\topacity: 0.5;\n\t\t\t\tcursor: not-allowed;\n\t\t\t}\n\t\t}\n\n\t\t&--disabled {\n\t\t\tcursor: not-allowed;\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\tIdPropType,\n\tInputRadioAPI,\n\tInputRadioStates,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tRadioOption,\n\tRadioOptionsPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { InputRadioController } from './controller';\nimport { propagateSubmitEventToForm } from '../form/controller';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolFieldControlStateWrapperFc, { type FieldControlStateWrapperProps } from '../../functional-component-wrappers/FieldControlStateWrapper';\nimport KolRadioStateWrapperFc, { type RadioStateWrapperProps } from '../../functional-component-wrappers/RadioStateWrapper';\nimport type { OrientationPropType } from '../../schema/props/orientation';\n\n/**\n * @slot - Die Legende/Überschrift der Radiobuttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputRadio implements InputRadioAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\tprivate inputRef?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._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\tcomponent: 'fieldset',\n\t\t\tclass: clsx('kol-form-field--radio'),\n\t\t\tformFieldLabelProps: {\n\t\t\t\tcomponent: 'legend',\n\t\t\t\tclass: 'kol-form-field__label--legend',\n\t\t\t},\n\t\t\tformFieldInputProps: {\n\t\t\t\tclass: `kol-form-field__input--orientation-${this.state._orientation}`,\n\t\t\t},\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t\thideLabel: false,\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{this.state._options.map((option, index) => this.renderOption(option, index))}\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate getOptionProps(option: RadioOption<StencilUnknown>, id: string): FieldControlStateWrapperProps {\n\t\tconst obj: FieldControlStateWrapperProps = {\n\t\t\tstate: this.state,\n\t\t\tid: id,\n\t\t\thint: option.hint,\n\t\t\tlabel: option.label as string,\n\t\t\trequired: false,\n\t\t\tfieldControlLabelProps: {\n\t\t\t\tshowBadge: false,\n\t\t\t},\n\t\t};\n\n\t\tif (option.disabled) {\n\t\t\tobj.disabled = true;\n\t\t}\n\n\t\treturn obj;\n\t}\n\n\tprivate getInputProps(option: RadioOption<StencilUnknown>, id: string, index: number, selected: boolean): RadioStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tinputProps: {\n\t\t\t\tid: id,\n\t\t\t\tref: this.state._value === option.value ? this.catchRef : undefined,\n\t\t\t\t'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined,\n\t\t\t\ttype: 'radio',\n\t\t\t\tname: this.state._name || this.state._id,\n\t\t\t\tvalue: `-${index}`,\n\t\t\t\tchecked: selected,\n\t\t\t\tdisabled: option.disabled,\n\n\t\t\t\t...this.controller.onFacade,\n\t\t\t\tonChange: this.onChange,\n\t\t\t\tonClick: undefined, // onClick is not needed since onChange already triggers the correct event\n\t\t\t\tonInput: this.onInput,\n\t\t\t\tonKeyDown: this.onKeyDown.bind(this),\n\t\t\t\tonFocus: (event: Event) => {\n\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t},\n\t\t\t\tonBlur: (event: Event) => {\n\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate renderOption(option: RadioOption<StencilUnknown>, index: number): JSX.Element {\n\t\tconst customId = `${this.state._id}-${index}`;\n\t\tconst selected = this.state._value === option.value;\n\n\t\treturn (\n\t\t\t<KolFieldControlStateWrapperFc key={customId} {...this.getOptionProps(option, customId)}>\n\t\t\t\t<KolRadioStateWrapperFc {...this.getInputProps(option, customId, index, selected)} />\n\t\t\t</KolFieldControlStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\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 internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options?: RadioOptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType = 'vertical';\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 * 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 * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value: StencilUnknown = null;\n\n\t@State() public state: InputRadioStates = {\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tthis.controller.validateTooltipAlign(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('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(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('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: RadioOptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\tthis.controller.validateOrientation(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('_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: StencilUnknown): 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\tprivate onInput = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.onFacade.onInput(event, true, option.value);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.onFacade.onChange(event, option.value);\n\n\t\t\t\tthis._value = option.value;\n\t\t\t}\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.inputRef,\n\t\t\t});\n\t\t}\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["InputWrapperFc","_a","class","classNames","other","__rest","h","KolInputFc","Object","assign","clsx","type","RadioFc","inputProps","showMsg","checkHasMsg","msg","touched","cssVariants","checked","Boolean","disabled","required","_b","getRadioProps","state","ariaDescribedBy","getRenderStates","props","id","_id","hideLabel","_hideLabel","label","_label","value","_value","_disabled","name","_name","_required","_touched","convertMsgToInternMsg","_msg","RadioStateWrapper","KolRadioFc","defaultStyleCss","KolInputRadio","getValue","this","kolFocus","inputRef","focus","getFormFieldProps","component","formFieldLabelProps","formFieldInputProps","_orientation","tooltipAlign","_tooltipAlign","alert","showAsAlert","render","KolFormFieldStateWrapperFc","key","_options","map","option","index","renderOption","getOptionProps","obj","hint","fieldControlLabelProps","showBadge","getInputProps","selected","ref","catchRef","undefined","controller","onFacade","onChange","onClick","onInput","onKeyDown","bind","onFocus","event","inputHasFocus","onBlur","customId","KolFieldControlStateWrapperFc","KolRadioStateWrapperFc","constructor","hostRef","_hideMsg","_hint","nonce","target","HTMLInputElement","getOptionByKey","code","propagateSubmitEventToForm","form","host","InputRadioController","validateTooltipAlign","validateDisabled","validateHideLabel","validateHideMsg","validateHint","validateId","validateLabel","validateMsg","validateName","validateOn","validateOptions","validateOrientation","validateRequired","validateSyncValueBySelector","validateTouched","validateValue","componentWillLoad"],"sources":["src/functional-components/inputs/Radio/Radio.tsx","src/functional-component-wrappers/RadioStateWrapper/RadioStateWrapper.tsx","src/components/input-radio/style.scss?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/shadow.tsx"],"sourcesContent":["import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\nimport KolInputFc, { type InputProps } from '../Input';\nimport { checkHasMsg } from '../../../schema';\n\nexport type RadioProps = JSXBase.HTMLAttributes<HTMLLabelElement> & {\n\tinputProps: InputProps;\n};\n\nconst InputWrapperFc: FC<InputProps> = ({ class: classNames, ...other }) => {\n\treturn <KolInputFc class={clsx('kol-input-radio__input', classNames)} {...other} type=\"radio\" />;\n};\n\nconst RadioFc: FC<RadioProps> = ({ class: classNames, inputProps, ...other }) => {\n\tconst showMsg = checkHasMsg(inputProps?.msg, inputProps?.touched);\n\n\tconst cssVariants = {\n\t\t['kol-input-radio--checked']: inputProps?.checked,\n\t\t['kol-input-radio--disabled']: Boolean(inputProps?.disabled),\n\t\t['kol-input-radio--required']: Boolean(inputProps?.required),\n\t\t['kol-input-radio--touched']: Boolean(inputProps?.touched),\n\t\t[`kol-input-radio--${inputProps?.msg?.type || 'error'}`]: Boolean(showMsg),\n\t};\n\n\treturn (\n\t\t// eslint-disable-next-line jsx-a11y/label-has-associated-control\n\t\t<label class={clsx('kol-input-radio', cssVariants, classNames)} {...other}>\n\t\t\t<InputWrapperFc {...inputProps} />\n\t\t</label>\n\t);\n};\n\nexport default RadioFc;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport KolRadioFc, { type RadioProps } from '../../functional-components/inputs/Radio';\nimport { type InputProps } from '../../functional-components/inputs/Input';\n\nimport { type InputRadioStates, convertMsgToInternMsg } from '../../schema';\nimport { getRenderStates } from '../_helpers/getRenderStates';\n\nexport type RadioStateWrapperProps = Omit<RadioProps, 'inputProps'> & {\n\tstate: InputRadioStates;\n\tinputProps?: Partial<InputProps>;\n};\n\nfunction getRadioProps(state: InputRadioStates, inputProps: Partial<InputProps> = {}): InputProps {\n\tconst { ariaDescribedBy } = getRenderStates(state);\n\n\tconst props: InputProps = {\n\t\tid: state._id,\n\t\thideLabel: state._hideLabel,\n\t\tlabel: state._label,\n\t\tvalue: state._value as string | number | string[] | undefined,\n\t\tdisabled: state._disabled,\n\t\tname: state._name,\n\t\tariaDescribedBy,\n\t};\n\n\tif ('_required' in state) props.required = state._required;\n\tif ('_touched' in state) props.touched = state._touched;\n\tif ('_msg' in state) props.msg = convertMsgToInternMsg(state._msg);\n\n\treturn { ...props, ...inputProps };\n}\n\nconst RadioStateWrapper: FC<RadioStateWrapperProps> = ({ state, inputProps, ...other }) => {\n\treturn <KolRadioFc inputProps={getRadioProps(state, inputProps)} {...other} />;\n};\n\nexport default RadioStateWrapper;\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-field-control-mixin' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n\n@include kol-alert;\n@include kol-field-control;\n@include kol-form-field;\n@include kol-input-container;\n\n@layer kol-component {\n\t.kol-form-field {\n\t\t--border-width: 2px;\n\t\t--input-size: 1.5em;\n\n\t\t&__label {\n\t\t\tdisplay: contents;\n\t\t}\n\n\t\t&__input {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\n\t\t\t&--orientation-horizontal {\n\t\t\t\tflex-direction: row;\n\t\t\t\tflex-wrap: wrap;\n\t\t\t\talign-items: flex-start;\n\t\t\t}\n\t\t}\n\n\t\t&--disabled {\n\t\t\topacity: unset;\n\t\t}\n\t}\n\n\t.kol-input-radio {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tcursor: pointer;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: var(--a11y-min-size);\n\t\theight: var(--a11y-min-size);\n\n\t\t&__input {\n\t\t\tappearance: none;\n\t\t\tborder-width: var(--border-width);\n\t\t\tborder-style: solid;\n\t\t\tborder-radius: 100%;\n\t\t\tcursor: pointer;\n\t\t\tdisplay: flex;\n\t\t\theight: var(--input-size);\n\t\t\tmargin: 0;\n\t\t\tmin-height: var(--input-size);\n\t\t\tmin-width: var(--input-size);\n\t\t\tpadding: 0;\n\t\t\twidth: var(--input-size);\n\n\t\t\t&:before {\n\t\t\t\tborder-radius: 100%;\n\t\t\t\tcontent: '';\n\t\t\t\tmargin: auto;\n\t\t\t\theight: calc(var(--input-size) / 2);\n\t\t\t\twidth: calc(var(--input-size) / 2);\n\t\t\t}\n\n\t\t\t&:checked {\n\t\t\t\t&:before {\n\t\t\t\t\tbackground-color: #000;\n\n\t\t\t\t\t@media (forced-colors: active) {\n\t\t\t\t\t\t/* Give it a visible background in forced colors mode */\n\t\t\t\t\t\tbackground-color: selectedItem !important;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&:disabled {\n\t\t\t\topacity: 0.5;\n\t\t\t\tcursor: not-allowed;\n\t\t\t}\n\t\t}\n\n\t\t&--disabled {\n\t\t\tcursor: not-allowed;\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\tIdPropType,\n\tInputRadioAPI,\n\tInputRadioStates,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tRadioOption,\n\tRadioOptionsPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tDisabledPropType,\n\tHideLabelPropType,\n\tHintPropType,\n} from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { InputRadioController } from './controller';\nimport { propagateSubmitEventToForm } from '../form/controller';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolFieldControlStateWrapperFc, {\n\ttype FieldControlStateWrapperProps,\n} from '../../functional-component-wrappers/FieldControlStateWrapper/FieldControlStateWrapper';\nimport KolRadioStateWrapperFc, { type RadioStateWrapperProps } from '../../functional-component-wrappers/RadioStateWrapper/RadioStateWrapper';\nimport type { OrientationPropType } from '../../schema/props/orientation';\n\n/**\n * @slot - Die Legende/Überschrift der Radiobuttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolInputRadio implements InputRadioAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\tprivate inputRef?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.inputRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._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\tcomponent: 'fieldset',\n\t\t\tclass: clsx('kol-form-field--radio'),\n\t\t\tformFieldLabelProps: {\n\t\t\t\tcomponent: 'legend',\n\t\t\t\tclass: 'kol-form-field__label--legend',\n\t\t\t},\n\t\t\tformFieldInputProps: {\n\t\t\t\tclass: `kol-form-field__input--orientation-${this.state._orientation}`,\n\t\t\t},\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\talert: this.showAsAlert(),\n\t\t\thideLabel: false,\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{this.state._options.map((option, index) => this.renderOption(option, index))}\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate getOptionProps(option: RadioOption<StencilUnknown>, id: string): FieldControlStateWrapperProps {\n\t\tconst obj: FieldControlStateWrapperProps = {\n\t\t\tstate: this.state,\n\t\t\tid: id,\n\t\t\thint: option.hint,\n\t\t\tlabel: option.label as string,\n\t\t\trequired: false,\n\t\t\tfieldControlLabelProps: {\n\t\t\t\tshowBadge: false,\n\t\t\t},\n\t\t};\n\n\t\tif (option.disabled) {\n\t\t\tobj.disabled = true;\n\t\t}\n\n\t\treturn obj;\n\t}\n\n\tprivate getInputProps(option: RadioOption<StencilUnknown>, id: string, index: number, selected: boolean): RadioStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tinputProps: {\n\t\t\t\tid: id,\n\t\t\t\tref: this.state._value === option.value ? this.catchRef : undefined,\n\t\t\t\t'aria-label': this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined,\n\t\t\t\ttype: 'radio',\n\t\t\t\tname: this.state._name || this.state._id,\n\t\t\t\tvalue: `-${index}`,\n\t\t\t\tchecked: selected,\n\t\t\t\tdisabled: option.disabled,\n\n\t\t\t\t...this.controller.onFacade,\n\t\t\t\tonChange: this.onChange,\n\t\t\t\tonClick: undefined, // onClick is not needed since onChange already triggers the correct event\n\t\t\t\tonInput: this.onInput,\n\t\t\t\tonKeyDown: this.onKeyDown.bind(this),\n\t\t\t\tonFocus: (event: Event) => {\n\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t},\n\t\t\t\tonBlur: (event: Event) => {\n\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t}\n\n\tprivate renderOption(option: RadioOption<StencilUnknown>, index: number): JSX.Element {\n\t\tconst customId = `${this.state._id}-${index}`;\n\t\tconst selected = this.state._value === option.value;\n\n\t\treturn (\n\t\t\t<KolFieldControlStateWrapperFc key={customId} {...this.getOptionProps(option, customId)}>\n\t\t\t\t<KolRadioStateWrapperFc {...this.getInputProps(option, customId, index, selected)} />\n\t\t\t</KolFieldControlStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\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 internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options?: RadioOptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: OrientationPropType = 'vertical';\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 * 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 * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value: StencilUnknown = null;\n\n\t@State() public state: InputRadioStates = {\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_tooltipAlign')\n\tpublic validateTooltipAlign(value?: TooltipAlignPropType): void {\n\t\tthis.controller.validateTooltipAlign(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(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('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: RadioOptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: OrientationPropType): void {\n\t\tthis.controller.validateOrientation(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('_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: StencilUnknown): 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\tprivate onInput = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.onFacade.onInput(event, true, option.value);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.onFacade.onChange(event, option.value);\n\n\t\t\t\tthis._value = option.value;\n\t\t\t}\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.inputRef,\n\t\t\t});\n\t\t}\n\t};\n}\n"],"mappings":";;;0gCAUA,MAAMA,EAAkCC,I,IAAEC,MAAOC,GAAUF,EAAKG,EAAKC,EAAAJ,EAA7B,WACvC,OAAOK,EAACC,EAAUC,OAAAC,OAAA,CAACP,MAAOQ,EAAK,yBAA0BP,IAAiBC,EAAK,CAAEO,KAAK,UAAU,EAGjG,MAAMC,EAA2BX,I,UAAEC,MAAOC,EAAUU,WAAEA,GAAUZ,EAAKG,EAApCC,EAAAJ,EAAA,wBAChC,MAAMa,EAAUC,EAAYF,IAAA,MAAAA,SAAU,SAAVA,EAAYG,IAAKH,IAAU,MAAVA,SAAU,SAAVA,EAAYI,SAEzD,MAAMC,EAAc,CACnB,CAAC,4BAA6BL,IAAU,MAAVA,SAAU,SAAVA,EAAYM,QAC1C,CAAC,6BAA8BC,QAAQP,IAAA,MAAAA,SAAA,SAAAA,EAAYQ,UACnD,CAAC,6BAA8BD,QAAQP,IAAA,MAAAA,SAAA,SAAAA,EAAYS,UACnD,CAAC,4BAA6BF,QAAQP,IAAA,MAAAA,SAAA,SAAAA,EAAYI,SAClD,CAAC,sBAAoBM,EAAAV,IAAU,MAAVA,SAAU,SAAVA,EAAYG,OAAG,MAAAO,SAAA,SAAAA,EAAEZ,OAAQ,WAAYS,QAAQN,IAGnE,OAECR,EAAA,QAAAE,OAAAC,OAAA,CAAOP,MAAOQ,EAAK,kBAAmBQ,EAAaf,IAAiBC,GACnEE,EAACN,EAAmBQ,OAAAC,OAAA,GAAAI,IACb,ECjBV,SAASW,EAAcC,EAAyBZ,EAAkC,IACjF,MAAMa,gBAAEA,GAAoBC,EAAgBF,GAE5C,MAAMG,EAAoB,CACzBC,GAAIJ,EAAMK,IACVC,UAAWN,EAAMO,WACjBC,MAAOR,EAAMS,OACbC,MAAOV,EAAMW,OACbf,SAAUI,EAAMY,UAChBC,KAAMb,EAAMc,MACZb,mBAGD,GAAI,cAAeD,EAAOG,EAAMN,SAAWG,EAAMe,UACjD,GAAI,aAAcf,EAAOG,EAAMX,QAAUQ,EAAMgB,SAC/C,GAAI,SAAUhB,EAAOG,EAAMZ,IAAM0B,EAAsBjB,EAAMkB,MAE7D,OAAYnC,OAAAC,OAAAD,OAAAC,OAAA,GAAAmB,GAAUf,EACvB,CAEA,MAAM+B,EAAiD3C,I,IAAAwB,MAAEA,EAAKZ,WAAEA,GAAUZ,EAAKG,EAAKC,EAAAJ,EAA7B,wBACtD,OAAOK,EAACuC,EAAWrC,OAAAC,OAAA,CAAAI,WAAYW,EAAcC,EAAOZ,IAAiBT,GAAS,ECjC/E,MAAM0C,EAAkB,wiV,MCgDXC,EAAa,MAUlB,cAAMC,GACZ,OAAOC,KAAKb,M,CAKN,cAAMc,G,OACZjD,EAAAgD,KAAKE,YAAU,MAAAlD,SAAA,SAAAA,EAAAmD,O,CAGR,iBAAAC,GACP,MAAO,CACN5B,MAAOwB,KAAKxB,MACZ6B,UAAW,WACXpD,MAAOQ,EAAK,yBACZ6C,oBAAqB,CACpBD,UAAW,SACXpD,MAAO,iCAERsD,oBAAqB,CACpBtD,MAAO,sCAAsC+C,KAAKxB,MAAMgC,gBAEzDC,aAAcT,KAAKU,cACnBC,MAAOX,KAAKY,cACZ9B,UAAW,M,CAIN,MAAA+B,GACN,OACCxD,EAACyD,EAA0BvD,OAAAC,OAAA,CAAAuD,IAAA,4CAAKf,KAAKI,qBACnCJ,KAAKxB,MAAMwC,SAASC,KAAI,CAACC,EAAQC,IAAUnB,KAAKoB,aAAaF,EAAQC,K,CAKjE,cAAAE,CAAeH,EAAqCtC,GAC3D,MAAM0C,EAAqC,CAC1C9C,MAAOwB,KAAKxB,MACZI,GAAIA,EACJ2C,KAAML,EAAOK,KACbvC,MAAOkC,EAAOlC,MACdX,SAAU,MACVmD,uBAAwB,CACvBC,UAAW,QAIb,GAAIP,EAAO9C,SAAU,CACpBkD,EAAIlD,SAAW,I,CAGhB,OAAOkD,C,CAGA,aAAAI,CAAcR,EAAqCtC,EAAYuC,EAAeQ,GACrF,MAAO,CACNnD,MAAOwB,KAAKxB,MACZZ,WACCL,OAAAC,OAAAD,OAAAC,OAAA,CAAAoB,GAAIA,EACJgD,IAAK5B,KAAKxB,MAAMW,SAAW+B,EAAOhC,MAAQc,KAAK6B,SAAWC,UAC1D,aAAc9B,KAAKxB,MAAMO,mBAAqBmC,EAAOlC,QAAU,SAAWkC,EAAOlC,MAAQ8C,UACzFpE,KAAM,QACN2B,KAAMW,KAAKxB,MAAMc,OAASU,KAAKxB,MAAMK,IACrCK,MAAO,IAAIiC,IACXjD,QAASyD,EACTvD,SAAU8C,EAAO9C,UAEd4B,KAAK+B,WAAWC,UAAQ,CAC3BC,SAAUjC,KAAKiC,SACfC,QAASJ,UACTK,QAASnC,KAAKmC,QACdC,UAAWpC,KAAKoC,UAAUC,KAAKrC,MAC/BsC,QAAUC,IACTvC,KAAK+B,WAAWC,SAASM,QAAQC,GACjCvC,KAAKwC,cAAgB,IAAI,EAE1BC,OAASF,IACRvC,KAAK+B,WAAWC,SAASS,OAAOF,GAChCvC,KAAKwC,cAAgB,KAAK,I,CAMtB,YAAApB,CAAaF,EAAqCC,GACzD,MAAMuB,EAAW,GAAG1C,KAAKxB,MAAMK,OAAOsC,IACtC,MAAMQ,EAAW3B,KAAKxB,MAAMW,SAAW+B,EAAOhC,MAE9C,OACC7B,EAACsF,EAA6BpF,OAAAC,OAAA,CAACuD,IAAK2B,GAAc1C,KAAKqB,eAAeH,EAAQwB,IAC7ErF,EAACuF,EAA2BrF,OAAAC,OAAA,GAAAwC,KAAK0B,cAAcR,EAAQwB,EAAUvB,EAAOQ,K,CAyG3E,WAAAkB,CAAAC,G,UA1MiB9C,KAAA6B,SAAYD,IAC5B5B,KAAKE,SAAW0B,CAAG,EA2GL5B,KAASZ,UAAa,MAMUY,KAAQ+C,SAAa,MAOrD/C,KAAUjB,WAAa,MAKvBiB,KAAKgD,MAAY,GAmCjBhD,KAAYQ,aAAyB,WAMrCR,KAAST,UAAa,MAWtBS,KAAaU,cAA0B,MAMPV,KAAQR,SAAa,MAMrBQ,KAAMb,OAAmB,KAExDa,KAAAxB,MAA0B,CACzCuE,SAAU,MACVlE,IAAK,MAAMoE,MACXhE,OAAQ,GACR+B,SAAU,GACVR,aAAc,YAGER,KAAawC,cAAG,MA+FzBxC,KAAAmC,QAAWI,IAClB,GAAIA,EAAMW,kBAAkBC,iBAAkB,CAC7C,MAAMjC,EAASlB,KAAK+B,WAAWqB,eAAeb,EAAMW,OAAOhE,OAC3D,GAAIgC,IAAWY,UAAW,CACzB9B,KAAK+B,WAAWC,SAASG,QAAQI,EAAO,KAAMrB,EAAOhC,M,IAKhDc,KAAAiC,SAAYM,IACnB,GAAIA,EAAMW,kBAAkBC,iBAAkB,CAC7C,MAAMjC,EAASlB,KAAK+B,WAAWqB,eAAeb,EAAMW,OAAOhE,OAC3D,GAAIgC,IAAWY,UAAW,CACzB9B,KAAK+B,WAAWC,SAASC,SAASM,EAAOrB,EAAOhC,OAEhDc,KAAKb,OAAS+B,EAAOhC,K,IAKPc,KAAAoC,UAAaG,IAC7B,GAAIA,EAAMc,OAAS,SAAWd,EAAMc,OAAS,cAAe,CAC3DC,EAA2B,CAC1BC,KAAMvD,KAAKwD,M,GAnHbxD,KAAK+B,WAAa,IAAI0B,EAAqBzD,KAAM,QAASA,KAAKwD,KAC/D,CAEO,WAAA5C,GACP,OAAOzC,QAAQ6B,KAAKxB,MAAMgB,YAAcQ,KAAKwC,a,CAIvC,oBAAAkB,CAAqBxE,GAC3Bc,KAAK+B,WAAW2B,qBAAqBxE,E,CAI/B,gBAAAyE,CAAiBzE,GACvBc,KAAK+B,WAAW4B,iBAAiBzE,E,CAI3B,iBAAA0E,CAAkB1E,GACxBc,KAAK+B,WAAW6B,kBAAkB1E,E,CAI5B,eAAA2E,CAAgB3E,GACtBc,KAAK+B,WAAW8B,gBAAgB3E,E,CAI1B,YAAA4E,CAAa5E,GACnBc,KAAK+B,WAAW+B,aAAa5E,E,CAIvB,UAAA6E,CAAW7E,GACjBc,KAAK+B,WAAWgC,WAAW7E,E,CAIrB,aAAA8E,CAAc9E,GACpBc,KAAK+B,WAAWiC,cAAc9E,E,CAIxB,WAAA+E,CAAY/E,GAClBc,KAAK+B,WAAWkC,YAAY/E,E,CAItB,YAAAgF,CAAahF,GACnBc,KAAK+B,WAAWmC,aAAahF,E,CAIvB,UAAAiF,CAAWjF,GACjBc,KAAK+B,WAAWoC,WAAWjF,E,CAIrB,eAAAkF,CAAgBlF,GACtBc,KAAK+B,WAAWqC,gBAAgBlF,E,CAI1B,mBAAAmF,CAAoBnF,GAC1Bc,KAAK+B,WAAWsC,oBAAoBnF,E,CAI9B,gBAAAoF,CAAiBpF,GACvBc,KAAK+B,WAAWuC,iBAAiBpF,E,CAI3B,2BAAAqF,CAA4BrF,GAClCc,KAAK+B,WAAWwC,4BAA4BrF,E,CAItC,eAAAsF,CAAgBtF,GACtBc,KAAK+B,WAAWyC,gBAAgBtF,E,CAI1B,aAAAuF,CAAcvF,GACpBc,KAAK+B,WAAW0C,cAAcvF,E,CAGxB,iBAAAwF,GACN1E,KAAKR,SAAWQ,KAAKR,WAAa,KAClCQ,KAAK+B,WAAW2C,mB","ignoreList":[]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"kol-input-range.entry.esm.js","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 { AutoCompletePropType, InputRangeProps, InputRangeWatches, NumberString, SuggestionsPropType } from '../../schema';\nimport { validateSuggestions } from '../../schema';\nimport { validateAutoComplete } from '../../schema/props/auto-complete';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\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?: AutoCompletePropType): void {\n\t\tvalidateAutoComplete(this.component, value);\n\t}\n\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.validateNumber('_max', value);\n\t}\n\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.validateNumber('_min', value);\n\t}\n\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.validateNumber('_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 | NumberString): void {\n\t\tthis.validateNumber('_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: to-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\tbackground-color: #000;\n\t\t\t\t\theight: to-rem(20);\n\t\t\t\t\twidth: to-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\tbackground-color: #000;\n\t\t\t\t\theight: to-rem(20);\n\t\t\t\t\twidth: to-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\tAutoCompletePropType,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tNumberString,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tDisabledPropType,\n\tHideLabelPropType,\n\tHintPropType,\n} from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/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/**\n\t * Map the value to the initial format. E.g., if the user provided a string initially, return a string.\n\t */\n\tprivate remapValue(value: number): number | NumberString {\n\t\tif (this._initialValueType === 'NumberString') {\n\t\t\treturn String(value) as NumberString;\n\t\t}\n\t\treturn value;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<number | NumberString | undefined> {\n\t\tif (this.refInputNumber !== undefined) {\n\t\t\tconst value = this.refInputNumber.value;\n\t\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\t\treturn this.remapValue(floatValue);\n\t\t}\n\t}\n\n\tprivate readonly onInput = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tthis.controller.onFacade.onInput(event, true, this.remapValue(floatValue));\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\tconst remappedValue = this.remapValue(floatValue);\n\t\tthis.validateValue(remappedValue);\n\t\tthis.controller.onFacade.onChange(event, remappedValue);\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\tonInput: this.onInput,\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\tprivate setInitialValueType(value?: number | NumberString) {\n\t\tif (this.controller.isNumberString(value)) {\n\t\t\tthis._initialValueType = 'NumberString';\n\t\t} else {\n\t\t\tthis._initialValueType = 'number';\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).length}ch + 2em)`,\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?: AutoCompletePropType = 'off';\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 | NumberString = 100;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number | NumberString = 0;\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 | NumberString;\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 | NumberString;\n\n\t@State() public state: InputRangeStates = {\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_min: 0,\n\t\t_max: 100,\n\t};\n\t@State() private _initialValueType: 'number' | 'NumberString' = 'number';\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?: AutoCompletePropType): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): 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?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): 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 | NumberString): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number | NumberString): 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 | NumberString): 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 | NumberString): void {\n\t\tthis.controller.validateValue(value);\n\t\tif (value !== undefined) {\n\t\t\tthis.setInitialValueType(value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tif (this._value !== undefined) {\n\t\t\tthis.setInitialValueType(this._value);\n\t\t}\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"names":["KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc","KolSuggestionsFc"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,r as t,g as e}from"./index-3309536d.js";import{_ as i}from"./tslib.es6-1173d062.js";import{c as o}from"./clsx-09a06a12.js";import{n as a}from"./dev.utils-a094a355.js";import{p as s}from"./controller-235b6c3b.js";import{F as r}from"./getRenderStates-65321bc2.js";import{I as l,S as d}from"./InputStateWrapper-6a2151b0.js";import{I as h,a as c}from"./controller-icon-0e724fd0.js";import{w as u}from"./index-ebe5a881.js";import{v as p}from"./suggestions-198125b7.js";import"./component-names-0657b355.js";import"./events-bad0a075.js";import"./associated.controller-4237c28d.js";import"./bootstrap-53ed580c.js";import"./i18n-45224cc3.js";import"./access-and-short-key-f743a5c4.js";import"./tooltip-align-465a8590.js";import"./align-d2572387.js";import"./hide-label-8b3a8709.js";import"./label-bf9966d0.js";import"./Alert-ade6062d.js";import"./i18n-260f0fe9.js";import"./bem-e4c3a2e6.js";import"./browser-f629a56a.js";import"./Heading-2e6ec8e7.js";import"./InternalUnderlinedBadgeText-d999ca8e.js";import"./isArray-7a60fa7f.js";import"./Input-108e0727.js";import"./Icon-352464b0.js";import"./isObject-ffcbbb76.js";import"./icons-a9c52ed8.js";class m extends h{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){u(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateMax(t){this.validateNumber("_max",t)}validateMin(t){this.validateNumber("_min",t)}validateStep(t){this.validateNumber("_step",t)}validateSuggestions(t){p(this.component,t)}validateValue(t){this.validateNumber("_value",t),this.component._value=t,this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const f="/*\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  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * 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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    font-size: rem(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  .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  .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    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  }\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    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input-range__inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--range {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: 1px solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    padding: 0;\n    margin: 0;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb {\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: 20px;\n    -webkit-appearance: none;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n    cursor: pointer;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: 1px solid currentColor;\n    }\n  }\n  .kol-input-range__input--range::-moz-range-thumb {\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: 20px;\n    -moz-appearance: none;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n    cursor: pointer;\n  }\n}",b=f,g=class{async kolFocus(){var t;null===(t=this.refInputNumber)||void 0===t||t.focus()}getSanitizedFloatValue(t){const e=parseFloat(t);return this.state._max&&e>this.state._max?this.state._max:this.state._min&&e<this.state._min?this.state._min:e}remapValue(t){return"NumberString"===this._initialValueType?String(t):t}async getValue(){if(void 0!==this.refInputNumber){const t=this.refInputNumber.value,e=this.getSanitizedFloatValue(t);return this.remapValue(e)}}componentDidLoad(){var t;!this._value&&(null===(t=this.refInputRange)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputRange.value))}getFormFieldProps(){return{state:this.state,class:o("kol-input-range","range"),tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.refInputRange)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getGenericInputProps(){const t=this.state,e=i(t,["_suggestions"]);return Object.assign(Object.assign({state:Object.assign(Object.assign({},e),{_suggestions:[]})},this.controller.onFacade),{onChange:this.onChange,onInput:this.onInput,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})}get hasSuggestions(){return Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0}getInputRangeProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-range`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"range",tabIndex:-1,id:void 0,"aria-hidden":"true",ref:this.catchInputRangeRef})}getInputNumberProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-number`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"number",ref:this.catchInputNumberRef,onKeyDown:this.onKeyDown})}setInitialValueType(t){this.controller.isNumberString(t)?this._initialValueType="NumberString":this._initialValueType="number"}render(){var t;const e={"--kolibri-input-range--input-number--width":`calc(${String(null!==(t=this.state._max)&&void 0!==t?t:1e3).length}ch + 1.5em)`};return n(r,Object.assign({key:"8d438c5dff8f05f99138e4bc8a462cb8d6ac4528"},this.getFormFieldProps()),n(c,{key:"388ed516536c78a7a71d62c16fbc4e7a9f94082a",state:this.state},n("div",{key:"beb70e9701121d84fe1350f8ed011893fffd8175",class:"kol-input-range__inputs-wrapper",style:e},n(l,Object.assign({key:"6edb48a90fc5d5495d1b4659b57a4e134ccf9c00",class:"kol-input-range__input kol-input-range__input--range"},this.getInputRangeProps())),n(l,Object.assign({key:"eb10eee938ac3e32c693804fe18c5db3aae51441",class:"kol-input-range__input kol-input-range__input--number"},this.getInputNumberProps()))),this.hasSuggestions&&n(d,{key:"d8e4bb882db04f3a8150461055327afd2606c29a",id:this.state._id,suggestions:this.state._suggestions})))}constructor(e){t(this,e),this.catchInputNumberRef=t=>{var e;t&&(this.refInputNumber=t,!this._value&&(null===(e=this.refInputNumber)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=t=>{t&&(this.refInputRange=t)},this.onInput=t=>{const e=t.target.value,n=this.getSanitizedFloatValue(e);this.controller.onFacade.onInput(t,!0,this.remapValue(n))},this.onChange=t=>{const e=t.target.value,n=this.getSanitizedFloatValue(e),i=this.remapValue(n);this.validateValue(i),this.controller.onFacade.onChange(t,i)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||s({form:this.host,ref:this.refInputNumber})},this._accessKey=void 0,this._autoComplete=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._max=void 0,this._min=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._shortKey=void 0,this._step=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideMsg:!1,_id:`id-${a()}`,_label:"",_suggestions:[]},this._initialValueType="number",this.inputHasFocus=!1,this.controller=new m(this,"range",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideMsg(t){this.controller.validateHideMsg(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)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateStep(t){this.controller.validateStep(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),void 0!==t&&this.setInitialValueType(t)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return e(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:b};export{g as kol_input_range};
+import{h as n,r as t,g as e}from"./index-BhaeJ-uM.js";import{_ as i}from"./Heading-D_vnx163.js";import{c as o}from"./clsx-eK3rPvPS.js";import{n as a}from"./dev.utils-tIfWUJtH.js";import{p as s}from"./controller-BLBS8eKf.js";import{F as r}from"./getRenderStates-B4Xg8PG8.js";import{I as l,S as d}from"./InputStateWrapper-BJzpAEGU.js";import{I as h,a as c}from"./controller-icon-C2QQZ_hH.js";import"./progress-DvHYRA46.js";import{v as p}from"./auto-complete-DTSb0_Qv.js";import{v as u}from"./suggestions-BfRFzmYR.js";import"./component-names-CkE54Ym7.js";import"./access-and-short-key-CykHF9HL.js";import"./hide-label-DYRsvAHX.js";import"./label-D3d1qqIG.js";import"./tooltip-align-5cqqmpu7.js";import"./align-tkanisJ7.js";import"./events-CoPFQEiC.js";import"./associated.controller-ClhjBSrR.js";import"./bootstrap-lABol9ew.js";import"./i18n-CjhRejiw.js";import"./isObject-DvSELytj.js";import"./Alert-DnD_hO6X.js";import"./i18n-H9CUbi--.js";import"./bem-Cpz0pDYV.js";import"./browser-DnRYLgeW.js";import"./InternalUnderlinedBadgeText-Cy3ElU32.js";import"./Input-D27-m66t.js";import"./Icon-XldYcxyr.js";import"./icons-BVOoMgA0.js";class m extends h{constructor(t,n,e){super(t,n,e),this.component=t}validateAutoComplete(t){p(this.component,t)}validateMax(t){this.validateNumber("_max",t)}validateMin(t){this.validateNumber("_min",t)}validateStep(t){this.validateNumber("_step",t)}validateSuggestions(t){u(this.component,t)}validateValue(t){this.validateNumber("_value",t),this.component._value=t,this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const f="/* forward the rem function */\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  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * 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 to-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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    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  .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  .kol-tooltip {\n    contain: layout;\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    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  }\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    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}\n@layer kol-component {\n  .kol-input-range__inputs-wrapper {\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n  }\n  .kol-input-range__input--number {\n    width: var(--kolibri-input-range--input-number--width);\n  }\n  .kol-input-range__input--range {\n    appearance: none;\n    background-color: #d3d3d3;\n    border: 1px solid #000;\n    display: inline-block;\n    flex-grow: 1;\n    height: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    padding: 0;\n    margin: 0;\n    /* Design-Hack - related with flex-grow */\n    width: 0;\n  }\n  .kol-input-range__input--range::-webkit-slider-thumb {\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: 20px;\n    -webkit-appearance: none;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-webkit-slider-thumb {\n    cursor: pointer;\n  }\n  @media (prefers-contrast: more) or (forced-colors: active) {\n    .kol-input-range__input--range::-webkit-slider-thumb {\n      outline: 1px solid currentColor;\n    }\n  }\n  .kol-input-range__input--range::-moz-range-thumb {\n    background-color: #000;\n    height: calc(20rem / var(--kolibri-root-font-size, 16));\n    width: calc(20rem / var(--kolibri-root-font-size, 16));\n    border-radius: 20px;\n    -moz-appearance: none;\n  }\n  .kol-input-range__input:not(:disabled).kol-input-range__input--range::-moz-range-thumb {\n    cursor: pointer;\n  }\n}",b=class{async kolFocus(){var t;null===(t=this.refInputNumber)||void 0===t||t.focus()}getSanitizedFloatValue(t){const n=parseFloat(t);return this.state._max&&n>this.state._max?this.state._max:this.state._min&&n<this.state._min?this.state._min:n}remapValue(t){return"NumberString"===this._initialValueType?String(t):t}async getValue(){if(void 0!==this.refInputNumber){const t=this.refInputNumber.value,n=this.getSanitizedFloatValue(t);return this.remapValue(n)}}componentDidLoad(){var t;!this._value&&(null===(t=this.refInputRange)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputRange.value))}getFormFieldProps(){return{state:this.state,class:o("kol-input-range","range"),tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.refInputRange)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getGenericInputProps(){const t=this.state,n=i(t,["_suggestions"]);return Object.assign(Object.assign({state:Object.assign(Object.assign({},n),{_suggestions:[]})},this.controller.onFacade),{onChange:this.onChange,onInput:this.onInput,onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}})}get hasSuggestions(){return Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0}getInputRangeProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-range`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"range",tabIndex:-1,id:void 0,"aria-hidden":"true",ref:this.catchInputRangeRef})}getInputNumberProps(){return Object.assign(Object.assign({},this.getGenericInputProps()),{name:this.state._name?`${this.state._name}-number`:void 0,list:this.hasSuggestions?`${this.state._id}-list`:void 0,type:"number",ref:this.catchInputNumberRef,onKeyDown:this.onKeyDown})}setInitialValueType(t){this.controller.isNumberString(t)?this._initialValueType="NumberString":this._initialValueType="number"}render(){const t={"--kolibri-input-range--input-number--width":`calc(${String(this.state._max).length}ch + 2em)`};return n(r,Object.assign({key:"478bf80a2b71d03a4e9238344615c0dcb3ecc035"},this.getFormFieldProps()),n(c,{key:"fc0e257be92cbb6b4448699ec8d57097365d1a91",state:this.state},n("div",{key:"12a840e9c04d752b4d5874f623bb1877a1eddfb9",class:"kol-input-range__inputs-wrapper",style:t},n(l,Object.assign({key:"c654d21beb636813a6231cd4921c8d48bc48dcf5",class:"kol-input-range__input kol-input-range__input--range"},this.getInputRangeProps())),n(l,Object.assign({key:"70b1eab90faa02a58cbca33ab5cace5dc0ecedd6",class:"kol-input-range__input kol-input-range__input--number"},this.getInputNumberProps()))),this.hasSuggestions&&n(d,{key:"c82512316665a37edea9ce73f7870e600507d226",id:this.state._id,suggestions:this.state._suggestions})))}constructor(n){t(this,n),this.catchInputNumberRef=t=>{var n;t&&(this.refInputNumber=t,!this._value&&(null===(n=this.refInputNumber)||void 0===n?void 0:n.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=t=>{t&&(this.refInputRange=t)},this.onInput=t=>{const n=t.target.value,e=this.getSanitizedFloatValue(n);this.controller.onFacade.onInput(t,!0,this.remapValue(e))},this.onChange=t=>{const n=t.target.value,e=this.getSanitizedFloatValue(n),i=this.remapValue(e);this.validateValue(i),this.controller.onFacade.onChange(t,i)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||s({form:this.host})},this._autoComplete="off",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._max=100,this._min=0,this._tooltipAlign="top",this._touched=!1,this.state={_hideMsg:!1,_id:`id-${a()}`,_label:"",_suggestions:[],_min:0,_max:100},this._initialValueType="number",this.inputHasFocus=!1,this.controller=new m(this,"range",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideMsg(t){this.controller.validateHideMsg(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)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateStep(t){this.controller.validateStep(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),void 0!==t&&this.setInitialValueType(t)}componentWillLoad(){void 0!==this._value&&this.setInitialValueType(this._value),this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return e(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:f};export{b as kol_input_range};

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

@@ -1 +1 @@
-{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateMax","validateNumber","validateMin","validateStep","validateSuggestions","validateValue","_value","setFormAssociatedValue","state","componentWillLoad","_autoComplete","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRangeDefaultStyle0","KolInputRange","kolFocus","_a","refInputNumber","focus","getSanitizedFloatValue","floatValue","parseFloat","remapValue","_initialValueType","String","getValue","undefined","componentDidLoad","refInputRange","getFormFieldProps","class","clsx","tooltipAlign","_tooltipAlign","onClick","alert","showAsAlert","getGenericInputProps","other","__rest","Object","assign","controller","onFacade","onChange","onInput","onFocus","event","inputHasFocus","onBlur","hasSuggestions","Array","isArray","length","getInputRangeProps","_name","list","_id","type","tabIndex","id","ref","catchInputRangeRef","getInputNumberProps","catchInputNumberRef","onKeyDown","setInitialValueType","isNumberString","render","inputsWrapperStyle","h","KolFormFieldStateWrapperFc","key","KolInputContainerFc","style","KolInputStateWrapperFc","KolSuggestionsFc","suggestions","hostRef","element","target","remappedValue","code","propagateSubmitEventToForm","form","_hideMsg","nonce","_label","Boolean","_touched","validateAccessKey","validateDisabled","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTouched"],"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, NumberString, SuggestionsPropType } from '../../schema';\nimport { validateSuggestions, watchValidator } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\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 | NumberString): void {\n\t\tthis.validateNumber('_max', value);\n\t}\n\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.validateNumber('_min', value);\n\t}\n\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.validateNumber('_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 | NumberString): void {\n\t\tthis.validateNumber('_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\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\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\tNumberString,\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/**\n\t * Map the value to the initial format. E.g., if the user provided a string initially, return a string.\n\t */\n\tprivate remapValue(value: number): number | NumberString {\n\t\tif (this._initialValueType === 'NumberString') {\n\t\t\treturn String(value) as NumberString;\n\t\t}\n\t\treturn value;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<number | NumberString | undefined> {\n\t\tif (this.refInputNumber !== undefined) {\n\t\t\tconst value = this.refInputNumber.value;\n\t\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\t\treturn this.remapValue(floatValue);\n\t\t}\n\t}\n\n\tprivate readonly onInput = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tthis.controller.onFacade.onInput(event, true, this.remapValue(floatValue));\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\tconst remappedValue = this.remapValue(floatValue);\n\t\tthis.validateValue(remappedValue);\n\t\tthis.controller.onFacade.onChange(event, remappedValue);\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\tonInput: this.onInput,\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\tprivate setInitialValueType(value?: number | NumberString) {\n\t\tif (this.controller.isNumberString(value)) {\n\t\t\tthis._initialValueType = 'NumberString';\n\t\t} else {\n\t\t\tthis._initialValueType = 'number';\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 | NumberString;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number | NumberString;\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 | NumberString;\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 | NumberString;\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\t@State() private _initialValueType: 'number' | 'NumberString' = 'number';\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 | NumberString): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number | NumberString): 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 | NumberString): 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 | NumberString): void {\n\t\tthis.controller.validateValue(value);\n\t\tif (value !== undefined) {\n\t\t\tthis.setInitialValueType(value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tif (this._value !== undefined) {\n\t\t\tthis.setInitialValueType(this._value);\n\t\t}\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","validateMax","validateNumber","validateMin","validateStep","validateSuggestions","validateValue","_value","setFormAssociatedValue","state","componentWillLoad","_autoComplete","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRange","kolFocus","_a","refInputNumber","focus","getSanitizedFloatValue","floatValue","parseFloat","remapValue","_initialValueType","String","getValue","undefined","componentDidLoad","refInputRange","getFormFieldProps","class","clsx","tooltipAlign","_tooltipAlign","onClick","alert","showAsAlert","getGenericInputProps","other","__rest","Object","assign","controller","onFacade","onChange","onInput","onFocus","event","inputHasFocus","onBlur","hasSuggestions","Array","isArray","length","getInputRangeProps","_name","list","_id","type","tabIndex","id","ref","catchInputRangeRef","getInputNumberProps","catchInputNumberRef","onKeyDown","setInitialValueType","isNumberString","render","inputsWrapperStyle","h","KolFormFieldStateWrapperFc","key","KolInputContainerFc","style","KolInputStateWrapperFc","KolSuggestionsFc","suggestions","hostRef","element","target","remappedValue","code","propagateSubmitEventToForm","form","_disabled","_hideMsg","_hideLabel","_hint","_touched","nonce","_label","Boolean","validateAccessKey","validateDisabled","validateHideMsg","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTouched"],"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 { AutoCompletePropType, InputRangeProps, InputRangeWatches, NumberString, SuggestionsPropType } from '../../schema';\nimport { validateSuggestions } from '../../schema';\nimport { validateAutoComplete } from '../../schema/props/auto-complete';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\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?: AutoCompletePropType): void {\n\t\tvalidateAutoComplete(this.component, value);\n\t}\n\n\tpublic validateMax(value?: number | NumberString): void {\n\t\tthis.validateNumber('_max', value);\n\t}\n\n\tpublic validateMin(value?: number | NumberString): void {\n\t\tthis.validateNumber('_min', value);\n\t}\n\n\tpublic validateStep(value?: number | NumberString): void {\n\t\tthis.validateNumber('_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 | NumberString): void {\n\t\tthis.validateNumber('_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: to-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\tbackground-color: #000;\n\t\t\t\t\theight: to-rem(20);\n\t\t\t\t\twidth: to-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\tbackground-color: #000;\n\t\t\t\t\theight: to-rem(20);\n\t\t\t\t\twidth: to-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\tAutoCompletePropType,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tNumberString,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tDisabledPropType,\n\tHideLabelPropType,\n\tHintPropType,\n} from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/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/**\n\t * Map the value to the initial format. E.g., if the user provided a string initially, return a string.\n\t */\n\tprivate remapValue(value: number): number | NumberString {\n\t\tif (this._initialValueType === 'NumberString') {\n\t\t\treturn String(value) as NumberString;\n\t\t}\n\t\treturn value;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<number | NumberString | undefined> {\n\t\tif (this.refInputNumber !== undefined) {\n\t\t\tconst value = this.refInputNumber.value;\n\t\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\t\treturn this.remapValue(floatValue);\n\t\t}\n\t}\n\n\tprivate readonly onInput = (event: Event) => {\n\t\tconst value = (event.target as HTMLInputElement).value;\n\t\tconst floatValue = this.getSanitizedFloatValue(value);\n\t\tthis.controller.onFacade.onInput(event, true, this.remapValue(floatValue));\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\tconst remappedValue = this.remapValue(floatValue);\n\t\tthis.validateValue(remappedValue);\n\t\tthis.controller.onFacade.onChange(event, remappedValue);\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\tonInput: this.onInput,\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\tprivate setInitialValueType(value?: number | NumberString) {\n\t\tif (this.controller.isNumberString(value)) {\n\t\t\tthis._initialValueType = 'NumberString';\n\t\t} else {\n\t\t\tthis._initialValueType = 'number';\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).length}ch + 2em)`,\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?: AutoCompletePropType = 'off';\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 | NumberString = 100;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number | NumberString = 0;\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 | NumberString;\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 | NumberString;\n\n\t@State() public state: InputRangeStates = {\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_min: 0,\n\t\t_max: 100,\n\t};\n\t@State() private _initialValueType: 'number' | 'NumberString' = 'number';\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?: AutoCompletePropType): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): 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?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): 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 | NumberString): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number | NumberString): 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 | NumberString): 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 | NumberString): void {\n\t\tthis.controller.validateValue(value);\n\t\tif (value !== undefined) {\n\t\t\tthis.setInitialValueType(value);\n\t\t}\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tif (this._value !== undefined) {\n\t\t\tthis.setInitialValueType(this._value);\n\t\t}\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1 @@
+{"version":3,"file":"kol-input-text.entry.esm.js","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\tAutoCompletePropType,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tDisabledPropType,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHintPropType,\n\tSpellCheckPropType,\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/FormFieldStateWrapper';\nimport KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/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\tthis._value = this.inputRef?.value ?? '';\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\t'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() || this.controller.hasCounter(),\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\tconst ariaDescribedBy = typeof this.state._maxLength === 'number' ? [`${this.state._id}-character-limit-hint`] : undefined; // When a character limit is defined, we provide an additional hint referenced by aria-describedby.\n\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\tariaDescribedBy,\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?: AutoCompletePropType = 'off';\n\n\t/**\n\t * Shows a character counter for the input element.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.\n\t */\n\t@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';\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 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_currentLength: 0,\n\t\t_currentLengthDebounced: 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?: AutoCompletePropType): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_maxLengthBehavior')\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tthis.controller.validateMaxLengthBehavior(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): 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?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): 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"],"names":["KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,r as t,g as e}from"./index-3309536d.js";import{c as i}from"./clsx-09a06a12.js";import{l as o}from"./index-ebe5a881.js";import{n as a}from"./dev.utils-a094a355.js";import{p as s}from"./controller-235b6c3b.js";import{F as l}from"./getRenderStates-65321bc2.js";import{I as r}from"./InputStateWrapper-6a2151b0.js";import{a as d}from"./controller-icon-0e724fd0.js";import{a as h}from"./controller-e04b9250.js";import"./component-names-0657b355.js";import"./events-bad0a075.js";import"./associated.controller-4237c28d.js";import"./bootstrap-53ed580c.js";import"./i18n-45224cc3.js";import"./access-and-short-key-f743a5c4.js";import"./tooltip-align-465a8590.js";import"./align-d2572387.js";import"./hide-label-8b3a8709.js";import"./label-bf9966d0.js";import"./tslib.es6-1173d062.js";import"./Alert-ade6062d.js";import"./i18n-260f0fe9.js";import"./bem-e4c3a2e6.js";import"./browser-f629a56a.js";import"./Heading-2e6ec8e7.js";import"./InternalUnderlinedBadgeText-d999ca8e.js";import"./isArray-7a60fa7f.js";import"./Input-108e0727.js";import"./Icon-352464b0.js";import"./isObject-ffcbbb76.js";import"./icons-a9c52ed8.js";import"./controller-11e34c4e.js";import"./has-counter-3fc44829.js";import"./spell-check-5559a801.js";import"./suggestions-198125b7.js";const c="/*\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  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * 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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    font-size: rem(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  .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  .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    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  }\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    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}",p=c,u=class{async getValue(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}getFormFieldProps(){return{state:this.state,class:i("kol-input-text",this.state._type,{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.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 n(l,Object.assign({key:"07428ffab7472429381e21d4826f6fc3a7e462ba"},this.getFormFieldProps()),n(d,{key:"283eb7cf54bef34c361c946aabedfb3f875f6898",state:this.state},n(r,Object.assign({key:"1691927cde0c7b08bf7c82628a91ec36beb9e776"},this.getInputProps()))))}constructor(e){t(this,e),this.catchRef=t=>{this.inputRef=t},this.onBlur=t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},this.onChange=t=>{var e;const n=null===(e=this.inputRef)||void 0===e?void 0:e.value;this.oldValue!==n&&(this.oldValue=n),this.controller.onFacade.onChange(t)},this.onFocus=t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},this.onInput=t=>{var e,n;const i=null!==(n=null===(e=this.inputRef)||void 0===e?void 0:e.value)&&void 0!==n?n:"";o(this,"_currentLength",i.length),this._value=i,this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||s({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-${a()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new h(this,"text",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideMsg(t){this.controller.validateHideMsg(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)}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 e(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"]}}};u.style={default:p};export{u as kol_input_text};
+import{h as n,r as t,g as e}from"./index-BhaeJ-uM.js";import{c as i}from"./clsx-eK3rPvPS.js";import{n as o}from"./dev.utils-tIfWUJtH.js";import{p as a}from"./controller-BLBS8eKf.js";import{F as l}from"./getRenderStates-B4Xg8PG8.js";import{I as s}from"./InputStateWrapper-BJzpAEGU.js";import{a as r}from"./controller-icon-C2QQZ_hH.js";import{a as d}from"./controller-Bbk-o0Dz.js";import"./progress-DvHYRA46.js";import"./component-names-CkE54Ym7.js";import"./access-and-short-key-CykHF9HL.js";import"./hide-label-DYRsvAHX.js";import"./label-D3d1qqIG.js";import"./tooltip-align-5cqqmpu7.js";import"./align-tkanisJ7.js";import"./events-CoPFQEiC.js";import"./associated.controller-ClhjBSrR.js";import"./bootstrap-lABol9ew.js";import"./i18n-CjhRejiw.js";import"./isObject-DvSELytj.js";import"./Heading-D_vnx163.js";import"./Alert-DnD_hO6X.js";import"./i18n-H9CUbi--.js";import"./bem-Cpz0pDYV.js";import"./browser-DnRYLgeW.js";import"./InternalUnderlinedBadgeText-Cy3ElU32.js";import"./Input-D27-m66t.js";import"./Icon-XldYcxyr.js";import"./icons-BVOoMgA0.js";import"./spell-check-CMcp2-Ad.js";import"./suggestions-BfRFzmYR.js";import"./controller-BevWqlyP.js";import"./auto-complete-DTSb0_Qv.js";import"./max-length-behavior-Dz2KB_23.js";const h="/* forward the rem function */\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  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * 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 to-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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    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  .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  .kol-tooltip {\n    contain: layout;\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    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  }\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    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}",c=class{async getValue(){var t;return null===(t=this.inputRef)||void 0===t?void 0:t.value}async kolFocus(){var t;null===(t=this.inputRef)||void 0===t||t.focus()}getFormFieldProps(){return{state:this.state,class:i("kol-input-text",this.state._type,{"has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,onClick:()=>{var t;return null===(t=this.inputRef)||void 0===t?void 0:t.focus()},alert:this.showAsAlert()}}getInputProps(){const t="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,ariaDescribedBy:t},this.controller.onFacade),{onBlur:this.onBlur,onChange:this.onChange,onFocus:this.onFocus,onInput:this.onInput,onKeyDown:this.onKeyDown})}render(){return n(l,Object.assign({key:"753fe7d7e690c94f34e2ef91535ecc490d27ad14"},this.getFormFieldProps()),n(r,{key:"5c36e642f967cbcb41306b248339f29331de483f",state:this.state},n(s,Object.assign({key:"112119698ccffff7f749843323c59f90ce6c5632"},this.getInputProps()))))}constructor(e){t(this,e),this.catchRef=t=>{this.inputRef=t},this.onBlur=t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},this.onChange=t=>{var e;const n=null===(e=this.inputRef)||void 0===e?void 0:e.value;this.oldValue!==n&&(this.oldValue=n),this.controller.onFacade.onChange(t)},this.onFocus=t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},this.onInput=t=>{var e,n;this._value=null!==(n=null===(e=this.inputRef)||void 0===e?void 0:e.value)&&void 0!==n?n:"",this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||a({form:this.host})},this._autoComplete="off",this._hasCounter=!1,this._maxLengthBehavior="hard",this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._readOnly=!1,this._required=!1,this._tooltipAlign="top",this._touched=!1,this._type="text",this.state={_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${o()}`,_label:"",_suggestions:[],_type:"text"},this.inputHasFocus=!1,this.controller=new d(this,"text",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateMaxLengthBehavior(t){this.controller.validateMaxLengthBehavior(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideMsg(t){this.controller.validateHideMsg(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHasCounter(t){this.controller.validateHasCounter(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)}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 e(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_autoComplete:["validateAutoComplete"],_maxLengthBehavior:["validateMaxLengthBehavior"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_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"]}}};c.style={default:h};export{c as kol_input_text};