@public-ui/components 1.7.9 → 1.7.10-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","KolInputPasswordDefaultStyle0","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","role","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\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\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()}`,\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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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as e}from"./index-5dfe6d77.js";import{e as t}from"./a11y.tipps-f6c45c86.js";import"./dev.utils-0559a5fe.js";import"./reuse-d79ab469.js";const s=class{constructor(e){i(this,e),this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,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._orientation="vertical",this._required=!1,this._tabIndex=void 0,this._touched=!1,this._value=void 0}render(){return t("[KolInputRadioGroup] Die Komponenten Input-Radio-Group und Input-Radio werden zur Komponente Input-Radio zusammengeführt. Wir empfehlen den Tag <kol-input-radio> statt <kol-input-radio-group> zu verwenden.\n\nMit der Version 1.1 wird die Komponente KolInputRadioGroup aus der Bibliothek entfernt."),e("kol-input-radio",{_accessKey:this._accessKey,_disabled:this._disabled,_error:this._error,_hideLabel:this._hideLabel,_id:this._id,_label:this._label,_list:this._list,_name:this._name,_on:this._on,_orientation:this._orientation,_required:this._required,_tabIndex:this._tabIndex,_touched:this._touched,_value:this._value},e("slot",null))}};export{s as kol_input_radio_group};
+import{r as i,h as e}from"./index-0b7aa54b.js";import{e as t}from"./a11y.tipps-32a6b338.js";import"./dev.utils-7c5ec760.js";import"./reuse-d79ab469.js";const s=class{constructor(t){i(this,t),this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,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._orientation="vertical",this._required=!1,this._tabIndex=void 0,this._touched=!1,this._value=void 0}render(){return t("[KolInputRadioGroup] Die Komponenten Input-Radio-Group und Input-Radio werden zur Komponente Input-Radio zusammengeführt. Wir empfehlen den Tag <kol-input-radio> statt <kol-input-radio-group> zu verwenden.\n\nMit der Version 1.1 wird die Komponente KolInputRadioGroup aus der Bibliothek entfernt."),e("kol-input-radio",{_accessKey:this._accessKey,_disabled:this._disabled,_error:this._error,_hideLabel:this._hideLabel,_id:this._id,_label:this._label,_list:this._list,_name:this._name,_on:this._on,_orientation:this._orientation,_required:this._required,_tabIndex:this._tabIndex,_touched:this._touched,_value:this._value},e("slot",null))}};export{s as kol_input_radio_group};

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-5dfe6d77.js";import{n as s}from"./dev.utils-0559a5fe.js";import{s as n,t as r}from"./events-fa760b68.js";import{a as l,s as d}from"./reuse-d79ab469.js";import{g as o}from"./controller-2ae84856.js";import{a as h}from"./controller-1b6f1e7d.js";import"./prop.validators-b9732831.js";import"./index-24073a5e.js";import"./a11y.tipps-f6c45c86.js";import"./hide-label-3f5a18f0.js";import"./label-4225dcc0.js";import"./tab-index-0f24625a.js";import"./associated.controller-e5f4e28f.js";const p=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.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,option,select,textarea,.input-label){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}@media (forced-colors: active){input:checked:before{background:highlight !important;}}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}`,o=`radio-${a}`;return e("kol-input",{class:{radio:!0,disabled:Boolean(this.state._disabled||i.disabled)},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:o,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},e("div",{slot:o,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:`${this.state._id}-error`,_alert:!0,_type:"error",class:"error"+(this._hideError?" hidden":"")},this.state._error)))}constructor(e){t(this,e),this.catchRef=e=>{l(this.host,e)},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 i,r as t,g as a}from"./index-0b7aa54b.js";import{n as s}from"./dev.utils-7c5ec760.js";import{s as n,t as r}from"./events-fa760b68.js";import{s as l,a as d}from"./reuse-d79ab469.js";import{g as o}from"./controller-cc137d03.js";import{a as h}from"./controller-a8c30b23.js";import"./prop.validators-5fa8ad17.js";import"./index-c88c7ecf.js";import"./a11y.tipps-32a6b338.js";import"./hide-label-6d0b4e87.js";import"./label-0eaa3401.js";import"./tab-index-5c4bb50c.js";import"./associated.controller-983c7497.js";const p=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.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,option,select,textarea,.input-label){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}@media (forced-colors: active){input:checked:before{background:highlight !important;}}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=p,c=class{render(){const{ariaDescribedBy:t,hasError:a}=o(this.state),r=l(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"},r?e("slot",null):this.state._label))),this.state._options.map(((i,a)=>{const l=`${this.state._id}-${a}`,o=`radio-${a}`;return e("kol-input",{class:{radio:!0,disabled:Boolean(this.state._disabled||i.disabled)},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:o,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},e("div",{slot:o,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:`${this.state._id}-error`,_alert:!0,_type:"error",class:"error"+(this._hideError?" hidden":"")},this.state._error)))}constructor(e){t(this,e),this.catchRef=e=>{d(this.host,e)},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"]}}};c.style={default:u};export{c as kol_input_radio};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolInputRadio","render","ariaDescribedBy","hasError","getRenderStates","this","state","hasExpertSlot","showExpertSlot","_label","h","Host","class","disabled","_disabled","error","required","_required","_hideError","_orientation","slot","_options","map","option","index","customId","_id","slotName","radio","Boolean","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","_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}\n@media (forced-colors: active) {\n\tinput:checked:before {\n\t\tbackground: highlight !important; /* Give it a visible background in forced colors mode */\n\t}\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\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t\t{/*  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={{\n\t\t\t\t\t\t\t\t\tradio: true,\n\t\t\t\t\t\t\t\t\tdisabled: Boolean(this.state._disabled || option.disabled),\n\t\t\t\t\t\t\t\t}}\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={`${this.state._id}-error`} _alert={true} _type=\"error\" 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","KolInputRadioDefaultStyle0","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","radio","Boolean","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","_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}\n@media (forced-colors: active) {\n\tinput:checked:before {\n\t\tbackground: highlight !important; /* Give it a visible background in forced colors mode */\n\t}\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\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t\t{/*  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={{\n\t\t\t\t\t\t\t\t\tradio: true,\n\t\t\t\t\t\t\t\t\tdisabled: Boolean(this.state._disabled || option.disabled),\n\t\t\t\t\t\t\t\t}}\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={`${this.state._id}-error`} _alert={true} _type=\"error\" 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()}`,\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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"}

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-5dfe6d77.js";import{n as a}from"./dev.utils-0559a5fe.js";import{a as n,s as o}from"./reuse-d79ab469.js";import{p as l}from"./controller-21996017.js";import{g as r}from"./controller-2ae84856.js";import{v as d}from"./suggestions-aa86adad.js";import{w as h,e as p}from"./prop.validators-b9732831.js";import{I as u}from"./controller-icon-1add4713.js";import"./a11y.tipps-f6c45c86.js";import"./hide-label-3f5a18f0.js";import"./label-4225dcc0.js";import"./events-fa760b68.js";import"./tab-index-0f24625a.js";import"./associated.controller-e5f4e28f.js";import"./index-24073a5e.js";import"./icons-d1b67f7d.js";class c extends u{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){h(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){Array.isArray(t)&&this.validateSuggestions(t.map((t=>t.value)))}validateMax(t){p(this.component,"_max",t)}validateMin(t){p(this.component,"_min",t)}validateStep(t){p(this.component,"_step",t)}validateSuggestions(t){d(this.component,t)}validateValue(t){p(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),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 f=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.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,option,select,textarea,.input-label){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}}",m=class{componentDidLoad(){var t;!this._value&&(null===(t=this.refInputRange)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputRange.value))}render(){const{ariaDescribedBy:e}=r(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({ref:this.catchInputRangeRef,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,"aria-hidden":"true",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.refInputNumber=t,n(this.host,t),!this._value&&(null===(e=this.refInputNumber)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=t=>{t&&(this.refInputRange=t)},this.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?l({form:this.host,ref:this.refInputRange}):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 c(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"]}}};m.style={default:f};export{m as kol_input_range};
+import{h as t,H as i,r as e,g as s}from"./index-0b7aa54b.js";import{n as a}from"./dev.utils-7c5ec760.js";import{s as n,a as o}from"./reuse-d79ab469.js";import{p as l}from"./controller-894ab5d8.js";import{g as r}from"./controller-cc137d03.js";import{v as d}from"./suggestions-482f16b1.js";import{w as h,e as p}from"./prop.validators-5fa8ad17.js";import{I as u}from"./controller-icon-1b496c1d.js";import"./a11y.tipps-32a6b338.js";import"./hide-label-6d0b4e87.js";import"./label-0eaa3401.js";import"./events-fa760b68.js";import"./tab-index-5c4bb50c.js";import"./associated.controller-983c7497.js";import"./index-c88c7ecf.js";import"./icons-4a6e7e5d.js";class c extends u{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){h(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){Array.isArray(t)&&this.validateSuggestions(t.map((t=>t.value)))}validateMax(t){p(this.component,"_max",t)}validateMin(t){p(this.component,"_min",t)}validateStep(t){p(this.component,"_step",t)}validateSuggestions(t){d(this.component,t)}validateValue(t){p(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),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 m=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.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,option,select,textarea,.input-label){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}}",f=m,b=class{componentDidLoad(){var t;!this._value&&(null===(t=this.refInputRange)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputRange.value))}render(){const{ariaDescribedBy:e}=r(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=n(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({ref:this.catchInputRangeRef,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,"aria-hidden":"true",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.refInputNumber=t,o(this.host,t),!this._value&&(null===(e=this.refInputNumber)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=t=>{t&&(this.refInputRange=t)},this.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?l({form:this.host,ref:this.refInputRange}):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 c(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"]}}};b.style={default:f};export{b as kol_input_range};

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

@@ -1 +1 @@
-{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","Array","isArray","validateSuggestions","map","option","validateMax","watchNumber","validateMin","validateStep","validateValue","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_list","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRange","componentDidLoad","_a","refInputRange","parseFloat","render","ariaDescribedBy","getRenderStates","hasSuggestions","length","hasExpertSlot","showExpertSlot","_label","h","Host","class","range","_hideLabel","_disabled","_error","_hideError","_hint","_icons","_id","_tooltipAlign","_touched","slot","style","Object","assign","ref","catchInputRangeRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","list","max","min","_name","spellcheck","step","tabIndex","type","controller","onFacade","onChange","catchInputNumberRef","id","onKeyUp","hostRef","element","refInputNumber","propagateFocus","event","target","_on","_b","code","propagateSubmitEventToForm","form","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideError","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 type { Generic } from 'adopted-style-sheets';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @deprecated use _suggestions\n\t */\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tif (Array.isArray(value)) {\n\t\t\tthis.validateSuggestions(value.map((option) => option.value));\n\t\t}\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n.inputs-wrapper {\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n}\ninput[type='number'] {\n\tmin-height: var(--a11y-min-size);\n\tmin-width: var(--a11y-min-size);\n\twidth: var(--kolibri-input-range--input-number--width);\n}\n/*\n * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n */\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 1px solid #000;\n\tdisplay: inline-block;\n\tflex-grow: 1;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n\twidth: 0; /* Design-Hack - related with flex-grow */\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n.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 refInputNumber?: HTMLInputElement;\n\tprivate refInputRange?: HTMLInputElement;\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputNumber = element;\n\t\t\tpropagateFocus(this.host, element);\n\t\t\tif (!this._value && this.refInputNumber?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.refInputNumber.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly catchInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate 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.refInputRange,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\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\tref={this.catchInputRangeRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\t\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","validateList","Array","isArray","validateSuggestions","map","option","validateMax","watchNumber","validateMin","validateStep","validateValue","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_list","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRangeDefaultStyle0","KolInputRange","componentDidLoad","_a","refInputRange","parseFloat","render","ariaDescribedBy","getRenderStates","hasSuggestions","length","hasExpertSlot","showExpertSlot","_label","h","Host","class","range","_hideLabel","_disabled","_error","_hideError","_hint","_icons","_id","_tooltipAlign","_touched","slot","style","Object","assign","ref","catchInputRangeRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","list","max","min","_name","spellcheck","step","tabIndex","type","controller","onFacade","onChange","catchInputNumberRef","id","onKeyUp","hostRef","element","refInputNumber","propagateFocus","event","target","_on","_b","code","propagateSubmitEventToForm","form","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideError","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 type { Generic } from 'adopted-style-sheets';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @deprecated use _suggestions\n\t */\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tif (Array.isArray(value)) {\n\t\t\tthis.validateSuggestions(value.map((option) => option.value));\n\t\t}\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n.inputs-wrapper {\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n}\ninput[type='number'] {\n\tmin-height: var(--a11y-min-size);\n\tmin-width: var(--a11y-min-size);\n\twidth: var(--kolibri-input-range--input-number--width);\n}\n/*\n * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n */\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 1px solid #000;\n\tdisplay: inline-block;\n\tflex-grow: 1;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n\twidth: 0; /* Design-Hack - related with flex-grow */\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n.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 refInputNumber?: HTMLInputElement;\n\tprivate refInputRange?: HTMLInputElement;\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputNumber = element;\n\t\t\tpropagateFocus(this.host, element);\n\t\t\tif (!this._value && this.refInputNumber?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.refInputNumber.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly catchInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate 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.refInputRange,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\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\tref={this.catchInputRangeRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\t\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()}`,\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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"}

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-5dfe6d77.js";import{a as s,s as n}from"./prop.validators-b9732831.js";import{f as l}from"./a11y.tipps-f6c45c86.js";import{n as o}from"./dev.utils-0559a5fe.js";import{a as d,s as r}from"./reuse-d79ab469.js";import{p as h}from"./controller-21996017.js";import{g as p}from"./controller-2ae84856.js";import{a as u}from"./controller-4d7c0722.js";import"./index-24073a5e.js";import"./hide-label-3f5a18f0.js";import"./label-4225dcc0.js";import"./events-fa760b68.js";import"./tab-index-0f24625a.js";import"./associated.controller-e5f4e28f.js";import"./controller-dfcfc09a.js";import"./controller-icon-1add4713.js";import"./icons-d1b67f7d.js";import"./suggestions-aa86adad.js";const c=(t,e)=>{s(t,"_alert",e)},f=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.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,option,select,textarea,.input-label){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:i}=p(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=r(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,d(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"]}}};v.style={default:f};export{v as kol_input_text};
+import{h as t,H as e,r as i,g as a}from"./index-0b7aa54b.js";import{a as s,s as n}from"./prop.validators-5fa8ad17.js";import{f as l}from"./a11y.tipps-32a6b338.js";import{n as o}from"./dev.utils-7c5ec760.js";import{s as d,a as r}from"./reuse-d79ab469.js";import{p as h}from"./controller-894ab5d8.js";import{g as p}from"./controller-cc137d03.js";import{a as u}from"./controller-5fe78992.js";import"./index-c88c7ecf.js";import"./hide-label-6d0b4e87.js";import"./label-0eaa3401.js";import"./events-fa760b68.js";import"./tab-index-5c4bb50c.js";import"./associated.controller-983c7497.js";import"./controller-2693d568.js";import"./controller-icon-1b496c1d.js";import"./icons-4a6e7e5d.js";import"./suggestions-482f16b1.js";const c=(t,e)=>{s(t,"_alert",e)},v=":host{--a11y-min-size:44px;background-color:white;color:black;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}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}: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}.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,option,select,textarea,.input-label){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}",f=v;l("[KolInputText] Pre- und post-Label für Währung usw.");const m=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()},role:"presentation"},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"]}}};m.style={default:f};export{m as kol_input_text};