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

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolInputPassword","render","ariaDescribedBy","getRenderStates","this","state","hasExpertSlot","showExpertSlot","_label","h","Host","class","_hasValue","_hideLabel","password","_currentLength","_disabled","_error","_hasCounter","_hideError","_hint","_icons","_id","_maxLength","_readOnly","_required","_smartButton","_tooltipAlign","_touched","onClick","_a","ref","focus","slot","name","Object","assign","catchRef","title","accessKey","_accessKey","length","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","maxlength","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","spellcheck","type","value","_value","controller","onFacade","onKeyUp","constructor","hostRef","propagateFocus","host","event","setState","target","code","propagateSubmitEventToForm","form","onChange","nonce","InputPasswordController","validateAccessKey","validateAlert","validateAutoComplete","devHint","validateDisabled","validateError","validateHasCounter","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","validateValue","componentWillLoad","_alert","addValueChangeListener","v"],"sources":["src/components/input-password/style.css?tag=kol-input-password&mode=default&encapsulation=shadow","src/components/input-password/component.tsx"],"sourcesContent":["@import url(../input-line.css);\n.error.hidden {\n\tdisplay: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { Props as ButtonProps } from '../button/types';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputPasswordController } from './controller';\nimport { API, States } from './types';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-password',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputPassword implements API {\n\t@Element() private readonly host?: HTMLKolInputPasswordElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tsetState(this, '_currentLength', (event.target as HTMLInputElement).value.length);\n\t\tif (event.code === 'Enter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tpassword: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_currentLength={this.state._currentLength}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot name=\"expert\"></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputPasswordController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\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 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 * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputPasswordController(this, 'input-password', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t\tif (value === 'on') {\n\t\t\tdevHint(`[KolInputPassword] Die Option 'autocomplete' sollte bei einem Passwort-Eingabefeld nicht auf \"on\" gesetzt werden.`);\n\t\t}\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): 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('_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('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.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"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","KolInputPassword","render","ariaDescribedBy","getRenderStates","this","state","hasExpertSlot","showExpertSlot","_label","h","Host","class","_hasValue","_hideLabel","password","_accessKey","_currentLength","_disabled","_error","_hasCounter","_hideError","_hint","_icons","_id","_maxLength","_readOnly","_required","_smartButton","_tooltipAlign","_touched","onClick","_a","ref","focus","slot","name","Fragment","InternalUnderlinedAccessKey","accessKey","label","Object","assign","catchRef","title","length","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","maxlength","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","spellcheck","type","value","_value","controller","onFacade","onKeyUp","constructor","hostRef","propagateFocus","host","event","setState","target","code","propagateSubmitEventToForm","form","onChange","nonce","InputPasswordController","validateAccessKey","validateAlert","validateAutoComplete","devHint","validateDisabled","validateError","validateHasCounter","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","validateValue","componentWillLoad","_alert","addValueChangeListener","v"],"sources":["src/components/input-password/style.css?tag=kol-input-password&mode=default&encapsulation=shadow","src/components/input-password/component.tsx"],"sourcesContent":["@import url(../input-line.css);\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n","import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { Props as ButtonProps } from '../button/types';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputPasswordController } from './controller';\nimport { API, States } from './types';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-password',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputPassword implements API {\n\t@Element() private readonly host?: HTMLKolInputPasswordElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tsetState(this, '_currentLength', (event.target as HTMLInputElement).value.length);\n\t\tif (event.code === 'Enter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tpassword: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_currentLength={this.state._currentLength}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputPasswordController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\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 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 * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputPasswordController(this, 'input-password', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t\tif (value === 'on') {\n\t\t\tdevHint(`[KolInputPassword] Die Option 'autocomplete' sollte bei einem Passwort-Eingabefeld nicht auf \"on\" gesetzt werden.`);\n\t\t}\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): 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('_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('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.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"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,H as t,r as i,g as a}from"./index-d0c806ea.js";import{n as s}from"./dev.utils-2a853234.js";import{s as n,t as r}from"./events-2bb1065b.js";import{a as l,s as d}from"./reuse-b3566e4c.js";import{g as o}from"./controller-75d286de.js";import{a as h}from"./controller-b19ee0de.js";import"./prop.validators-125a3282.js";import"./a11y.tipps-583a2096.js";import"./hide-label-2c0bf25c.js";import"./label-0d258cd5.js";import"./tab-index-5e7494f0.js";import"./associated.controller-103e6fb9.js";const p=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}:host{--border-width:2px;--input-size:1.5em}kol-input .icons{display:none}label{cursor:pointer}input{appearance:none;border-width:var(--border-width);border-style:solid;border-radius:100%;cursor:pointer;display:flex;height:var(--input-size);margin:0;min-height:var(--input-size);min-width:var(--input-size);padding:0;width:var(--input-size)}input:before{border-radius:100%;content:'';margin:auto;height:calc(var(--input-size) / 2);width:calc(var(--input-size) / 2)}input:checked:before{background-color:#000}fieldset{display:flex}fieldset.vertical{flex-direction:column}fieldset .input-slot{align-items:center;display:flex}.required label>span::after{content:''}.error.hidden{display:none}",u=class{render(){const{ariaDescribedBy:i,hasError:a}=o(this.state),l=d(this.state._label);return e(t,null,e("fieldset",{class:{disabled:!0===this.state._disabled,error:!0===a,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},e("legend",{class:"block w-full mb-1 leading-normal"},e("span",null,e("span",{slot:"label"},l?e("slot",{name:"expert"}):this.state._label))),this.state._options.map(((t,a)=>{const l=`${this.state._id}-${a}`,r=`radio-${a}`;return e("kol-input",{class:"radio",key:l,_disabled:this.state._disabled||t.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:l,_label:t.label,_renderNoLabel:!0,_required:this.state._required,_slotName:r,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},e("div",{slot:r,class:"radio-input-wrapper"},e("input",Object.assign({ref:this.state._value===t.value?this.catchRef:void 0,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof t.label?t.label:void 0,type:"radio",id:l,checked:this.state._value===t.value,name:this.state._name||this.state._id,disabled:this.state._disabled||t.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${a}`},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})),e("label",{class:"radio-label",htmlFor:`${l}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},e("span",null,e("span",null,t.label)))))})),a&&e("kol-alert",{id:"error",_alert:!0,_type:"error",_variant:"msg","aria-hidden":this._hideError,class:"error"+(this._hideError?" hidden":"")},this.state._error)))}constructor(e){i(this,e),this.catchRef=e=>{this.ref=e,l(this.host,this.ref)},this.onChange=e=>{var t;if(e.target instanceof HTMLInputElement){const i=this.controller.getOptionByKey(e.target.value);void 0!==i&&(n(e),r("change",this.host,i.value),this.controller.setFormAssociatedValue(i.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,i.value),this.controller.setValue(e,i.value))}},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${s()}`,_label:"",_options:[],_orientation:"vertical"},this.controller=new h(this,"input-radio",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHideError(e){this.controller.validateHideError(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateOrientation(e){this.controller.validateOrientation(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};u.style={default:p};export{u as kol_input_radio};
+import{h as t,H as n,r as e,g as i}from"./index-0bc40dc4.js";import{n as a}from"./dev.utils-babc1742.js";import{s,t as r}from"./events-2bb1065b.js";import{a as l,s as o}from"./reuse-b3566e4c.js";import{g as d}from"./controller-85e5be61.js";import{a as h}from"./controller-b8518ebb.js";import{I as p}from"./InternalUnderlinedAccessKey-8b996006.js";import"./prop.validators-445950f8.js";import"./a11y.tipps-1e89ea61.js";import"./hide-label-c9289ea1.js";import"./label-cdb96413.js";import"./tab-index-d2087b2a.js";import"./associated.controller-89ab9c94.js";const u="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\t--border-width: 2px;\n\t\t--input-size: 1.5em;\n\t}\n\n\tkol-input .icons {\n\t\tdisplay: none;\n\t}\n\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tinput {\n\t\tappearance: none;\n\t\tborder-width: var(--border-width);\n\t\tborder-style: solid;\n\t\tborder-radius: 100%;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\theight: var(--input-size);\n\t\tmargin: 0;\n\t\tmin-height: var(--input-size);\n\t\tmin-width: var(--input-size);\n\t\tpadding: 0;\n\t\twidth: var(--input-size);\n\t}\n\n\tinput:before {\n\t\tborder-radius: 100%;\n\t\tcontent: '';\n\t\tmargin: auto;\n\t\theight: calc(var(--input-size) / 2);\n\t\twidth: calc(var(--input-size) / 2);\n\t}\n\n\tinput:checked:before {\n\t\tbackground-color: #000;\n\t}\n\n\tfieldset {\n\t\tdisplay: flex;\n\t}\n\n\tfieldset.vertical {\n\t\tflex-direction: column;\n\t}\n\n\tfieldset .input-slot {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t}\n\n\t/* required star is on fieldset legend */\n\t.required label > span::after {\n\t\tcontent: '';\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n",c=class{render(){const{ariaDescribedBy:e,hasError:i}=d(this.state),a=o(this.state._label);return t(n,null,t("fieldset",{class:{disabled:!0===this.state._disabled,error:!0===i,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},t("legend",{class:"block w-full mb-1 leading-normal"},t("span",null,t("span",{slot:"label"},a?t("slot",{name:"expert"}):"string"==typeof this._accessKey?t(p,{accessKey:this._accessKey,label:this._label}):this._label))),this.state._options.map(((n,i)=>{const a=`${this.state._id}-${i}`,l=`radio-${i}`;return t("kol-input",{class:"radio",key:a,_accessKey:this.state._accessKey,_disabled:this.state._disabled||n.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:a,_label:n.label,_renderNoLabel:!0,_required:this.state._required,_slotName:l,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},t("div",{slot:l,class:"radio-input-wrapper"},t("input",Object.assign({ref:this.state._value===n.value?this.catchRef:void 0,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof n.label?n.label:void 0,type:"radio",id:a,checked:this.state._value===n.value,name:this.state._name||this.state._id,disabled:this.state._disabled||n.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${i}`},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})),t("label",{class:"radio-label",htmlFor:`${a}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},t("span",null,t("span",null,n.label)))))})),i&&t("kol-alert",{id:"error",_alert:!0,_type:"error",_variant:"msg","aria-hidden":this._hideError,class:"error"+(this._hideError?" hidden":"")},this.state._error)))}constructor(t){e(this,t),this.catchRef=t=>{l(this.host,t)},this.onChange=t=>{var e;if(t.target instanceof HTMLInputElement){const n=this.controller.getOptionByKey(t.target.value);void 0!==n&&(s(t),r("change",this.host,n.value),this.controller.setFormAssociatedValue(n.value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,n.value),this.controller.setValue(t,n.value))}},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${a()}`,_label:"",_options:[],_orientation:"vertical"},this.controller=new h(this,"input-radio",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHideError(t){this.controller.validateHideError(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateOrientation(t){this.controller.validateOrientation(t)}validateRequired(t){this.controller.validateRequired(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};c.style={default:u};export{c as kol_input_radio};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolInputRadio","render","ariaDescribedBy","hasError","getRenderStates","this","state","hasExpertSlot","showExpertSlot","_label","h","Host","class","disabled","_disabled","error","required","_required","_hideError","_orientation","slot","name","_options","map","option","index","customId","_id","slotName","key","_hideLabel","_hint","label","_renderNoLabel","_slotName","_tooltipAlign","_touched","Object","assign","ref","_value","value","catchRef","undefined","title","accessKey","_accessKey","length","join","type","id","checked","_name","tabIndex","_tabIndex","controller","onFacade","onChange","onClick","htmlFor","style","height","margin","padding","visibility","_alert","_type","_variant","_error","constructor","hostRef","propagateFocus","host","event","target","HTMLInputElement","getOptionByKey","stopPropagation","tryToDispatchKoliBriEvent","setFormAssociatedValue","_a","_on","setValue","nonce","InputRadioController","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHideError","validateHint","validateId","validateLabel","validateName","validateOn","validateOptions","validateOrientation","validateRequired","validateSyncValueBySelector","validateTabIndex","validateTouched","validateValue","componentWillLoad"],"sources":["src/components/input-radio/style.css?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/component.tsx"],"sourcesContent":["@import url(../input.css);\n:host {\n\t--border-width: 2px;\n\t--input-size: 1.5em;\n}\nkol-input .icons {\n\tdisplay: none;\n}\nlabel {\n\tcursor: pointer;\n}\ninput {\n\tappearance: none;\n\tborder-width: var(--border-width);\n\tborder-style: solid;\n\tborder-radius: 100%;\n\tcursor: pointer;\n\tdisplay: flex;\n\theight: var(--input-size);\n\tmargin: 0;\n\tmin-height: var(--input-size);\n\tmin-width: var(--input-size);\n\tpadding: 0;\n\twidth: var(--input-size);\n}\ninput:before {\n\tborder-radius: 100%;\n\tcontent: '';\n\tmargin: auto;\n\theight: calc(var(--input-size) / 2);\n\twidth: calc(var(--input-size) / 2);\n}\ninput:checked:before {\n\tbackground-color: #000;\n}\nfieldset {\n\tdisplay: flex;\n}\nfieldset.vertical {\n\tflex-direction: column;\n}\nfieldset .input-slot {\n\talign-items: center;\n\tdisplay: flex;\n}\n/* required star is on fieldset legend */\n.required label > span::after {\n\tcontent: '';\n}\n.error.hidden {\n\tdisplay: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { Orientation } from '../../types/orientation';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { OptionsPropType } from '../../types/props/options';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRadioController } from './controller';\nimport { API, States } from './types';\n\n/**\n * @slot - Die Legende/Überschrift der Radiobuttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements API {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot name=\"expert\"></slot> : this.state._label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\tconst slotName = `radio-${index}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<kol-input\n\t\t\t\t\t\t\t\tclass=\"radio\"\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_label={option.label as string}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_slotName={slotName}\n\t\t\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot={slotName} class=\"radio-input-wrapper\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined}\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === option.value}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name || this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t\tonClick={undefined} // onClick is not needed since onChange already triggers the correct event\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\tclass=\"radio-label\"\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</kol-input>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && (\n\t\t\t\t\t\t<kol-alert id=\"error\" _alert={true} _type=\"error\" _variant=\"msg\" aria-hidden={this._hideError} class={`error${this._hideError ? ' hidden' : ''}`}>\n\t\t\t\t\t\t\t{this.state._error}\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t)}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the 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 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?: OptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\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 which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'input-radio', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_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('_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?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): 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('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\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\t// Event handling\n\t\t\t\tstopPropagation(event);\n\t\t\t\ttryToDispatchKoliBriEvent('change', this.host, option.value);\n\n\t\t\t\t// Static form handling\n\t\t\t\tthis.controller.setFormAssociatedValue(option.value);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\t\t\tthis.state._on.onChange(event, option.value);\n\t\t\t\t}\n\n\t\t\t\t// TODO: Prüfen, was setValue noch genau macht, wir syncValue ja jetzt.\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"mappings":";;;kfAAA,MAAMA,EAAkB,itE,MC+BXC,EAAa,MASlB,MAAAC,GACN,MAAMC,gBAAEA,EAAeC,SAAEA,GAAaC,EAAgBC,KAAKC,OAC3D,MAAMC,EAAgBC,EAAeH,KAAKC,MAAMG,QAEhD,OACCC,EAACC,EAAI,KACJD,EAAA,YACCE,MAAO,CACNC,SAAUR,KAAKC,MAAMQ,YAAc,KACnCC,MAAOZ,IAAa,KACpBa,SAAUX,KAAKC,MAAMW,YAAc,KACnC,eAAgBZ,KAAKa,aAAe,KACpC,CAACb,KAAKC,MAAMa,cAAe,OAG5BT,EAAA,UAAQE,MAAM,oCAEbF,EAAA,YAECA,EAAA,QAAMU,KAAK,SAASb,EAAgBG,EAAA,QAAMW,KAAK,WAAmBhB,KAAKC,MAAMG,UAG9EJ,KAAKC,MAAMgB,SAASC,KAAI,CAACC,EAAQC,KAMjC,MAAMC,EAAW,GAAGrB,KAAKC,MAAMqB,OAAOF,IACtC,MAAMG,EAAW,SAASH,IAC1B,OACCf,EAAA,aACCE,MAAM,QACNiB,IAAKH,EACLZ,UAAWT,KAAKC,MAAMQ,WAAaU,EAAOX,SAC1CiB,WAAYzB,KAAKC,MAAMwB,WACvBC,MAAO1B,KAAKC,MAAMyB,MAClBJ,IAAKD,EACLjB,OAAQe,EAAOQ,MACfC,eAAgB,KAChBhB,UAAWZ,KAAKC,MAAMW,UACtBiB,UAAWN,EACXO,cAAe9B,KAAK8B,cACpBC,SAAU/B,KAAKC,MAAM8B,UAErB1B,EAAA,OAAKU,KAAMQ,EAAUhB,MAAM,uBAC1BF,EAAA,QAAA2B,OAAAC,OAAA,CACCC,IAAKlC,KAAKC,MAAMkC,SAAWhB,EAAOiB,MAAQpC,KAAKqC,SAAWC,UAC1DC,MAAM,GACNC,UAAWxC,KAAKC,MAAMwC,WAAU,mBACd5C,EAAgB6C,OAAS,EAAI7C,EAAgB8C,KAAK,KAAOL,UAAS,aACxEtC,KAAKC,MAAMwB,mBAAqBN,EAAOQ,QAAU,SAAWR,EAAOQ,MAAQW,UACvFM,KAAK,QACLC,GAAIxB,EACJyB,QAAS9C,KAAKC,MAAMkC,SAAWhB,EAAOiB,MACtCpB,KAAMhB,KAAKC,MAAM8C,OAAS/C,KAAKC,MAAMqB,IACrCd,SAAUR,KAAKC,MAAMQ,WAAaU,EAAOX,SACzCG,SAAUX,KAAKC,MAAMW,UACrBoC,SAAUhD,KAAKC,MAAMgD,UACrBb,MAAO,IAAIhB,KACPpB,KAAKkD,WAAWC,SAAQ,CAC5BC,SAAUpD,KAAKoD,SACfC,QAASf,aAEVjC,EAAA,SACCE,MAAM,cACN+C,QAAS,GAAGjC,IACZkC,MAAO,CACNC,OAAQxD,KAAKC,MAAMwB,WAAa,IAAMa,UACtCmB,OAAQzD,KAAKC,MAAMwB,WAAa,IAAMa,UACtCoB,QAAS1D,KAAKC,MAAMwB,WAAa,IAAMa,UACvCqB,WAAY3D,KAAKC,MAAMwB,WAAa,SAAWa,YAGhDjC,EAAA,YACCA,EAAA,YAAOc,EAAOQ,UAIN,IAGb7B,GACAO,EAAA,aAAWwC,GAAG,QAAQe,OAAQ,KAAMC,MAAM,QAAQC,SAAS,MAAK,cAAc9D,KAAKa,WAAYN,MAAO,QAAQP,KAAKa,WAAa,UAAY,MAC1Ib,KAAKC,MAAM8D,S,CAyHlB,WAAAC,CAAAC,G,UAlNiBjE,KAAAqC,SAAYH,IAC5BlC,KAAKkC,IAAMA,EACXgC,EAAelE,KAAKmE,KAAMnE,KAAKkC,IAAI,EAoT5BlC,KAAAoD,SAAYgB,I,MACnB,GAAIA,EAAMC,kBAAkBC,iBAAkB,CAC7C,MAAMnD,EAASnB,KAAKkD,WAAWqB,eAAeH,EAAMC,OAAOjC,OAC3D,GAAIjB,IAAWmB,UAAW,CAEzBkC,EAAgBJ,GAChBK,EAA0B,SAAUzE,KAAKmE,KAAMhD,EAAOiB,OAGtDpC,KAAKkD,WAAWwB,uBAAuBvD,EAAOiB,OAG9C,WAAWuC,EAAA3E,KAAKC,MAAM2E,OAAG,MAAAD,SAAA,SAAAA,EAAEvB,YAAa,WAAY,CACnDpD,KAAKC,MAAM2E,IAAIxB,SAASgB,EAAOjD,EAAOiB,M,CAIvCpC,KAAKkD,WAAW2B,SAAST,EAAOjD,EAAOiB,M,0CA5NwB,K,eAM7B,M,sCAWiC,M,gBAOhC,M,WAKN,G,2HA8BY,W,eAMP,M,gFAgBiB,M,cAMc,M,iCAQpC,CAC/BvB,WAAY,MACZS,IAAK,MAAMwD,MACX1E,OAAQ,GACRa,SAAU,GACVH,aAAc,YAIdd,KAAKkD,WAAa,IAAI6B,EAAqB/E,KAAM,cAAeA,KAAKmE,K,CAI/D,iBAAAa,CAAkB5C,GACxBpC,KAAKkD,WAAW8B,kBAAkB5C,E,CAI5B,aAAA6C,CAAc7C,GACpBpC,KAAKkD,WAAW+B,cAAc7C,E,CAIxB,gBAAA8C,CAAiB9C,GACvBpC,KAAKkD,WAAWgC,iBAAiB9C,E,CAI3B,aAAA+C,CAAc/C,GACpBpC,KAAKkD,WAAWiC,cAAc/C,E,CAIxB,iBAAAgD,CAAkBhD,GACxBpC,KAAKkD,WAAWkC,kBAAkBhD,E,CAI5B,iBAAAiD,CAAkBjD,GACxBpC,KAAKkD,WAAWmC,kBAAkBjD,E,CAI5B,YAAAkD,CAAalD,GACnBpC,KAAKkD,WAAWoC,aAAalD,E,CAIvB,UAAAmD,CAAWnD,GACjBpC,KAAKkD,WAAWqC,WAAWnD,E,CAIrB,aAAAoD,CAAcpD,GACpBpC,KAAKkD,WAAWsC,cAAcpD,E,CAIxB,YAAAqD,CAAarD,GACnBpC,KAAKkD,WAAWuC,aAAarD,E,CAIvB,UAAAsD,CAAWtD,GACjBpC,KAAKkD,WAAWwC,WAAWtD,E,CAIrB,eAAAuD,CAAgBvD,GACtBpC,KAAKkD,WAAWyC,gBAAgBvD,E,CAI1B,mBAAAwD,CAAoBxD,GAC1BpC,KAAKkD,WAAW0C,oBAAoBxD,E,CAI9B,gBAAAyD,CAAiBzD,GACvBpC,KAAKkD,WAAW2C,iBAAiBzD,E,CAI3B,2BAAA0D,CAA4B1D,GAClCpC,KAAKkD,WAAW4C,4BAA4B1D,E,CAItC,gBAAA2D,CAAiB3D,GACvBpC,KAAKkD,WAAW6C,iBAAiB3D,E,CAI3B,eAAA4D,CAAgB5D,GACtBpC,KAAKkD,WAAW8C,gBAAgB5D,E,CAI1B,aAAA6D,CAAc7D,GACpBpC,KAAKkD,WAAW+C,cAAc7D,E,CAGxB,iBAAA8D,GACNlG,KAAK4D,OAAS5D,KAAK4D,SAAW,KAC9B5D,KAAK+B,SAAW/B,KAAK+B,WAAa,KAClC/B,KAAKkD,WAAWgD,kBAAkBlG,KAAKoD,S"}
+{"version":3,"names":["defaultStyleCss","KolInputRadio","render","ariaDescribedBy","hasError","getRenderStates","this","state","hasExpertSlot","showExpertSlot","_label","h","Host","class","disabled","_disabled","error","required","_required","_hideError","_orientation","slot","name","_accessKey","InternalUnderlinedAccessKey","accessKey","label","_options","map","option","index","customId","_id","slotName","key","_hideLabel","_hint","_renderNoLabel","_slotName","_tooltipAlign","_touched","Object","assign","ref","_value","value","catchRef","undefined","title","length","join","type","id","checked","_name","tabIndex","_tabIndex","controller","onFacade","onChange","onClick","htmlFor","style","height","margin","padding","visibility","_alert","_type","_variant","_error","constructor","hostRef","propagateFocus","host","event","target","HTMLInputElement","getOptionByKey","stopPropagation","tryToDispatchKoliBriEvent","setFormAssociatedValue","_a","_on","setValue","nonce","InputRadioController","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHideError","validateHint","validateId","validateLabel","validateName","validateOn","validateOptions","validateOrientation","validateRequired","validateSyncValueBySelector","validateTabIndex","validateTouched","validateValue","componentWillLoad"],"sources":["src/components/input-radio/style.css?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/component.tsx"],"sourcesContent":["@import url(../input.css);\n@layer kol-component {\n\t:host {\n\t\t--border-width: 2px;\n\t\t--input-size: 1.5em;\n\t}\n\n\tkol-input .icons {\n\t\tdisplay: none;\n\t}\n\n\tlabel {\n\t\tcursor: pointer;\n\t}\n\n\tinput {\n\t\tappearance: none;\n\t\tborder-width: var(--border-width);\n\t\tborder-style: solid;\n\t\tborder-radius: 100%;\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\theight: var(--input-size);\n\t\tmargin: 0;\n\t\tmin-height: var(--input-size);\n\t\tmin-width: var(--input-size);\n\t\tpadding: 0;\n\t\twidth: var(--input-size);\n\t}\n\n\tinput:before {\n\t\tborder-radius: 100%;\n\t\tcontent: '';\n\t\tmargin: auto;\n\t\theight: calc(var(--input-size) / 2);\n\t\twidth: calc(var(--input-size) / 2);\n\t}\n\n\tinput:checked:before {\n\t\tbackground-color: #000;\n\t}\n\n\tfieldset {\n\t\tdisplay: flex;\n\t}\n\n\tfieldset.vertical {\n\t\tflex-direction: column;\n\t}\n\n\tfieldset .input-slot {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t}\n\n\t/* required star is on fieldset legend */\n\t.required label > span::after {\n\t\tcontent: '';\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { Orientation } from '../../types/orientation';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { OptionsPropType } from '../../types/props/options';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRadioController } from './controller';\nimport { API, States } from './types';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\n\n/**\n * @slot - Die Legende/Überschrift der Radiobuttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements API {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t\t\t) : typeof this._accessKey === 'string' ? (\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this._accessKey} label={this._label} />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\tthis._label\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\tconst slotName = `radio-${index}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<kol-input\n\t\t\t\t\t\t\t\tclass=\"radio\"\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_accessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_label={option.label as string}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_slotName={slotName}\n\t\t\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot={slotName} class=\"radio-input-wrapper\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined}\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === option.value}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name || this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t\tonClick={undefined} // onClick is not needed since onChange already triggers the correct event\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\tclass=\"radio-label\"\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</kol-input>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && (\n\t\t\t\t\t\t<kol-alert id=\"error\" _alert={true} _type=\"error\" _variant=\"msg\" aria-hidden={this._hideError} class={`error${this._hideError ? ' hidden' : ''}`}>\n\t\t\t\t\t\t\t{this.state._error}\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t)}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the 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 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?: OptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\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 which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'input-radio', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_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('_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?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): 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('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\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\t// Event handling\n\t\t\t\tstopPropagation(event);\n\t\t\t\ttryToDispatchKoliBriEvent('change', this.host, option.value);\n\n\t\t\t\t// Static form handling\n\t\t\t\tthis.controller.setFormAssociatedValue(option.value);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\t\t\tthis.state._on.onChange(event, option.value);\n\t\t\t\t}\n\n\t\t\t\t// TODO: Prüfen, was setValue noch genau macht, wir syncValue ja jetzt.\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"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 t,H as i,r as e,g as s}from"./index-d0c806ea.js";import{n as a}from"./dev.utils-2a853234.js";import{a as n,s as o}from"./reuse-b3566e4c.js";import{p as r}from"./controller-eb162f21.js";import{v as l,g as d}from"./controller-75d286de.js";import{v as h}from"./suggestions-50a767be.js";import{a as p}from"./a11y.tipps-583a2096.js";import{w as u,e as c}from"./prop.validators-125a3282.js";import{I as f}from"./controller-icon-fb1feb61.js";import"./hide-label-2c0bf25c.js";import"./label-0d258cd5.js";import"./events-2bb1065b.js";import"./tab-index-5e7494f0.js";import"./associated.controller-103e6fb9.js";import"./icons-ad8a28c6.js";class m extends f{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){u(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateHideError(t){l(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&p("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateMax(t){c(this.component,"_max",t)}validateMin(t){c(this.component,"_min",t)}validateStep(t){c(this.component,"_step",t)}validateSuggestions(t){h(this.component,t)}validateValue(t){c(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHideError(this.component._hideError),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 b=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.inputs-wrapper{align-items:center;display:flex;flex-direction:row}input[type='number']{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size);width:var(--kolibri-input-range--input-number--width)}input[type='range']{appearance:none;background-color:#d3d3d3;border:1px solid #000;display:inline-block;flex-grow:1;height:0.5rem;line-height:1.5em;padding:0;margin:0;width:0;}input[type='range']::-webkit-slider-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-webkit-appearance:none}input[type='range']::-moz-range-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-moz-appearance:none}.error.hidden{display:none}@media (prefers-contrast: more){::-webkit-slider-thumb{outline:1px solid currentColor}}",v=class{render(){const{ariaDescribedBy:e}=d(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=o(this.state._label);return t(i,null,t("kol-input",{class:{range:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},t("span",{slot:"label"},s?t("slot",{name:"expert"}):this.state._label),t("div",{slot:"input"},t("div",{class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`${this.state._max}`.length+.5+"em"}},t("input",Object.assign({title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})),t("input",Object.assign({ref:this.catchInputNumberRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp,onChange:this.onChange}))),a&&[t("datalist",{id:`${this.state._id}-list`},this.state._suggestions.map((e=>t("option",{value:e}))))])))}constructor(t){e(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.ref=t,n(this.host,t),!this._value&&(null===(e=this.ref)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.ref.value)))},this.onChange=t=>{var e,i;let a=parseFloat(t.target.value);this.state._max&&a>this.state._max&&(a=this.state._max),this.state._min&&a<this.state._min&&(a=this.state._min),this.validateValue(a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(i=this.state._on)||void 0===i||i.onChange(t,a))},this.onKeyUp=t=>{"Enter"===t.code?r({form:this.host,ref:this.ref}):this.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!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._name=void 0,this._on=void 0,this._step=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${a()}`,_label:"",_suggestions:[]},this.controller=new m(this,"input-range",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateStep(t){this.controller.validateStep(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};v.style={default:b};export{v as kol_input_range};
+import{h as t,F as n,H as e,r as i,g as s}from"./index-0bc40dc4.js";import{n as a}from"./dev.utils-babc1742.js";import{a as o,s as l}from"./reuse-b3566e4c.js";import{p as r}from"./controller-88531ae3.js";import{v as d,g as h}from"./controller-85e5be61.js";import{v as p}from"./suggestions-59d82dad.js";import{a as u}from"./a11y.tipps-1e89ea61.js";import{w as c,e as m}from"./prop.validators-445950f8.js";import{I as f}from"./controller-icon-9794a8aa.js";import{I as b}from"./InternalUnderlinedAccessKey-8b996006.js";import"./hide-label-c9289ea1.js";import"./label-cdb96413.js";import"./events-2bb1065b.js";import"./tab-index-d2087b2a.js";import"./associated.controller-89ab9c94.js";import"./icons-97af6e5f.js";class y extends f{constructor(t,e,n){super(t,e,n),this.component=t}validateAutoComplete(t){c(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateHideError(t){d(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&u("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateMax(t){m(this.component,"_max",t)}validateMin(t){m(this.component,"_min",t)}validateStep(t){m(this.component,"_step",t)}validateSuggestions(t){p(this.component,t)}validateValue(t){m(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateHideError(this.component._hideError),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 v="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.inputs-wrapper {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\tinput[type='number'] {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t\twidth: var(--kolibri-input-range--input-number--width);\n\t}\n\n\t/*\n   * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n   */\n\tinput[type='range'] {\n\t\tappearance: none;\n\t\tbackground-color: #d3d3d3;\n\t\tborder: 1px solid #000;\n\t\tdisplay: inline-block;\n\t\tflex-grow: 1;\n\t\theight: 0.5rem;\n\t\tline-height: 1.5em;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\twidth: 0; /* Design-Hack - related with flex-grow */\n\t}\n\n\tinput[type='range']::-webkit-slider-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-webkit-appearance: none;\n\t}\n\n\tinput[type='range']::-moz-range-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-moz-appearance: none;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n\t::-webkit-slider-thumb {\n\t\toutline: 1px solid currentColor;\n\t}\n}\n",g=class{render(){const{ariaDescribedBy:i}=h(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=l(this.state._label);return t(e,null,t("kol-input",{class:{range:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},t("span",{slot:"label"},s?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey?t(n,null,t(b,{accessKey:this.state._accessKey,label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):t("span",null,this.state._label)),t("div",{slot:"input"},t("div",{class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`${this.state._max}`.length+.5+"em"}},t("input",Object.assign({title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})),t("input",Object.assign({ref:this.catchInputNumberRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp,onChange:this.onChange}))),a&&[t("datalist",{id:`${this.state._id}-list`},this.state._suggestions.map((e=>t("option",{value:e}))))])))}constructor(t){i(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.ref=t,o(this.host,t),!this._value&&(null===(e=this.ref)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.ref.value)))},this.onChange=t=>{var e,n;let i=parseFloat(t.target.value);this.state._max&&i>this.state._max&&(i=this.state._max),this.state._min&&i<this.state._min&&(i=this.state._min),this.validateValue(i),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(n=this.state._on)||void 0===n||n.onChange(t,i))},this.onKeyUp=t=>{"Enter"===t.code?r({form:this.host,ref:this.ref}):this.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!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._name=void 0,this._on=void 0,this._step=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${a()}`,_label:"",_suggestions:[]},this.controller=new y(this,"input-range",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateStep(t){this.controller.validateStep(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:v};export{g 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","validateHideError","hooks","afterPatch","state","_hideError","a11yHint","validateMax","watchNumber","validateMin","validateStep","validateSuggestions","validateValue","setFormAssociatedValue","_value","componentWillLoad","_autoComplete","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRange","render","ariaDescribedBy","getRenderStates","hasSuggestions","Array","isArray","length","hasExpertSlot","showExpertSlot","_label","h","Host","class","range","_hideLabel","_disabled","_error","_hint","_icons","_id","_tooltipAlign","_touched","slot","style","Object","assign","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","list","max","min","_name","spellcheck","step","tabIndex","type","controller","onFacade","onChange","ref","catchInputNumberRef","id","onKeyUp","map","option","hostRef","element","propagateFocus","_a","parseFloat","event","target","_on","_b","code","propagateSubmitEventToForm","form","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { InputTypeOnOff } from '../../types/input/types';\nimport { HideErrorPropType, validateHideError } from '../../types/props/hide-error';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\nimport { a11yHint } from '../../utils/a11y.tipps';\nimport { watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tvalidateHideError(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideError) {\n\t\t\t\t\t\ta11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateHideError(this.component._hideError);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n.inputs-wrapper {\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n}\ninput[type='number'] {\n\tmin-height: var(--a11y-min-size);\n\tmin-width: var(--a11y-min-size);\n\twidth: var(--kolibri-input-range--input-number--width);\n}\n/*\n * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n */\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 1px solid #000;\n\tdisplay: inline-block;\n\tflex-grow: 1;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n\twidth: 0; /* Design-Hack - related with flex-grow */\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n.error.hidden {\n\tdisplay: none;\n}\n\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n\t::-webkit-slider-thumb {\n\t\toutline: 1px solid currentColor;\n\t}\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SuggestionsPropType } from '../../types/props/suggestions';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { API, States } from './types';\n\n/**\n * @slot - Die Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements API {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.ref = element;\n\t\t\tpropagateFocus(this.host, element);\n\t\t\tif (!this._value && this.ref?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.ref.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tlet value = parseFloat((event.target as HTMLInputElement).value);\n\t\tif (this.state._max && value > this.state._max) value = this.state._max;\n\t\tif (this.state._min && value < this.state._min) value = this.state._min;\n\t\tthis.validateValue(value);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on?.onChange(event, value);\n\t\t}\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\trange: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot name=\"expert\"></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"inputs-wrapper\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tref={this.catchInputNumberRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-number` : undefined}\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{hasSuggestions && [\n\t\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t\t{this.state._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t\t//   {this.state._suggestions.map((option: InputOption<number>) => (\n\t\t\t\t\t\t\t//     <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t\t//   ))}\n\t\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t\t]}\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the largest possible input value.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'input-range', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateHideError","hooks","afterPatch","state","_hideError","a11yHint","validateMax","watchNumber","validateMin","validateStep","validateSuggestions","validateValue","setFormAssociatedValue","_value","componentWillLoad","_autoComplete","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRange","render","ariaDescribedBy","getRenderStates","hasSuggestions","Array","isArray","length","hasExpertSlot","showExpertSlot","_label","h","Host","class","range","_hideLabel","_accessKey","_disabled","_error","_hint","_icons","_id","_tooltipAlign","_touched","slot","Fragment","InternalUnderlinedAccessKey","accessKey","label","style","Object","assign","title","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","list","max","min","_name","spellcheck","step","tabIndex","type","controller","onFacade","onChange","ref","catchInputNumberRef","id","onKeyUp","map","option","hostRef","element","propagateFocus","_a","parseFloat","event","target","_on","_b","code","propagateSubmitEventToForm","form","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { InputTypeOnOff } from '../../types/input/types';\nimport { HideErrorPropType, validateHideError } from '../../types/props/hide-error';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\nimport { a11yHint } from '../../utils/a11y.tipps';\nimport { watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tvalidateHideError(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideError) {\n\t\t\t\t\t\ta11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateHideError(this.component._hideError);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n@layer kol-component {\n\t.inputs-wrapper {\n\t\talign-items: center;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t}\n\n\tinput[type='number'] {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t\twidth: var(--kolibri-input-range--input-number--width);\n\t}\n\n\t/*\n   * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n   */\n\tinput[type='range'] {\n\t\tappearance: none;\n\t\tbackground-color: #d3d3d3;\n\t\tborder: 1px solid #000;\n\t\tdisplay: inline-block;\n\t\tflex-grow: 1;\n\t\theight: 0.5rem;\n\t\tline-height: 1.5em;\n\t\tpadding: 0;\n\t\tmargin: 0;\n\t\twidth: 0; /* Design-Hack - related with flex-grow */\n\t}\n\n\tinput[type='range']::-webkit-slider-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-webkit-appearance: none;\n\t}\n\n\tinput[type='range']::-moz-range-thumb {\n\t\tbox-sizing: border-box;\n\t\tbackground-color: #000;\n\t\theight: 20px;\n\t\twidth: 20px;\n\t\tborder-radius: 20px;\n\t\tcursor: pointer;\n\t\t-moz-appearance: none;\n\t}\n\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n\t::-webkit-slider-thumb {\n\t\toutline: 1px solid currentColor;\n\t}\n}\n","import { Component, Element, Fragment, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SuggestionsPropType } from '../../types/props/suggestions';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { API, States } from './types';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\n\n/**\n * @slot - Die Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements API {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.ref = element;\n\t\t\tpropagateFocus(this.host, element);\n\t\t\tif (!this._value && this.ref?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.ref.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tlet value = parseFloat((event.target as HTMLInputElement).value);\n\t\tif (this.state._max && value > this.state._max) value = this.state._max;\n\t\tif (this.state._min && value < this.state._min) value = this.state._min;\n\t\tthis.validateValue(value);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on?.onChange(event, value);\n\t\t}\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\trange: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"inputs-wrapper\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tref={this.catchInputNumberRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-number` : undefined}\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{hasSuggestions && [\n\t\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t\t{this.state._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t\t//   {this.state._suggestions.map((option: InputOption<number>) => (\n\t\t\t\t\t\t\t//     <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t\t//   ))}\n\t\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t\t]}\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the largest possible input value.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'input-range', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-d0c806ea.js";import{a as s,s as n}from"./prop.validators-125a3282.js";import{f as l}from"./a11y.tipps-583a2096.js";import{n as o}from"./dev.utils-2a853234.js";import{a as r,s as d}from"./reuse-b3566e4c.js";import{p as h}from"./controller-eb162f21.js";import{g as p}from"./controller-75d286de.js";import{a as u}from"./controller-a13b8955.js";import"./hide-label-2c0bf25c.js";import"./label-0d258cd5.js";import"./events-2bb1065b.js";import"./tab-index-5e7494f0.js";import"./associated.controller-103e6fb9.js";import"./controller-cdba1088.js";import"./controller-icon-fb1feb61.js";import"./icons-ad8a28c6.js";import"./suggestions-50a767be.js";const c=(t,e)=>{s(t,"_alert",e)},f=":host{--a11y-min-size:44px;font-size:inherit}*{font-family:Verdana;hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.error.hidden{display:none}";l("[KolInputText] Pre- und post-Label für Währung usw.");const v=class{render(){const{ariaDescribedBy:a}=p(this.state),i=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=d(this.state._label);return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},s?t("slot",{name:"expert"}):this.state._label),t("div",{slot:"input"},t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:i?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})))))}constructor(t){i(this,t),this.catchRef=t=>{var e;this.ref=t,r(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{n(this,"_currentLength",t.target.value.length),"Enter"===t.code||"NumpadEnter"===t.code?h({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,a;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(a=this.ref)||void 0===a?void 0:a.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${o()}`,_label:"",_suggestions:[],_type:"text"},this.controller=new u(this,"input-text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){c(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}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)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};v.style={default:f};export{v as kol_input_text};
+import{h as t,F as e,H as n,r as i,g as a}from"./index-0bc40dc4.js";import{a as s,s as l}from"./prop.validators-445950f8.js";import{f as o}from"./a11y.tipps-1e89ea61.js";import{n as r}from"./dev.utils-babc1742.js";import{a as d,s as h}from"./reuse-b3566e4c.js";import{p}from"./controller-88531ae3.js";import{g as u}from"./controller-85e5be61.js";import{I as c}from"./InternalUnderlinedAccessKey-8b996006.js";import{a as m}from"./controller-f2d3b802.js";import"./hide-label-c9289ea1.js";import"./label-cdb96413.js";import"./events-2bb1065b.js";import"./tab-index-d2087b2a.js";import"./associated.controller-89ab9c94.js";import"./controller-d31e838e.js";import"./controller-icon-9794a8aa.js";import"./icons-97af6e5f.js";import"./suggestions-59d82dad.js";const f=(t,e)=>{s(t,"_alert",e)},v="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * Minimum size of interactive elements.\n\t\t */\n\t\t--a11y-min-size: 44px;\n\t\t/*\n\t\t * Verdana is an accessible font that can be used without requiring additional loading time.\n\t\t */\n\t\tfont-family: Verdana;\n\t}\n\n\t* {\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\thyphens: auto;\n\t\t/*\n\t\t * Letter spacing is required for all texts.\n\t\t */\n\t\tletter-spacing: inherit;\n\t\t/*\n\t\t * This rule enables the word dividing for all texts. That is important for high zoom levels.\n\t\t */\n\t\tword-break: break-word;\n\t\t/*\n\t\t * Word spacing is required for all texts.\n\t\t */\n\t\tword-spacing: inherit;\n\t}\n\n\t/*\n\t * All interactive elements should have a minimum size of 44px.\n\t */\n\t/* input:not([type='checkbox'], [type='radio'], [type='range']), */\n\t/* option, */\n\t/* select, */\n\t/* textarea, */\n\t[role='button'],\n\tbutton:not([role='link']),\n\tkol-input .input {\n\t\tmin-height: var(--a11y-min-size);\n\t\tmin-width: var(--a11y-min-size);\n\t}\n\n\t/*\n\t * Some interactive elements should not inherit the font-family and font-size.\n\t */\n\ta,\n\tbutton,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6,\n\tinput,\n\toption,\n\tselect,\n\ttextarea {\n\t\t/*\n\t\t * All elements should inherit the font family from his parent element.\n\t\t */\n\t\tfont-family: inherit;\n\t\t/*\n\t\t * All elements should inherit the font size from his parent element.\n\t\t */\n\t\tfont-size: inherit;\n\t}\n}\n\n@layer kol-global {\n\t/*\n\t * Dieses CSS stellt sicher, dass der Standard-Style\n\t * von A und Button resettet werden.\n\t */\n\t:is(a, button) {\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\twidth: 100%; /* 100% needed for custom width from outside */\n\t}\n}\n\n@layer kol-global {\n\t:host {\n\t\t/*\n\t\t * The max-width is needed to prevent the table from overflowing the\n\t\t * parent node, if the table is wider than the parent node.\n\t\t */\n\t\tmax-width: 100%;\n\t}\n\n\t* {\n\t\t/*\n\t\t * We prefer to box-sizing: border-box for all elements.\n\t\t */\n\t\tbox-sizing: border-box;\n\t}\n\n\t/* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n\tkol-span-wc {\n\t\tdisplay: grid;\n\t\tplace-items: center;\n\t}\n\n\t/* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n\tkol-span-wc > span {\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\ta,\n\tbutton {\n\t\tcursor: pointer;\n\t}\n\n\t/* This is the text label. */\n\t.icon-only > kol-span-wc > span > span {\n\t\tdisplay: none;\n\t}\n}\n\n@layer kol-component {\n\t.required label > span::after,\n\t.required legend > span::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: block;\n\t}\n}\n\n@layer kol-component {\n\tinput,\n\ttextarea {\n\t\tcursor: text;\n\t}\n\n\tinput[type='checkbox'],\n\tinput[type='color'],\n\tinput[type='file'],\n\tinput[type='radio'],\n\tinput[type='range'],\n\tlabel,\n\toption,\n\tselect {\n\t\tcursor: pointer;\n\t}\n\n\t/* input[type='checkbox'], */\n\t/* input[type='radio'], */\n\t/* input[type='range'], */\n\tinput[type='color'],\n\tinput[type='date'],\n\tinput[type='datetime-local'],\n\tinput[type='email'],\n\tinput[type='file'],\n\tinput[type='month'],\n\tinput[type='number'],\n\tinput[type='password'],\n\tinput[type='search'],\n\tinput[type='tel'],\n\tinput[type='text'],\n\tinput[type='time'],\n\tinput[type='url'],\n\tinput[type='week'],\n\tselect,\n\tselect[multiple] option,\n\ttextarea {\n\t\tfont-size: 1rem;\n\t\twidth: 100%;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tinput[type='file'] {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 10) 0.5em;\n\t}\n\n\t/* needed hack for vertical alignment */\n\tselect[multiple] option {\n\t\tpadding: calc((var(--a11y-min-size) - 1rem) / 2) 0.5em;\n\t}\n\n\tkol-input.disabled :is(button, input, label, option, select, textarea) {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n}\n\n@layer kol-component {\n\tkol-input {\n\t\tdisplay: grid;\n\t}\n\n\tkol-input .input-slot {\n\t\tflex-grow: 1;\n\t}\n\n\tinput:not([type='checkbox'], [type='radio']),\n\tselect:not([multiple], [size]) {\n\t\theight: 2.75em;\n\t}\n\n\tinput:focus,\n\toption:focus,\n\tselect:focus,\n\ttextarea:focus {\n\t\toutline: 0;\n\t}\n\n\t.input {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.input > kol-icon {\n\t\tdisplay: grid;\n\t\theight: var(--a11y-min-size);\n\t\tplace-items: center;\n\t}\n\n\tkol-input.required .input-tooltip .span-label::after {\n\t\tcontent: '*';\n\t}\n}\n\n@layer kol-component {\n\t.error.hidden {\n\t\tdisplay: none;\n\t}\n}\n";o("[KolInputText] Pre- und post-Label für Währung usw.");const y=class{render(){const{ariaDescribedBy:a}=u(this.state),i=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,l=h(this.state._label);return t(n,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_accessKey:this.state._accessKey,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},l?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey?t(e,null,t(c,{accessKey:this.state._accessKey,label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):t("span",null,this.state._label)),t("div",{slot:"input"},t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:i?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})))))}constructor(t){i(this,t),this.catchRef=t=>{var e;this.ref=t,d(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{l(this,"_currentLength",t.target.value.length),"Enter"===t.code||"NumpadEnter"===t.code?p({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,n;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(n=this.ref)||void 0===n?void 0:n.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${r()}`,_label:"",_suggestions:[],_type:"text"},this.controller=new m(this,"input-text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){f(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}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)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};y.style={default:v};export{y as kol_input_text};