@public-ui/components 1.5.2-rc.2 → 1.5.2

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{d as s}from"./a11y.tipps-2e27f8e6.js";import{a as n}from"./reuse-3a02afb9.js";import{p as l}from"./controller-abdc8667.js";import{g as o}from"./controller-ca91917c.js";import{I as d}from"./controller-6f59f733.js";import{n as r}from"./dev.utils-157f0499.js";import"./prop.validators-2c20cdf8.js";import"./index-f4596895.js";import"./tab-index-2de507bb.js";import"./controller-icon-8d8c747a.js";import"./icon-52e86ff8.js";const h=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",p=class{render(){const{ariaDescribedBy:a}=o(this.state);return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{password:!0},_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,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.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.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._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:r(),_hasValue:!1},this.controller=new d(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:h};export{p 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-2e27f8e6.js";import{a as n}from"./reuse-3a02afb9.js";import{p as l}from"./controller-abdc8667.js";import{g as o}from"./controller-ca91917c.js";import{I as d}from"./controller-6f59f733.js";import{n as r}from"./dev.utils-157f0499.js";import"./prop.validators-2c20cdf8.js";import"./index-f4596895.js";import"./tab-index-2de507bb.js";import"./controller-icon-8d8c747a.js";import"./icon-52e86ff8.js";const h=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}",p=class{render(){const{ariaDescribedBy:i}=o(this.state);return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{password:!0},_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,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},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.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._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:r(),_hasValue:!1},this.controller=new d(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:h};export{p as kol_input_password};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolInputPassword","render","ariaDescribedBy","getRenderStates","this","state","h","Host","class","_hasValue","password","_disabled","_error","_hideLabel","_hint","_icon","_id","_readOnly","_required","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","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","onChange","nonce","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 url(../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';\nimport { nonce } from '../../utils/dev.utils';\n\n/**\n * @slot default Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-password',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputPassword implements 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.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = 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\tclass={{\n\t\t\t\t\t\tpassword: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_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\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<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={ariaDescribedBy.length > 0 ? ariaDescribedBy.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 * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\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 * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den 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 * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\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: nonce(), // ⚠ 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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"}
+{"version":3,"names":["defaultStyleCss","KolInputPassword","render","ariaDescribedBy","getRenderStates","this","state","h","Host","class","_hasValue","password","_disabled","_error","_hideLabel","_hint","_icon","_id","_readOnly","_required","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","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","onChange","nonce","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 url(../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';\nimport { nonce } from '../../utils/dev.utils';\n\n/**\n * @slot default - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-password',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputPassword implements 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.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = 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\tclass={{\n\t\t\t\t\t\tpassword: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_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\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<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={ariaDescribedBy.length > 0 ? ariaDescribedBy.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 * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\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 * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den 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 * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\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: nonce(), // ⚠ 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.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{a as n}from"./reuse-3a02afb9.js";import{g as s}from"./controller-ca91917c.js";import{a as r}from"./controller-9b769c83.js";import{n as d}from"./dev.utils-157f0499.js";import"./a11y.tipps-2e27f8e6.js";import"./prop.validators-2c20cdf8.js";import"./index-f4596895.js";import"./tab-index-2de507bb.js";const l=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}:host{--border-width:2px;--input-size:1.5em}kol-input .icons{display:none}label{cursor:pointer}input{appearance:none;border-width:var(--border-width);border-style:solid;border-radius:100%;cursor:pointer;display:flex;height:var(--input-size);margin:0;min-height:var(--input-size);min-width:var(--input-size);padding:0;width:var(--input-size)}input:before{border-radius:100%;content:'';margin:auto;height:calc(var(--input-size) / 2);width:calc(var(--input-size) / 2)}input:checked:before{background-color:#000}fieldset{display:flex}fieldset.vertical{flex-direction:column}fieldset [slot='input']{align-items:center;display:flex}.required label>span::after{content:''}",o=class{render(){const{ariaDescribedBy:i,hasError:a}=s(this.state);return t(e,null,t("fieldset",{class:{disabled:!0===this.state._disabled,error:!0===a,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",{class:{radio:!0},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:d(),_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"]}}};o.style={default:l};export{o 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-ca91917c.js";import{a as r}from"./controller-9b769c83.js";import{n as d}from"./dev.utils-157f0499.js";import"./a11y.tipps-2e27f8e6.js";import"./prop.validators-2c20cdf8.js";import"./index-f4596895.js";import"./tab-index-2de507bb.js";const l=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}:host{--border-width:2px;--input-size:1.5em}kol-input .icons{display:none}label{cursor:pointer}input{appearance:none;border-width:var(--border-width);border-style:solid;border-radius:100%;cursor:pointer;display:flex;height:var(--input-size);margin:0;min-height:var(--input-size);min-width:var(--input-size);padding:0;width:var(--input-size)}input:before{border-radius:100%;content:'';margin:auto;height:calc(var(--input-size) / 2);width:calc(var(--input-size) / 2)}input:checked:before{background-color:#000}fieldset{display:flex}fieldset.vertical{flex-direction:column}fieldset [slot='input']{align-items:center;display:flex}.required label>span::after{content:''}",o=class{render(){const{ariaDescribedBy:i,hasError:a}=s(this.state);return t(e,null,t("fieldset",{class:{disabled:!0===this.state._disabled,error:!0===a,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",{class:{radio:!0},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:d(),_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"]}}};o.style={default:l};export{o as kol_input_radio};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolInputRadio","render","ariaDescribedBy","hasError","getRenderStates","this","state","h","Host","class","disabled","_disabled","error","required","_required","_orientation","_list","map","option","index","customId","_id","radio","key","_hideLabel","_hint","_renderNoLabel","_touched","slot","Object","assign","ref","_value","value","catchRef","undefined","accessKey","_accessKey","length","join","title","type","id","checked","name","_name","tabIndex","_tabIndex","controller","onFacade","onChange","htmlFor","style","height","margin","padding","visibility","label","_alert","_type","_variant","_error","constructor","hostRef","propagateFocus","host","event","target","HTMLInputElement","getOptionByKey","setValue","nonce","InputRadioController","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateList","validateName","validateOn","validateOrientation","validateRequired","validateTabIndex","validateTouched","validateValue","componentWillLoad"],"sources":["./src/components/input-radio/style.css?tag=kol-input-radio&mode=default&encapsulation=shadow","./src/components/input-radio/component.tsx"],"sourcesContent":["@import url(../input.css);\n:host {\n\t--border-width: 2px;\n\t--input-size: 1.5em;\n}\nkol-input .icons {\n\tdisplay: none;\n}\nlabel {\n\tcursor: pointer;\n}\ninput {\n\tappearance: none;\n\tborder-width: var(--border-width);\n\tborder-style: solid;\n\tborder-radius: 100%;\n\tcursor: pointer;\n\tdisplay: flex;\n\theight: var(--input-size);\n\tmargin: 0;\n\tmin-height: var(--input-size);\n\tmin-width: var(--input-size);\n\tpadding: 0;\n\twidth: var(--input-size);\n}\ninput:before {\n\tborder-radius: 100%;\n\tcontent: '';\n\tmargin: auto;\n\theight: calc(var(--input-size) / 2);\n\twidth: calc(var(--input-size) / 2);\n}\ninput:checked:before {\n\tbackground-color: #000;\n}\nfieldset {\n\tdisplay: flex;\n}\nfieldset.vertical {\n\tflex-direction: column;\n}\nfieldset [slot='input'] {\n\talign-items: center;\n\tdisplay: flex;\n}\n/* required star is on fieldset legend */\n.required label > span::after {\n\tcontent: '';\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, Option } from '../../types/input/types';\nimport { Orientation } from '../../types/orientation';\nimport { W3CInputValue } from '../../types/w3c';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRadioController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n/**\n * @slot default Die Legende/Überschrift der Radiobuttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* TODO: Für was wird dieses span benötigt? */}\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\n\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<kol-input\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\tradio: true,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-labelledby={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === option.value}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name || this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tid={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel && this.state._required !== true ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</kol-input>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && (\n\t\t\t\t\t\t<kol-alert id=\"error\" _alert={true} _type=\"error\" _variant=\"msg\">\n\t\t\t\t\t\t\t{this.state._error}\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t)}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/**\n\t * 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 * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\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 * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\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 Optionen für das Eingabefeld an.\n\t */\n\t@Prop() public _list!: Stringified<Option<W3CInputValue>[]>;\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 die Ausrichtung der LinkList an.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\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 der Radio an. (Known Bug: https://github.com/ionic-team/stencil/issues/3902)\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_id: nonce(), // ⚠ required\n\t\t_list: [],\n\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(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('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","KolInputRadio","render","ariaDescribedBy","hasError","getRenderStates","this","state","h","Host","class","disabled","_disabled","error","required","_required","_orientation","_list","map","option","index","customId","_id","radio","key","_hideLabel","_hint","_renderNoLabel","_touched","slot","Object","assign","ref","_value","value","catchRef","undefined","accessKey","_accessKey","length","join","title","type","id","checked","name","_name","tabIndex","_tabIndex","controller","onFacade","onChange","htmlFor","style","height","margin","padding","visibility","label","_alert","_type","_variant","_error","constructor","hostRef","propagateFocus","host","event","target","HTMLInputElement","getOptionByKey","setValue","nonce","InputRadioController","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateId","validateList","validateName","validateOn","validateOrientation","validateRequired","validateTabIndex","validateTouched","validateValue","componentWillLoad"],"sources":["./src/components/input-radio/style.css?tag=kol-input-radio&mode=default&encapsulation=shadow","./src/components/input-radio/component.tsx"],"sourcesContent":["@import url(../input.css);\n:host {\n\t--border-width: 2px;\n\t--input-size: 1.5em;\n}\nkol-input .icons {\n\tdisplay: none;\n}\nlabel {\n\tcursor: pointer;\n}\ninput {\n\tappearance: none;\n\tborder-width: var(--border-width);\n\tborder-style: solid;\n\tborder-radius: 100%;\n\tcursor: pointer;\n\tdisplay: flex;\n\theight: var(--input-size);\n\tmargin: 0;\n\tmin-height: var(--input-size);\n\tmin-width: var(--input-size);\n\tpadding: 0;\n\twidth: var(--input-size);\n}\ninput:before {\n\tborder-radius: 100%;\n\tcontent: '';\n\tmargin: auto;\n\theight: calc(var(--input-size) / 2);\n\twidth: calc(var(--input-size) / 2);\n}\ninput:checked:before {\n\tbackground-color: #000;\n}\nfieldset {\n\tdisplay: flex;\n}\nfieldset.vertical {\n\tflex-direction: column;\n}\nfieldset [slot='input'] {\n\talign-items: center;\n\tdisplay: flex;\n}\n/* required star is on fieldset legend */\n.required label > span::after {\n\tcontent: '';\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, Option } from '../../types/input/types';\nimport { Orientation } from '../../types/orientation';\nimport { W3CInputValue } from '../../types/w3c';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRadioController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n/**\n * @slot default - Die Legende/Überschrift der Radiobuttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* TODO: Für was wird dieses span benötigt? */}\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\n\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<kol-input\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\tradio: true,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-labelledby={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === option.value}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name || this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tid={`${customId}-label`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel && this.state._required !== true ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel && this.state._required !== true ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</kol-input>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && (\n\t\t\t\t\t\t<kol-alert id=\"error\" _alert={true} _type=\"error\" _variant=\"msg\">\n\t\t\t\t\t\t\t{this.state._error}\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t)}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/**\n\t * 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 * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\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 * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\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 Optionen für das Eingabefeld an.\n\t */\n\t@Prop() public _list!: Stringified<Option<W3CInputValue>[]>;\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 die Ausrichtung der LinkList an.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\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 der Radio an. (Known Bug: https://github.com/ionic-team/stencil/issues/3902)\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_id: nonce(), // ⚠ required\n\t\t_list: [],\n\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(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('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<unknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as e,g as a}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";import{g as n}from"./controller-ca91917c.js";import{a as o,d as l,e as r}from"./prop.validators-2c20cdf8.js";import{I as d}from"./controller-icon-8d8c747a.js";import{n as p}from"./dev.utils-157f0499.js";import"./a11y.tipps-2e27f8e6.js";import"./tab-index-2de507bb.js";import"./index-f4596895.js";import"./icon-52e86ff8.js";class h extends d{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){o(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){l(this.component,"_list",(t=>"object"==typeof t&&"string"==typeof t.label&&t.label.length>0),t)}validateMax(t){r(this.component,"_max",t)}validateMin(t){r(this.component,"_min",t)}validateStep(t){r(this.component,"_step",t)}validateValue(t){r(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const u=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}input[type='range']{appearance:none;background-color:#d3d3d3;border:0;display:inline-block;height:0.5rem;line-height:1.5em;padding:0;margin:0}input[type='range']::-webkit-slider-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-webkit-appearance:none}input[type='range']::-moz-range-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-moz-appearance:none}",c=class{render(){const{ariaDescribedBy:e}=n(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return t(i,null,t("kol-input",{class:{range:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,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,slot:"input",spellcheck:"false",step:this.state._step,type:"range",value:this.state._value},this.controller.onFacade)),a&&[t("datalist",{id:`${this.state._id}-list`},this.state._list.map((e=>t("option",{value:e.value}))))]))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},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._step=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:p(),_list:[]},this.controller=new h(this,"range",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}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)}validateStep(t){this.controller.validateStep(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{_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"],_step:["validateStep"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};c.style={default:u};export{c as kol_input_range};
+import{h as t,H as i,r as e,g as a}from"./index-50adf9a0.js";import{a as s}from"./reuse-3a02afb9.js";import{g as n}from"./controller-ca91917c.js";import{a as o,d as l,e as r}from"./prop.validators-2c20cdf8.js";import{I as d}from"./controller-icon-8d8c747a.js";import{n as p}from"./dev.utils-157f0499.js";import"./a11y.tipps-2e27f8e6.js";import"./tab-index-2de507bb.js";import"./index-f4596895.js";import"./icon-52e86ff8.js";class h extends d{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){o(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){l(this.component,"_list",(t=>"object"==typeof t&&"string"==typeof t.label&&t.label.length>0),t)}validateMax(t){r(this.component,"_max",t)}validateMin(t){r(this.component,"_min",t)}validateStep(t){r(this.component,"_step",t)}validateValue(t){r(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateValue(this.component._value)}}const u=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}input[type='range']{appearance:none;background-color:#d3d3d3;border:0;display:inline-block;height:0.5rem;line-height:1.5em;padding:0;margin:0}input[type='range']::-webkit-slider-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-webkit-appearance:none}input[type='range']::-moz-range-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-moz-appearance:none}",c=class{render(){const{ariaDescribedBy:e}=n(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return t(i,null,t("kol-input",{class:{range:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,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,slot:"input",spellcheck:"false",step:this.state._step,type:"range",value:this.state._value},this.controller.onFacade)),a&&[t("datalist",{id:`${this.state._id}-list`},this.state._list.map((e=>t("option",{value:e.value}))))]))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,s(this.host,this.ref)},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._step=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_id:p(),_list:[]},this.controller=new h(this,"range",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}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)}validateStep(t){this.controller.validateStep(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{_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"],_step:["validateStep"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};c.style={default:u};export{c as kol_input_range};

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

@@ -1 +1 @@
-{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","watchJsonArrayString","item","label","length","validateMax","watchNumber","validateMin","validateStep","validateValue","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_list","_max","_min","_step","defaultStyleCss","KolInputRange","render","ariaDescribedBy","getRenderStates","hasList","Array","isArray","h","Host","class","range","_disabled","_error","_hideLabel","_hint","_icon","_id","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","id","list","max","min","_name","spellcheck","step","type","controller","onFacade","map","option","hostRef","propagateFocus","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateTabIndex","validateTouched","_alert"],"sources":["./src/components/input-range/controller.ts","./src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","./src/components/input-range/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { watchJsonArrayString, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateList(value?: Stringified<Option<number>[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis.component,\n\t\t\t'_list',\n\t\t\t(item: Option<number>) => typeof item === 'object' && typeof item.label === 'string' && item.label.length > 0,\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n/*\n * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n */\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 0;\n\tdisplay: inline-block;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, InputTypeOnOff, Option } from '../../types/input/types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n/**\n * @slot default\tDie Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = 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\tclass={{\n\t\t\t\t\t\trange: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_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_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<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={ariaDescribedBy.length > 0 ? ariaDescribedBy.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\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t/>\n\t\t\t\t\t{hasList && [\n\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t{this.state._list.map((option: Option<number>) => (\n\t\t\t\t\t\t\t\t<option value={option.value}></option>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t//   {this.state._list.map((option: InputOption<number>) => (\n\t\t\t\t\t\t//     <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t//   ))}\n\t\t\t\t\t\t// </ul>,\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: InputRangeController;\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 * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\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 * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den 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<Option<number>[]>;\n\n\t/**\n\t * Gibt den Maximalwert des Eingabefeldes an.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Gibt den Minimalwert des Eingabefeldes an.\n\t */\n\t@Prop() public _min?: 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 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 den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: nonce(), // ⚠ required\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_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<Option<number>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","watchJsonArrayString","item","label","length","validateMax","watchNumber","validateMin","validateStep","validateValue","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_list","_max","_min","_step","defaultStyleCss","KolInputRange","render","ariaDescribedBy","getRenderStates","hasList","Array","isArray","h","Host","class","range","_disabled","_error","_hideLabel","_hint","_icon","_id","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","id","list","max","min","_name","spellcheck","step","type","controller","onFacade","map","option","hostRef","propagateFocus","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateName","validateOn","validateTabIndex","validateTouched","_alert"],"sources":["./src/components/input-range/controller.ts","./src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","./src/components/input-range/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { watchJsonArrayString, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateList(value?: Stringified<Option<number>[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis.component,\n\t\t\t'_list',\n\t\t\t(item: Option<number>) => typeof item === 'object' && typeof item.label === 'string' && item.label.length > 0,\n\t\t\tvalue\n\t\t);\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n/*\n * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n */\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 0;\n\tdisplay: inline-block;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { InputTypeOnDefault, InputTypeOnOff, Option } from '../../types/input/types';\nimport { propagateFocus } from '../../utils/reuse';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { nonce } from '../../utils/dev.utils';\n\n/**\n * @slot default - Die Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = 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\tclass={{\n\t\t\t\t\t\trange: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_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_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<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={ariaDescribedBy.length > 0 ? ariaDescribedBy.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\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t/>\n\t\t\t\t\t{hasList && [\n\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t{this.state._list.map((option: Option<number>) => (\n\t\t\t\t\t\t\t\t<option value={option.value}></option>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t//   {this.state._list.map((option: InputOption<number>) => (\n\t\t\t\t\t\t//     <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t//   ))}\n\t\t\t\t\t\t// </ul>,\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: InputRangeController;\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 * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\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 * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den 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<Option<number>[]>;\n\n\t/**\n\t * Gibt den Maximalwert des Eingabefeldes an.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Gibt den Minimalwert des Eingabefeldes an.\n\t */\n\t@Prop() public _min?: 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 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 den Wert des Eingabefeldes an.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: nonce(), // ⚠ required\n\t\t_list: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_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<Option<number>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{f as s}from"./a11y.tipps-2e27f8e6.js";import{a as n}from"./reuse-3a02afb9.js";import{p as l}from"./controller-abdc8667.js";import{g as d}from"./controller-ca91917c.js";import{a as o}from"./controller-3ae042db.js";import{b as r}from"./prop.validators-2c20cdf8.js";import{v as h}from"./hide-label-1fa80b94.js";import"./dev.utils-157f0499.js";import"./tab-index-2de507bb.js";import"./controller-6f59f733.js";import"./controller-icon-8d8c747a.js";import"./icon-52e86ff8.js";import"./index-f4596895.js";const p=(t,e)=>{r(t,"_alert",e)},u=(t,e)=>{r(t,"_readOnly",e)},c=(t,e)=>{r(t,"_required",e)},f=(t,e)=>{r(t,"_touched",e)},m=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}";s("[KolInputText] Pre- und post-Label für Währung usw.");const v=class{render(){const{ariaDescribedBy:i}=d(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return t(e,{class:{"has-value":this.state._hasValue}},this.state._accessKey,t("kol-input",{class:{[this.state._type]:!0},_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,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,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,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",title:"",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){i(this,t),this.catchRef=t=>{var e;this.ref=t,n(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{"Enter"===t.code||"NumpadEnter"===t.code?l({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,i;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.ref)||void 0===i?void 0:i.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=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._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._type="text",this._value=void 0,this.state={_autoComplete:"off",_id:"id",_hasValue:!1,_list:[],_type:"text"},this.controller=new o(this,"text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){p(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){h(this,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)}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){u(this,t)}validateRequired(t){c(this,t)}validateSize(t){this.controller.validateSize(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){f(this,t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};v.style={default:m};export{v as kol_input_text};
+import{h as t,H as e,r as i,g as a}from"./index-50adf9a0.js";import{f as s}from"./a11y.tipps-2e27f8e6.js";import{a as n}from"./reuse-3a02afb9.js";import{p as l}from"./controller-abdc8667.js";import{g as d}from"./controller-ca91917c.js";import{a as o}from"./controller-3ae042db.js";import{b as r}from"./prop.validators-2c20cdf8.js";import{v as h}from"./hide-label-1fa80b94.js";import"./dev.utils-157f0499.js";import"./tab-index-2de507bb.js";import"./controller-6f59f733.js";import"./controller-icon-8d8c747a.js";import"./icon-52e86ff8.js";import"./index-f4596895.js";const p=(t,e)=>{r(t,"_alert",e)},u=(t,e)=>{r(t,"_readOnly",e)},c=(t,e)=>{r(t,"_required",e)},f=(t,e)=>{r(t,"_touched",e)},m=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}";s("[KolInputText] Pre- und post-Label für Währung usw.");const v=class{render(){const{ariaDescribedBy:i}=d(this.state),a=Array.isArray(this.state._list)&&this.state._list.length>0;return t(e,{class:{"has-value":this.state._hasValue}},this.state._accessKey,t("kol-input",{class:{[this.state._type]:!0},_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,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},t("slot",null)),t("input",Object.assign({ref:this.catchRef,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,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",title:"",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp}))))}constructor(t){i(this,t),this.catchRef=t=>{var e;this.ref=t,n(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{"Enter"===t.code||"NumpadEnter"===t.code?l({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,i;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.ref)||void 0===i?void 0:i.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=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._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._type="text",this._value=void 0,this.state={_autoComplete:"off",_id:"id",_hasValue:!1,_list:[],_type:"text"},this.controller=new o(this,"text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){p(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){h(this,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)}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){u(this,t)}validateRequired(t){c(this,t)}validateSize(t){this.controller.validateSize(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){f(this,t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};v.style={default:m};export{v as kol_input_text};

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

@@ -1 +1 @@
-{"version":3,"names":["validateAlert","component","value","watchBoolean","validateReadOnly","validateRequired","validateTouched","defaultStyleCss","featureHint","KolInputText","render","ariaDescribedBy","getRenderStates","this","state","hasList","Array","isArray","_list","length","h","Host","class","_hasValue","_accessKey","_type","_disabled","_error","_hideLabel","_hint","_icon","_id","_readOnly","_required","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","list","maxlength","_maxLength","name","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","title","type","_value","controller","onFacade","onKeyUp","constructor","hostRef","propagateFocus","host","disconnectedCallback","addEventListener","onChange","event","code","propagateSubmitEventToForm","form","oldValue","_b","InputTextController","validateAccessKey","validateAutoComplete","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateList","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateSize","validateSmartButton","validateTabIndex","validateType","validateValue","componentWillLoad","_alert","addValueChangeListener","v","removeEventListener"],"sources":["./src/types/props/alert.ts","./src/types/props/read-only.ts","./src/types/props/required.ts","./src/types/props/touched.ts","./src/components/input-text/style.css?tag=kol-input-text&mode=default&encapsulation=shadow","./src/components/input-text/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropAlert = {\n\talert: boolean;\n};\n\n/* validator */\nexport const validateAlert = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Setzt den Zugriff auf dieses Eingabeelement auf nur lesen.\n */\n/** en\n * Makes the input element read only.\n */\nexport type PropReadOnly = {\n\treadOnly: boolean;\n};\n\n/* validator */\nexport const validateReadOnly = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_readOnly', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Macht das Eingabeelement zu einem Pflichtfeld.\n */\n/** en\n * Makes the input element required.\n */\nexport type PropRequired = {\n\trequired: boolean;\n};\n\n/* validator */\nexport const validateRequired = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_required', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n */\n/** en\n * Shows if the input was touched by a user.\n */\nexport type PropTouched = {\n\ttouched: boolean;\n};\n\n/* validator */\nexport const validateTouched = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_touched', value);\n};\n","@import url(../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 { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTextType } from '../../types/input/control/text';\n\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { validateAlert, validateHideLabel, validateReadOnly, validateRequired, validateTouched } from '../../types/props';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { ComponentApi, States } from './types';\n\nfeatureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);\n\n/**\n * @slot default Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t\tthis.disconnectedCallback();\n\t\tthis.ref?.addEventListener('search', this.onChange);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst 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{this.state._accessKey}\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type]: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_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\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<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\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.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\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\ttitle=\"\"\n\t\t\t\t\t\t// title={this.state._title}\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\t// onInput={this.controller.onFacade.onChange}\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: InputTextController;\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 * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\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 * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den 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 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üfmuster 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 * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\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 an, ob es ein Text-, Suche-, URL- oder Telefon-Eingabefeld ist.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: 'id',\n\t\t_hasValue: false,\n\t\t_list: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', 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\tvalidateAlert(this, 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\tvalidateHideLabel(this, 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('_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\tvalidateReadOnly(this, value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tvalidateRequired(this, 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\tvalidateTouched(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ref?.removeEventListener('search', this.onChange);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateAlert","component","value","watchBoolean","validateReadOnly","validateRequired","validateTouched","defaultStyleCss","featureHint","KolInputText","render","ariaDescribedBy","getRenderStates","this","state","hasList","Array","isArray","_list","length","h","Host","class","_hasValue","_accessKey","_type","_disabled","_error","_hideLabel","_hint","_icon","_id","_readOnly","_required","_smartButton","_touched","onClick","_a","ref","focus","slot","Object","assign","catchRef","accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","list","maxlength","_maxLength","name","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","title","type","_value","controller","onFacade","onKeyUp","constructor","hostRef","propagateFocus","host","disconnectedCallback","addEventListener","onChange","event","code","propagateSubmitEventToForm","form","oldValue","_b","InputTextController","validateAccessKey","validateAutoComplete","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateList","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateSize","validateSmartButton","validateTabIndex","validateType","validateValue","componentWillLoad","_alert","addValueChangeListener","v","removeEventListener"],"sources":["./src/types/props/alert.ts","./src/types/props/read-only.ts","./src/types/props/required.ts","./src/types/props/touched.ts","./src/components/input-text/style.css?tag=kol-input-text&mode=default&encapsulation=shadow","./src/components/input-text/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropAlert = {\n\talert: boolean;\n};\n\n/* validator */\nexport const validateAlert = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Setzt den Zugriff auf dieses Eingabeelement auf nur lesen.\n */\n/** en\n * Makes the input element read only.\n */\nexport type PropReadOnly = {\n\treadOnly: boolean;\n};\n\n/* validator */\nexport const validateReadOnly = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_readOnly', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Macht das Eingabeelement zu einem Pflichtfeld.\n */\n/** en\n * Makes the input element required.\n */\nexport type PropRequired = {\n\trequired: boolean;\n};\n\n/* validator */\nexport const validateRequired = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_required', value);\n};\n","import { Generic } from '@a11y-ui/core';\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n */\n/** en\n * Shows if the input was touched by a user.\n */\nexport type PropTouched = {\n\ttouched: boolean;\n};\n\n/* validator */\nexport const validateTouched = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_touched', value);\n};\n","@import url(../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 { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTextType } from '../../types/input/control/text';\n\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { validateAlert, validateHideLabel, validateReadOnly, validateRequired, validateTouched } from '../../types/props';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { ComponentApi, States } from './types';\n\nfeatureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);\n\n/**\n * @slot default - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t\tthis.disconnectedCallback();\n\t\tthis.ref?.addEventListener('search', this.onChange);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst 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{this.state._accessKey}\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type]: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_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\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t<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\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.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\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\ttitle=\"\"\n\t\t\t\t\t\t// title={this.state._title}\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\t// onInput={this.controller.onFacade.onChange}\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: InputTextController;\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 * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.\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 * Versteckt das sichtbare Label des Elements.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den 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 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üfmuster 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 * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop({ reflect: true }) public _readOnly?: boolean;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\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 an, ob es ein Text-, Suche-, URL- oder Telefon-Eingabefeld ist.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_id: 'id',\n\t\t_hasValue: false,\n\t\t_list: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', 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\tvalidateAlert(this, 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\tvalidateHideLabel(this, 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('_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\tvalidateReadOnly(this, value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tvalidateRequired(this, 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\tvalidateTouched(this, value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ref?.removeEventListener('search', this.onChange);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as i}from"./index-50adf9a0.js";import{c as a,v as o}from"./color-2a715559.js";import{a as s}from"./i18n-b8589f01.js";import{b as r}from"./prop.validators-2c20cdf8.js";import{d as n}from"./a11y.tipps-2e27f8e6.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";const l=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}text{font-size:90px;letter-spacing:normal;word-spacing:normal}",h=360;function d(t){return t*Math.PI/180}function c(t){return Math.round((Math.cos(d(t))+1)/2*225)}const p=class{constructor(e){t(this,e),this.handleColorChange=(t,e)=>{if("string"==typeof t){const i=a(t);e.set("_color",{red:i[0],green:i[1],blue:i[2]})}else n("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._animate=void 0,this._color="#003c78",this._labeled=void 0,this.state={_animate:!1,_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const t=!0===this.state._animate?`rgb(${c(this.state._color.red)},${c(this.state._color.green)},${c(this.state._color.blue)})`:`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e(i,null,e("svg",{role:"img","aria-label":s("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:t},e("path",{d:"M353 322L213 304V434L353 322Z"}),e("path",{d:"M209 564V304L149 434L209 564Z"}),e("path",{d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{d:"M353 318L35 36L213 300L353 318Z"}),e("path",{d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{x:"250",y:"525",fill:t},"KoliBri")))}validateAnimate(t){r(this,"_animate",t)}validateColor(t){o(this,t,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(t){r(this,"_labeled",t)}componentWillLoad(){this.validateAnimate(this._animate),this.validateColor(this._color),this.validateLabeled(this._labeled)}componentDidRender(){clearInterval(this.interval),this.state._animate&&(this.interval=setInterval((()=>{this.state=Object.assign(Object.assign({},this.state),{_color:{red:(this.state._color.red+1)%h,green:(this.state._color.green+2)%h,blue:(this.state._color.blue+3)%h}})}),50))}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_animate:["validateAnimate"],_color:["validateColor"],_labeled:["validateLabeled"]}}};p.style={default:l};export{p as kol_kolibri};
+import{r as t,h as e,H as i}from"./index-50adf9a0.js";import{c as o,v as a}from"./color-2a715559.js";import{a as s}from"./i18n-b8589f01.js";import{b as r}from"./prop.validators-2c20cdf8.js";import{d as n}from"./a11y.tipps-2e27f8e6.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";const l=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}text{font-size:90px;letter-spacing:normal;word-spacing:normal}",h=360;function d(t){return t*Math.PI/180}function c(t){return Math.round((Math.cos(d(t))+1)/2*225)}const p=class{constructor(e){t(this,e),this.handleColorChange=(t,e)=>{if("string"==typeof t){const a=o(t);e.set("_color",{red:a[0],green:a[1],blue:a[2]})}else n("[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.")},this._animate=void 0,this._color="#003c78",this._labeled=void 0,this.state={_animate:!1,_color:{red:0,green:60,blue:120},_labeled:!0}}render(){const t=!0===this.state._animate?`rgb(${c(this.state._color.red)},${c(this.state._color.green)},${c(this.state._color.blue)})`:`rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;return e(i,null,e("svg",{role:"img","aria-label":s("kol-kolibri-logo"),xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 600 600",fill:t},e("path",{d:"M353 322L213 304V434L353 322Z"}),e("path",{d:"M209 564V304L149 434L209 564Z"}),e("path",{d:"M357 316L417 250L361 210L275 244L357 316Z"}),e("path",{d:"M329 218L237 92L250 222L272 241L329 218Z"}),e("path",{d:"M353 318L35 36L213 300L353 318Z"}),e("path",{d:"M391 286L565 272L421 252L391 286Z"}),!0===this.state._labeled&&e("text",{x:"250",y:"525",fill:t},"KoliBri")))}validateAnimate(t){r(this,"_animate",t)}validateColor(t){a(this,t,{defaultValue:"#003c78",hooks:{beforePatch:this.handleColorChange}})}validateLabeled(t){r(this,"_labeled",t)}componentWillLoad(){this.validateAnimate(this._animate),this.validateColor(this._color),this.validateLabeled(this._labeled)}componentDidRender(){clearInterval(this.interval),this.state._animate&&(this.interval=setInterval((()=>{this.state=Object.assign(Object.assign({},this.state),{_color:{red:(this.state._color.red+1)%h,green:(this.state._color.green+2)%h,blue:(this.state._color.blue+3)%h}})}),50))}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_animate:["validateAnimate"],_color:["validateColor"],_labeled:["validateLabeled"]}}};p.style={default:l};export{p as kol_kolibri};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","max","degreeToRadians","degree","Math","PI","getColorNumber","round","cos","KolKolibri","this","handleColorChange","nextValue","nextState","rgba","colorRgba","set","red","green","blue","devHint","_animate","_color","_labeled","render","fillColor","state","h","Host","role","translate","xmlns","viewBox","fill","d","x","y","validateAnimate","value","watchBoolean","validateColor","defaultValue","hooks","beforePatch","validateLabeled","componentWillLoad","componentDidRender","clearInterval","interval","setInterval","Object","assign","disconnectedCallback"],"sources":["./src/components/kolibri/style.css?tag=kol-kolibri&mode=default&encapsulation=shadow","./src/components/kolibri/component.tsx"],"sourcesContent":["@import url(../style.css);\ntext {\n\tfont-size: 90px;\n\tletter-spacing: normal;\n\tword-spacing: normal;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { colorRgba } from '../badge/color-rgba';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport { PropColor, validateColor } from '../../types/props/color';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { Stringified } from '../../components';\n\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tanimate: boolean;\n\tcolor: Stringified<PropColor>;\n\tlabeled: boolean;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tanimate: boolean;\n\tcolor: {\n\t\tred: number;\n\t\tgreen: number;\n\t\tblue: number;\n\t};\n\tlabeled: boolean;\n};\ntype OptionalStates = unknown;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst max = 360;\nfunction degreeToRadians(degree: number): number {\n\treturn (degree * Math.PI) / 180;\n}\nfunction getColorNumber(degree: number): number {\n\treturn Math.round(((Math.cos(degreeToRadians(degree)) + 1) / 2) * 225);\n}\n\n@Component({\n\ttag: 'kol-kolibri',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolKolibri implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst fillColor: string =\n\t\t\tthis.state._animate === true\n\t\t\t\t? `rgb(${getColorNumber(this.state._color.red)},${getColorNumber(this.state._color.green)},${getColorNumber(this.state._color.blue)})`\n\t\t\t\t: `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<svg role=\"img\" aria-label={translate('kol-kolibri-logo')} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 600 600\" fill={fillColor}>\n\t\t\t\t\t<path d=\"M353 322L213 304V434L353 322Z\" />\n\t\t\t\t\t<path d=\"M209 564V304L149 434L209 564Z\" />\n\t\t\t\t\t<path d=\"M357 316L417 250L361 210L275 244L357 316Z\" />\n\t\t\t\t\t<path d=\"M329 218L237 92L250 222L272 241L329 218Z\" />\n\t\t\t\t\t<path d=\"M353 318L35 36L213 300L353 318Z\" />\n\t\t\t\t\t<path d=\"M391 286L565 272L421 252L391 286Z\" />\n\t\t\t\t\t{this.state._labeled === true && (\n\t\t\t\t\t\t<text x=\"250\" y=\"525\" fill={fillColor}>\n\t\t\t\t\t\t\tKoliBri\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t</svg>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate interval?: NodeJS.Timer;\n\n\t/**\n\t * Gibt an, ob das Bild-Logo farblich animiert werden soll.\n\t */\n\t@Prop({ reflect: true }) public _animate?: boolean;\n\n\t/**\n\t * Gibt an, in welcher Farbe das Bild-Logo initial dargestellt werden soll.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#003c78';\n\n\t/**\n\t * Gibt an, ob die Logo-Beschriftung angezeigt werden soll.\n\t */\n\t@Prop({ reflect: true }) public _labeled?: boolean;\n\n\t@State() public state: States = {\n\t\t_animate: false,\n\t\t_color: {\n\t\t\tred: 0,\n\t\t\tgreen: 60,\n\t\t\tblue: 120,\n\t\t},\n\t\t_labeled: true,\n\t};\n\n\t@Watch('_animate')\n\tpublic validateAnimate(value?: boolean): void {\n\t\twatchBoolean(this, '_animate', value);\n\t}\n\n\tprivate handleColorChange: Generic.Element.NextStateHooksCallback = (nextValue: unknown, nextState: Map<string, unknown>): void => {\n\t\tif (typeof nextValue === 'string') {\n\t\t\tconst rgba = colorRgba(nextValue);\n\t\t\tnextState.set('_color', {\n\t\t\t\tred: rgba[0],\n\t\t\t\tgreen: rgba[1],\n\t\t\t\tblue: rgba[2],\n\t\t\t});\n\t\t} else {\n\t\t\tdevHint(`[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.`);\n\t\t}\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#003c78',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_labeled')\n\tpublic validateLabeled(value?: boolean): void {\n\t\twatchBoolean(this, '_labeled', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAnimate(this._animate);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabeled(this._labeled);\n\t}\n\n\tpublic componentDidRender(): void {\n\t\tclearInterval(this.interval as NodeJS.Timer);\n\t\tif (this.state._animate) {\n\t\t\tthis.interval = setInterval(() => {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_color: {\n\t\t\t\t\t\tred: (this.state._color.red + 1) % max,\n\t\t\t\t\t\tgreen: (this.state._color.green + 2) % max,\n\t\t\t\t\t\tblue: (this.state._color.blue + 3) % max,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}, 50);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval as NodeJS.Timer);\n\t}\n}\n"],"mappings":";;;+VAAA,MAAMA,EAAkB,muBC+BxB,MAAMC,EAAM,IACZ,SAASC,EAAgBC,GACxB,OAAQA,EAASC,KAAKC,GAAM,GAC7B,CACA,SAASC,EAAeH,GACvB,OAAOC,KAAKG,OAAQH,KAAKI,IAAIN,EAAgBC,IAAW,GAAK,EAAK,IACnE,C,MASaM,EAAU,M,yBAyDdC,KAAAC,kBAA4D,CAACC,EAAoBC,KACxF,UAAWD,IAAc,SAAU,CAClC,MAAME,EAAOC,EAAUH,GACvBC,EAAUG,IAAI,SAAU,CACvBC,IAAKH,EAAK,GACVI,MAAOJ,EAAK,GACZK,KAAML,EAAK,I,KAEN,CACNM,EAAQ,uG,uCA/BuC,U,mCAOjB,CAC/BC,SAAU,MACVC,OAAQ,CACPL,IAAK,EACLC,MAAO,GACPC,KAAM,KAEPI,SAAU,K,CAhDJC,SACN,MAAMC,EACLf,KAAKgB,MAAML,WAAa,KACrB,OAAOf,EAAeI,KAAKgB,MAAMJ,OAAOL,QAAQX,EAAeI,KAAKgB,MAAMJ,OAAOJ,UAAUZ,EAAeI,KAAKgB,MAAMJ,OAAOH,SAC5H,OAAOT,KAAKgB,MAAMJ,OAAOL,OAAOP,KAAKgB,MAAMJ,OAAOJ,SAASR,KAAKgB,MAAMJ,OAAOH,QACjF,OACCQ,EAACC,EAAI,KACJD,EAAA,OAAKE,KAAK,MAAK,aAAaC,EAAU,oBAAqBC,MAAM,6BAA6BC,QAAQ,cAAcC,KAAMR,GACzHE,EAAA,QAAMO,EAAE,kCACRP,EAAA,QAAMO,EAAE,kCACRP,EAAA,QAAMO,EAAE,8CACRP,EAAA,QAAMO,EAAE,6CACRP,EAAA,QAAMO,EAAE,oCACRP,EAAA,QAAMO,EAAE,sCACPxB,KAAKgB,MAAMH,WAAa,MACxBI,EAAA,QAAMQ,EAAE,MAAMC,EAAE,MAAMH,KAAMR,GAAS,Y,CAqCnCY,gBAAgBC,GACtBC,EAAa7B,KAAM,WAAY4B,E,CAiBzBE,cAAcF,GACpBE,EAAc9B,KAAM4B,EAAO,CAC1BG,aAAc,UACdC,MAAO,CACNC,YAAajC,KAAKC,oB,CAMdiC,gBAAgBN,GACtBC,EAAa7B,KAAM,WAAY4B,E,CAGzBO,oBACNnC,KAAK2B,gBAAgB3B,KAAKW,UAC1BX,KAAK8B,cAAc9B,KAAKY,QACxBZ,KAAKkC,gBAAgBlC,KAAKa,S,CAGpBuB,qBACNC,cAAcrC,KAAKsC,UACnB,GAAItC,KAAKgB,MAAML,SAAU,CACxBX,KAAKsC,SAAWC,aAAY,KAC3BvC,KAAKgB,MAAKwB,OAAAC,OAAAD,OAAAC,OAAA,GACNzC,KAAKgB,OAAK,CACbJ,OAAQ,CACPL,KAAMP,KAAKgB,MAAMJ,OAAOL,IAAM,GAAKhB,EACnCiB,OAAQR,KAAKgB,MAAMJ,OAAOJ,MAAQ,GAAKjB,EACvCkB,MAAOT,KAAKgB,MAAMJ,OAAOH,KAAO,GAAKlB,IAEtC,GACC,G,EAIEmD,uBACNL,cAAcrC,KAAKsC,S"}
+{"version":3,"names":["defaultStyleCss","max","degreeToRadians","degree","Math","PI","getColorNumber","round","cos","KolKolibri","this","handleColorChange","nextValue","nextState","rgba","colorRgba","set","red","green","blue","devHint","_animate","_color","_labeled","render","fillColor","state","h","Host","role","translate","xmlns","viewBox","fill","d","x","y","validateAnimate","value","watchBoolean","validateColor","defaultValue","hooks","beforePatch","validateLabeled","componentWillLoad","componentDidRender","clearInterval","interval","setInterval","Object","assign","disconnectedCallback"],"sources":["./src/components/kolibri/style.css?tag=kol-kolibri&mode=default&encapsulation=shadow","./src/components/kolibri/component.tsx"],"sourcesContent":["@import url(../style.css);\ntext {\n\tfont-size: 90px;\n\tletter-spacing: normal;\n\tword-spacing: normal;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { colorRgba } from '../badge/color-rgba';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport { PropColor, validateColor } from '../../types/props/color';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { devHint } from '../../utils/a11y.tipps';\nimport { Stringified } from '../../components';\n\ntype RequiredProps = unknown;\ntype OptionalProps = {\n\tanimate: boolean;\n\tcolor: Stringified<PropColor>;\n\tlabeled: boolean;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tanimate: boolean;\n\tcolor: {\n\t\tred: number;\n\t\tgreen: number;\n\t\tblue: number;\n\t};\n\tlabeled: boolean;\n};\ntype OptionalStates = unknown;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nconst max = 360;\nfunction degreeToRadians(degree: number): number {\n\treturn (degree * Math.PI) / 180;\n}\nfunction getColorNumber(degree: number): number {\n\treturn Math.round(((Math.cos(degreeToRadians(degree)) + 1) / 2) * 225);\n}\n\n@Component({\n\ttag: 'kol-kolibri',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolKolibri implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst fillColor: string =\n\t\t\tthis.state._animate === true\n\t\t\t\t? `rgb(${getColorNumber(this.state._color.red)},${getColorNumber(this.state._color.green)},${getColorNumber(this.state._color.blue)})`\n\t\t\t\t: `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<svg role=\"img\" aria-label={translate('kol-kolibri-logo')} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 600 600\" fill={fillColor}>\n\t\t\t\t\t<path d=\"M353 322L213 304V434L353 322Z\" />\n\t\t\t\t\t<path d=\"M209 564V304L149 434L209 564Z\" />\n\t\t\t\t\t<path d=\"M357 316L417 250L361 210L275 244L357 316Z\" />\n\t\t\t\t\t<path d=\"M329 218L237 92L250 222L272 241L329 218Z\" />\n\t\t\t\t\t<path d=\"M353 318L35 36L213 300L353 318Z\" />\n\t\t\t\t\t<path d=\"M391 286L565 272L421 252L391 286Z\" />\n\t\t\t\t\t{this.state._labeled === true && (\n\t\t\t\t\t\t<text x=\"250\" y=\"525\" fill={fillColor}>\n\t\t\t\t\t\t\tKoliBri\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t</svg>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate interval?: NodeJS.Timer;\n\n\t/**\n\t * Gibt an, ob das Bild-Logo farblich animiert werden soll.\n\t */\n\t@Prop({ reflect: true }) public _animate?: boolean;\n\n\t/**\n\t * Gibt an, in welcher Farbe das Bild-Logo initial dargestellt werden soll.\n\t */\n\t@Prop() public _color?: Stringified<PropColor> = '#003c78';\n\n\t/**\n\t * Gibt an, ob die Logo-Beschriftung angezeigt werden soll.\n\t */\n\t@Prop({ reflect: true }) public _labeled?: boolean;\n\n\t@State() public state: States = {\n\t\t_animate: false,\n\t\t_color: {\n\t\t\tred: 0,\n\t\t\tgreen: 60,\n\t\t\tblue: 120,\n\t\t},\n\t\t_labeled: true,\n\t};\n\n\t@Watch('_animate')\n\tpublic validateAnimate(value?: boolean): void {\n\t\twatchBoolean(this, '_animate', value);\n\t}\n\n\tprivate handleColorChange: Generic.Element.NextStateHooksCallback = (nextValue: unknown, nextState: Map<string, unknown>): void => {\n\t\tif (typeof nextValue === 'string') {\n\t\t\tconst rgba = colorRgba(nextValue);\n\t\t\tnextState.set('_color', {\n\t\t\t\tred: rgba[0],\n\t\t\t\tgreen: rgba[1],\n\t\t\t\tblue: rgba[2],\n\t\t\t});\n\t\t} else {\n\t\t\tdevHint(`[KolKolibri] You used the complex color schema. For the KoliBri we use need the color as hex string.`);\n\t\t}\n\t};\n\n\t@Watch('_color')\n\tpublic validateColor(value?: Stringified<PropColor>): void {\n\t\tvalidateColor(this, value, {\n\t\t\tdefaultValue: '#003c78',\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.handleColorChange,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_labeled')\n\tpublic validateLabeled(value?: boolean): void {\n\t\twatchBoolean(this, '_labeled', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAnimate(this._animate);\n\t\tthis.validateColor(this._color);\n\t\tthis.validateLabeled(this._labeled);\n\t}\n\n\tpublic componentDidRender(): void {\n\t\tclearInterval(this.interval as NodeJS.Timer);\n\t\tif (this.state._animate) {\n\t\t\tthis.interval = setInterval(() => {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_color: {\n\t\t\t\t\t\tred: (this.state._color.red + 1) % max,\n\t\t\t\t\t\tgreen: (this.state._color.green + 2) % max,\n\t\t\t\t\t\tblue: (this.state._color.blue + 3) % max,\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t}, 50);\n\t\t}\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval as NodeJS.Timer);\n\t}\n}\n"],"mappings":";;;+VAAA,MAAMA,EAAkB,qvBC+BxB,MAAMC,EAAM,IACZ,SAASC,EAAgBC,GACxB,OAAQA,EAASC,KAAKC,GAAM,GAC7B,CACA,SAASC,EAAeH,GACvB,OAAOC,KAAKG,OAAQH,KAAKI,IAAIN,EAAgBC,IAAW,GAAK,EAAK,IACnE,C,MASaM,EAAU,M,yBAyDdC,KAAAC,kBAA4D,CAACC,EAAoBC,KACxF,UAAWD,IAAc,SAAU,CAClC,MAAME,EAAOC,EAAUH,GACvBC,EAAUG,IAAI,SAAU,CACvBC,IAAKH,EAAK,GACVI,MAAOJ,EAAK,GACZK,KAAML,EAAK,I,KAEN,CACNM,EAAQ,uG,uCA/BuC,U,mCAOjB,CAC/BC,SAAU,MACVC,OAAQ,CACPL,IAAK,EACLC,MAAO,GACPC,KAAM,KAEPI,SAAU,K,CAhDJC,SACN,MAAMC,EACLf,KAAKgB,MAAML,WAAa,KACrB,OAAOf,EAAeI,KAAKgB,MAAMJ,OAAOL,QAAQX,EAAeI,KAAKgB,MAAMJ,OAAOJ,UAAUZ,EAAeI,KAAKgB,MAAMJ,OAAOH,SAC5H,OAAOT,KAAKgB,MAAMJ,OAAOL,OAAOP,KAAKgB,MAAMJ,OAAOJ,SAASR,KAAKgB,MAAMJ,OAAOH,QACjF,OACCQ,EAACC,EAAI,KACJD,EAAA,OAAKE,KAAK,MAAK,aAAaC,EAAU,oBAAqBC,MAAM,6BAA6BC,QAAQ,cAAcC,KAAMR,GACzHE,EAAA,QAAMO,EAAE,kCACRP,EAAA,QAAMO,EAAE,kCACRP,EAAA,QAAMO,EAAE,8CACRP,EAAA,QAAMO,EAAE,6CACRP,EAAA,QAAMO,EAAE,oCACRP,EAAA,QAAMO,EAAE,sCACPxB,KAAKgB,MAAMH,WAAa,MACxBI,EAAA,QAAMQ,EAAE,MAAMC,EAAE,MAAMH,KAAMR,GAAS,Y,CAqCnCY,gBAAgBC,GACtBC,EAAa7B,KAAM,WAAY4B,E,CAiBzBE,cAAcF,GACpBE,EAAc9B,KAAM4B,EAAO,CAC1BG,aAAc,UACdC,MAAO,CACNC,YAAajC,KAAKC,oB,CAMdiC,gBAAgBN,GACtBC,EAAa7B,KAAM,WAAY4B,E,CAGzBO,oBACNnC,KAAK2B,gBAAgB3B,KAAKW,UAC1BX,KAAK8B,cAAc9B,KAAKY,QACxBZ,KAAKkC,gBAAgBlC,KAAKa,S,CAGpBuB,qBACNC,cAAcrC,KAAKsC,UACnB,GAAItC,KAAKgB,MAAML,SAAU,CACxBX,KAAKsC,SAAWC,aAAY,KAC3BvC,KAAKgB,MAAKwB,OAAAC,OAAAD,OAAAC,OAAA,GACNzC,KAAKgB,OAAK,CACbJ,OAAQ,CACPL,KAAMP,KAAKgB,MAAMJ,OAAOL,IAAM,GAAKhB,EACnCiB,OAAQR,KAAKgB,MAAMJ,OAAOJ,MAAQ,GAAKjB,EACvCkB,MAAOT,KAAKgB,MAAMJ,OAAOH,KAAO,GAAKlB,IAEtC,GACC,G,EAIEmD,uBACNL,cAAcrC,KAAKsC,S"}

package/dist/kolibri/kol-link-button.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as n,g as e}from"./index-50adf9a0.js";import{a as s}from"./i18n-b8589f01.js";import{a as o}from"./reuse-3a02afb9.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";const a=":host{--a11y-min-size:44px}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",r=class{constructor(i){t(this,i),this.catchRef=t=>{this.ref=t,o(this.host,this.ref)},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._download=!1,this._href=void 0,this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription=s("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal"}render(){return i(n,null,i("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_href:this._href,_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},i("slot",{name:"expert",slot:"expert"})))}get host(){return e(this)}};r.style={default:a};export{r as kol_link_button};
+import{r as t,h as i,H as n,g as e}from"./index-50adf9a0.js";import{a as s}from"./i18n-b8589f01.js";import{a as o}from"./reuse-3a02afb9.js";import"./index-0962b5a1.js";import"./index-f4596895.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";const a=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",r=class{constructor(i){t(this,i),this.catchRef=t=>{this.ref=t,o(this.host,this.ref)},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._download=!1,this._href=void 0,this._icon=void 0,this._iconOnly=!1,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription=s("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal"}render(){return i(n,null,i("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_href:this._href,_icon:this._icon,_iconOnly:this._iconOnly,_label:this._label,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},i("slot",{name:"expert",slot:"expert"})))}get host(){return e(this)}};r.style={default:a};export{r as kol_link_button};