@public-ui/components 1.7.8 → 1.7.9

package/dist/esm/kol-input-email.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{n as nonce}from"./dev.utils-9ec69d3c.js";import{a as watchBoolean,s as setState}from"./prop.validators-f5b6e0f3.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{p as propagateSubmitEventToForm}from"./controller-716a6075.js";import{g as getRenderStates}from"./controller-eea7503b.js";import{I as InputTextEmailController}from"./controller-90060305.js";import"./index-b580aa97.js";import"./a11y.tipps-60f2da31.js";import"./hide-label-11cd9377.js";import"./label-f48da7d6.js";import"./events-fa760b68.js";import"./tab-index-e623b9fd.js";import"./associated.controller-5d486714.js";import"./controller-be1ff69e.js";import"./controller-icon-69f75055.js";import"./icons-3d17091d.js";import"./suggestions-6d4ad9e2.js";const validateMultiple=(t,e)=>{watchBoolean(t,"_multiple",e)};class InputEmailController extends InputTextEmailController{constructor(t,e,i){super(t,e,i),this.component=t}validateMultiple(t){validateMultiple(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateMultiple(this.component._multiple)}}const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.error.hidden{display:none}",KolInputEmail=class{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,i=showExpertSlot(this.state._label);return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{email:!0,"hide-label":!!this.state._hideLabel},_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},h("span",{slot:"label"},i?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,multiple:this.state._multiple,id:this.state._id,list:e?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,spellcheck:"false",type:"email",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onKeyUp=t=>{setState(this,"_currentLength",t.target.value.length),"Enter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._maxLength=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._size=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[]},this.controller=new InputEmailController(this,"input-email",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)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}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 getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputEmail.style={default:defaultStyleCss};export{KolInputEmail as kol_input_email};
+import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{n as nonce}from"./dev.utils-0559a5fe.js";import{a as watchBoolean,s as setState}from"./prop.validators-b9732831.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{p as propagateSubmitEventToForm}from"./controller-21996017.js";import{g as getRenderStates}from"./controller-2ae84856.js";import{I as InputTextEmailController}from"./controller-4d7c0722.js";import"./index-24073a5e.js";import"./a11y.tipps-f6c45c86.js";import"./hide-label-3f5a18f0.js";import"./label-4225dcc0.js";import"./events-fa760b68.js";import"./tab-index-0f24625a.js";import"./associated.controller-e5f4e28f.js";import"./controller-dfcfc09a.js";import"./controller-icon-1add4713.js";import"./icons-d1b67f7d.js";import"./suggestions-aa86adad.js";const validateMultiple=(t,e)=>{watchBoolean(t,"_multiple",e)};class InputEmailController extends InputTextEmailController{constructor(t,e,i){super(t,e,i),this.component=t}validateMultiple(t){validateMultiple(this.component,t)}componentWillLoad(){super.componentWillLoad(),this.validateMultiple(this.component._multiple)}}const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.error.hidden{display:none}",KolInputEmail=class{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,i=showExpertSlot(this.state._label);return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{email:!0,"hide-label":!!this.state._hideLabel},_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},h("span",{slot:"label"},i?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,multiple:this.state._multiple,id:this.state._id,list:e?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,spellcheck:"false",type:"email",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onKeyUp=t=>{setState(this,"_currentLength",t.target.value.length),"Enter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._maxLength=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._size=void 0,this._smartButton=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[]},this.controller=new InputEmailController(this,"input-email",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)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}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 getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputEmail.style={default:defaultStyleCss};export{KolInputEmail as kol_input_email};

package/dist/esm/kol-input-file.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{n as nonce}from"./dev.utils-9ec69d3c.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events-fa760b68.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{g as getRenderStates}from"./controller-eea7503b.js";import{d as watchString,a as watchBoolean}from"./prop.validators-f5b6e0f3.js";import{I as InputIconController}from"./controller-icon-69f75055.js";import"./hide-label-11cd9377.js";import"./label-f48da7d6.js";import"./a11y.tipps-60f2da31.js";import"./tab-index-e623b9fd.js";import"./associated.controller-5d486714.js";import"./index-b580aa97.js";import"./icons-3d17091d.js";class InputFileController extends InputIconController{constructor(t,e,i){super(t,e,i),this.component=t}validateAccept(t){watchString(this.component,"_accept",t)}validateMultiple(t){watchBoolean(this.component,"_multiple",t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateValue(t){watchString(this.component,"_value",t),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}label input[type='file']::-webkit-file-upload-button{display:none}label input[type='file']:before{content:'Datei auswählen'}label input[multiple]:before{content:'Dateien auswählen'}div.input{cursor:pointer}.error.hidden{display:none}",KolInputFile=class{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,null,h("kol-input",{class:{file:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},h("span",{slot:"label"},e?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,title:"",accept:this.state._accept,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,spellcheck:"false",type:"file",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onChange=t=>{var e;if(this.ref instanceof HTMLInputElement&&"file"===this.ref.type){const i=this.ref.files;stopPropagation(t),tryToDispatchKoliBriEvent("change",this.host,i),this.controller.setFormAssociatedValue(i),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,i)}},this._accept=void 0,this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=!1,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${nonce()}`,_label:""},this.controller=new InputFileController(this,"input-file",this.host)}validateAccept(t){this.controller.validateAccept(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return getElement(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputFile.style={default:defaultStyleCss};export{KolInputFile as kol_input_file};
+import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{n as nonce}from"./dev.utils-0559a5fe.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events-fa760b68.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{g as getRenderStates}from"./controller-2ae84856.js";import{d as watchString,a as watchBoolean}from"./prop.validators-b9732831.js";import{I as InputIconController}from"./controller-icon-1add4713.js";import"./hide-label-3f5a18f0.js";import"./label-4225dcc0.js";import"./a11y.tipps-f6c45c86.js";import"./tab-index-0f24625a.js";import"./associated.controller-e5f4e28f.js";import"./index-24073a5e.js";import"./icons-d1b67f7d.js";class InputFileController extends InputIconController{constructor(t,e,i){super(t,e,i),this.component=t}validateAccept(t){watchString(this.component,"_accept",t)}validateMultiple(t){watchBoolean(this.component,"_multiple",t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateValue(t){watchString(this.component,"_value",t),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateAccept(this.component._accept),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}label input[type='file']::-webkit-file-upload-button{display:none}label input[type='file']:before{content:'Datei auswählen'}label input[multiple]:before{content:'Dateien auswählen'}div.input{cursor:pointer}.error.hidden{display:none}",KolInputFile=class{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,null,h("kol-input",{class:{file:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},h("span",{slot:"label"},e?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,title:"",accept:this.state._accept,accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,spellcheck:"false",type:"file",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onChange=t=>{var e;if(this.ref instanceof HTMLInputElement&&"file"===this.ref.type){const i=this.ref.files;stopPropagation(t),tryToDispatchKoliBriEvent("change",this.host,i),this.controller.setFormAssociatedValue(i),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,i)}},this._accept=void 0,this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=!1,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${nonce()}`,_label:""},this.controller=new InputFileController(this,"input-file",this.host)}validateAccept(t){this.controller.validateAccept(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return getElement(this)}static get watchers(){return{_accept:["validateAccept"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputFile.style={default:defaultStyleCss};export{KolInputFile as kol_input_file};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{n as nonce}from"./dev.utils-9ec69d3c.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{p as propagateSubmitEventToForm}from"./controller-716a6075.js";import{g as getRenderStates}from"./controller-eea7503b.js";import{v as validateSuggestions}from"./suggestions-6d4ad9e2.js";import{w as watchValidator,d as watchString,a as watchBoolean,e as watchNumber}from"./prop.validators-f5b6e0f3.js";import{I as InputIconController}from"./controller-icon-69f75055.js";import"./a11y.tipps-60f2da31.js";import"./hide-label-11cd9377.js";import"./label-f48da7d6.js";import"./events-fa760b68.js";import"./tab-index-e623b9fd.js";import"./associated.controller-5d486714.js";import"./index-b580aa97.js";import"./icons-3d17091d.js";class InputNumberController extends InputIconController{constructor(t,e,a){super(t,e,a),this.numberOrIsoDateRegex=/^\d+$|(^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])([T ][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?([+-][0-2]\d:[0-5]\d|Z)?)?$)|(^[0-2]\d:[0-5]\d(:[0-5]\d)?$)/,this.parseToString=t=>"string"==typeof t?t:"number"==typeof t?`${t}`:"object"==typeof t&&t instanceof Date?t.toISOString():"",this.validateIso8601=(t,e,a)=>{const i=parseFloat(e),o=i==e;return watchValidator(this.component,t,(t=>void 0===t||""===t||o&&"number"==typeof i||this.numberOrIsoDateRegex.test(t)),new Set(["number","Date","string{ISO-8601}"]),this.parseToString(e),{hooks:{afterPatch:t=>{"string"==typeof t&&a&&a(t)}}})},this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(){}validateSuggestions(t){validateSuggestions(this.component,t)}onChange(t){super.onChange(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){this.validateIso8601("_max",t)}validateMin(t){this.validateIso8601("_min",t)}validatePlaceholder(t){watchString(this.component,"_placeholder",t)}validateReadOnly(t){watchBoolean(this.component,"_readOnly",t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateStep(t){watchNumber(this.component,"_step",t)}validateType(t){watchValidator(this.component,"_type",(t=>"string"==typeof t&&("date"===t||"datetime-local"===t||"month"===t||"number"===t||"time"===t||"week"===t)),new Set(["String {date, datetime-local, month, number, time, week}"]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateSuggestions(this.component._suggestions||this.component._list),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.error.hidden{display:none}",KolInputNumber=class{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,a=showExpertSlot(this.state._label);return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{slot:"label"},a?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,placeholder:this.state._placeholder,step:this.state._step,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._smartButton=void 0,this._suggestions=void 0,this._step=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="number",this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[],_type:"number"},this.controller=new InputNumberController(this,"input-number",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateStep(t){this.controller.validateStep(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValueEx(t,(t=>{""===t&&this.ref&&(this.ref.value="")}))}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};KolInputNumber.style={default:defaultStyleCss};export{KolInputNumber as kol_input_number};
+import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{n as nonce}from"./dev.utils-0559a5fe.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{p as propagateSubmitEventToForm}from"./controller-21996017.js";import{g as getRenderStates}from"./controller-2ae84856.js";import{v as validateSuggestions}from"./suggestions-aa86adad.js";import{w as watchValidator,d as watchString,a as watchBoolean,e as watchNumber}from"./prop.validators-b9732831.js";import{I as InputIconController}from"./controller-icon-1add4713.js";import"./a11y.tipps-f6c45c86.js";import"./hide-label-3f5a18f0.js";import"./label-4225dcc0.js";import"./events-fa760b68.js";import"./tab-index-0f24625a.js";import"./associated.controller-e5f4e28f.js";import"./index-24073a5e.js";import"./icons-d1b67f7d.js";class InputNumberController extends InputIconController{constructor(t,e,a){super(t,e,a),this.numberOrIsoDateRegex=/^\d+$|(^\d{4}-([0]\d|1[0-2])-([0-2]\d|3[01])([T ][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?([+-][0-2]\d:[0-5]\d|Z)?)?$)|(^[0-2]\d:[0-5]\d(:[0-5]\d)?$)/,this.parseToString=t=>"string"==typeof t?t:"number"==typeof t?`${t}`:"object"==typeof t&&t instanceof Date?t.toISOString():"",this.validateIso8601=(t,e,a)=>{const i=parseFloat(e),o=i==e;return watchValidator(this.component,t,(t=>void 0===t||""===t||o&&"number"==typeof i||this.numberOrIsoDateRegex.test(t)),new Set(["number","Date","string{ISO-8601}"]),this.parseToString(e),{hooks:{afterPatch:t=>{"string"==typeof t&&a&&a(t)}}})},this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(){}validateSuggestions(t){validateSuggestions(this.component,t)}onChange(t){super.onChange(t),!!t.target.value!=!!this.component._value&&(this.component._value=t.target.value)}validateMax(t){this.validateIso8601("_max",t)}validateMin(t){this.validateIso8601("_min",t)}validatePlaceholder(t){watchString(this.component,"_placeholder",t)}validateReadOnly(t){watchBoolean(this.component,"_readOnly",t)}validateRequired(t){watchBoolean(this.component,"_required",t)}validateStep(t){watchNumber(this.component,"_step",t)}validateType(t){watchValidator(this.component,"_type",(t=>"string"==typeof t&&("date"===t||"datetime-local"===t||"month"===t||"number"===t||"time"===t||"week"===t)),new Set(["String {date, datetime-local, month, number, time, week}"]),t)}validateValue(t){this.validateValueEx(t)}validateValueEx(t,e){this.validateIso8601("_value",t,e),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateSuggestions(this.component._suggestions||this.component._list),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateStep(this.component._step),this.validateType(this.component._type),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.error.hidden{display:none}",KolInputNumber=class{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,a=showExpertSlot(this.state._label);return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{slot:"label"},a?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,placeholder:this.state._placeholder,step:this.state._step,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onKeyUp=t=>{"Enter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._smartButton=void 0,this._suggestions=void 0,this._step=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="number",this._value=void 0,this.state={_autoComplete:"off",_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[],_type:"number"},this.controller=new InputNumberController(this,"input-number",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateStep(t){this.controller.validateStep(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValueEx(t,(t=>{""===t&&this.ref&&(this.ref.value="")}))}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_smartButton:["validateSmartButton"],_suggestions:["validateSuggestions"],_step:["validateStep"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};KolInputNumber.style={default:defaultStyleCss};export{KolInputNumber as kol_input_number};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{d as devHint}from"./a11y.tipps-60f2da31.js";import{n as nonce}from"./dev.utils-9ec69d3c.js";import{s as setState}from"./prop.validators-f5b6e0f3.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{p as propagateSubmitEventToForm}from"./controller-716a6075.js";import{g as getRenderStates}from"./controller-eea7503b.js";import{I as InputPasswordController}from"./controller-be1ff69e.js";import"./index-b580aa97.js";import"./hide-label-11cd9377.js";import"./label-f48da7d6.js";import"./events-fa760b68.js";import"./tab-index-e623b9fd.js";import"./associated.controller-5d486714.js";import"./controller-icon-69f75055.js";import"./icons-3d17091d.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.error.hidden{display:none}",KolInputPassword=class{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{"hide-label":!!this.state._hideLabel,password:!0},_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},h("span",{slot:"label"},e?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,spellcheck:"false",type:"password",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onKeyUp=t=>{setState(this,"_currentLength",t.target.value.length),"Enter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._size=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:""},this.controller=new InputPasswordController(this,"input-password",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t),"on"===t&&devHint("[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)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}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)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputPassword.style={default:defaultStyleCss};export{KolInputPassword as kol_input_password};
+import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{d as devHint}from"./a11y.tipps-f6c45c86.js";import{n as nonce}from"./dev.utils-0559a5fe.js";import{s as setState}from"./prop.validators-b9732831.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{p as propagateSubmitEventToForm}from"./controller-21996017.js";import{g as getRenderStates}from"./controller-2ae84856.js";import{I as InputPasswordController}from"./controller-dfcfc09a.js";import"./index-24073a5e.js";import"./hide-label-3f5a18f0.js";import"./label-4225dcc0.js";import"./events-fa760b68.js";import"./tab-index-0f24625a.js";import"./associated.controller-e5f4e28f.js";import"./controller-icon-1add4713.js";import"./icons-d1b67f7d.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.error.hidden{display:none}",KolInputPassword=class{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{"hide-label":!!this.state._hideLabel,password:!0},_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},h("span",{slot:"label"},e?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,spellcheck:"false",type:"password",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})))))}constructor(t){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onKeyUp=t=>{setState(this,"_currentLength",t.target.value.length),"Enter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.controller.onFacade.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._size=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:""},this.controller=new InputPasswordController(this,"input-password",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t),"on"===t&&devHint("[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)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}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)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputPassword.style={default:defaultStyleCss};export{KolInputPassword as kol_input_password};

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

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

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{n as nonce}from"./dev.utils-9ec69d3c.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events-fa760b68.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{g as getRenderStates}from"./controller-eea7503b.js";import{a as InputRadioController}from"./controller-a672db29.js";import"./prop.validators-f5b6e0f3.js";import"./index-b580aa97.js";import"./a11y.tipps-60f2da31.js";import"./hide-label-11cd9377.js";import"./label-f48da7d6.js";import"./tab-index-e623b9fd.js";import"./associated.controller-5d486714.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}:host{--border-width:2px;--input-size:1.5em}kol-input .icons{display:none}label{cursor:pointer}input{appearance:none;border-width:var(--border-width);border-style:solid;border-radius:100%;cursor:pointer;display:flex;height:var(--input-size);margin:0;min-height:var(--input-size);min-width:var(--input-size);padding:0;width:var(--input-size)}input:before{border-radius:100%;content:'';margin:auto;height:calc(var(--input-size) / 2);width:calc(var(--input-size) / 2)}input:checked:before{background-color:#000}fieldset{display:flex}fieldset.vertical{flex-direction:column}fieldset .input-slot{align-items:center;display:flex}.required label>span::after{content:''}.error.hidden{display:none}",KolInputRadio=class{render(){const{ariaDescribedBy:t,hasError:e}=getRenderStates(this.state),i=showExpertSlot(this.state._label);return h(Host,null,h("fieldset",{class:{disabled:!0===this.state._disabled,error:!0===e,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},h("legend",{class:"block w-full mb-1 leading-normal"},h("span",null,h("span",{slot:"label"},i?h("slot",null):this.state._label))),this.state._options.map(((e,i)=>{const a=`${this.state._id}-${i}`,l=`radio-${i}`;return h("kol-input",{class:{radio:!0,disabled:Boolean(this.state._disabled||e.disabled)},key:a,_disabled:this.state._disabled||e.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:a,_label:e.label,_renderNoLabel:!0,_required:this.state._required,_slotName:l,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("div",{slot:l,class:"radio-input-wrapper"},h("input",Object.assign({ref:this.state._value===e.value?this.catchRef:void 0,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof e.label?e.label:void 0,type:"radio",id:a,checked:this.state._value===e.value,name:this.state._name||this.state._id,disabled:this.state._disabled||e.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${i}`},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})),h("label",{class:"radio-label",htmlFor:`${a}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},h("span",null,h("span",null,e.label)))))})),e&&h("kol-alert",{id:`${this.state._id}-error`,_alert:!0,_type:"error",class:"error"+(this._hideError?" hidden":"")},this.state._error)))}constructor(t){registerInstance(this,t),this.catchRef=t=>{propagateFocus(this.host,t)},this.onChange=t=>{var e;if(t.target instanceof HTMLInputElement){const i=this.controller.getOptionByKey(t.target.value);void 0!==i&&(stopPropagation(t),tryToDispatchKoliBriEvent("change",this.host,i.value),this.controller.setFormAssociatedValue(i.value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,i.value),this.controller.setValue(t,i.value))}},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${nonce()}`,_label:"",_options:[],_orientation:"vertical"},this.controller=new InputRadioController(this,"input-radio",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHideError(t){this.controller.validateHideError(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateOptions(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateOrientation(t){this.controller.validateOrientation(t)}validateRequired(t){this.controller.validateRequired(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputRadio.style={default:defaultStyleCss};export{KolInputRadio as kol_input_radio};
+import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{n as nonce}from"./dev.utils-0559a5fe.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events-fa760b68.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{g as getRenderStates}from"./controller-2ae84856.js";import{a as InputRadioController}from"./controller-1b6f1e7d.js";import"./prop.validators-b9732831.js";import"./index-24073a5e.js";import"./a11y.tipps-f6c45c86.js";import"./hide-label-3f5a18f0.js";import"./label-4225dcc0.js";import"./tab-index-0f24625a.js";import"./associated.controller-e5f4e28f.js";const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}:host{--border-width:2px;--input-size:1.5em}kol-input .icons{display:none}label{cursor:pointer}input{appearance:none;border-width:var(--border-width);border-style:solid;border-radius:100%;cursor:pointer;display:flex;height:var(--input-size);margin:0;min-height:var(--input-size);min-width:var(--input-size);padding:0;width:var(--input-size)}input:before{border-radius:100%;content:'';margin:auto;height:calc(var(--input-size) / 2);width:calc(var(--input-size) / 2)}input:checked:before{background-color:#000}@media (forced-colors: active){input:checked:before{background:highlight !important;}}fieldset{display:flex}fieldset.vertical{flex-direction:column}fieldset .input-slot{align-items:center;display:flex}.required label>span::after{content:''}.error.hidden{display:none}",KolInputRadio=class{render(){const{ariaDescribedBy:t,hasError:e}=getRenderStates(this.state),i=showExpertSlot(this.state._label);return h(Host,null,h("fieldset",{class:{disabled:!0===this.state._disabled,error:!0===e,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},h("legend",{class:"block w-full mb-1 leading-normal"},h("span",null,h("span",{slot:"label"},i?h("slot",null):this.state._label))),this.state._options.map(((e,i)=>{const a=`${this.state._id}-${i}`,l=`radio-${i}`;return h("kol-input",{class:{radio:!0,disabled:Boolean(this.state._disabled||e.disabled)},key:a,_disabled:this.state._disabled||e.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:a,_label:e.label,_renderNoLabel:!0,_required:this.state._required,_slotName:l,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("div",{slot:l,class:"radio-input-wrapper"},h("input",Object.assign({ref:this.state._value===e.value?this.catchRef:void 0,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof e.label?e.label:void 0,type:"radio",id:a,checked:this.state._value===e.value,name:this.state._name||this.state._id,disabled:this.state._disabled||e.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${i}`},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})),h("label",{class:"radio-label",htmlFor:`${a}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},h("span",null,h("span",null,e.label)))))})),e&&h("kol-alert",{id:`${this.state._id}-error`,_alert:!0,_type:"error",class:"error"+(this._hideError?" hidden":"")},this.state._error)))}constructor(t){registerInstance(this,t),this.catchRef=t=>{propagateFocus(this.host,t)},this.onChange=t=>{var e;if(t.target instanceof HTMLInputElement){const i=this.controller.getOptionByKey(t.target.value);void 0!==i&&(stopPropagation(t),tryToDispatchKoliBriEvent("change",this.host,i.value),this.controller.setFormAssociatedValue(i.value),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&this.state._on.onChange(t,i.value),this.controller.setValue(t,i.value))}},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${nonce()}`,_label:"",_options:[],_orientation:"vertical"},this.controller=new InputRadioController(this,"input-radio",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHideError(t){this.controller.validateHideError(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateOptions(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateOrientation(t){this.controller.validateOrientation(t)}validateRequired(t){this.controller.validateRequired(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputRadio.style={default:defaultStyleCss};export{KolInputRadio as kol_input_radio};

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

@@ -1 +1 @@
-{"file":"kol-input-radio.entry.js","mappings":"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","names":[],"sources":["src/components/input-radio/style.css?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/component.tsx"],"sourcesContent":["@import url(../input.css);\n:host {\n\t--border-width: 2px;\n\t--input-size: 1.5em;\n}\nkol-input .icons {\n\tdisplay: none;\n}\nlabel {\n\tcursor: pointer;\n}\ninput {\n\tappearance: none;\n\tborder-width: var(--border-width);\n\tborder-style: solid;\n\tborder-radius: 100%;\n\tcursor: pointer;\n\tdisplay: flex;\n\theight: var(--input-size);\n\tmargin: 0;\n\tmin-height: var(--input-size);\n\tmin-width: var(--input-size);\n\tpadding: 0;\n\twidth: var(--input-size);\n}\ninput:before {\n\tborder-radius: 100%;\n\tcontent: '';\n\tmargin: auto;\n\theight: calc(var(--input-size) / 2);\n\twidth: calc(var(--input-size) / 2);\n}\ninput:checked:before {\n\tbackground-color: #000;\n}\nfieldset {\n\tdisplay: flex;\n}\nfieldset.vertical {\n\tflex-direction: column;\n}\nfieldset .input-slot {\n\talign-items: center;\n\tdisplay: flex;\n}\n/* required star is on fieldset legend */\n.required label > span::after {\n\tcontent: '';\n}\n.error.hidden {\n\tdisplay: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault, Option } from '../../types/input/types';\nimport { Orientation } from '../../types/orientation';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { OptionsPropType } from '../../types/props/options';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRadioController } from './controller';\nimport { API, States } from './types';\n\n/**\n * @slot - Die Legende/Überschrift der Radiobuttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements API {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\tconst slotName = `radio-${index}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<kol-input\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\tradio: true,\n\t\t\t\t\t\t\t\t\tdisabled: Boolean(this.state._disabled || option.disabled),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_label={option.label as string}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_slotName={slotName}\n\t\t\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot={slotName} class=\"radio-input-wrapper\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined}\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === option.value}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name || this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t\tonClick={undefined} // onClick is not needed since onChange already triggers the correct event\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\tclass=\"radio-label\"\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</kol-input>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && (\n\t\t\t\t\t\t<kol-alert id={`${this.state._id}-error`} _alert={true} _type=\"error\" class={`error${this._hideError ? ' hidden' : ''}`}>\n\t\t\t\t\t\t\t{this.state._error}\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t)}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Optionen für das Eingabefeld an.\n\t * @deprecated Use _options.\n\t */\n\t@Prop() public _list?: Stringified<Option<W3CInputValue>[]>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options?: OptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'input-radio', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\t// Event handling\n\t\t\t\tstopPropagation(event);\n\t\t\t\ttryToDispatchKoliBriEvent('change', this.host, option.value);\n\n\t\t\t\t// Static form handling\n\t\t\t\tthis.controller.setFormAssociatedValue(option.value);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\t\t\tthis.state._on.onChange(event, option.value);\n\t\t\t\t}\n\n\t\t\t\t// TODO: Prüfen, was setValue noch genau macht, wir syncValue ja jetzt.\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"version":3}
+{"file":"kol-input-radio.entry.js","mappings":"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","names":[],"sources":["src/components/input-radio/style.css?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/component.tsx"],"sourcesContent":["@import url(../input.css);\n:host {\n\t--border-width: 2px;\n\t--input-size: 1.5em;\n}\nkol-input .icons {\n\tdisplay: none;\n}\nlabel {\n\tcursor: pointer;\n}\ninput {\n\tappearance: none;\n\tborder-width: var(--border-width);\n\tborder-style: solid;\n\tborder-radius: 100%;\n\tcursor: pointer;\n\tdisplay: flex;\n\theight: var(--input-size);\n\tmargin: 0;\n\tmin-height: var(--input-size);\n\tmin-width: var(--input-size);\n\tpadding: 0;\n\twidth: var(--input-size);\n}\ninput:before {\n\tborder-radius: 100%;\n\tcontent: '';\n\tmargin: auto;\n\theight: calc(var(--input-size) / 2);\n\twidth: calc(var(--input-size) / 2);\n}\ninput:checked:before {\n\tbackground-color: #000;\n}\n@media (forced-colors: active) {\n\tinput:checked:before {\n\t\tbackground: highlight !important; /* Give it a visible background in forced colors mode */\n\t}\n}\nfieldset {\n\tdisplay: flex;\n}\nfieldset.vertical {\n\tflex-direction: column;\n}\nfieldset .input-slot {\n\talign-items: center;\n\tdisplay: flex;\n}\n/* required star is on fieldset legend */\n.required label > span::after {\n\tcontent: '';\n}\n.error.hidden {\n\tdisplay: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnDefault, Option } from '../../types/input/types';\nimport { Orientation } from '../../types/orientation';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { OptionsPropType } from '../../types/props/options';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { StencilUnknown } from '../../types/unknown';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { InputRadioController } from './controller';\nimport { API, States } from './types';\n\n/**\n * @slot - Die Legende/Überschrift der Radiobuttons.\n */\n@Component({\n\ttag: 'kol-input-radio',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRadio implements API {\n\t@Element() private readonly host?: HTMLKolInputRadioElement;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy, hasError } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<fieldset\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\terror: hasError === true,\n\t\t\t\t\t\trequired: this.state._required === true,\n\t\t\t\t\t\t'hidden-error': this._hideError === true,\n\t\t\t\t\t\t[this.state._orientation]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<legend class=\"block w-full mb-1 leading-normal\">\n\t\t\t\t\t\t{/* INFO: span is needed for css styling :after content like a star (*) or optional text ! */}\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{/* INFO: label comes with any html tag or as plain text! */}\n\t\t\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</legend>\n\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tconst customId = `${this.state._id}-${index}`;\n\t\t\t\t\t\tconst slotName = `radio-${index}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<kol-input\n\t\t\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t\t\tradio: true,\n\t\t\t\t\t\t\t\t\tdisabled: Boolean(this.state._disabled || option.disabled),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tkey={customId}\n\t\t\t\t\t\t\t\t_disabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t\t\t_id={customId}\n\t\t\t\t\t\t\t\t_label={option.label as string}\n\t\t\t\t\t\t\t\t_renderNoLabel={true}\n\t\t\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t\t\t_slotName={slotName}\n\t\t\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div slot={slotName} class=\"radio-input-wrapper\">\n\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\tref={this.state._value === option.value ? this.catchRef : undefined}\n\t\t\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey} // by radio?!\n\t\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof option.label === 'string' ? option.label : undefined}\n\t\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\t\tid={customId}\n\t\t\t\t\t\t\t\t\t\tchecked={this.state._value === option.value}\n\t\t\t\t\t\t\t\t\t\tname={this.state._name || this.state._id}\n\t\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled || option.disabled}\n\t\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\t\ttabIndex={this.state._tabIndex}\n\t\t\t\t\t\t\t\t\t\tvalue={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t\t\t\tonClick={undefined} // onClick is not needed since onChange already triggers the correct event\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\t\t\tclass=\"radio-label\"\n\t\t\t\t\t\t\t\t\t\thtmlFor={`${customId}`}\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tmargin: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tpadding: this.state._hideLabel ? '0' : undefined,\n\t\t\t\t\t\t\t\t\t\t\tvisibility: this.state._hideLabel ? 'hidden' : undefined,\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</kol-input>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t\t{hasError && (\n\t\t\t\t\t\t<kol-alert id={`${this.state._id}-error`} _alert={true} _type=\"error\" class={`error${this._hideError ? ' hidden' : ''}`}>\n\t\t\t\t\t\t\t{this.state._error}\n\t\t\t\t\t\t</kol-alert>\n\t\t\t\t\t)}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Optionen für das Eingabefeld an.\n\t * @deprecated Use _options.\n\t */\n\t@Prop() public _list?: Stringified<Option<W3CInputValue>[]>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options?: OptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'input-radio', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\t// Event handling\n\t\t\t\tstopPropagation(event);\n\t\t\t\ttryToDispatchKoliBriEvent('change', this.host, option.value);\n\n\t\t\t\t// Static form handling\n\t\t\t\tthis.controller.setFormAssociatedValue(option.value);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\t\t\tthis.state._on.onChange(event, option.value);\n\t\t\t\t}\n\n\t\t\t\t// TODO: Prüfen, was setValue noch genau macht, wir syncValue ja jetzt.\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{n as nonce}from"./dev.utils-9ec69d3c.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{p as propagateSubmitEventToForm}from"./controller-716a6075.js";import{g as getRenderStates}from"./controller-eea7503b.js";import{v as validateSuggestions}from"./suggestions-6d4ad9e2.js";import{w as watchValidator,e as watchNumber}from"./prop.validators-f5b6e0f3.js";import{I as InputIconController}from"./controller-icon-69f75055.js";import"./a11y.tipps-60f2da31.js";import"./hide-label-11cd9377.js";import"./label-f48da7d6.js";import"./events-fa760b68.js";import"./tab-index-e623b9fd.js";import"./associated.controller-5d486714.js";import"./index-b580aa97.js";import"./icons-3d17091d.js";class InputRangeController extends InputIconController{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){Array.isArray(t)&&this.validateSuggestions(t.map((t=>t.value)))}validateMax(t){watchNumber(this.component,"_max",t)}validateMin(t){watchNumber(this.component,"_min",t)}validateStep(t){watchNumber(this.component,"_step",t)}validateSuggestions(t){validateSuggestions(this.component,t)}validateValue(t){watchNumber(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.inputs-wrapper{align-items:center;display:flex;flex-direction:row}input[type='number']{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size);width:var(--kolibri-input-range--input-number--width)}input[type='range']{appearance:none;background-color:#d3d3d3;border:1px solid #000;display:inline-block;flex-grow:1;height:0.5rem;line-height:1.5em;padding:0;margin:0;width:0;}input[type='range']::-webkit-slider-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-webkit-appearance:none}input[type='range']::-moz-range-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-moz-appearance:none}.error.hidden{display:none}@media (prefers-contrast: more){::-webkit-slider-thumb{outline:1px solid currentColor}}",KolInputRange=class{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,i=showExpertSlot(this.state._label);return h(Host,null,h("kol-input",{class:{range:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{slot:"label"},i?h("slot",null):this.state._label),h("div",{slot:"input"},h("div",{class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`${this.state._max}`.length+.5+"em"}},h("input",Object.assign({title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})),h("input",Object.assign({ref:this.catchInputNumberRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp,onChange:this.onChange}))),e&&[h("datalist",{id:`${this.state._id}-list`},this.state._suggestions.map((t=>h("option",{value:t}))))])))}constructor(t){registerInstance(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.ref=t,propagateFocus(this.host,t),!this._value&&(null===(e=this.ref)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.ref.value)))},this.onChange=t=>{var e,i;let a=parseFloat(t.target.value);this.state._max&&a>this.state._max&&(a=this.state._max),this.state._min&&a<this.state._min&&(a=this.state._min),this.validateValue(a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(i=this.state._on)||void 0===i||i.onChange(t,a))},this.onKeyUp=t=>{"Enter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._step=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[]},this.controller=new InputRangeController(this,"input-range",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateStep(t){this.controller.validateStep(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputRange.style={default:defaultStyleCss};export{KolInputRange as kol_input_range};
+import{h,H as Host,r as registerInstance,g as getElement}from"./index-5dfe6d77.js";import{n as nonce}from"./dev.utils-0559a5fe.js";import{a as propagateFocus,s as showExpertSlot}from"./reuse-d79ab469.js";import{p as propagateSubmitEventToForm}from"./controller-21996017.js";import{g as getRenderStates}from"./controller-2ae84856.js";import{v as validateSuggestions}from"./suggestions-aa86adad.js";import{w as watchValidator,e as watchNumber}from"./prop.validators-b9732831.js";import{I as InputIconController}from"./controller-icon-1add4713.js";import"./a11y.tipps-f6c45c86.js";import"./hide-label-3f5a18f0.js";import"./label-4225dcc0.js";import"./events-fa760b68.js";import"./tab-index-0f24625a.js";import"./associated.controller-e5f4e28f.js";import"./index-24073a5e.js";import"./icons-d1b67f7d.js";class InputRangeController extends InputIconController{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){watchValidator(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){Array.isArray(t)&&this.validateSuggestions(t.map((t=>t.value)))}validateMax(t){watchNumber(this.component,"_max",t)}validateMin(t){watchNumber(this.component,"_min",t)}validateStep(t){watchNumber(this.component,"_step",t)}validateSuggestions(t){validateSuggestions(this.component,t)}validateValue(t){watchNumber(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.inputs-wrapper{align-items:center;display:flex;flex-direction:row}input[type='number']{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size);width:var(--kolibri-input-range--input-number--width)}input[type='range']{appearance:none;background-color:#d3d3d3;border:1px solid #000;display:inline-block;flex-grow:1;height:0.5rem;line-height:1.5em;padding:0;margin:0;width:0;}input[type='range']::-webkit-slider-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-webkit-appearance:none}input[type='range']::-moz-range-thumb{box-sizing:border-box;background-color:#000;height:20px;width:20px;border-radius:20px;cursor:pointer;-moz-appearance:none}.error.hidden{display:none}@media (prefers-contrast: more){::-webkit-slider-thumb{outline:1px solid currentColor}}",KolInputRange=class{componentDidLoad(){var t;!this._value&&(null===(t=this.refInputRange)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputRange.value))}render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,i=showExpertSlot(this.state._label);return h(Host,null,h("kol-input",{class:{range:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{slot:"label"},i?h("slot",null):this.state._label),h("div",{slot:"input"},h("div",{class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`${this.state._max}`.length+.5+"em"}},h("input",Object.assign({ref:this.catchInputRangeRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-hidden":"true",autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})),h("input",Object.assign({ref:this.catchInputNumberRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp,onChange:this.onChange}))),e&&[h("datalist",{id:`${this.state._id}-list`},this.state._suggestions.map((t=>h("option",{value:t}))))])))}constructor(t){registerInstance(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.refInputNumber=t,propagateFocus(this.host,t),!this._value&&(null===(e=this.refInputNumber)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=t=>{t&&(this.refInputRange=t)},this.onChange=t=>{var e,i;let a=parseFloat(t.target.value);this.state._max&&a>this.state._max&&(a=this.state._max),this.state._min&&a<this.state._min&&(a=this.state._min),this.validateValue(a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(i=this.state._on)||void 0===i||i.onChange(t,a))},this.onKeyUp=t=>{"Enter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.refInputRange}):this.onChange(t)},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._max=void 0,this._min=void 0,this._name=void 0,this._on=void 0,this._step=void 0,this._suggestions=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_autoComplete:"off",_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[]},this.controller=new InputRangeController(this,"input-range",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMax(t){this.controller.validateMax(t)}validateMin(t){this.controller.validateMin(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateStep(t){this.controller.validateStep(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad()}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolInputRange.style={default:defaultStyleCss};export{KolInputRange as kol_input_range};

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

@@ -1 +1 @@
-{"file":"kol-input-range.entry.js","mappings":"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","names":[],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @deprecated use _suggestions\n\t */\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tif (Array.isArray(value)) {\n\t\t\tthis.validateSuggestions(value.map((option) => option.value));\n\t\t}\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n.inputs-wrapper {\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n}\ninput[type='number'] {\n\tmin-height: var(--a11y-min-size);\n\tmin-width: var(--a11y-min-size);\n\twidth: var(--kolibri-input-range--input-number--width);\n}\n/*\n * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n */\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 1px solid #000;\n\tdisplay: inline-block;\n\tflex-grow: 1;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n\twidth: 0; /* Design-Hack - related with flex-grow */\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n.error.hidden {\n\tdisplay: none;\n}\n\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n\t::-webkit-slider-thumb {\n\t\toutline: 1px solid currentColor;\n\t}\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, InputTypeOnOff, Option } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SuggestionsPropType } from '../../types/props/suggestions';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { API, States } from './types';\n\n/**\n * @slot - Die Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements API {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate ref?: HTMLInputElement;\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.ref = element;\n\t\t\tpropagateFocus(this.host, element);\n\t\t\tif (!this._value && this.ref?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.ref.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tlet value = parseFloat((event.target as HTMLInputElement).value);\n\t\tif (this.state._max && value > this.state._max) value = this.state._max;\n\t\tif (this.state._min && value < this.state._min) value = this.state._min;\n\t\tthis.validateValue(value);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on?.onChange(event, value);\n\t\t}\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\trange: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"inputs-wrapper\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tref={this.catchInputNumberRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-number` : undefined}\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{hasSuggestions && [\n\t\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t\t{this.state._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t\t//   {this.state._suggestions.map((option: InputOption<number>) => (\n\t\t\t\t\t\t\t//     <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t\t//   ))}\n\t\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t\t]}\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Vorschlagswörter an.\n\t * @deprecated Use _suggestions.\n\t */\n\t@Prop() public _list?: Stringified<Option<W3CInputValue>[]>;\n\n\t/**\n\t * Defines the largest possible input value.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'input-range', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"version":3}
+{"file":"kol-input-range.entry.js","mappings":"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","names":[],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.css?tag=kol-input-range&mode=default&encapsulation=shadow","src/components/input-range/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { Stringified } from '../../types/common';\nimport { InputTypeOnOff, Option } from '../../types/input/types';\nimport { SuggestionsPropType, validateSuggestions } from '../../types/props/suggestions';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { Props, Watches } from './types';\n\nexport class InputRangeController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_autoComplete',\n\t\t\t(value): boolean => typeof value === 'string' && (value === 'on' || value === 'off'),\n\t\t\tnew Set(['on | off']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @deprecated use _suggestions\n\t */\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tif (Array.isArray(value)) {\n\t\t\tthis.validateSuggestions(value.map((option) => option.value));\n\t\t}\n\t}\n\n\tpublic validateMax(value?: number): void {\n\t\twatchNumber(this.component, '_max', value);\n\t}\n\n\tpublic validateMin(value?: number): void {\n\t\twatchNumber(this.component, '_min', value);\n\t}\n\n\tpublic validateStep(value?: number): void {\n\t\twatchNumber(this.component, '_step', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: number): void {\n\t\twatchNumber(this.component, '_value', value);\n\t\tthis.setFormAssociatedValue(this.component.state._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateAutoComplete(this.component._autoComplete);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMax(this.component._max);\n\t\tthis.validateMin(this.component._min);\n\t\tthis.validateStep(this.component._step);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n.inputs-wrapper {\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n}\ninput[type='number'] {\n\tmin-height: var(--a11y-min-size);\n\tmin-width: var(--a11y-min-size);\n\twidth: var(--kolibri-input-range--input-number--width);\n}\n/*\n * For Chrome and Firefox is it needed to use redundant style definitions with separate selectors. The reason is unknown.\n */\ninput[type='range'] {\n\tappearance: none;\n\tbackground-color: #d3d3d3;\n\tborder: 1px solid #000;\n\tdisplay: inline-block;\n\tflex-grow: 1;\n\theight: 0.5rem;\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n\twidth: 0; /* Design-Hack - related with flex-grow */\n}\ninput[type='range']::-webkit-slider-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-webkit-appearance: none;\n}\ninput[type='range']::-moz-range-thumb {\n\tbox-sizing: border-box;\n\tbackground-color: #000;\n\theight: 20px;\n\twidth: 20px;\n\tborder-radius: 20px;\n\tcursor: pointer;\n\t-moz-appearance: none;\n}\n.error.hidden {\n\tdisplay: none;\n}\n\n/* Fix missing outline in Chromium-based browsers on Windows in high contrast mode. */\n@media (prefers-contrast: more) {\n\t::-webkit-slider-thumb {\n\t\toutline: 1px solid currentColor;\n\t}\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, InputTypeOnOff, Option } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { SuggestionsPropType } from '../../types/props/suggestions';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputRangeController } from './controller';\nimport { API, States } from './types';\n\n/**\n * @slot - Die Beschriftung des Eingabeelements.\n */\n@Component({\n\ttag: 'kol-input-range',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements API {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate refInputNumber?: HTMLInputElement;\n\tprivate refInputRange?: HTMLInputElement;\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputNumber = element;\n\t\t\tpropagateFocus(this.host, element);\n\t\t\tif (!this._value && this.refInputNumber?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.refInputNumber.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly catchInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tlet value = parseFloat((event.target as HTMLInputElement).value);\n\t\tif (this.state._max && value > this.state._max) value = this.state._max;\n\t\tif (this.state._min && value < this.state._min) value = this.state._min;\n\t\tthis.validateValue(value);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on?.onChange(event, value);\n\t\t}\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.refInputRange,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\trange: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"inputs-wrapper\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tref={this.catchInputRangeRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tref={this.catchInputNumberRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-number` : undefined}\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{hasSuggestions && [\n\t\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t\t{this.state._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t\t//   {this.state._suggestions.map((option: InputOption<number>) => (\n\t\t\t\t\t\t\t//     <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t\t//   ))}\n\t\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t\t]}\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Vorschlagswörter an.\n\t * @deprecated Use _suggestions.\n\t */\n\t@Prop() public _list?: Stringified<Option<W3CInputValue>[]>;\n\n\t/**\n\t * Defines the largest possible input value.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'input-range', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"version":3}