@public-ui/components 1.7.2 → 2.0.0-rc.0

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","Object","assign","catchRef","title","accessKey","_accessKey","length","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","maxlength","name","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","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","validateIcon","validateIcons","validateId","validateLabel","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","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{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype=\"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 * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\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 * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\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('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(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/**\n\t * @deprecated\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: 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","_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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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,H as i,r as t,g as a}from"./index-536799d5.js";import{n as s}from"./dev.utils-3aaea35b.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-c1e12c57.js";import{a as h}from"./controller-0ef19f0b.js";import"./prop.validators-704b3c58.js";import"./a11y.tipps-f9fe8130.js";import"./index-3822b0c5.js";import"./hide-label-cfd7f509.js";import"./label-356cfbae.js";import"./tab-index-42d29061.js";import"./associated.controller-20be9d74.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:t,hasError:a}=o(this.state),l=d(this.state._label);return e(i,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",null):this.state._label))),this.state._options.map(((i,a)=>{const l=`${this.state._id}-${a}`,r=`radio-${a}`;return e("kol-input",{class:"radio",key:l,_disabled:this.state._disabled||i.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:l,_label:i.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===i.value?this.catchRef:void 0,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof i.label?i.label:void 0,type:"radio",id:l,checked:this.state._value===i.value,name:this.state._name||this.state._id,disabled:this.state._disabled||i.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,i.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){t(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._list=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)}validateList(e){this.validateOptions(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"],_list:["validateList"],_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 e,H as t,r as i,g as a}from"./index-536799d5.js";import{n as s}from"./dev.utils-b5b1c70d.js";import{s as n,t as r}from"./events-2bb1065b.js";import{a as d,s as l}from"./reuse-b3566e4c.js";import{g as o}from"./controller-757cd887.js";import{a as h}from"./controller-f1d4f4d4.js";import"./prop.validators-fa5eb5c5.js";import"./a11y.tipps-7143f6fd.js";import"./hide-label-27292184.js";import"./label-84d4c0b2.js";import"./tab-index-3ce2c695.js";import"./associated.controller-d70c8be1.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),r=l(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"},r?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,d(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};

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","_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","_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","validateList","validateOptions","validateName","validateOn","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, Option } 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{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></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 * Deprecated: Gibt die Liste der Optionen für das Eingabefeld an.\n\t * @deprecated Use _options.\n\t */\n\t@Prop() public _list?: Stringified<Option<W3CInputValue>[]>;\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('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(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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"}
+{"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":"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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-536799d5.js";import{n as a}from"./dev.utils-3aaea35b.js";import{a as n,s as o}from"./reuse-b3566e4c.js";import{p as r}from"./controller-e913ab35.js";import{v as l,g as d}from"./controller-c1e12c57.js";import{v as h}from"./suggestions-d1aa4116.js";import{a as p}from"./a11y.tipps-f9fe8130.js";import{w as u,e as c}from"./prop.validators-704b3c58.js";import{I as f}from"./controller-icon-15155d15.js";import"./hide-label-cfd7f509.js";import"./label-356cfbae.js";import"./events-2bb1065b.js";import"./tab-index-42d29061.js";import"./associated.controller-20be9d74.js";import"./index-3822b0c5.js";import"./icons-9056d7aa.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.")}}})}validateList(t){Array.isArray(t)&&this.validateSuggestions(t.map((t=>t.value)))}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.validateList(this.component._list),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",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":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._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=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)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(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"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_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,H as i,r as e,g as s}from"./index-536799d5.js";import{n as a}from"./dev.utils-b5b1c70d.js";import{a as n,s as o}from"./reuse-b3566e4c.js";import{p as r}from"./controller-8bf7eac9.js";import{v as l,g as d}from"./controller-757cd887.js";import{v as h}from"./suggestions-7c5183fe.js";import{a as p}from"./a11y.tipps-7143f6fd.js";import{w as u,e as c}from"./prop.validators-fa5eb5c5.js";import{I as m}from"./controller-icon-d4a91832.js";import"./hide-label-27292184.js";import"./label-84d4c0b2.js";import"./events-2bb1065b.js";import"./tab-index-3ce2c695.js";import"./associated.controller-d70c8be1.js";import"./icons-b6a6d907.js";class f extends m{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 f(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};

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","validateList","Array","isArray","validateSuggestions","map","option","validateMax","watchNumber","validateMin","validateStep","validateValue","setFormAssociatedValue","_value","componentWillLoad","_autoComplete","_list","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRange","render","ariaDescribedBy","getRenderStates","hasSuggestions","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","hostRef","element","propagateFocus","_a","parseFloat","event","target","_on","_b","code","propagateSubmitEventToForm","form","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","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';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { HideErrorPropType, validateHideError } from '../../types/props/hide-error';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\nimport { W3CInputValue } from '../../types/w3c';\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\t/**\n\t * @deprecated use _suggestions\n\t */\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tif (Array.isArray(value)) {\n\t\t\tthis.validateSuggestions(value.map((option) => option.value));\n\t\t}\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateHideError(this.component._hideError);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n.inputs-wrapper {\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n}\ninput[type='number'] {\n\tmin-height: var(--a11y-min-size);\n\tmin-width: var(--a11y-min-size);\n\twidth: var(--kolibri-input-range--input-number--width);\n}\n/*\n * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n */\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 1px solid #000;\n\tdisplay: inline-block;\n\tflex-grow: 1;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n\twidth: 0; /* Design-Hack - related with flex-grow */\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n.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, Option } 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{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"inputs-wrapper\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tref={this.catchInputNumberRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-number` : undefined}\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</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 * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\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 * Deprecated: Gibt die Liste der Vorschlagswörter an.\n\t * @deprecated Use _suggestions.\n\t */\n\t@Prop() public _list?: Stringified<Option<W3CInputValue>[]>;\n\n\t/**\n\t * Defines the largest possible input value.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_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('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(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('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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"}
+{"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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"}

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-536799d5.js";import{a as s,s as n}from"./prop.validators-704b3c58.js";import{f as l}from"./a11y.tipps-f9fe8130.js";import{n as o}from"./dev.utils-3aaea35b.js";import{a as r,s as d}from"./reuse-b3566e4c.js";import{p as h}from"./controller-e913ab35.js";import{g as p}from"./controller-c1e12c57.js";import{a as u}from"./controller-7c8a5903.js";import"./index-3822b0c5.js";import"./hide-label-cfd7f509.js";import"./label-356cfbae.js";import"./events-2bb1065b.js";import"./tab-index-42d29061.js";import"./associated.controller-20be9d74.js";import"./controller-a62420aa.js";import"./controller-icon-15155d15.js";import"./icons-9056d7aa.js";import"./suggestions-d1aa4116.js";const c=(t,e)=>{s(t,"_alert",e)},v=":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 f=class{render(){const{ariaDescribedBy:i}=p(this.state),a=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",null):this.state._label),t("div",{slot:"input"},t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})))))}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,i;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.ref)||void 0===i?void 0:i.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._size=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_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)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};f.style={default:v};export{f as kol_input_text};
+import{h as t,H as e,r as i,g as a}from"./index-536799d5.js";import{a as s,s as n}from"./prop.validators-fa5eb5c5.js";import{f as l}from"./a11y.tipps-7143f6fd.js";import{n as o}from"./dev.utils-b5b1c70d.js";import{a as r,s as d}from"./reuse-b3566e4c.js";import{p as h}from"./controller-8bf7eac9.js";import{g as p}from"./controller-757cd887.js";import{a as u}from"./controller-d5d0c61a.js";import"./hide-label-27292184.js";import"./label-84d4c0b2.js";import"./events-2bb1065b.js";import"./tab-index-3ce2c695.js";import"./associated.controller-d70c8be1.js";import"./controller-313148a2.js";import"./controller-icon-d4a91832.js";import"./icons-b6a6d907.js";import"./suggestions-7c5183fe.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};