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

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

@@ -1 +1 @@
-{"version":3,"names":["InputEmailController","InputTextEmailController","constructor","component","name","host","super","this","validateMultiple","value","watchBoolean","componentWillLoad","_multiple","defaultStyleCss","KolInputEmail","render","ariaDiscribedBy","getRenderStates","state","hasList","Array","isArray","_list","length","h","Host","_alert","_disabled","_error","_hideLabel","_hint","_icon","_id","_readOnly","_required","_smartButton","_touched","slot","Object","assign","ref","catchRef","part","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","multiple","id","list","maxlength","_maxLength","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","type","_value","controller","onFacade","onKeyUp","hostRef","propergateFocus","event","code","propergateSubmitEventToForm","form","onChange","validateAccessKey","validateAlert","validateAutoComplete","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateList","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","validateSmartButton","validateTabIndex","validateTouched","validateValue"],"sources":["./src/components/input-email/controller.ts","./src/components/input-email/style.css?tag=kol-input-email&mode=default&encapsulation=shadow","./src/components/input-email/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { InputTextEmailController } from '../input-text/controller';\nimport { Props, Watches } from './types';\n\nexport class InputEmailController extends InputTextEmailController 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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateMultiple(this.component._multiple);\n\t}\n}\n","@import '../input-line.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { propergateFocus } from '../../utils/reuse';\nimport { propergateSubmitEventToForm } from '../form/controller';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputEmailController } from './controller';\nimport { ComponentApi, States } from './types';\n\n@Component({\n\ttag: 'kol-input-email',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputEmail implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputEmailElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropergateSubmitEventToForm({\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 { ariaDiscribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\t_alert={this.state._alert}\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_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_list={this.state._list}\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_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\tpart=\"input\"\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t// title={this.state._title}\n\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputEmailController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man maximal eingeben kann.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Gibt ein Prüfpattern für das Eingabefeld an.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob das Radio ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man eingeben kann.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: '…', // ⚠ required\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputEmailController(this, 'email', this.host);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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":["validateMultiple","component","value","watchBoolean","InputEmailController","InputTextEmailController","constructor","name","host","super","this","componentWillLoad","_multiple","defaultStyleCss","KolInputEmail","render","ariaDiscribedBy","getRenderStates","state","hasList","Array","isArray","_list","length","h","Host","class","_hasValue","_alert","_disabled","_error","_hideLabel","_hint","_icon","_id","_readOnly","_required","_smartButton","_touched","slot","Object","assign","ref","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","multiple","id","list","maxlength","_maxLength","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","type","_value","controller","onFacade","onKeyUp","hostRef","propagateFocus","event","code","propagateSubmitEventToForm","form","onChange","validateAccessKey","validateAlert","validateAutoComplete","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateList","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","validateSmartButton","validateTabIndex","validateTouched","validateValue","addValueChangeListener","v"],"sources":["./src/types/props/multiple.ts","./src/components/input-email/controller.ts","./src/components/input-email/style.css?tag=kol-input-email&mode=default&encapsulation=shadow","./src/components/input-email/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Schlatet das Eingabefeld um, sodass es mehrere Eingaben akzeptiert.\n */\n/** en\n * Makes the input accept multiple inputs.\n */\nexport type PropMultiple = {\n\tmultiple: boolean;\n};\n\n/* validator */\nexport const validateMultiple = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_multiple', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { InputTextEmailController } from '../input-text/controller';\nimport { Props, Watches } from './types';\n\nexport class InputEmailController extends InputTextEmailController 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 validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateMultiple(this.component._multiple);\n\t}\n}\n","@import '../input-line.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputEmailController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { validateMultiple } from '../../types/props';\n\n@Component({\n\ttag: 'kol-input-email',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputEmail implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputEmailElement;\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\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 { ariaDiscribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\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\t_alert={this.state._alert}\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_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_list={this.state._list}\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_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t// title={this.state._title}\n\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputEmailController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man maximal eingeben kann.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Gibt ein Prüfpattern für das Eingabefeld an.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob das Radio ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man eingeben kann.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: '…', // ⚠ required\n\t\t_hasValue: false,\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputEmailController(this, 'email', 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('_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<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(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('_list')\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\tthis.controller.validateList(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('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tvalidateMultiple(this, value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_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('_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-file.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as i,H as e,r as t,g as o}from"./index-50adf9a0.js";import{a as r}from"./reuse-56bb5a4b.js";import{g as a}from"./controller-944c3e03.js";import{w as l,b as n}from"./prop.validators-769a843a.js";import{I as s}from"./controller-icon-2a9f5c13.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./tab-index-22c62334.js";import"./index-676dbf61.js";import"./icon-cab2d129.js";class d extends s{constructor(t,e,i){super(t,e,i),this.component=t}validateAccept(t){l(this.component,"_accept",t)}validateMultiple(t){n(this.component,"_multiple",t)}validateRequired(t){n(this.component,"_required",t)}validateValue(t){l(this.component,"_value",t),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateValue(this.component._value)}}const c=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}.kol-required span::after{content:'*'}.kol-disabled{opacity:0.5}.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}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,textarea{background-color:white;display:block;font-size:1rem;line-height:1.5em;min-height:44px;padding:0.5em 0.75em}input[type='color']{height:2.5em;padding:0.25em 0.5em}textarea{padding:0.5em}input,select,textarea{border-color:var(--kolibri-border-color);border-style:solid;border-width:calc(var(--kolibri-spacing) / 2)}.error :is(input,select,textarea){border-color:var(--kolibri-border-error)}:is(input,select,textarea):is(:focus,:hover){border-color:var(--kolibri-color-text)}input:not([type='checkbox']),option,select,textarea{font-size:inherit;letter-spacing:inherit;word-spacing:inherit}kol-input{display:grid;gap:calc(2 * var(--kolibri-spacing))}input,select,textarea{background-color:white;border-color:var(--kolibri-border-color);border-radius:var(--kolibri-border-radius);border-style:solid;border-width:var(--kolibri-border-width);font-size:1em;font-family:var(--kolibri-font-family-sans);line-height:2.5em;overflow:hidden;width:100%}input,select:not([multiple]){height:2.75em}input::placeholder{color:var(--kolibri-color-normal)}input:hover{border-color:var(--kolibri-color-primary)}input:disabled,select:disabled,textarea:disabled,input:not([type='color']):read-only,textarea:read-only{cursor:not-allowed}.required label>span::after{content:'*';padding-left:var(--kolibri-spacing)}.icons{display:flex;justify-content:space-between;height:0}.icons>kol-icon{display:grid;height:44px;padding:0 0.75em;place-items:center}.icon-left input,.icon-left select{padding-left:2em}kol-button-wc{position:relative;float:right;z-index:1000;margin-top:-44px}kol-button-wc button{background-color:transparent;display:inline-block;min-height:44px;min-width:44px}.icon-right kol-button-wc{margin-right:44px}.disabled{opacity:0.5}select[multiple],textarea{overflow:auto}textarea{display:block}select option{margin:var(--kolibri-spacing) 0;padding:0.5em;border-radius:0.25em;cursor:pointer}select option:disabled{cursor:not-allowed}option:not(:disabled):is(:active,:checked,:focus,:hover){background-color:var(--kolibri-color-primary);color:white}label.kol-required span::after{content:'*'}label input[type='file']::-webkit-file-upload-button{display:none}label input[type='file']::before{content:'Datei auswählen'}label input[multiple]::before{content:'Dateien auswählen'}",p=class{render(){const{ariaDiscribedBy:t}=a(this.state);return i(e,null,i("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched},i("span",{slot:"label"},i("slot",null)),i("input",Object.assign({ref:this.catchRef,part:"input",title:"",accept:this.state._accept,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,slot:"input",spellcheck:"false",type:"file",value:this.state._value},this.controller.onFacade,{onChange:this.onChange}))))}constructor(e){t(this,e),this.catchRef=t=>{this.ref=t,r(this.host,this.ref)},this.onChange=t=>{var e;this.ref instanceof HTMLInputElement&&"file"===this.ref.type&&"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,this.ref.files)},this._accept=void 0,this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._multiple=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_id:"…"},this.controller=new d(this,"file",this.host)}validateAccept(t){this.controller.validateAccept(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(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 o(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};p.style={default:c};export{p as kol_input_file};
+import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{a as n}from"./reuse-3a02afb9.js";import{g as s}from"./controller-6ae13480.js";import{w as l,b as d}from"./prop.validators-e402ad49.js";import{I as p}from"./controller-icon-c80da88f.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";import"./icon-00018c54.js";class o extends p{constructor(t,e,i){super(t,e,i),this.component=t}validateAccept(t){l(this.component,"_accept",t)}validateMultiple(t){d(this.component,"_multiple",t)}validateRequired(t){d(this.component,"_required",t)}validateValue(t){l(this.component,"_value",t),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateValue(this.component._value)}}const r=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),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'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}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[multiple] option,select:not([multiple]),textarea{font-size:1rem;padding:0 0.5em}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}input:not([type='radio']),option,select,textarea{display:block;line-height:2.5em;flex-grow:1}input:not([type='radio']),select:not([multiple]){height:2.75em}.input{display:flex;align-items:baseline}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center;width:2.5em}label input[type='file']::-webkit-file-upload-button{display:none}label input[type='file']::before{content:'Datei auswählen'}label input[multiple]::before{content:'Dateien auswählen'}",u=class{render(){const{ariaDiscribedBy:i}=s(this.state);return t(e,null,t("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accept:this.state._accept,accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,slot:"input",spellcheck:"false",type:"file",value:this.state._value},this.controller.onFacade,{onChange:this.onChange}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,n(this.host,this.ref)},this.onChange=t=>{var e;this.ref instanceof HTMLInputElement&&"file"===this.ref.type&&"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,this.ref.files)},this._accept=void 0,this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._multiple=void 0,this._name=void 0,this._on=void 0,this._required=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_id:"…"},this.controller=new o(this,"file",this.host)}validateAccept(t){this.controller.validateAccept(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(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 a(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};u.style={default:r};export{u as kol_input_file};

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

@@ -1 +1 @@
-{"version":3,"names":["InputFileController","InputIconController","constructor","component","name","host","super","this","validateAccept","value","watchString","validateMultiple","watchBoolean","validateRequired","validateValue","setFormAssociatedValue","_value","componentWillLoad","_accept","_multiple","_required","defaultStyleCss","KolInputFile","render","ariaDiscribedBy","getRenderStates","state","h","Host","_disabled","_error","_hideLabel","_hint","_icon","_id","_smartButton","_touched","slot","Object","assign","ref","catchRef","part","title","accept","accessKey","_accessKey","length","join","undefined","autoCapitalize","autoCorrect","disabled","id","multiple","_name","required","spellcheck","type","controller","onFacade","onChange","hostRef","propergateFocus","event","HTMLInputElement","_a","_on","files","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateSmartButton","validateTabIndex","validateTouched","_alert"],"sources":["./src/components/input-file/controller.ts","./src/components/input-file/style.css?tag=kol-input-file&mode=default&encapsulation=shadow","./src/components/input-file/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputFileController 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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateAccept(value?: string): void {\n\t\twatchString(this.component, '_accept', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAccept(this.component._accept);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line.css';\n\nlabel.kol-required span::after {\n\tcontent: '*';\n}\n\nlabel input[type='file']::-webkit-file-upload-button {\n\tdisplay: none;\n}\n\nlabel input[type='file']::before {\n\tcontent: 'Datei auswählen';\n}\n\nlabel input[multiple]::before {\n\tcontent: 'Dateien auswählen';\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { propergateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputFileController } from './controller';\nimport { ComponentApi, States } from './types';\n\n@Component({\n\ttag: 'kol-input-file',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputFile implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputFileElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\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_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\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_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\tpart=\"input\"\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccept={this.state._accept}\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputFileController;\n\n\t/**\n\t * Gibt an, welche Dateiformate erlaubt sind.\n\t */\n\t@Prop() public _accept?: string;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Gibt an, ob das Eingabefeld ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_id: '…', // ⚠ required\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputFileController(this, 'file', this.host);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accept')\n\tpublic validateAccept(value?: string): void {\n\t\tthis.controller.validateAccept(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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\tprivate onChange = (event: Event) => {\n\t\tif (this.ref instanceof HTMLInputElement && this.ref.type === 'file' && typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this.ref.files);\n\t\t}\n\t};\n}\n"],"mappings":";;;2ZAKaA,UAA4BC,EAGxCC,YAAmBC,EAA8CC,EAAcC,GAC9EC,MAAMH,EAAWC,EAAMC,GACvBE,KAAKJ,UAAYA,C,CAMXK,eAAeC,GACrBC,EAAYH,KAAKJ,UAAW,UAAWM,E,CAMjCE,iBAAiBF,GACvBG,EAAaL,KAAKJ,UAAW,YAAaM,E,CAMpCI,iBAAiBJ,GACvBG,EAAaL,KAAKJ,UAAW,YAAaM,E,CAMpCK,cAAcL,GACpBC,EAAYH,KAAKJ,UAAW,SAAUM,GACtCF,KAAKQ,uBAAuBR,KAAKJ,UAAUa,O,CAMrCC,oBACNX,MAAMW,oBACNV,KAAKC,eAAeD,KAAKJ,UAAUe,SACnCX,KAAKI,iBAAiBJ,KAAKJ,UAAUgB,WACrCZ,KAAKM,iBAAiBN,KAAKJ,UAAUiB,WACrCb,KAAKO,cAAcP,KAAKJ,UAAUa,O,EClDpC,MAAMK,EAAkB,4iI,MCkBXC,EAAY,MASjBC,SACN,MAAMC,gBAAEA,GAAoBC,EAAgBlB,KAAKmB,OACjD,OACCC,EAACC,EAAI,KACJD,EAAA,aACCE,UAAWtB,KAAKmB,MAAMG,UACtBC,OAAQvB,KAAKmB,MAAMI,OACnBC,WAAYxB,KAAKmB,MAAMK,WACvBC,MAAOzB,KAAKmB,MAAMM,MAClBC,MAAO1B,KAAKmB,MAAMO,MAClBC,IAAK3B,KAAKmB,MAAMQ,IAChBd,UAAWb,KAAKmB,MAAMN,UACtBe,aAAc5B,KAAKmB,MAAMS,aACzBC,SAAU7B,KAAKmB,MAAMU,UAErBT,EAAA,QAAMU,KAAK,SACVV,EAAA,cAEDA,EAAA,QAAAW,OAAAC,OAAA,CACCC,IAAKjC,KAAKkC,SACVC,KAAK,QACLC,MAAM,GACNC,OAAQrC,KAAKmB,MAAMR,QACnB2B,UAAWtC,KAAKmB,MAAMoB,WAAU,mBACdtB,EAAgBuB,OAAS,EAAIvB,EAAgBwB,KAAK,KAAOC,UAAS,kBACnE,GAAG1C,KAAKmB,MAAMQ,YAC/BgB,eAAe,MACfC,YAAY,MACZC,SAAU7C,KAAKmB,MAAMG,UACrBwB,GAAI9C,KAAKmB,MAAMQ,IACfoB,SAAU/C,KAAKmB,MAAMP,UACrBf,KAAMG,KAAKmB,MAAM6B,MACjBC,SAAUjD,KAAKmB,MAAMN,UACrBiB,KAAK,QACLoB,WAAW,QACXC,KAAK,OACLjD,MAAOF,KAAKmB,MAAMV,QACdT,KAAKoD,WAAWC,SAAQ,CAC5BC,SAAUtD,KAAKsD,a,CAqGpB3D,YAAA4D,G,UAhJiBvD,KAAAkC,SAAYD,IAC5BjC,KAAKiC,IAAMA,EACXuB,EAAgBxD,KAAKF,KAAME,KAAKiC,IAAI,EAmS7BjC,KAAAsD,SAAYG,I,MACnB,GAAIzD,KAAKiC,eAAeyB,kBAAoB1D,KAAKiC,IAAIkB,OAAS,gBAAiBQ,EAAA3D,KAAKmB,MAAMyC,OAAG,MAAAD,SAAA,SAAAA,EAAEL,YAAa,WAAY,CACvHtD,KAAKmB,MAAMyC,IAAIN,SAASG,EAAOzD,KAAKiC,IAAI4B,M,gEAtOwB,K,oFAoBlC,G,qMA6CoC,M,iCAUpC,CAC/BlC,IAAK,KAIL3B,KAAKoD,WAAa,IAAI3D,EAAoBO,KAAM,OAAQA,KAAKF,K,CAOvDG,eAAeC,GACrBF,KAAKoD,WAAWnD,eAAeC,E,CAOzB4D,kBAAkB5D,GACxBF,KAAKoD,WAAWU,kBAAkB5D,E,CAO5B6D,cAAc7D,GACpBF,KAAKoD,WAAWW,cAAc7D,E,CAOxB8D,iBAAiB9D,GACvBF,KAAKoD,WAAWY,iBAAiB9D,E,CAO3B+D,cAAc/D,GACpBF,KAAKoD,WAAWa,cAAc/D,E,CAOxBgE,kBAAkBhE,GACxBF,KAAKoD,WAAWc,kBAAkBhE,E,CAO5BiE,aAAajE,GACnBF,KAAKoD,WAAWe,aAAajE,E,CAOvBkE,aAAalE,GACnBF,KAAKoD,WAAWgB,aAAalE,E,CAOvBmE,WAAWnE,GACjBF,KAAKoD,WAAWiB,WAAWnE,E,CAOrBE,iBAAiBF,GACvBF,KAAKoD,WAAWhD,iBAAiBF,E,CAO3BoE,aAAapE,GACnBF,KAAKoD,WAAWkB,aAAapE,E,CAOvBqE,WAAWrE,GACjBF,KAAKoD,WAAWmB,WAAWrE,E,CAOrBI,iBAAiBJ,GACvBF,KAAKoD,WAAW9C,iBAAiBJ,E,CAO3BsE,oBAAoBtE,GAC1BF,KAAKoD,WAAWoB,oBAAoBtE,E,CAO9BuE,iBAAiBvE,GACvBF,KAAKoD,WAAWqB,iBAAiBvE,E,CAO3BwE,gBAAgBxE,GACtBF,KAAKoD,WAAWsB,gBAAgBxE,E,CAO1BK,cAAcL,GACpBF,KAAKoD,WAAW7C,cAAcL,E,CAMxBQ,oBACNV,KAAK2E,OAAS3E,KAAK2E,SAAW,KAC9B3E,KAAK6B,SAAW7B,KAAK6B,WAAa,KAClC7B,KAAKoD,WAAW1C,mB"}
+{"version":3,"names":["InputFileController","InputIconController","constructor","component","name","host","super","this","validateAccept","value","watchString","validateMultiple","watchBoolean","validateRequired","validateValue","setFormAssociatedValue","_value","componentWillLoad","_accept","_multiple","_required","defaultStyleCss","KolInputFile","render","ariaDiscribedBy","getRenderStates","state","h","Host","_disabled","_error","_hideLabel","_hint","_icon","_id","_smartButton","_touched","slot","Object","assign","ref","catchRef","title","accept","accessKey","_accessKey","length","join","undefined","autoCapitalize","autoCorrect","disabled","id","multiple","_name","required","spellcheck","type","controller","onFacade","onChange","hostRef","propagateFocus","event","HTMLInputElement","_a","_on","files","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateSmartButton","validateTabIndex","validateTouched","_alert"],"sources":["./src/components/input-file/controller.ts","./src/components/input-file/style.css?tag=kol-input-file&mode=default&encapsulation=shadow","./src/components/input-file/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean, watchString } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputFileController 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 validateAccept(value?: string): void {\n\t\twatchString(this.component, '_accept', value);\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAccept(this.component._accept);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line.css';\n\nlabel input[type='file']::-webkit-file-upload-button {\n\tdisplay: none;\n}\n\nlabel input[type='file']::before {\n\tcontent: 'Datei auswählen';\n}\n\nlabel input[multiple]::before {\n\tcontent: 'Dateien auswählen';\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputFileController } from './controller';\nimport { ComponentApi, States } from './types';\n\n@Component({\n\ttag: 'kol-input-file',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputFile implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputFileElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\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_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\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_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccept={this.state._accept}\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\ttype=\"file\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputFileController;\n\n\t/**\n\t * Gibt an, welche Dateiformate erlaubt sind.\n\t */\n\t@Prop() public _accept?: string;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Gibt an, ob das Eingabefeld ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_id: '…', // ⚠ required\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputFileController(this, 'file', this.host);\n\t}\n\n\t@Watch('_accept')\n\tpublic validateAccept(value?: string): void {\n\t\tthis.controller.validateAccept(value);\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('_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<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(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('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(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('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_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\t}\n\n\tprivate onChange = (event: Event) => {\n\t\tif (this.ref instanceof HTMLInputElement && this.ref.type === 'file' && typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this.ref.files);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as i,H as t,r as e,g as a}from"./index-50adf9a0.js";import{a as o}from"./reuse-56bb5a4b.js";import{p as r}from"./controller-32fdeebb.js";import{g as s}from"./controller-944c3e03.js";import{a as l,d as n,w as d,b as h,e as c}from"./prop.validators-769a843a.js";import{I as p}from"./controller-icon-2a9f5c13.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./tab-index-22c62334.js";import"./index-676dbf61.js";import"./icon-cab2d129.js";class u extends p{constructor(t,e,i){super(t,e,i),this.numberOrIsoDateRegex=/^\d+$|(^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])([T ][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?([+-][0-2]\d:[0-5]\d|Z)?)?$)|(^[0-2]\d:[0-5]\d(:[0-5]\d)?$)/,this.parseToString=t=>"string"==typeof t?t:"number"==typeof t?`${t}`:"object"==typeof t&&t instanceof Date?t.toISOString():"",this.validateIso8601=(t,e,i)=>{const a=parseFloat(e),o=a==e;return l(this.component,t,(t=>void 0===t||""===t||o&&"number"==typeof a||this.numberOrIsoDateRegex.test(t)),new Set(["number","Date","string{ISO-8601}"]),this.parseToString(e),{hooks:{afterPatch:t=>{"string"==typeof t&&i&&i(t)}}})},this.component=t}validateAutoComplete(t){l(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){n(this.component,"_list",(t=>"string"==typeof t),t)}onChange(t){super.onChange(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){this.validateIso8601("_max",t)}validateMin(t){this.validateIso8601("_min",t)}validatePlaceholder(t){d(this.component,"_placeholder",t)}validateReadOnly(t){h(this.component,"_readOnly",t)}validateRequired(t){h(this.component,"_required",t)}validateStep(t){c(this.component,"_step",t)}validateType(t){l(this.component,"_type",(t=>"string"==typeof t&&("date"===t||"datetime-local"===t||"month"===t||"number"===t||"time"===t||"week"===t)),new Set(["String {date, datetime-local, month, number, time, week}"]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateList(this.component._list),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}const b=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}.kol-required span::after{content:'*'}.kol-disabled{opacity:0.5}.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}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,textarea{background-color:white;display:block;font-size:1rem;line-height:1.5em;min-height:44px;padding:0.5em 0.75em}input[type='color']{height:2.5em;padding:0.25em 0.5em}textarea{padding:0.5em}input,select,textarea{border-color:var(--kolibri-border-color);border-style:solid;border-width:calc(var(--kolibri-spacing) / 2)}.error :is(input,select,textarea){border-color:var(--kolibri-border-error)}:is(input,select,textarea):is(:focus,:hover){border-color:var(--kolibri-color-text)}input:not([type='checkbox']),option,select,textarea{font-size:inherit;letter-spacing:inherit;word-spacing:inherit}kol-input{display:grid;gap:calc(2 * var(--kolibri-spacing))}input,select,textarea{background-color:white;border-color:var(--kolibri-border-color);border-radius:var(--kolibri-border-radius);border-style:solid;border-width:var(--kolibri-border-width);font-size:1em;font-family:var(--kolibri-font-family-sans);line-height:2.5em;overflow:hidden;width:100%}input,select:not([multiple]){height:2.75em}input::placeholder{color:var(--kolibri-color-normal)}input:hover{border-color:var(--kolibri-color-primary)}input:disabled,select:disabled,textarea:disabled,input:not([type='color']):read-only,textarea:read-only{cursor:not-allowed}.required label>span::after{content:'*';padding-left:var(--kolibri-spacing)}.icons{display:flex;justify-content:space-between;height:0}.icons>kol-icon{display:grid;height:44px;padding:0 0.75em;place-items:center}.icon-left input,.icon-left select{padding-left:2em}kol-button-wc{position:relative;float:right;z-index:1000;margin-top:-44px}kol-button-wc button{background-color:transparent;display:inline-block;min-height:44px;min-width:44px}.icon-right kol-button-wc{margin-right:44px}.disabled{opacity:0.5}select[multiple],textarea{overflow:auto}textarea{display:block}select option{margin:var(--kolibri-spacing) 0;padding:0.5em;border-radius:0.25em;cursor:pointer}select option:disabled{cursor:not-allowed}option:not(:disabled):is(:active,:checked,:focus,:hover){background-color:var(--kolibri-color-primary);color:white}",f=class{render(){const{ariaDiscribedBy:e}=s(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return i(t,null,i("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched}," ",i("span",{slot:"label"},i("slot",null)),i("input",Object.assign({ref:this.catchRef,part:"input",title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,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,readOnly:this.state._readOnly,required:this.state._required,placeholder:this.state._placeholder,slot:"input",step:this.state._step,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,o(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?r({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._smartButton=void 0,this._step=void 0,this._tabIndex=void 0,this._touched=!1,this._type="number",this._value=void 0,this.state={_autoComplete:"off",_id:"…",_list:[],_type:"number"},this.controller=new u(this,"number",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)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(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)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateStep(t){this.controller.validateStep(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValueEx(t,(t=>{""===t&&this.ref&&(this.ref.value="")}))}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_step:["validateStep"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};f.style={default:b};export{f as kol_input_number};
+import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";import{p as n}from"./controller-873db1b1.js";import{g as d}from"./controller-6ae13480.js";import{a as l,d as o,w as r,b as h,e as p}from"./prop.validators-e402ad49.js";import{I as u}from"./controller-icon-c80da88f.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./tab-index-63d1379d.js";import"./index-81bd9b41.js";import"./icon-00018c54.js";class c extends u{constructor(t,e,i){super(t,e,i),this.numberOrIsoDateRegex=/^\d+$|(^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])([T ][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?([+-][0-2]\d:[0-5]\d|Z)?)?$)|(^[0-2]\d:[0-5]\d(:[0-5]\d)?$)/,this.parseToString=t=>"string"==typeof t?t:"number"==typeof t?`${t}`:"object"==typeof t&&t instanceof Date?t.toISOString():"",this.validateIso8601=(t,e,i)=>{const a=parseFloat(e),s=a==e;return l(this.component,t,(t=>void 0===t||""===t||s&&"number"==typeof a||this.numberOrIsoDateRegex.test(t)),new Set(["number","Date","string{ISO-8601}"]),this.parseToString(e),{hooks:{afterPatch:t=>{"string"==typeof t&&i&&i(t)}}})},this.component=t}validateAutoComplete(t){l(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){o(this.component,"_list",(t=>"string"==typeof t),t)}onChange(t){super.onChange(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){this.validateIso8601("_max",t)}validateMin(t){this.validateIso8601("_min",t)}validatePlaceholder(t){r(this.component,"_placeholder",t)}validateReadOnly(t){h(this.component,"_readOnly",t)}validateRequired(t){h(this.component,"_required",t)}validateStep(t){p(this.component,"_step",t)}validateType(t){l(this.component,"_type",(t=>"string"==typeof t&&("date"===t||"datetime-local"===t||"month"===t||"number"===t||"time"===t||"week"===t)),new Set(["String {date, datetime-local, month, number, time, week}"]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateList(this.component._list),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}const m=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),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'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}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[multiple] option,select:not([multiple]),textarea{font-size:1rem;padding:0 0.5em}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}input:not([type='radio']),option,select,textarea{display:block;line-height:2.5em;flex-grow:1}input:not([type='radio']),select:not([multiple]){height:2.75em}.input{display:flex;align-items:baseline}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center;width:2.5em}",y=class{render(){const{ariaDiscribedBy:i}=d(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched}," ",t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,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,readOnly:this.state._readOnly,required:this.state._required,placeholder:this.state._placeholder,slot:"input",step:this.state._step,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?n({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._smartButton=void 0,this._step=void 0,this._tabIndex=void 0,this._touched=!1,this._type="number",this._value=void 0,this.state={_autoComplete:"off",_id:"…",_hasValue:!1,_list:[],_type:"number"},this.controller=new c(this,"number",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)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(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)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateStep(t){this.controller.validateStep(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValueEx(t,(t=>{""===t&&this.ref&&(this.ref.value="")}))}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_step:["validateStep"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};y.style={default:m};export{y as kol_input_number};

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

@@ -1 +1 @@
-{"version":3,"names":["InputNumberController","InputIconController","constructor","component","name","host","super","this","numberOrIsoDateRegex","parseToString","value","Date","toISOString","validateIso8601","propName","afterPatch","parsedValue","parseFloat","valueMatched","watchValidator","undefined","test","Set","hooks","validateAutoComplete","validateList","watchJsonArrayString","item","onChange","event","target","_value","validateMax","validateMin","validatePlaceholder","watchString","validateReadOnly","watchBoolean","validateRequired","validateStep","watchNumber","validateType","validateValue","validateValueEx","componentWillLoad","_autoComplete","_max","_min","_list","_readOnly","_required","_step","_type","defaultStyleCss","KolInputNumber","render","ariaDiscribedBy","getRenderStates","state","hasList","Array","isArray","length","h","Host","_disabled","_error","_hideLabel","_hint","_icon","_id","_smartButton","_touched","slot","Object","assign","ref","catchRef","part","title","accessKey","_accessKey","join","autoCapitalize","autoComplete","autoCorrect","disabled","id","list","max","min","_name","readOnly","required","placeholder","_placeholder","step","spellcheck","type","controller","onFacade","onKeyUp","hostRef","propergateFocus","code","propergateSubmitEventToForm","form","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateSmartButton","validateTabIndex","validateTouched","v","_alert"],"sources":["./src/components/input-number/controller.ts","./src/components/input-number/style.css?tag=kol-input-number&mode=default&encapsulation=shadow","./src/components/input-number/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { InputNumberType } from '../../types/input/control/number';\nimport { Iso8601 } from '../../types/input/iso8601';\nimport { InputTypeOnOff } from '../../types/input/types';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputNumberController extends InputIconController implements Watches {\n\t/**\n\t * Regex to check whether a string is a number or a date in ISO-8601 format.\n\t * Test the regex here: https://regex101.com/r/ddGR4V/1\n\t */\n\tprivate readonly numberOrIsoDateRegex =\n\t\t/^\\d+$|(^\\d{4}-([0]\\d|1[0-2])-([0-2]\\d|3[01])([T ][0-2]\\d:[0-5]\\d:[0-5]\\d(?:\\.\\d+)?([+-][0-2]\\d:[0-5]\\d|Z)?)?$)|(^[0-2]\\d:[0-5]\\d(:[0-5]\\d)?$)/;\n\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\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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 * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\twatchJsonArrayString(this.component, '_list', (item: string) => typeof item === 'string', value);\n\t}\n\n\tprivate readonly parseToString = (value?: number | Date | string | null) => {\n\t\tif (typeof value === 'string') {\n\t\t\treturn value;\n\t\t}\n\t\tif (typeof value === 'number') {\n\t\t\treturn `${value}`;\n\t\t}\n\t\tif (typeof value === 'object' && value instanceof Date) {\n\t\t\treturn value.toISOString();\n\t\t}\n\t\treturn '';\n\t};\n\n\tprivate readonly validateIso8601 = (propName: string, value?: number | Iso8601 | null, afterPatch?: (v: string) => void) => {\n\t\tconst parsedValue = parseFloat(value as string);\n\t\tconst valueMatched = parsedValue == value;\n\t\treturn watchValidator(\n\t\t\tthis.component,\n\t\t\tpropName,\n\t\t\t(value): boolean => value === undefined || value === '' || (valueMatched && typeof parsedValue === 'number') || this.numberOrIsoDateRegex.test(value),\n\t\t\tnew Set(['number', 'Date', 'string{ISO-8601}']),\n\t\t\tthis.parseToString(value),\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tafterPatch: (value) => {\n\t\t\t\t\t\tif (typeof value === 'string' && afterPatch) {\n\t\t\t\t\t\t\tafterPatch(value);\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t};\n\n\tprotected onChange(event: Event): void {\n\t\tsuper.onChange(event);\n\n\t\t// set the value here when the value is switched between blank and set (or vice versa) to enable value resets via setting null as value.\n\t\tif (!!(event.target as HTMLInputElement).value !== !!this.component._value) {\n\t\t\tthis.component._value = (event.target as HTMLInputElement).value as number | Iso8601;\n\t\t}\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateMax(value?: number | Iso8601): void {\n\t\tthis.validateIso8601('_max', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateMin(value?: number | Iso8601): void {\n\t\tthis.validateIso8601('_min', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\tpublic validateType(value?: InputNumberType): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_type',\n\t\t\t(value): boolean =>\n\t\t\t\ttypeof value === 'string' &&\n\t\t\t\t(value === 'date' || value === 'datetime-local' || value === 'month' || value === 'number' || value === 'time' || value === 'week'),\n\t\t\tnew Set(['String {date, datetime-local, month, number, time, week}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\tpublic validateValue(value?: number | Iso8601 | null): void {\n\t\tthis.validateValueEx(value);\n\t}\n\n\t/**\n\t * Overload of validate value. Extends by an after patch callback function.\n\t */\n\tpublic validateValueEx(value?: number | Iso8601 | null, afterPatch?: (v: string) => void): void {\n\t\tthis.validateIso8601('_value', value, afterPatch);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateType(this.component._type);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { InputNumberType } from '../../types/input/control/number';\nimport { Iso8601 } from '../../types/input/iso8601';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { propergateFocus } from '../../utils/reuse';\nimport { propergateSubmitEventToForm } from '../form/controller';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputNumberController } from './controller';\nimport { ComponentApi, States } from './types';\n\n@Component({\n\ttag: 'kol-input-number',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputNumber implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputNumberElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropergateSubmitEventToForm({\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 { ariaDiscribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\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_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_list={this.state._list}\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_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t{' '}\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\tpart=\"input\"\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\ttype={this.state._type}\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputNumberController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagszahlen an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt den größtmöglichen Zahlenwert an.\n\t */\n\t@Prop() public _max?: number | Iso8601;\n\n\t/**\n\t * Gibt den kleinstmöglichen Zahlenwert an.\n\t */\n\t@Prop() public _min?: number | Iso8601;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt die Schrittweite der Wertveränderung an\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt an, ob es ein DateTime-, Date-, Month-, Week-, Time-, DateTime-Local-, Number-Eingabefeld ist.\n\t *\n\t * @deprecated Das W3C hat die Date-Typen in eine eigene Gruppe zusammengefasst. Verwende hierfür die InputDate-Komponente.\n\t */\n\t@Prop() public _type?: InputNumberType = 'number';\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true }) public _value?: number | Iso8601 | null;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: '…', // ⚠ required\n\t\t_list: [],\n\n\t\t_type: 'number',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputNumberController(this, 'number', this.host);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_max')\n\tpublic validateMax(value?: number | Iso8601): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_min')\n\tpublic validateMin(value?: number | Iso8601): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\t@Watch('_type')\n\tpublic validateType(value?: InputNumberType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: number | Iso8601 | null): void {\n\t\tthis.controller.validateValueEx(value, (v) => {\n\t\t\tif (v === '' && this.ref) {\n\t\t\t\tthis.ref.value = '';\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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":["InputNumberController","InputIconController","constructor","component","name","host","super","this","numberOrIsoDateRegex","parseToString","value","Date","toISOString","validateIso8601","propName","afterPatch","parsedValue","parseFloat","valueMatched","watchValidator","undefined","test","Set","hooks","validateAutoComplete","validateList","watchJsonArrayString","item","onChange","event","target","_value","validateMax","validateMin","validatePlaceholder","watchString","validateReadOnly","watchBoolean","validateRequired","validateStep","watchNumber","validateType","validateValue","validateValueEx","componentWillLoad","_autoComplete","_max","_min","_list","_readOnly","_required","_step","_type","defaultStyleCss","KolInputNumber","render","ariaDiscribedBy","getRenderStates","state","hasList","Array","isArray","length","h","Host","class","_hasValue","_disabled","_error","_hideLabel","_hint","_icon","_id","_smartButton","_touched","slot","Object","assign","ref","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoComplete","autoCorrect","disabled","id","list","max","min","_name","readOnly","required","placeholder","_placeholder","step","spellcheck","type","controller","onFacade","onKeyUp","hostRef","propagateFocus","code","propagateSubmitEventToForm","form","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateSmartButton","validateTabIndex","validateTouched","v","_alert","addValueChangeListener"],"sources":["./src/components/input-number/controller.ts","./src/components/input-number/style.css?tag=kol-input-number&mode=default&encapsulation=shadow","./src/components/input-number/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { InputNumberType } from '../../types/input/control/number';\nimport { Iso8601 } from '../../types/input/iso8601';\nimport { InputTypeOnOff } from '../../types/input/types';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputNumberController extends InputIconController implements Watches {\n\t/**\n\t * Regex to check whether a string is a number or a date in ISO-8601 format.\n\t * Test the regex here: https://regex101.com/r/ddGR4V/1\n\t */\n\tprivate readonly numberOrIsoDateRegex =\n\t\t/^\\d+$|(^\\d{4}-([0]\\d|1[0-2])-([0-2]\\d|3[01])([T ][0-2]\\d:[0-5]\\d:[0-5]\\d(?:\\.\\d+)?([+-][0-2]\\d:[0-5]\\d|Z)?)?$)|(^[0-2]\\d:[0-5]\\d(:[0-5]\\d)?$)/;\n\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\twatchJsonArrayString(this.component, '_list', (item: string) => typeof item === 'string', value);\n\t}\n\n\tprivate readonly parseToString = (value?: number | Date | string | null) => {\n\t\tif (typeof value === 'string') {\n\t\t\treturn value;\n\t\t}\n\t\tif (typeof value === 'number') {\n\t\t\treturn `${value}`;\n\t\t}\n\t\tif (typeof value === 'object' && value instanceof Date) {\n\t\t\treturn value.toISOString();\n\t\t}\n\t\treturn '';\n\t};\n\n\tprivate readonly validateIso8601 = (propName: string, value?: number | Iso8601 | null, afterPatch?: (v: string) => void) => {\n\t\tconst parsedValue = parseFloat(value as string);\n\t\tconst valueMatched = parsedValue == value;\n\t\treturn watchValidator(\n\t\t\tthis.component,\n\t\t\tpropName,\n\t\t\t(value): boolean => value === undefined || value === '' || (valueMatched && typeof parsedValue === 'number') || this.numberOrIsoDateRegex.test(value),\n\t\t\tnew Set(['number', 'Date', 'string{ISO-8601}']),\n\t\t\tthis.parseToString(value),\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tafterPatch: (value) => {\n\t\t\t\t\t\tif (typeof value === 'string' && afterPatch) {\n\t\t\t\t\t\t\tafterPatch(value);\n\t\t\t\t\t\t}\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t};\n\n\tprotected onChange(event: Event): void {\n\t\tsuper.onChange(event);\n\n\t\t// set the value here when the value is switched between blank and set (or vice versa) to enable value resets via setting null as value.\n\t\tif (!!(event.target as HTMLInputElement).value !== !!this.component._value) {\n\t\t\tthis.component._value = (event.target as HTMLInputElement).value as number | Iso8601;\n\t\t}\n\t}\n\n\tpublic validateMax(value?: number | Iso8601): void {\n\t\tthis.validateIso8601('_max', value);\n\t}\n\n\tpublic validateMin(value?: number | Iso8601): void {\n\t\tthis.validateIso8601('_min', value);\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\tpublic validateType(value?: InputNumberType): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_type',\n\t\t\t(value): boolean =>\n\t\t\t\ttypeof value === 'string' &&\n\t\t\t\t(value === 'date' || value === 'datetime-local' || value === 'month' || value === 'number' || value === 'time' || value === 'week'),\n\t\t\tnew Set(['String {date, datetime-local, month, number, time, week}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateValue(value?: number | Iso8601 | null): void {\n\t\tthis.validateValueEx(value);\n\t}\n\n\t/**\n\t * Overload of validate value. Extends by an after patch callback function.\n\t */\n\tpublic validateValueEx(value?: number | Iso8601 | null, afterPatch?: (v: string) => void): void {\n\t\tthis.validateIso8601('_value', value, afterPatch);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateType(this.component._type);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { InputNumberType } from '../../types/input/control/number';\nimport { Iso8601 } from '../../types/input/iso8601';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputNumberController } from './controller';\nimport { ComponentApi, States } from './types';\n\n@Component({\n\ttag: 'kol-input-number',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputNumber implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputNumberElement;\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\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 { ariaDiscribedBy } = getRenderStates(this.state);\n\t\tconst hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\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\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\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_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_list={this.state._list}\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_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t{' '}\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tlist={hasList ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\ttype={this.state._type}\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t/>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputNumberController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt die Liste der Vorschlagszahlen an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt den größtmöglichen Zahlenwert an.\n\t */\n\t@Prop() public _max?: number | Iso8601;\n\n\t/**\n\t * Gibt den kleinstmöglichen Zahlenwert an.\n\t */\n\t@Prop() public _min?: number | Iso8601;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt die Schrittweite der Wertveränderung an\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt an, ob es ein DateTime-, Date-, Month-, Week-, Time-, DateTime-Local-, Number-Eingabefeld ist.\n\t *\n\t * @deprecated Das W3C hat die Date-Typen in eine eigene Gruppe zusammengefasst. Verwende hierfür die InputDate-Komponente.\n\t */\n\t@Prop() public _type?: InputNumberType = 'number';\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true }) public _value?: number | Iso8601 | null;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: '…', // ⚠ required\n\t\t_hasValue: false,\n\t\t_list: [],\n\t\t_type: 'number',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputNumberController(this, 'number', 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('_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<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(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('_list')\n\tpublic validateList(value?: Stringified<string[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number | Iso8601): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number | Iso8601): 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('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated\n\t */\n\t@Watch('_type')\n\tpublic validateType(value?: InputNumberType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number | Iso8601 | null): void {\n\t\tthis.controller.validateValueEx(value, (v) => {\n\t\t\tif (v === '' && this.ref) {\n\t\t\t\tthis.ref.value = '';\n\t\t\t}\n\t\t});\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-password.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as i,H as e,r as t,g as o}from"./index-50adf9a0.js";import{d as r}from"./a11y.tipps-5cdbd5e2.js";import{a}from"./reuse-56bb5a4b.js";import{p as l}from"./controller-32fdeebb.js";import{g as n}from"./controller-944c3e03.js";import{I as s}from"./controller-04bee517.js";import"./dev.utils-05f4e663.js";import"./prop.validators-769a843a.js";import"./index-676dbf61.js";import"./tab-index-22c62334.js";import"./controller-icon-2a9f5c13.js";import"./icon-cab2d129.js";const d=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}.kol-required span::after{content:'*'}.kol-disabled{opacity:0.5}.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}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,textarea{background-color:white;display:block;font-size:1rem;line-height:1.5em;min-height:44px;padding:0.5em 0.75em}input[type='color']{height:2.5em;padding:0.25em 0.5em}textarea{padding:0.5em}input,select,textarea{border-color:var(--kolibri-border-color);border-style:solid;border-width:calc(var(--kolibri-spacing) / 2)}.error :is(input,select,textarea){border-color:var(--kolibri-border-error)}:is(input,select,textarea):is(:focus,:hover){border-color:var(--kolibri-color-text)}input:not([type='checkbox']),option,select,textarea{font-size:inherit;letter-spacing:inherit;word-spacing:inherit}kol-input{display:grid;gap:calc(2 * var(--kolibri-spacing))}input,select,textarea{background-color:white;border-color:var(--kolibri-border-color);border-radius:var(--kolibri-border-radius);border-style:solid;border-width:var(--kolibri-border-width);font-size:1em;font-family:var(--kolibri-font-family-sans);line-height:2.5em;overflow:hidden;width:100%}input,select:not([multiple]){height:2.75em}input::placeholder{color:var(--kolibri-color-normal)}input:hover{border-color:var(--kolibri-color-primary)}input:disabled,select:disabled,textarea:disabled,input:not([type='color']):read-only,textarea:read-only{cursor:not-allowed}.required label>span::after{content:'*';padding-left:var(--kolibri-spacing)}.icons{display:flex;justify-content:space-between;height:0}.icons>kol-icon{display:grid;height:44px;padding:0 0.75em;place-items:center}.icon-left input,.icon-left select{padding-left:2em}kol-button-wc{position:relative;float:right;z-index:1000;margin-top:-44px}kol-button-wc button{background-color:transparent;display:inline-block;min-height:44px;min-width:44px}.icon-right kol-button-wc{margin-right:44px}.disabled{opacity:0.5}select[multiple],textarea{overflow:auto}textarea{display:block}select option{margin:var(--kolibri-spacing) 0;padding:0.5em;border-radius:0.25em;cursor:pointer}select option:disabled{cursor:not-allowed}option:not(:disabled):is(:active,:checked,:focus,:hover){background-color:var(--kolibri-color-primary);color:white}",c=class{render(){const{ariaDiscribedBy:t}=n(this.state);return i(e,null,i("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched},i("span",{slot:"label"},i("slot",null)),i("input",Object.assign({ref:this.catchRef,part:"input",title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,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,slot:"input",spellcheck:"false",type:"password",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(e){t(this,e),this.catchRef=t=>{this.ref=t,a(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?l({form:this.host,ref:this.ref}):this.controller.onFacade.onClick(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._size=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:"…"},this.controller=new s(this,"password",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t),"on"===t&&r("[KolInputPassword] Die Option 'autocomplete' sollte bei einem Passwort-Eingabefeld nicht auf \"on\" gesetzt werden.")}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(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)}validateSmartButton(t){this.controller.validateSmartButton(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 o(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};c.style={default:d};export{c as kol_input_password};
+import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{d as s}from"./a11y.tipps-1cea9822.js";import{a as n}from"./reuse-3a02afb9.js";import{p as l}from"./controller-873db1b1.js";import{g as d}from"./controller-6ae13480.js";import{I as o}from"./controller-ca552edd.js";import"./dev.utils-157f0499.js";import"./prop.validators-e402ad49.js";import"./index-81bd9b41.js";import"./tab-index-63d1379d.js";import"./controller-icon-c80da88f.js";import"./icon-00018c54.js";const r=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),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'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}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[multiple] option,select:not([multiple]),textarea{font-size:1rem;padding:0 0.5em}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}input:not([type='radio']),option,select,textarea{display:block;line-height:2.5em;flex-grow:1}input:not([type='radio']),select:not([multiple]){height:2.75em}.input{display:flex;align-items:baseline}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center;width:2.5em}",p=class{render(){const{ariaDiscribedBy:i}=d(this.state);return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,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,slot:"input",spellcheck:"false",type:"password",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,n(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?l({form:this.host,ref:this.ref}):this.controller.onFacade.onClick(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=void 0,this._required=void 0,this._size=void 0,this._smartButton=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:"…",_hasValue:!1},this.controller=new o(this,"password",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t),"on"===t&&s("[KolInputPassword] Die Option 'autocomplete' sollte bei einem Passwort-Eingabefeld nicht auf \"on\" gesetzt werden.")}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(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)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};p.style={default:r};export{p as kol_input_password};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolInputPassword","render","ariaDiscribedBy","getRenderStates","this","state","h","Host","_disabled","_error","_hideLabel","_hint","_icon","_id","_readOnly","_required","_smartButton","_touched","slot","Object","assign","ref","catchRef","part","title","accessKey","_accessKey","length","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","maxlength","_maxLength","name","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","type","value","_value","controller","onFacade","onKeyUp","constructor","hostRef","propergateFocus","host","event","code","propergateSubmitEventToForm","form","onClick","InputPasswordController","validateAccessKey","validateAlert","validateAutoComplete","devHint","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","validateSmartButton","validateTabIndex","validateTouched","validateValue","componentWillLoad","_alert"],"sources":["./src/components/input-password/style.css?tag=kol-input-password&mode=default&encapsulation=shadow","./src/components/input-password/component.tsx"],"sourcesContent":["@import '../input-line.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\n\nimport { devHint } from '../../utils/a11y.tipps';\nimport { propergateFocus } from '../../utils/reuse';\nimport { propergateSubmitEventToForm } from '../form/controller';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputPasswordController } from './controller';\nimport { ComponentApi, States } from './types';\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 ComponentApi {\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\tpropergateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropergateSubmitEventToForm({\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.onClick(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\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_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\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_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\tpart=\"input\"\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t// title={this.state._title}\n\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t/>\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 * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man maximal eingeben kann.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Gibt ein Prüfpattern für das Eingabefeld an.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Gibt an, ob die Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man eingeben kann.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: '…', // ⚠ required\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputPasswordController(this, 'password', this.host);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\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/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\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":["defaultStyleCss","KolInputPassword","render","ariaDiscribedBy","getRenderStates","this","state","h","Host","class","_hasValue","_disabled","_error","_hideLabel","_hint","_icon","_id","_readOnly","_required","_smartButton","_touched","slot","Object","assign","ref","catchRef","title","accessKey","_accessKey","length","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","maxlength","_maxLength","name","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","type","value","_value","controller","onFacade","onKeyUp","constructor","hostRef","propagateFocus","host","event","code","propagateSubmitEventToForm","form","onClick","InputPasswordController","validateAccessKey","validateAlert","validateAutoComplete","devHint","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","validateSmartButton","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 '../input-line.css';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\n\nimport { devHint } from '../../utils/a11y.tipps';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputPasswordController } from './controller';\nimport { ComponentApi, States } from './types';\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 ComponentApi {\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\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.onClick(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDiscribedBy } = getRenderStates(this.state);\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\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\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_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\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_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</span>\n\t\t\t\t\t<input\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDiscribedBy.length > 0 ? ariaDiscribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t// title={this.state._title}\n\t\t\t\t\t\ttype=\"password\"\n\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t/>\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 * Gibt an, mit welcher Tastenkombination man das Input auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob die Fehlermeldung vorgelesen werden soll, wenn es eine gibt.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Ermöglicht das Anzeigen von Icons links und/oder rechts am Rand des Eingabefeldes.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die technische ID des Eingabefeldes an.\n\t */\n\t@Prop() public _id!: string;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man maximal eingeben kann.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\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 * Gibt ein Prüfpattern für das Eingabefeld an.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Gibt an, ob die Eingabefeld nur lesend ist.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld ein Pflichtfeld ist.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Gibt an, wie viele Zeichen man eingeben kann.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht einen Schalter ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (nur Icon-Only).\n\t */\n\t@Prop() public _smartButton?: ButtonProps;\n\n\t/**\n\t * Gibt an, welchen Tab-Index dieses Input hat.\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: '…', // ⚠ required\n\t\t_hasValue: false,\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputPasswordController(this, '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('_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<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(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('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_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('_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-50adf9a0.js";import{c as t}from"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./reuse-56bb5a4b.js";const n=class{constructor(t){i(this,t),this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._orientation="vertical",this._required=void 0,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,_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{n as kol_input_radio_group};
+import{r as i,h as e}from"./index-50adf9a0.js";import{c as t}from"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";const n=class{constructor(t){i(this,t),this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._orientation="vertical",this._required=void 0,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,_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{n 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 i,H as e,r as t,g as r}from"./index-50adf9a0.js";import{a as o}from"./reuse-56bb5a4b.js";import{g as a}from"./controller-944c3e03.js";import{a as l}from"./controller-ea28fcf8.js";import"./a11y.tipps-5cdbd5e2.js";import"./dev.utils-05f4e663.js";import"./prop.validators-769a843a.js";import"./index-676dbf61.js";import"./tab-index-22c62334.js";const n=":host{--kolibri-border-color:#666;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}:host *{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}a,button{background-color:transparent;border:none;font-size:inherit;margin:0;padding:0;transition-duration:0.5s;transition-property:background-color, color, border-color}:host{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size)}*{box-sizing:border-box}kol-icon{color:inherit}kol-span-wc{display:grid;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}kol-span-wc>kol-icon,kol-span-wc>span>kol-icon{display:inline-grid;place-items:center;width:1em;height:1em}a,button,input,select,textarea{appearance:none;cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}h1,h2,h3,h4,h5,h6{font-family:var(--kolibri-font-family);font-size:var(--kolibri-font-size);margin:0;padding:0}.kol-required span::after{content:'*'}.kol-disabled{opacity:0.5}.kol-cursor-not-allowed,.kol-cursor-not-allowed *{cursor:not-allowed}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,textarea{background-color:white;display:block;font-size:1rem;line-height:1.5em;min-height:44px;padding:0.5em 0.75em}input[type='color']{height:2.5em;padding:0.25em 0.5em}textarea{padding:0.5em}input,select,textarea{border-color:var(--kolibri-border-color);border-style:solid;border-width:calc(var(--kolibri-spacing) / 2)}.error :is(input,select,textarea){border-color:var(--kolibri-border-error)}:is(input,select,textarea):is(:focus,:hover){border-color:var(--kolibri-color-text)}input:not([type='checkbox']),option,select,textarea{font-size:inherit;letter-spacing:inherit;word-spacing:inherit}kol-input .icons{display:none}label{display:grid;font-size:14px;line-height:20px;gap:8px;width:100%}input{width:100%;border-color:var(--kolibri-border-color);border-width:2px;border-style:solid;border-radius:5px;line-height:24px;font-size:16px}input:focus{outline-color:var(--kolibri-color-primary);outline-offset:2px;outline-style:solid;outline-width:3px}input:hover{border-color:var(--kolibri-color-primary)}kol-alert{display:block;width:100%}.kol-required span::after{content:'*'}fieldset{border:0px;margin:0px;padding:0px;display:grid;gap:0.25em}fieldset legend{display:block;width:100%;line-height:1.5em}fieldset div{cursor:pointer;display:flex;flex-direction:row;gap:0.5em;margin-top:0.25em;margin-bottom:0.25em;align-items:center;position:relative}fieldset div label{cursor:pointer;display:flex;width:100%}fieldset div label span{margin-top:0.125em}fieldset div input[type='radio']{appearance:none;transition:0.5s;border-radius:100%;height:calc(6 * var(--kolibri-spacing));min-width:calc(6 * var(--kolibri-spacing));width:calc(6 * var(--kolibri-spacing))}fieldset div input[type='radio']:before{content:'';cursor:pointer;left:calc(1.5 * var(--kolibri-spacing) - 2px);top:calc(1.5 * var(--kolibri-spacing) - 2px);position:relative;border-radius:100%;display:block;height:calc(3 * var(--kolibri-spacing));width:calc(3 * var(--kolibri-spacing))}fieldset div input[type='radio']:checked:before{box-shadow:0 0 0.1rem black;background-color:var(--kolibri-color-primary)}fieldset div input[type='radio']:disabled{background-color:var(--kolibri-color-disabled);border-color:#999;cursor:not-allowed}",s=class{render(){const{ariaDiscribedBy:t,hasError:r}=a(this.state);return i(e,null,i("fieldset",{class:{error:!0===r,disabled:!0===this.state._disabled,required:!0===this.state._required,[this.state._orientation]:!0}},i("legend",{class:"block w-full mb-1 leading-normal"},i("span",null,i("slot",null))),this.state._list.map(((e,r)=>{const a=`${this.state._id}-${r}`;return i("kol-input",{key:a,_disabled:this.state._disabled||e.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:a,_renderNoLabel:!0,_required:this.state._required,_touched:this.state._touched},i("div",{slot:"input"},i("input",Object.assign({ref:this.state._value===e.value?this.catchRef:void 0,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${a}-label`,part:"input",title:"",type:"radio",id:a,checked:this.state._value===e.value,name:this.state._name||this.state._id,disabled:this.state._disabled||e.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${r}`},this.controller.onFacade,{onChange:this.onChange})),i("label",{htmlFor:`${a}`,id:`${a}-label`,style:{height:this.state._hideLabel&&!0!==this.state._required?"0":void 0,margin:this.state._hideLabel&&!0!==this.state._required?"0":void 0,padding:this.state._hideLabel&&!0!==this.state._required?"0":void 0,visibility:this.state._hideLabel&&!0!==this.state._required?"hidden":void 0}},i("span",null,i("span",null,e.label)))))})),r&&i("kol-alert",{id:"error",_alert:!0,_type:"error",_variant:"msg"},this.state._error)))}constructor(i){t(this,i),this.catchRef=i=>{this.ref=i,o(this.host,this.ref)},this.onChange=i=>{if(i.target instanceof HTMLInputElement){const e=this.controller.getOptionByKey(i.target.value);void 0!==e&&this.controller.setValue(i,e.value)}},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._orientation="vertical",this._required=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_id:"…",_list:[],_orientation:"vertical"},this.controller=new l(this,"radio",this.host)}validateAccessKey(i){this.controller.validateAccessKey(i)}validateAlert(i){this.controller.validateAlert(i)}validateDisabled(i){this.controller.validateDisabled(i)}validateError(i){this.controller.validateError(i)}validateHideLabel(i){this.controller.validateHideLabel(i)}validateHint(i){this.controller.validateHint(i)}validateId(i){this.controller.validateId(i)}validateList(i){this.controller.validateList(i)}validateName(i){this.controller.validateName(i)}validateOn(i){this.controller.validateOn(i)}validateOrientation(i){this.controller.validateOrientation(i)}validateRequired(i){this.controller.validateRequired(i)}validateTabIndex(i){this.controller.validateTabIndex(i)}validateTouched(i){this.controller.validateTouched(i)}validateValue(i){this.controller.validateValue(i)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return r(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_orientation:["validateOrientation"],_required:["validateRequired"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};s.style={default:n};export{s as kol_input_radio};
+import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{a as n}from"./reuse-3a02afb9.js";import{g as s}from"./controller-6ae13480.js";import{a as r}from"./controller-a01956a8.js";import"./a11y.tipps-1cea9822.js";import"./dev.utils-157f0499.js";import"./prop.validators-e402ad49.js";import"./index-81bd9b41.js";import"./tab-index-63d1379d.js";const d=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*[role='button'],button:not([role='link']),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'],option,select,textarea{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button,input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],option,select{cursor:pointer;font-family:inherit;font-size:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}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[multiple] option,select:not([multiple]),textarea{font-size:1rem;padding:0 0.5em}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}:host{--border-width:2px;--input-size:1.5em}kol-input .icons{display:none}label{cursor:pointer}input{appearance:none;border-width:var(--border-width);border-style:solid;border-radius:100%;cursor:pointer;display:flex;height:var(--input-size);margin:0;min-height:var(--input-size);min-width:var(--input-size);padding:0;width:var(--input-size)}input:before{border-radius:100%;content:'';margin:auto;height:calc(var(--input-size) / 2);width:calc(var(--input-size) / 2)}input:checked:before{background-color:black}fieldset{display:flex}fieldset.vertical{flex-direction:column}fieldset [slot='input']{align-items:center;display:flex}.required label>span::after{content:''}",l=class{render(){const{ariaDiscribedBy:i,hasError:a}=s(this.state);return t(e,null,t("fieldset",{class:{error:!0===a,disabled:!0===this.state._disabled,required:!0===this.state._required,[this.state._orientation]:!0}},t("legend",{class:"block w-full mb-1 leading-normal"},t("span",null,t("slot",null))),this.state._list.map(((e,a)=>{const l=`${this.state._id}-${a}`;return t("kol-input",{key:l,_disabled:this.state._disabled||e.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:l,_renderNoLabel:!0,_required:this.state._required,_touched:this.state._touched},t("div",{slot:"input"},t("input",Object.assign({ref:this.state._value===e.value?this.catchRef:void 0,accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${l}-label`,title:"",type:"radio",id:l,checked:this.state._value===e.value,name:this.state._name||this.state._id,disabled:this.state._disabled||e.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${a}`},this.controller.onFacade,{onChange:this.onChange})),t("label",{htmlFor:`${l}`,id:`${l}-label`,style:{height:this.state._hideLabel&&!0!==this.state._required?"0":void 0,margin:this.state._hideLabel&&!0!==this.state._required?"0":void 0,padding:this.state._hideLabel&&!0!==this.state._required?"0":void 0,visibility:this.state._hideLabel&&!0!==this.state._required?"hidden":void 0}},t("span",null,t("span",null,e.label)))))})),a&&t("kol-alert",{id:"error",_alert:!0,_type:"error",_variant:"msg"},this.state._error)))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,n(this.host,this.ref)},this.onChange=t=>{if(t.target instanceof HTMLInputElement){const e=this.controller.getOptionByKey(t.target.value);void 0!==e&&this.controller.setValue(t,e.value)}},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._orientation="vertical",this._required=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_id:"…",_list:[],_orientation:"vertical"},this.controller=new r(this,"radio",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateList(t){this.controller.validateList(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOrientation(t){this.controller.validateOrientation(t)}validateRequired(t){this.controller.validateRequired(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_orientation:["validateOrientation"],_required:["validateRequired"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};l.style={default:d};export{l as kol_input_radio};