@public-ui/components 1.7.14 → 1.7.16

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,H as i,r as t,g as a}from"./index-cf7b0813.js";import{n as s}from"./dev.utils-94066c64.js";import{s as n,t as d}from"./events-fa760b68.js";import{s as r,a as l}from"./reuse-d79ab469.js";import{F as o}from"./form-field-msg-4920e946.js";import{g as h}from"./controller-64ffbb0d.js";import{a as p}from"./controller-032ce39e.js";import"./prop.validators-8b0fa207.js";import"./index-c88c7ecf.js";import"./a11y.tipps-b91e3a85.js";import"./hide-label-4daf9592.js";import"./label-61bbacc7.js";import"./tab-index-d41a9f4c.js";import"./associated.controller-99862e5b.js";const c=':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}.hidden{display:none;visibility:hidden}.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:""}',u=c,b=class{render(){const{ariaDescribedBy:t,hasError:a}=h(this.state),l=r(this.state._label);return e(i,{key:"6f035ee29d0b195a1126daa56ce30201fc574853"},e("fieldset",{key:"85bf6561e3e7ff2b4e86a8e68150f772135405fa",class:{disabled:!0===this.state._disabled,error:!0===a,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},e("legend",{key:"5938136e609d6a79e0c5ce5ec6947b84538d1160",class:"block w-full mb-1 leading-normal"},e("span",{key:"dbdb7a487e30772853d6a1cd3e706157e3badd7a"},e("span",{key:"37b9172988a368b9fbef4130e70e2b251d7f699c",slot:"label"},l?e("slot",null):this.state._label))),this.state._options.map(((i,a)=>{const l=`${this.state._id}-${a}`,s=`radio-${a}`;return e("kol-input",{class:{radio:!0,disabled:Boolean(this.state._disabled||i.disabled)},key:l,_disabled:this.state._disabled||i.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:l,_label:i.label,_renderNoLabel:!0,_required:this.state._required,_slotName:s,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},e("div",{slot:s,class:"radio-input-wrapper"},e("input",Object.assign({ref:this.state._value===i.value?this.catchRef:void 0,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof i.label?i.label:void 0,type:"radio",id:l,checked:this.state._value===i.value,name:this.state._name||this.state._id,disabled:this.state._disabled||i.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${a}`},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})),e("label",{class:"radio-label",htmlFor:`${l}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},e("span",null,e("span",null,i.label)))))})),a&&e(o,{_alert:this.state._alert,_hideError:this.state._hideError,_error:this.state._error,_id:this.state._id})))}constructor(e){t(this,e),this.catchRef=e=>{l(this.host,e)},this.onChange=e=>{var t;if(e.target instanceof HTMLInputElement){const i=this.controller.getOptionByKey(e.target.value);void 0!==i&&(n(e),d("change",this.host,i.value),this.controller.setFormAssociatedValue(i.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,i.value),this.controller.setValue(e,i.value))}},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${s()}`,_label:"…",_options:[],_orientation:"vertical"},this.controller=new p(this,"radio",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHideError(e){this.controller.validateHideError(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateList(e){this.validateOptions(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateOrientation(e){this.controller.validateOrientation(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:u};export{b as kol_input_radio};
+import{h as e,H as i,r as t,g as a}from"./index-c1d028ba.js";import{n as s}from"./dev.utils-8d5cefe9.js";import{s as n,t as r}from"./events-fa760b68.js";import{s as d,a as l}from"./reuse-d79ab469.js";import{F as o}from"./form-field-msg-d2bbb1a6.js";import{g as h}from"./controller-b6a485f1.js";import{a as p}from"./controller-9b0595a1.js";import"./prop.validators-8c5a4551.js";import"./index-117bd1aa.js";import"./a11y.tipps-1cea6b3d.js";import"./hide-label-d39d4679.js";import"./label-9ebba50f.js";import"./tab-index-42e01244.js";import"./associated.controller-c4487875.js";const u=':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}.hidden{display:none;visibility:hidden}.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:calc(16rem / var(--kolibri-root-font-size, 16));width:100%}input[type=file]{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 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:""}',c=u,b=class{render(){const{ariaDescribedBy:t,hasError:a}=h(this.state),l=d(this.state._label);return e(i,{key:"bb29b08fb1d37fdfac5c4615e88f306a4a8ae17a",class:"kol-input-radio"},e("fieldset",{key:"9880ae6c154bbfbe8189eb68a016842f0c969d99",class:{disabled:!0===this.state._disabled,error:!0===a,required:!0===this.state._required,"hidden-error":!0===this._hideError,[this.state._orientation]:!0}},e("legend",{key:"6382d03099797e67e159472737218b8e76a3b119",class:"block w-full mb-1 leading-normal"},e("span",{key:"dcef1a328e58ae9a67f0a5684146ecf4615465a9"},e("span",{key:"eb7461aa835f7f13d1ab144bdf80e3aa7ac14fa0",slot:"label"},l?e("slot",null):this.state._label))),this.state._options.map(((i,a)=>{const l=`${this.state._id}-${a}`,o=`radio-${a}`;return e("kol-input",{class:{radio:!0,disabled:Boolean(this.state._disabled||i.disabled)},key:l,_disabled:this.state._disabled||i.disabled,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:l,_label:i.label,_renderNoLabel:!0,_required:this.state._required,_slotName:o,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},e("div",{slot:o,class:"radio-input-wrapper"},e("input",Object.assign({ref:this.state._value===i.value?this.catchRef:void 0,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof i.label?i.label:void 0,type:"radio",id:l,checked:this.state._value===i.value,name:this.state._name||this.state._id,disabled:this.state._disabled||i.disabled,required:this.state._required,tabIndex:this.state._tabIndex,value:`-${a}`},this.controller.onFacade,{onChange:this.onChange,onClick:void 0})),e("label",{class:"radio-label",htmlFor:`${l}`,style:{height:this.state._hideLabel?"0":void 0,margin:this.state._hideLabel?"0":void 0,padding:this.state._hideLabel?"0":void 0,visibility:this.state._hideLabel?"hidden":void 0}},e("span",null,e("span",null,i.label)))))})),a&&e(o,{_alert:this.state._alert,_hideError:this.state._hideError,_error:this.state._error,_id:this.state._id})))}constructor(e){t(this,e),this.catchRef=e=>{l(this.host,e)},this.onChange=e=>{var t;if(e.target instanceof HTMLInputElement){const i=this.controller.getOptionByKey(e.target.value);void 0!==i&&(n(e),r("change",this.host,i.value),this.controller.setFormAssociatedValue(i.value),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)&&this.state._on.onChange(e,i.value),this.controller.setValue(e,i.value))}},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._list=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._orientation="vertical",this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${s()}`,_label:"…",_options:[],_orientation:"vertical"},this.controller=new p(this,"radio",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHideError(e){this.controller.validateHideError(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateList(e){this.validateOptions(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateOrientation(e){this.controller.validateOrientation(e)}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideLabel:["validateHideLabel"],_hideError:["validateHideError"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_orientation:["validateOrientation"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};b.style={default:c};export{b as kol_input_radio};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolInputRadioDefaultStyle0","KolInputRadio","render","ariaDescribedBy","hasError","getRenderStates","this","state","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","disabled","_disabled","error","required","_required","_hideError","_orientation","slot","_options","map","option","index","customId","_id","slotName","radio","Boolean","_hideLabel","_hint","label","_renderNoLabel","_slotName","_tooltipAlign","_touched","Object","assign","ref","_value","value","catchRef","undefined","title","accessKey","_accessKey","length","join","type","id","checked","name","_name","tabIndex","_tabIndex","controller","onFacade","onChange","onClick","htmlFor","style","height","margin","padding","visibility","FormFieldMsg","_alert","_error","constructor","hostRef","propagateFocus","host","event","target","HTMLInputElement","getOptionByKey","stopPropagation","tryToDispatchKoliBriEvent","setFormAssociatedValue","_a","_on","setValue","nonce","InputRadioController","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHideError","validateHint","validateId","validateLabel","validateList","validateOptions","validateName","validateOn","validateOrientation","validateRequired","validateSyncValueBySelector","validateTabIndex","validateTouched","validateValue","componentWillLoad"],"sources":["src/components/input-radio/style.scss?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/component.tsx"],"sourcesContent":["@import '../input';\n\n:host {\n\t--border-width: 2px;\n\t--input-size: 1.5em;\n}\n\nkol-input .icons {\n\tdisplay: none;\n}\n\nlabel {\n\tcursor: pointer;\n}\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}\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}\n\ninput:checked:before {\n\tbackground-color: #000;\n}\n\n@media (forced-colors: active) {\n\tinput:checked:before {\n\t\t/* Give it a visible background in forced colors mode */\n\t\tbackground: highlight !important;\n\t}\n}\n\nfieldset {\n\tdisplay: flex;\n}\n\nfieldset.vertical {\n\tflex-direction: column;\n}\n\nfieldset .input-slot {\n\talign-items: center;\n\tdisplay: flex;\n}\n\n/* required star is on fieldset legend */\n.required label > span::after {\n\tcontent: '';\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\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 { FormFieldMsg } from '../@shared/form-field-msg';\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.scss',\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 && <FormFieldMsg _alert={this.state._alert} _hideError={this.state._hideError} _error={this.state._error} _id={this.state._id} />}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Optionen für das Eingabefeld an.\n\t * @deprecated Use _options.\n\t */\n\t@Prop() public _list?: Stringified<Option<W3CInputValue>[]>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options?: OptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '…', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\t// Event handling\n\t\t\t\tstopPropagation(event);\n\t\t\t\ttryToDispatchKoliBriEvent('change', this.host, option.value);\n\n\t\t\t\t// Static form handling\n\t\t\t\tthis.controller.setFormAssociatedValue(option.value);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\t\t\tthis.state._on.onChange(event, option.value);\n\t\t\t\t}\n\n\t\t\t\t// TODO: Prüfen, was setValue noch genau macht, wir syncValue ja jetzt.\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","KolInputRadioDefaultStyle0","KolInputRadio","render","ariaDescribedBy","hasError","getRenderStates","this","state","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","disabled","_disabled","error","required","_required","_hideError","_orientation","slot","_options","map","option","index","customId","_id","slotName","radio","Boolean","_hideLabel","_hint","label","_renderNoLabel","_slotName","_tooltipAlign","_touched","Object","assign","ref","_value","value","catchRef","undefined","title","accessKey","_accessKey","length","join","type","id","checked","name","_name","tabIndex","_tabIndex","controller","onFacade","onChange","onClick","htmlFor","style","height","margin","padding","visibility","FormFieldMsg","_alert","_error","constructor","hostRef","propagateFocus","host","event","target","HTMLInputElement","getOptionByKey","stopPropagation","tryToDispatchKoliBriEvent","setFormAssociatedValue","_a","_on","setValue","nonce","InputRadioController","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHideError","validateHint","validateId","validateLabel","validateList","validateOptions","validateName","validateOn","validateOrientation","validateRequired","validateSyncValueBySelector","validateTabIndex","validateTouched","validateValue","componentWillLoad"],"sources":["src/components/input-radio/style.scss?tag=kol-input-radio&mode=default&encapsulation=shadow","src/components/input-radio/component.tsx"],"sourcesContent":["@import '../input';\n\n:host {\n\t--border-width: 2px;\n\t--input-size: 1.5em;\n}\n\n.kol-input .icons {\n\tdisplay: none;\n}\n\nlabel {\n\tcursor: pointer;\n}\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}\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}\n\ninput:checked:before {\n\tbackground-color: #000;\n}\n\n@media (forced-colors: active) {\n\tinput:checked:before {\n\t\t/* Give it a visible background in forced colors mode */\n\t\tbackground: highlight !important;\n\t}\n}\n\nfieldset {\n\tdisplay: flex;\n}\n\nfieldset.vertical {\n\tflex-direction: column;\n}\n\nfieldset .input-slot {\n\talign-items: center;\n\tdisplay: flex;\n}\n\n/* required star is on fieldset legend */\n.required label > span::after {\n\tcontent: '';\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\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 { FormFieldMsg } from '../@shared/form-field-msg';\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.scss',\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 class=\"kol-input-radio\">\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 && <FormFieldMsg _alert={this.state._alert} _hideError={this.state._hideError} _error={this.state._error} _id={this.state._id} />}\n\t\t\t\t</fieldset>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRadioController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Optionen für das Eingabefeld an.\n\t * @deprecated Use _options.\n\t */\n\t@Prop() public _list?: Stringified<Option<W3CInputValue>[]>;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from.\n\t */\n\t@Prop() public _options?: OptionsPropType;\n\n\t/**\n\t * Defines whether the orientation of the component is horizontal or vertical.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t * @see Known bug: https://github.com/ionic-team/stencil/issues/3902\n\t */\n\t@Prop() public _value?: Stringified<W3CInputValue>;\n\n\t@State() public state: States = {\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '…', // ⚠ required\n\t\t_options: [],\n\t\t_orientation: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRadioController(this, 'radio', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\tthis.controller.validateOrientation(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<StencilUnknown>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tif (event.target instanceof HTMLInputElement) {\n\t\t\tconst option = this.controller.getOptionByKey(event.target.value);\n\t\t\tif (option !== undefined) {\n\t\t\t\t// Event handling\n\t\t\t\tstopPropagation(event);\n\t\t\t\ttryToDispatchKoliBriEvent('change', this.host, option.value);\n\n\t\t\t\t// Static form handling\n\t\t\t\tthis.controller.setFormAssociatedValue(option.value);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\t\t\tthis.state._on.onChange(event, option.value);\n\t\t\t\t}\n\n\t\t\t\t// TODO: Prüfen, was setValue noch genau macht, wir syncValue ja jetzt.\n\t\t\t\tthis.controller.setValue(event, option.value as string); // TODO: fix type\n\t\t\t}\n\t\t}\n\t};\n}\n"],"mappings":";;;+jBAAA,MAAMA,EAAkB,ygFACxB,MAAAC,EAAeD,E,MC+BFE,EAAa,MAOlB,MAAAC,GACN,MAAMC,gBAAEA,EAAeC,SAAEA,GAAaC,EAAgBC,KAAKC,OAC3D,MAAMC,EAAgBC,EAAeH,KAAKC,MAAMG,QAEhD,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,mBACXH,EAAA,YAAAE,IAAA,2CACCC,MAAO,CACNC,SAAUT,KAAKC,MAAMS,YAAc,KACnCC,MAAOb,IAAa,KACpBc,SAAUZ,KAAKC,MAAMY,YAAc,KACnC,eAAgBb,KAAKc,aAAe,KACpC,CAACd,KAAKC,MAAMc,cAAe,OAG5BV,EAAA,UAAAE,IAAA,2CAAQC,MAAM,oCAEbH,EAAA,QAAAE,IAAA,4CAGCF,EAAA,QAAAE,IAAA,2CAAMS,KAAK,SAASd,EAAgBG,EAAA,aAAgBL,KAAKC,MAAMG,UAGhEJ,KAAKC,MAAMgB,SAASC,KAAI,CAACC,EAAQC,KAMjC,MAAMC,EAAW,GAAGrB,KAAKC,MAAMqB,OAAOF,IACtC,MAAMG,EAAW,SAASH,IAC1B,OACCf,EAAA,aACCG,MAAO,CACNgB,MAAO,KACPf,SAAUgB,QAAQzB,KAAKC,MAAMS,WAAaS,EAAOV,WAElDF,IAAKc,EACLX,UAAWV,KAAKC,MAAMS,WAAaS,EAAOV,SAC1CiB,WAAY1B,KAAKC,MAAMyB,WACvBC,MAAO3B,KAAKC,MAAM0B,MAClBL,IAAKD,EACLjB,OAAQe,EAAOS,MACfC,eAAgB,KAChBhB,UAAWb,KAAKC,MAAMY,UACtBiB,UAAWP,EACXQ,cAAe/B,KAAK+B,cACpBC,SAAUhC,KAAKC,MAAM+B,UAErB3B,EAAA,OAAKW,KAAMO,EAAUf,MAAM,uBAC1BH,EAAA,QAAA4B,OAAAC,OAAA,CACCC,IAAKnC,KAAKC,MAAMmC,SAAWjB,EAAOkB,MAAQrC,KAAKsC,SAAWC,UAC1DC,MAAM,GACNC,UAAWzC,KAAKC,MAAMyC,WAAU,mBACd7C,EAAgB8C,OAAS,EAAI9C,EAAgB+C,KAAK,KAAOL,UAAS,aACxEvC,KAAKC,MAAMyB,mBAAqBP,EAAOS,QAAU,SAAWT,EAAOS,MAAQW,UACvFM,KAAK,QACLC,GAAIzB,EACJ0B,QAAS/C,KAAKC,MAAMmC,SAAWjB,EAAOkB,MACtCW,KAAMhD,KAAKC,MAAMgD,OAASjD,KAAKC,MAAMqB,IACrCb,SAAUT,KAAKC,MAAMS,WAAaS,EAAOV,SACzCG,SAAUZ,KAAKC,MAAMY,UACrBqC,SAAUlD,KAAKC,MAAMkD,UACrBd,MAAO,IAAIjB,KACPpB,KAAKoD,WAAWC,SAAQ,CAC5BC,SAAUtD,KAAKsD,SACfC,QAAShB,aAEVlC,EAAA,SACCG,MAAM,cACNgD,QAAS,GAAGnC,IACZoC,MAAO,CACNC,OAAQ1D,KAAKC,MAAMyB,WAAa,IAAMa,UACtCoB,OAAQ3D,KAAKC,MAAMyB,WAAa,IAAMa,UACtCqB,QAAS5D,KAAKC,MAAMyB,WAAa,IAAMa,UACvCsB,WAAY7D,KAAKC,MAAMyB,WAAa,SAAWa,YAGhDlC,EAAA,YACCA,EAAA,YAAOc,EAAOS,UAIN,IAGb9B,GAAYO,EAACyD,EAAY,CAACC,OAAQ/D,KAAKC,MAAM8D,OAAQjD,WAAYd,KAAKC,MAAMa,WAAYkD,OAAQhE,KAAKC,MAAM+D,OAAQ1C,IAAKtB,KAAKC,MAAMqB,O,CA6HxI,WAAA2C,CAAAC,G,UAvNiBlE,KAAAsC,SAAYH,IAC5BgC,EAAenE,KAAKoE,KAAMjC,EAAI,EA+TvBnC,KAAAsD,SAAYe,I,MACnB,GAAIA,EAAMC,kBAAkBC,iBAAkB,CAC7C,MAAMpD,EAASnB,KAAKoD,WAAWoB,eAAeH,EAAMC,OAAOjC,OAC3D,GAAIlB,IAAWoB,UAAW,CAEzBkC,EAAgBJ,GAChBK,EAA0B,SAAU1E,KAAKoE,KAAMjD,EAAOkB,OAGtDrC,KAAKoD,WAAWuB,uBAAuBxD,EAAOkB,OAG9C,WAAWuC,EAAA5E,KAAKC,MAAM4E,OAAG,MAAAD,SAAA,SAAAA,EAAEtB,YAAa,WAAY,CACnDtD,KAAKC,MAAM4E,IAAIvB,SAASe,EAAOlD,EAAOkB,M,CAIvCrC,KAAKoD,WAAW0B,SAAST,EAAOlD,EAAOkB,M,0CAvOwB,K,eAM7B,M,sCAWiC,M,gBAOhC,M,WAKN,G,gJAoCY,W,eAMP,M,gFAgBiB,M,cAMc,M,iCAQpC,CAC/BvB,WAAY,MACZQ,IAAK,MAAMyD,MACX3E,OAAQ,IACRa,SAAU,GACVF,aAAc,YAIdf,KAAKoD,WAAa,IAAI4B,EAAqBhF,KAAM,QAASA,KAAKoE,K,CAIzD,iBAAAa,CAAkB5C,GACxBrC,KAAKoD,WAAW6B,kBAAkB5C,E,CAI5B,aAAA6C,CAAc7C,GACpBrC,KAAKoD,WAAW8B,cAAc7C,E,CAIxB,gBAAA8C,CAAiB9C,GACvBrC,KAAKoD,WAAW+B,iBAAiB9C,E,CAI3B,aAAA+C,CAAc/C,GACpBrC,KAAKoD,WAAWgC,cAAc/C,E,CAIxB,iBAAAgD,CAAkBhD,GACxBrC,KAAKoD,WAAWiC,kBAAkBhD,E,CAI5B,iBAAAiD,CAAkBjD,GACxBrC,KAAKoD,WAAWkC,kBAAkBjD,E,CAI5B,YAAAkD,CAAalD,GACnBrC,KAAKoD,WAAWmC,aAAalD,E,CAIvB,UAAAmD,CAAWnD,GACjBrC,KAAKoD,WAAWoC,WAAWnD,E,CAIrB,aAAAoD,CAAcpD,GACpBrC,KAAKoD,WAAWqC,cAAcpD,E,CAIxB,YAAAqD,CAAarD,GACnBrC,KAAK2F,gBAAgBtD,E,CAIf,YAAAuD,CAAavD,GACnBrC,KAAKoD,WAAWwC,aAAavD,E,CAIvB,UAAAwD,CAAWxD,GACjBrC,KAAKoD,WAAWyC,WAAWxD,E,CAIrB,eAAAsD,CAAgBtD,GACtBrC,KAAKoD,WAAWuC,gBAAgBtD,E,CAI1B,mBAAAyD,CAAoBzD,GAC1BrC,KAAKoD,WAAW0C,oBAAoBzD,E,CAI9B,gBAAA0D,CAAiB1D,GACvBrC,KAAKoD,WAAW2C,iBAAiB1D,E,CAI3B,2BAAA2D,CAA4B3D,GAClCrC,KAAKoD,WAAW4C,4BAA4B3D,E,CAItC,gBAAA4D,CAAiB5D,GACvBrC,KAAKoD,WAAW6C,iBAAiB5D,E,CAI3B,eAAA6D,CAAgB7D,GACtBrC,KAAKoD,WAAW8C,gBAAgB7D,E,CAI1B,aAAA8D,CAAc9D,GACpBrC,KAAKoD,WAAW+C,cAAc9D,E,CAGxB,iBAAA+D,GACNpG,KAAK+D,OAAS/D,KAAK+D,SAAW,KAC9B/D,KAAKgC,SAAWhC,KAAKgC,WAAa,KAClChC,KAAKoD,WAAWgD,kBAAkBpG,KAAKsD,S"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as e,g as a}from"./index-cf7b0813.js";import{n as s}from"./dev.utils-94066c64.js";import{s as n,a as o}from"./reuse-d79ab469.js";import{p as d}from"./controller-1ec4718e.js";import{g as l}from"./controller-64ffbb0d.js";import{v as r}from"./suggestions-1cbd58ae.js";import{w as h,e as p}from"./prop.validators-8b0fa207.js";import{I as u}from"./controller-icon-a57cb2d2.js";import"./a11y.tipps-b91e3a85.js";import"./hide-label-4daf9592.js";import"./label-61bbacc7.js";import"./events-fa760b68.js";import"./tab-index-d41a9f4c.js";import"./associated.controller-99862e5b.js";import"./index-c88c7ecf.js";import"./icons-511942e6.js";class c extends u{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){h(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){Array.isArray(t)&&this.validateSuggestions(t.map((t=>t.value)))}validateMax(t){p(this.component,"_max",t)}validateMin(t){p(this.component,"_min",t)}validateStep(t){p(this.component,"_step",t)}validateSuggestions(t){r(this.component,t)}validateValue(t){p(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const f=':host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.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}@media (prefers-contrast: more){::-webkit-slider-thumb{outline:1px solid currentColor}}',b=f,m=class{componentDidLoad(){var t;!this._value&&(null===(t=this.refInputRange)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputRange.value))}render(){const{ariaDescribedBy:e}=l(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=n(this.state._label);return t(i,{key:"641d88308881c606c0a11952ddf1960bb170c291"},t("kol-input",{key:"175d48898d1e99cc67f9283f872490a5c44d8ac4",class:{range:!0,"hide-label":!!this.state._hideLabel},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},t("span",{key:"a4717c921fa05c069b7bcfd0b6191b3a26799e05",slot:"label"},s?t("slot",null):this.state._label),t("div",{key:"9969b61578d817f673584b50611a68f72ae215bd",slot:"input"},t("div",{key:"1fca5ec939bc24dc817b15b348eecc4810de410c",class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`${this.state._max}`.length+.5+"em"}},t("input",Object.assign({key:"db734378a52fbc2e529e7aaecd4cba5b225fd116",ref:this.catchInputRangeRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-hidden":"true",autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})),t("input",Object.assign({key:"9587523550131bfeeee1fbe44dcfd16d18e10178",ref:this.catchInputNumberRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp,onChange:this.onChange}))),a&&[t("datalist",{id:`${this.state._id}-list`},this.state._suggestions.map((e=>t("option",{value:e}))))])))}constructor(t){e(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.refInputNumber=t,o(this.host,t),!this._value&&(null===(e=this.refInputNumber)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=t=>{t&&(this.refInputRange=t)},this.onChange=t=>{var e,i;let a=parseFloat(t.target.value);this.state._max&&a>this.state._max&&(a=this.state._max),this.state._min&&a<this.state._min&&(a=this.state._min),this.validateValue(a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(i=this.state._on)||void 0===i||i.onChange(t,a))},this.onKeyUp=t=>{"Enter"===t.code?d({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-${s()}`,_label:"…",_suggestions:[]},this.controller=new c(this,"range",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}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 a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};m.style={default:b};export{m as kol_input_range};
+import{h as i,H as t,r as e,g as a}from"./index-c1d028ba.js";import{n as s}from"./dev.utils-8d5cefe9.js";import{s as n,a as o}from"./reuse-d79ab469.js";import{p as d}from"./controller-86b9d0e8.js";import{g as l}from"./controller-b6a485f1.js";import{v as r}from"./suggestions-8938bb98.js";import{w as h,e as p}from"./prop.validators-8c5a4551.js";import{I as u}from"./controller-icon-90a5af99.js";import"./a11y.tipps-1cea6b3d.js";import"./hide-label-d39d4679.js";import"./label-9ebba50f.js";import"./events-fa760b68.js";import"./tab-index-42e01244.js";import"./associated.controller-c4487875.js";import"./index-117bd1aa.js";import"./icons-1e78352d.js";class c extends u{constructor(t,e,i){super(t,e,i),this.component=t}validateAutoComplete(t){h(this.component,"_autoComplete",(t=>"string"==typeof t&&("on"===t||"off"===t)),new Set(["on | off"]),t)}validateList(t){Array.isArray(t)&&this.validateSuggestions(t.map((t=>t.value)))}validateMax(t){p(this.component,"_max",t)}validateMin(t){p(this.component,"_min",t)}validateStep(t){p(this.component,"_step",t)}validateSuggestions(t){r(this.component,t)}validateValue(t){p(this.component,"_value",t),this.setFormAssociatedValue(this.component.state._value)}componentWillLoad(){super.componentWillLoad(),this.validateAutoComplete(this.component._autoComplete),this.validateList(this.component._list),this.validateMax(this.component._max),this.validateMin(this.component._min),this.validateStep(this.component._step),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const f=':host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.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:calc(16rem / var(--kolibri-root-font-size, 16));width:100%}input[type=file]{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 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:calc(8rem / var(--kolibri-root-font-size, 16));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}@media (prefers-contrast: more){::-webkit-slider-thumb{outline:1px solid currentColor}}',b=f,m=class{componentDidLoad(){var t;!this._value&&(null===(t=this.refInputRange)||void 0===t?void 0:t.value)&&this.validateValue(parseFloat(this.refInputRange.value))}render(){const{ariaDescribedBy:e}=l(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=n(this.state._label);return i(t,{key:"0e2f80a22c7e0e9331ffd969037da1b7b39064f9",class:"kol-input-range"},i("kol-input",{key:"b331b86d8f55e7591f839d92718467692b5fde15",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},i("span",{key:"e64d4f52462256c8cbd9bad4c4d5529b3fdf6dec",slot:"label"},s?i("slot",null):this.state._label),i("div",{key:"85c86a4128260abcccfb1c099c9e33ce619112d4",slot:"input"},i("div",{key:"07cce8cbe7faa106ef8f74742ef7b7472839a02d",class:"inputs-wrapper",style:{"--kolibri-input-range--input-number--width":`${this.state._max}`.length+.5+"em"}},i("input",Object.assign({key:"9c040708a2c2f9091a3235e887564f2768d52756",ref:this.catchInputRangeRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-hidden":"true",autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-range`:void 0,spellcheck:"false",step:this.state._step,tabIndex:-1,type:"range",value:this.state._value},this.controller.onFacade,{onChange:this.onChange})),i("input",Object.assign({key:"6e3f668f9dce886ebca77227d73b9b99ed05137e",ref:this.catchInputNumberRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,max:this.state._max,min:this.state._min,name:this.state._name?`${this.state._name}-number`:void 0,step:this.state._step,type:"number",value:this.state._value},this.controller.onFacade,{onKeyDown:this.onKeyDown,onChange:this.onChange}))),a&&[i("datalist",{id:`${this.state._id}-list`},this.state._suggestions.map((t=>i("option",{value:t}))))])))}constructor(t){e(this,t),this.catchInputNumberRef=t=>{var e;t&&(this.refInputNumber=t,o(this.host,t),!this._value&&(null===(e=this.refInputNumber)||void 0===e?void 0:e.value)&&this.validateValue(parseFloat(this.refInputNumber.value)))},this.catchInputRangeRef=t=>{t&&(this.refInputRange=t)},this.onChange=t=>{var e,i;let a=parseFloat(t.target.value);this.state._max&&a>this.state._max&&(a=this.state._max),this.state._min&&a<this.state._min&&(a=this.state._min),this.validateValue(a),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onChange)&&(null===(i=this.state._on)||void 0===i||i.onChange(t,a))},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||d({form:this.host,ref:this.refInputRange})},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-${s()}`,_label:"…",_suggestions:[]},this.controller=new c(this,"range",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}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 a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_max:["validateMax"],_min:["validateMin"],_name:["validateName"],_on:["validateOn"],_step:["validateStep"],_suggestions:["validateSuggestions"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};m.style={default:b};export{m as kol_input_range};

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

@@ -1 +1 @@
-{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","Array","isArray","validateSuggestions","map","option","validateMax","watchNumber","validateMin","validateStep","validateValue","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_list","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRangeDefaultStyle0","KolInputRange","componentDidLoad","_a","refInputRange","parseFloat","render","ariaDescribedBy","getRenderStates","hasSuggestions","length","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","range","_hideLabel","_disabled","_error","_hideError","_hint","_icons","_id","_tooltipAlign","_touched","slot","style","Object","assign","ref","catchInputRangeRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","list","max","min","_name","spellcheck","step","tabIndex","type","controller","onFacade","onChange","catchInputNumberRef","id","onKeyUp","hostRef","element","refInputNumber","propagateFocus","event","target","_on","_b","code","propagateSubmitEventToForm","form","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateIcon","validateIcons","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.scss?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 '../input-line';\n\n.inputs-wrapper {\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n}\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/*\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\t/* Design-Hack - related with flex-grow */\n\twidth: 0;\n}\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}\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\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.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputRange implements API {\n\t@Element() private readonly host?: HTMLKolInputRangeElement;\n\tprivate refInputNumber?: HTMLInputElement;\n\tprivate refInputRange?: HTMLInputElement;\n\n\tprivate readonly catchInputNumberRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputNumber = element;\n\t\t\tpropagateFocus(this.host, element);\n\t\t\tif (!this._value && this.refInputNumber?.value) {\n\t\t\t\tthis.validateValue(parseFloat(this.refInputNumber.value));\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate readonly catchInputRangeRef = (element?: HTMLInputElement) => {\n\t\tif (element) {\n\t\t\tthis.refInputRange = element;\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tlet value = parseFloat((event.target as HTMLInputElement).value);\n\t\tif (this.state._max && value > this.state._max) value = this.state._max;\n\t\tif (this.state._min && value < this.state._min) value = this.state._min;\n\t\tthis.validateValue(value);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on?.onChange(event, value);\n\t\t}\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.refInputRange,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tcomponentDidLoad() {\n\t\tif (!this._value && this.refInputRange?.value) {\n\t\t\tthis.validateValue(parseFloat(this.refInputRange.value));\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasSuggestions = Array.isArray(this.state._suggestions) && this.state._suggestions.length > 0;\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\trange: true,\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"inputs-wrapper\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t'--kolibri-input-range--input-number--width': `${this.state._max}`.length + 0.5 + 'em',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tref={this.catchInputRangeRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-range` : undefined}\n\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t\t\tvalue={this.state._value as number}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\tref={this.catchInputNumberRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\t\t\t\tmin={this.state._min}\n\t\t\t\t\t\t\t\tname={this.state._name ? `${this.state._name}-number` : undefined}\n\t\t\t\t\t\t\t\tstep={this.state._step}\n\t\t\t\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{hasSuggestions && [\n\t\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t\t{this.state._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t\t//   {this.state._suggestions.map((option: InputOption<number>) => (\n\t\t\t\t\t\t\t//     <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t\t//   ))}\n\t\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t\t]}\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Vorschlagswörter an.\n\t * @deprecated Use _suggestions.\n\t */\n\t@Prop() public _list?: Stringified<Option<W3CInputValue>[]>;\n\n\t/**\n\t * Defines the largest possible input value.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '…', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["InputRangeController","InputIconController","constructor","component","name","host","super","this","validateAutoComplete","value","watchValidator","Set","validateList","Array","isArray","validateSuggestions","map","option","validateMax","watchNumber","validateMin","validateStep","validateValue","setFormAssociatedValue","state","_value","componentWillLoad","_autoComplete","_list","_max","_min","_step","_suggestions","defaultStyleCss","KolInputRangeDefaultStyle0","KolInputRange","componentDidLoad","_a","refInputRange","parseFloat","render","ariaDescribedBy","getRenderStates","hasSuggestions","length","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","range","_hideLabel","_disabled","_error","_hideError","_hint","_icons","_id","_tooltipAlign","_touched","slot","style","Object","assign","ref","catchInputRangeRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","autoCorrect","disabled","list","max","min","_name","spellcheck","step","tabIndex","type","controller","onFacade","onChange","catchInputNumberRef","id","onKeyDown","hostRef","element","refInputNumber","propagateFocus","event","target","_on","_b","code","propagateSubmitEventToForm","form","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateIcon","validateIcons","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert"],"sources":["src/components/input-range/controller.ts","src/components/input-range/style.scss?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 '../@shared/mixins';\n@import '../input-line';\n\n.inputs-wrapper {\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n}\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/*\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: rem(8);\n\tline-height: 1.5em;\n\tpadding: 0;\n\tmargin: 0;\n\t/* Design-Hack - related with flex-grow */\n\twidth: 0;\n}\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}\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\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.scss',\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 onKeyDown = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.refInputRange,\n\t\t\t});\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 class=\"kol-input-range\">\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\tonKeyDown={this.onKeyDown}\n\t\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{hasSuggestions && [\n\t\t\t\t\t\t\t<datalist id={`${this.state._id}-list`}>\n\t\t\t\t\t\t\t\t{this.state._suggestions.map((option: W3CInputValue) => (\n\t\t\t\t\t\t\t\t\t<option value={option} />\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</datalist>,\n\t\t\t\t\t\t\t// <ul class=\"grid gap-1 text-sm grid-flow-col\">\n\t\t\t\t\t\t\t//   {this.state._suggestions.map((option: InputOption<number>) => (\n\t\t\t\t\t\t\t//     <li class=\"border-1\">{option.label}</li>\n\t\t\t\t\t\t\t//   ))}\n\t\t\t\t\t\t\t// </ul>,\n\t\t\t\t\t\t]}\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputRangeController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Vorschlagswörter an.\n\t * @deprecated Use _suggestions.\n\t */\n\t@Prop() public _list?: Stringified<Option<W3CInputValue>[]>;\n\n\t/**\n\t * Defines the largest possible input value.\n\t */\n\t@Prop() public _max?: number;\n\n\t/**\n\t * Defines the smallest possible input value.\n\t */\n\t@Prop() public _min?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the step size for value changes.\n\t */\n\t@Prop() public _step?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: number;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '…', // ⚠ required\n\t\t_suggestions: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputRangeController(this, 'range', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: Stringified<Option<W3CInputValue>[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tthis.controller.validateMax(value);\n\t}\n\n\t@Watch('_min')\n\tpublic validateMin(value?: number): void {\n\t\tthis.controller.validateMin(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_step')\n\tpublic validateStep(value?: number): void {\n\t\tthis.controller.validateStep(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t}\n}\n"],"mappings":";;;gpBAUaA,UAA6BC,EAGzC,WAAAC,CAAmBC,EAA8CC,EAAcC,GAC9EC,MAAMH,EAAWC,EAAMC,GACvBE,KAAKJ,UAAYA,C,CAGX,oBAAAK,CAAqBC,GAC3BC,EACCH,KAAKJ,UACL,iBACCM,UAA0BA,IAAU,WAAaA,IAAU,MAAQA,IAAU,QAC9E,IAAIE,IAAI,CAAC,aACTF,E,CAOK,YAAAG,CAAaH,GACnB,GAAII,MAAMC,QAAQL,GAAQ,CACzBF,KAAKQ,oBAAoBN,EAAMO,KAAKC,GAAWA,EAAOR,Q,EAIjD,WAAAS,CAAYT,GAClBU,EAAYZ,KAAKJ,UAAW,OAAQM,E,CAG9B,WAAAW,CAAYX,GAClBU,EAAYZ,KAAKJ,UAAW,OAAQM,E,CAG9B,YAAAY,CAAaZ,GACnBU,EAAYZ,KAAKJ,UAAW,QAASM,E,CAG/B,mBAAAM,CAAoBN,GAC1BM,EAAoBR,KAAKJ,UAAWM,E,CAG9B,aAAAa,CAAcb,GACpBU,EAAYZ,KAAKJ,UAAW,SAAUM,GACtCF,KAAKgB,uBAAuBhB,KAAKJ,UAAUqB,MAAMC,O,CAG3C,iBAAAC,GACNpB,MAAMoB,oBACNnB,KAAKC,qBAAqBD,KAAKJ,UAAUwB,eACzCpB,KAAKK,aAAaL,KAAKJ,UAAUyB,OACjCrB,KAAKW,YAAYX,KAAKJ,UAAU0B,MAChCtB,KAAKa,YAAYb,KAAKJ,UAAU2B,MAChCvB,KAAKc,aAAad,KAAKJ,UAAU4B,OACjCxB,KAAKQ,oBAAoBR,KAAKJ,UAAU6B,cACxCzB,KAAKe,cAAcf,KAAKJ,UAAUsB,O,EClEpC,MAAMQ,EAAkB,29FACxB,MAAAC,EAAeD,E,MC6BFE,EAAa,MAwCzB,gBAAAC,G,MACC,IAAK7B,KAAKkB,UAAUY,EAAA9B,KAAK+B,iBAAa,MAAAD,SAAA,SAAAA,EAAE5B,OAAO,CAC9CF,KAAKe,cAAciB,WAAWhC,KAAK+B,cAAc7B,O,EAI5C,MAAA+B,GACN,MAAMC,gBAAEA,GAAoBC,EAAgBnC,KAAKiB,OACjD,MAAMmB,EAAiB9B,MAAMC,QAAQP,KAAKiB,MAAMQ,eAAiBzB,KAAKiB,MAAMQ,aAAaY,OAAS,EAClG,MAAMC,EAAgBC,EAAevC,KAAKiB,MAAMuB,QAEhD,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,mBACXH,EAAA,aAAAE,IAAA,2CACCC,MAAO,CACNC,MAAO,KACP,eAAgB7C,KAAKiB,MAAM6B,YAE5BC,UAAW/C,KAAKiB,MAAM8B,UACtBC,OAAQhD,KAAKiB,MAAM+B,OACnBC,WAAYjD,KAAKiB,MAAMgC,WACvBH,WAAY9C,KAAKiB,MAAM6B,WACvBI,MAAOlD,KAAKiB,MAAMiC,MAClBC,OAAQnD,KAAKiB,MAAMkC,OACnBC,IAAKpD,KAAKiB,MAAMmC,IAChBZ,OAAQxC,KAAKiB,MAAMuB,OACnBa,cAAerD,KAAKqD,cACpBC,SAAUtD,KAAKiB,MAAMqC,UAGrBb,EAAA,QAAAE,IAAA,2CAAMY,KAAK,SAASjB,EAAgBG,EAAA,aAAgBzC,KAAKiB,MAAMuB,QAC/DC,EAAA,OAAAE,IAAA,2CAAKY,KAAK,SACTd,EAAA,OAAAE,IAAA,2CACCC,MAAM,iBACNY,MAAO,CACN,6CAA8C,GAAGxD,KAAKiB,MAAMK,OAAOe,OAAS,GAAM,OAGnFI,EAAA,QAAAgB,OAAAC,OAAA,CAAAf,IAAA,2CACCgB,IAAK3D,KAAK4D,mBACVC,MAAM,GACNC,UAAW9D,KAAKiB,MAAM8C,WAAU,mBACd7B,EAAgBG,OAAS,EAAIH,EAAgB8B,KAAK,KAAOC,UAAS,aACxEjE,KAAKiB,MAAM6B,mBAAqB9C,KAAKiB,MAAMuB,SAAW,SAAWxC,KAAKiB,MAAMuB,OAASyB,UAAS,cAC9F,OACZC,eAAe,MACfC,aAAcnE,KAAKiB,MAAMG,cACzBgD,YAAY,MACZC,SAAUrE,KAAKiB,MAAM8B,UACrBuB,KAAMlC,EAAiB,GAAGpC,KAAKiB,MAAMmC,WAAaa,UAClDM,IAAKvE,KAAKiB,MAAMK,KAChBkD,IAAKxE,KAAKiB,MAAMM,KAChB1B,KAAMG,KAAKiB,MAAMwD,MAAQ,GAAGzE,KAAKiB,MAAMwD,cAAgBR,UACvDS,WAAW,QACXC,KAAM3E,KAAKiB,MAAMO,MACjBoD,UAAW,EACXC,KAAK,QACL3E,MAAOF,KAAKiB,MAAMC,QACdlB,KAAK8E,WAAWC,SAAQ,CAC5BC,SAAUhF,KAAKgF,YAEhBvC,EAAA,QAAAgB,OAAAC,OAAA,CAAAf,IAAA,2CACCgB,IAAK3D,KAAKiF,oBACVpB,MAAM,GACNC,UAAW9D,KAAKiB,MAAM8C,WAAU,mBACd7B,EAAgBG,OAAS,EAAIH,EAAgB8B,KAAK,KAAOC,UAAS,aACxEjE,KAAKiB,MAAM6B,mBAAqB9C,KAAKiB,MAAMuB,SAAW,SAAWxC,KAAKiB,MAAMuB,OAASyB,UACjGC,eAAe,MACfC,aAAcnE,KAAKiB,MAAMG,cACzBgD,YAAY,MACZC,SAAUrE,KAAKiB,MAAM8B,UACrBmC,GAAIlF,KAAKiB,MAAMmC,IACfkB,KAAMlC,EAAiB,GAAGpC,KAAKiB,MAAMmC,WAAaa,UAClDM,IAAKvE,KAAKiB,MAAMK,KAChBkD,IAAKxE,KAAKiB,MAAMM,KAChB1B,KAAMG,KAAKiB,MAAMwD,MAAQ,GAAGzE,KAAKiB,MAAMwD,eAAiBR,UACxDU,KAAM3E,KAAKiB,MAAMO,MACjBqD,KAAK,SACL3E,MAAOF,KAAKiB,MAAMC,QACdlB,KAAK8E,WAAWC,SAAQ,CAC5BI,UAAWnF,KAAKmF,UAChBH,SAAUhF,KAAKgF,aAGhB5C,GAAkB,CAClBK,EAAA,YAAUyC,GAAI,GAAGlF,KAAKiB,MAAMmC,YAC1BpD,KAAKiB,MAAMQ,aAAahB,KAAKC,GAC7B+B,EAAA,UAAQvC,MAAOQ,U,CAwJvB,WAAAf,CAAAyF,G,UAlRiBpF,KAAAiF,oBAAuBI,I,MACvC,GAAIA,EAAS,CACZrF,KAAKsF,eAAiBD,EACtBE,EAAevF,KAAKF,KAAMuF,GAC1B,IAAKrF,KAAKkB,UAAUY,EAAA9B,KAAKsF,kBAAc,MAAAxD,SAAA,SAAAA,EAAE5B,OAAO,CAC/CF,KAAKe,cAAciB,WAAWhC,KAAKsF,eAAepF,O,IAKpCF,KAAA4D,mBAAsByB,IACtC,GAAIA,EAAS,CACZrF,KAAK+B,cAAgBsD,C,GAINrF,KAAAgF,SAAYQ,I,QAC5B,IAAItF,EAAQ8B,WAAYwD,EAAMC,OAA4BvF,OAC1D,GAAIF,KAAKiB,MAAMK,MAAQpB,EAAQF,KAAKiB,MAAMK,KAAMpB,EAAQF,KAAKiB,MAAMK,KACnE,GAAItB,KAAKiB,MAAMM,MAAQrB,EAAQF,KAAKiB,MAAMM,KAAMrB,EAAQF,KAAKiB,MAAMM,KACnEvB,KAAKe,cAAcb,GACnB,WAAW4B,EAAA9B,KAAKiB,MAAMyE,OAAG,MAAA5D,SAAA,SAAAA,EAAEkD,YAAa,WAAY,EACnDW,EAAA3F,KAAKiB,MAAMyE,OAAG,MAAAC,SAAA,SAAAA,EAAEX,SAASQ,EAAOtF,E,GAIjBF,KAAAmF,UAAaK,IAC7B,GAAIA,EAAMI,OAAS,SAAWJ,EAAMI,OAAS,cAAe,CAC3DC,EAA2B,CAC1BC,KAAM9F,KAAKF,KACX6D,IAAK3D,KAAK+B,e,yCAqHqD,K,4CAW7B,M,sCAWiC,M,gBAOhC,M,WAKN,G,0TAwEsB,M,cAMc,M,iCAOpC,CAC/BX,cAAe,MACf6B,WAAY,MACZG,IAAK,MAAM2C,MACXvD,OAAQ,IACRf,aAAc,IAIdzB,KAAK8E,WAAa,IAAIrF,EAAqBO,KAAM,QAASA,KAAKF,K,CAIzD,iBAAAkG,CAAkB9F,GACxBF,KAAK8E,WAAWkB,kBAAkB9F,E,CAI5B,aAAA+F,CAAc/F,GACpBF,KAAK8E,WAAWmB,cAAc/F,E,CAIxB,oBAAAD,CAAqBC,GAC3BF,KAAK8E,WAAW7E,qBAAqBC,E,CAI/B,gBAAAgG,CAAiBhG,GACvBF,KAAK8E,WAAWoB,iBAAiBhG,E,CAI3B,aAAAiG,CAAcjG,GACpBF,KAAK8E,WAAWqB,cAAcjG,E,CAIxB,iBAAAkG,CAAkBlG,GACxBF,KAAK8E,WAAWsB,kBAAkBlG,E,CAI5B,iBAAAmG,CAAkBnG,GACxBF,KAAK8E,WAAWuB,kBAAkBnG,E,CAI5B,YAAAoG,CAAapG,GACnBF,KAAK8E,WAAWwB,aAAapG,E,CAIvB,YAAAqG,CAAarG,GACnBF,KAAKwG,cAActG,E,CAIb,aAAAsG,CAActG,GACpBF,KAAK8E,WAAW0B,cAActG,E,CAIxB,UAAAuG,CAAWvG,GACjBF,KAAK8E,WAAW2B,WAAWvG,E,CAIrB,aAAAwG,CAAcxG,GACpBF,KAAK8E,WAAW4B,cAAcxG,E,CAIxB,YAAAG,CAAaH,GACnBF,KAAK8E,WAAWzE,aAAaH,E,CAIvB,WAAAS,CAAYT,GAClBF,KAAK8E,WAAWnE,YAAYT,E,CAItB,WAAAW,CAAYX,GAClBF,KAAK8E,WAAWjE,YAAYX,E,CAItB,YAAAyG,CAAazG,GACnBF,KAAK8E,WAAW6B,aAAazG,E,CAIvB,UAAA0G,CAAW1G,GACjBF,KAAK8E,WAAW8B,WAAW1G,E,CAIrB,YAAAY,CAAaZ,GACnBF,KAAK8E,WAAWhE,aAAaZ,E,CAIvB,mBAAAM,CAAoBN,GAC1BF,KAAK8E,WAAWtE,oBAAoBN,E,CAI9B,2BAAA2G,CAA4B3G,GAClCF,KAAK8E,WAAW+B,4BAA4B3G,E,CAItC,gBAAA4G,CAAiB5G,GACvBF,KAAK8E,WAAWgC,iBAAiB5G,E,CAI3B,eAAA6G,CAAgB7G,GACtBF,KAAK8E,WAAWiC,gBAAgB7G,E,CAI1B,aAAAa,CAAcb,GACpBF,KAAK8E,WAAW/D,cAAcb,E,CAGxB,iBAAAiB,GACNnB,KAAKgH,OAAShH,KAAKgH,SAAW,KAC9BhH,KAAKsD,SAAWtD,KAAKsD,WAAa,KAClCtD,KAAK8E,WAAW3D,mB"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-cf7b0813.js";import{a as s,s as n}from"./prop.validators-8b0fa207.js";import{f as l}from"./a11y.tipps-b91e3a85.js";import{n as d}from"./dev.utils-94066c64.js";import{s as o,a as r}from"./reuse-d79ab469.js";import{p as h}from"./controller-1ec4718e.js";import{g as p}from"./controller-64ffbb0d.js";import{a as u}from"./controller-a1adc0e3.js";import"./index-c88c7ecf.js";import"./hide-label-4daf9592.js";import"./label-61bbacc7.js";import"./events-fa760b68.js";import"./tab-index-d41a9f4c.js";import"./associated.controller-99862e5b.js";import"./controller-82ea9f81.js";import"./controller-icon-a57cb2d2.js";import"./icons-511942e6.js";import"./suggestions-1cbd58ae.js";const c=(t,e)=>{s(t,"_alert",e)},f=':host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.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:"*"}',v=f;l("[KolInputText] Pre- und post-Label für Währung usw.");const b=class{render(){const{ariaDescribedBy:i}=p(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=o(this.state._label);return t(e,{key:"51c568171eeac86e45b565947abb121d651d5f25",class:{"has-value":this.state._hasValue}},t("kol-input",{key:"c5680089b468d3f4969dd4d80ef4474a3612622b",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"f15c633e3cfa8288b1752ab0fd1097ea01dce406",slot:"label"},s?t("slot",null):this.state._label),t("div",{key:"f112e16a6cbcf45c15823ff797ebc72646a715bc",slot:"input"},t("input",Object.assign({key:"d4ec86ada4f40152785f18c75ddedd5f34a509c7",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})))))}constructor(t){i(this,t),this.catchRef=t=>{var e;this.ref=t,r(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{n(this,"_currentLength",t.target.value.length),"Enter"===t.code||"NumpadEnter"===t.code?h({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,i;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.ref)||void 0===i?void 0:i.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._size=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${d()}`,_label:"…",_suggestions:[],_type:"text"},this.controller=new u(this,"text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){c(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}disconnectedCallback(){var t;null===(t=this.ref)||void 0===t||t.removeEventListener("search",this.onChange)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};b.style={default:v};export{b as kol_input_text};
+import{h as t,H as e,r as i,g as a}from"./index-c1d028ba.js";import{a as s,s as n}from"./prop.validators-8c5a4551.js";import{f as l}from"./a11y.tipps-1cea6b3d.js";import{n as o}from"./dev.utils-8d5cefe9.js";import{s as d,a as r}from"./reuse-d79ab469.js";import{p as h}from"./controller-86b9d0e8.js";import{g as p}from"./controller-b6a485f1.js";import{a as u}from"./controller-213a22e8.js";import"./index-117bd1aa.js";import"./hide-label-d39d4679.js";import"./label-9ebba50f.js";import"./events-fa760b68.js";import"./tab-index-42e01244.js";import"./associated.controller-c4487875.js";import"./controller-2e3afee2.js";import"./controller-icon-90a5af99.js";import"./icons-1e78352d.js";import"./suggestions-8938bb98.js";const c=(t,e)=>{s(t,"_alert",e)},f=':host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.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:calc(16rem / var(--kolibri-root-font-size, 16));width:100%}input[type=file]{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 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:"*"}',v=f;l("[KolInputText] Pre- und post-Label für Währung usw.");const b=class{render(){const{ariaDescribedBy:i}=p(this.state),a=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,s=d(this.state._label);return t(e,{key:"ad5ca30cae01315d05d6d171739ab8cab1b8e210",class:{"kol-input-text":!0,"has-value":this.state._hasValue}},t("kol-input",{key:"474d7b34b605a839c0d270a6fd8386104a4c03e5",class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_suggestions:this.state._suggestions,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"5574d08e2a1d10565324a7451a3ce8100ccb77df",slot:"label"},s?t("slot",null):this.state._label),t("div",{key:"eccc177fbf650f9b937c20c3d28f790ad7feb7d4",slot:"input"},t("input",Object.assign({key:"ff4dc5311f09a0be0de05f4a83b5987175a92b19",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:a?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onChange:this.onChange,onInput:this.onInput,onKeyDown:this.onKeyDown})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,r(this.host,this.ref)},this.onChange=t=>{var e,i;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.ref)||void 0===i?void 0:i.value,this.controller.onFacade.onChange(t))},this.onInput=t=>{n(this,"_currentLength",t.target.value.length),this.controller.onFacade.onInput(t)},this.onKeyDown=t=>{"Enter"!==t.code&&"NumpadEnter"!==t.code||h({form:this.host,ref:this.ref})},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._pattern=void 0,this._placeholder=void 0,this._readOnly=!1,this._required=!1,this._size=void 0,this._suggestions=void 0,this._smartButton=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._type="text",this._value=void 0,this.state={_autoComplete:"off",_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${o()}`,_label:"…",_suggestions:[],_type:"text"},this.controller=new u(this,"text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){c(this,t)}validateAutoComplete(t){this.controller.validateAutoComplete(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateSuggestions(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateSuggestions(t){this.controller.validateSuggestions(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateType(t){this.controller.validateType(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.oldValue=this._value,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_suggestions:["validateSuggestions"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}};b.style={default:v};export{b as kol_input_text};

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

@@ -1 +1 @@
-{"version":3,"names":["validateAlert","component","value","watchBoolean","defaultStyleCss","KolInputTextDefaultStyle0","featureHint","KolInputText","render","ariaDescribedBy","getRenderStates","this","state","hasSuggestions","Array","isArray","_suggestions","length","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","_hasValue","_type","_hideLabel","_currentLength","_disabled","_error","_hideError","_hasCounter","_hint","_icons","_id","_maxLength","_readOnly","_required","_smartButton","_tooltipAlign","_touched","onClick","_a","ref","focus","role","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","list","maxlength","name","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","type","_value","controller","onFacade","onKeyUp","constructor","hostRef","propagateFocus","host","disconnectedCallback","addEventListener","onChange","event","setState","target","code","propagateSubmitEventToForm","form","oldValue","_b","nonce","InputTextController","validateAccessKey","validateAutoComplete","validateDisabled","validateError","validateHasCounter","validateHideError","validateHideLabel","validateHint","validateIcon","validateIcons","validateId","validateLabel","validateList","validateSuggestions","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","validateType","validateValue","componentWillLoad","_alert","addValueChangeListener","v","removeEventListener"],"sources":["src/types/props/alert.ts","src/components/input-text/style.scss?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type AlertPropType = boolean;\n\n/**\n * Defines whether the screen-readers should read out the notification.\n */\nexport type PropAlert = {\n\talert: AlertPropType;\n};\n\n/* validator */\nexport const validateAlert = (component: Generic.Element.Component, value?: AlertPropType): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","@import '../input-line';\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 { InputTextType } from '../../types/input/control/text';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { AlertPropType, validateAlert } from '../../types/props/alert';\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 { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { Props as ButtonProps } from '../button/types';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { API, States } from './types';\n\nfeatureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements API {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t\tthis.disconnectedCallback();\n\t\tthis.ref?.addEventListener('search', this.onChange);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\tsetState(this, '_currentLength', (event.target as HTMLInputElement).value.length);\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t} else {\n\t\t\tthis.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst 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\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type]: 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_currentLength={this.state._currentLength}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hasCounter={this.state._hasCounter}\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_suggestions={this.state._suggestions}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype={this.state._type}\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t// onInput={this.controller.onFacade.onChange}\n\t\t\t\t\t\t\tonKeyUp={this.onKeyUp}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: InputTextController;\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 * @TODO: Change type back to `AlertPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Vorschlagswörter an.\n\t * @deprecated Use _suggestions.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines a validation pattern for the input field.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '…', // ⚠ required\n\t\t_suggestions: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: AlertPropType): void {\n\t\tvalidateAlert(this, value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: SuggestionsPropType): void {\n\t\tthis.validateSuggestions(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.ref?.removeEventListener('search', this.onChange);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["validateAlert","component","value","watchBoolean","defaultStyleCss","KolInputTextDefaultStyle0","featureHint","KolInputText","render","ariaDescribedBy","getRenderStates","this","state","hasSuggestions","Array","isArray","_suggestions","length","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","_hasValue","_type","_hideLabel","_currentLength","_disabled","_error","_hideError","_hasCounter","_hint","_icons","_id","_maxLength","_readOnly","_required","_smartButton","_tooltipAlign","_touched","onClick","_a","ref","focus","role","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoComplete","_autoComplete","autoCorrect","disabled","id","list","maxlength","name","_name","pattern","_pattern","placeholder","_placeholder","readOnly","required","size","_size","spellcheck","type","_value","controller","onFacade","onChange","onInput","onKeyDown","constructor","hostRef","propagateFocus","host","event","oldValue","_b","setState","target","code","propagateSubmitEventToForm","form","nonce","InputTextController","validateAccessKey","validateAutoComplete","validateDisabled","validateError","validateHasCounter","validateHideError","validateHideLabel","validateHint","validateIcon","validateIcons","validateId","validateLabel","validateList","validateSuggestions","validateMaxLength","validateName","validateOn","validatePattern","validatePlaceholder","validateReadOnly","validateRequired","validateSize","validateSmartButton","validateSyncValueBySelector","validateTabIndex","validateTouched","validateType","validateValue","componentWillLoad","_alert","addValueChangeListener","v"],"sources":["src/types/props/alert.ts","src/components/input-text/style.scss?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\nexport type AlertPropType = boolean;\n\n/**\n * Defines whether the screen-readers should read out the notification.\n */\nexport type PropAlert = {\n\talert: AlertPropType;\n};\n\n/* validator */\nexport const validateAlert = (component: Generic.Element.Component, value?: AlertPropType): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","@import '../input-line';\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 { InputTextType } from '../../types/input/control/text';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { AlertPropType, validateAlert } from '../../types/props/alert';\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 { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { Props as ButtonProps } from '../button/types';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { API, States } from './types';\n\nfeatureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements API {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate readonly onChange = (event: Event) => {\n\t\tif (this.oldValue !== this.ref?.value) {\n\t\t\tthis.oldValue = this.ref?.value;\n\t\t\tthis.controller.onFacade.onChange(event);\n\t\t}\n\t};\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tsetState(this, '_currentLength', (event.target as HTMLInputElement).value.length);\n\t\tthis.controller.onFacade.onInput(event);\n\t};\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tif (event.code === 'Enter' || event.code === 'NumpadEnter') {\n\t\t\tpropagateSubmitEventToForm({\n\t\t\t\tform: this.host,\n\t\t\t\tref: this.ref,\n\t\t\t});\n\t\t}\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\tclass={{\n\t\t\t\t\t'kol-input-text': true,\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._type]: 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_currentLength={this.state._currentLength}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hasCounter={this.state._hasCounter}\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_suggestions={this.state._suggestions}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_smartButton={this.state._smartButton}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoComplete={this.state._autoComplete}\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tlist={hasSuggestions ? `${this.state._id}-list` : undefined}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\tpattern={this.state._pattern}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\ttype={this.state._type}\n\t\t\t\t\t\t\tvalue={this.state._value as string}\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t\tonInput={this.onInput}\n\t\t\t\t\t\t\tonKeyDown={this.onKeyDown}\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: InputTextController;\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 * @TODO: Change type back to `AlertPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the input can be auto-completed.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Deprecated: Gibt die Liste der Vorschlagswörter an.\n\t * @deprecated Use _suggestions.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines a validation pattern for the input field.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Allows to add a button with an arbitrary action within the element (_hide-label only).\n\t */\n\t@Prop() public _smartButton?: Stringified<ButtonProps>;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '…', // ⚠ required\n\t\t_suggestions: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'text', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: AlertPropType): void {\n\t\tvalidateAlert(this, value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_list')\n\tpublic validateList(value?: SuggestionsPropType): void {\n\t\tthis.validateSuggestions(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: InputTextType): void {\n\t\tthis.controller.validateType(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.oldValue = this._value;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,F as s,H as e,g as h}from"./index-cf7b0813.js";import{a as o}from"./i18n-3be2bb29.js";import{h as l,s as a}from"./reuse-d79ab469.js";import{F as n}from"./form-field-msg-4920e946.js";import"./index-52ef4125.js";import"./index-c88c7ecf.js";import"./dev.utils-94066c64.js";import"./a11y.tipps-b91e3a85.js";const d=class{constructor(t){i(this,t),this.slotName="input",this.catchInputSlot=t=>{l(this.host,t,this.slotName)},this._alert=!0,this._currentLength=void 0,this._disabled=!1,this._error="",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._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._slotName=void 0,this._suggestions=void 0,this._smartButton=void 0,this._tooltipAlign="top",this._touched=!1}componentWillRender(){this.slotName=this._slotName?this._slotName:"input"}getIconsProp(){return this._icons||this._icon}getIconStyles(t){return t&&"object"==typeof t&&t.style?t.style:{}}render(){var i,h,l,r,d,_,c,u;const p=!this._readOnly&&"string"==typeof this._error&&this._error.length>0&&!0===this._touched,b=a(this._label),g="string"==typeof this._hint&&this._hint.length>0,m=!b&&this._hideLabel;return t(e,{key:"00309cc52c4174d881725fad556e0d2e51fdacf4",class:{disabled:!0===this._disabled,error:!0===p,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched,"hidden-error":!0===this._hideError}},t("label",{key:"64833944c9a10261e8d3ab97638a25c61ab532ce",class:"input-label",id:m?void 0:`${this._id}-label`,hidden:m,htmlFor:this._id},t("span",{key:"a52a31e30c528dfc6f9822184161017f10017e02"},t("slot",{key:"077f57b5fb6b00756d6a2b8e9559c0921e2af9ad",name:"label"}))),g&&t("span",{class:"hint",id:`${this._id}-hint`},this._hint),t("div",{key:"41890a631d116ffb5223c5686c595c81b24e3b8b",class:{input:!0,"icon-left":"object"==typeof(null===(i=this.getIconsProp())||void 0===i?void 0:i.left),"icon-right":"object"==typeof(null===(h=this.getIconsProp())||void 0===h?void 0:h.right)}},(null===(l=this.getIconsProp())||void 0===l?void 0:l.left)&&t("kol-icon",{_ariaLabel:"",_icons:(null===(r=this.getIconsProp())||void 0===r?void 0:r.left).icon,style:this.getIconStyles(null===(d=this.getIconsProp())||void 0===d?void 0:d.left)}),t("div",{key:"b6f8ec87d4f056f25fc725de1e7144929b5aaa0e",ref:this.catchInputSlot,id:this.slotName,class:"input-slot"}),"object"==typeof this._smartButton&&null!==this._smartButton&&t("kol-button-wc",{_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icons:this._smartButton._icons,_hideLabel:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant}),(null===(_=this.getIconsProp())||void 0===_?void 0:_.right)&&t("kol-icon",{_ariaLabel:"",_icons:(null===(c=this.getIconsProp())||void 0===c?void 0:c.right).icon,style:this.getIconStyles(null===(u=this.getIconsProp())||void 0===u?void 0:u.right)})),m&&t("kol-tooltip-wc",{"aria-hidden":"true",class:"input-tooltip",_align:this._tooltipAlign,_id:this._hideLabel?`${this._id}-label`:void 0,_label:this._label}),p&&t(n,{_alert:this._alert,_hideError:this._hideError,_error:this._error,_id:this._id}),Array.isArray(this._suggestions)&&this._suggestions.length>0&&t("datalist",{id:`${this._id}-list`},this._suggestions.map((i=>t("option",{value:i})))),this._hasCounter&&t("span",{class:"counter","aria-atomic":"true","aria-live":"polite"},this._currentLength,this._maxLength&&t(s,null,t("span",{"aria-label":o("kol-of"),role:"img"},"/"),this._maxLength)," ",t("span",null,o("kol-characters"))))}get host(){return h(this)}};export{d as kol_input};
+import{r as i,h as t,F as s,H as e,g as h}from"./index-c1d028ba.js";import{t as a}from"./i18n-ad947f60.js";import{h as d,s as l}from"./reuse-d79ab469.js";import{F as o}from"./form-field-msg-d2bbb1a6.js";import"./i18n-fddf0324.js";const n=class{constructor(t){i(this,t),this.slotName="input",this.catchInputSlot=t=>{d(this.host,t,this.slotName)},this._alert=!0,this._currentLength=void 0,this._disabled=!1,this._error="",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._readOnly=!1,this._renderNoLabel=!1,this._required=!1,this._slotName=void 0,this._suggestions=void 0,this._smartButton=void 0,this._tooltipAlign="top",this._touched=!1}componentWillRender(){this.slotName=this._slotName?this._slotName:"input"}getIconsProp(){return this._icons||this._icon}getIconStyles(t){return t&&"object"==typeof t&&t.style?t.style:{}}render(){var i,h,r,n,d,_,c,u;const p=!this._readOnly&&"string"==typeof this._error&&this._error.length>0&&!0===this._touched,b=l(this._label),g="string"==typeof this._hint&&this._hint.length>0,m=!b&&this._hideLabel;return t(e,{key:"22d232e25a2e229769a1441607a0cbb201227990",class:{"kol-input":!0,disabled:!0===this._disabled,error:!0===p,"read-only":!0===this._readOnly,required:!0===this._required,touched:!0===this._touched,"hidden-error":!0===this._hideError}},t("label",{key:"c174eef506375278465decebbc1034343ecefa0b",class:"input-label",id:m?void 0:`${this._id}-label`,hidden:m,htmlFor:this._id},t("span",{key:"b57769f3d54229ad53ba97194358ed369e7c82e7"},t("slot",{key:"f341fda78c8b687bae5416632c9cceaf3374e55e",name:"label"}))),g&&t("span",{class:"hint",id:`${this._id}-hint`},this._hint),t("div",{key:"a6cad233c07fd1acb4dd1d34d9b677dd3f5b56df",class:{input:!0,"icon-left":"object"==typeof(null===(i=this.getIconsProp())||void 0===i?void 0:i.left),"icon-right":"object"==typeof(null===(h=this.getIconsProp())||void 0===h?void 0:h.right)}},(null===(r=this.getIconsProp())||void 0===r?void 0:r.left)&&t("kol-icon",{_ariaLabel:"",_icons:(null===(n=this.getIconsProp())||void 0===n?void 0:n.left).icon,style:this.getIconStyles(null===(d=this.getIconsProp())||void 0===d?void 0:d.left)}),t("div",{key:"fead20560cdf0ac0e987f29576caad90ac329f85",ref:this.catchInputSlot,id:this.slotName,class:"input-slot"}),"object"==typeof this._smartButton&&null!==this._smartButton&&t("kol-button-wc",{_customClass:this._smartButton._customClass,_disabled:this._smartButton._disabled,_icons:this._smartButton._icons,_hideLabel:!0,_id:this._smartButton._id,_label:this._smartButton._label,_on:this._smartButton._on,_tooltipAlign:this._smartButton._tooltipAlign,_variant:this._smartButton._variant}),(null===(_=this.getIconsProp())||void 0===_?void 0:_.right)&&t("kol-icon",{_ariaLabel:"",_icons:(null===(c=this.getIconsProp())||void 0===c?void 0:c.right).icon,style:this.getIconStyles(null===(u=this.getIconsProp())||void 0===u?void 0:u.right)})),m&&t("kol-tooltip-wc",{"aria-hidden":"true",class:"input-tooltip",_align:this._tooltipAlign,_id:this._hideLabel?`${this._id}-label`:void 0,_label:this._label}),p&&t(o,{_alert:this._alert,_hideError:this._hideError,_error:this._error,_id:this._id}),Array.isArray(this._suggestions)&&this._suggestions.length>0&&t("datalist",{id:`${this._id}-list`},this._suggestions.map((i=>t("option",{value:i})))),this._hasCounter&&t("span",{class:"counter","aria-atomic":"true","aria-live":"polite"},this._currentLength,this._maxLength&&t(s,null,t("span",{"aria-label":a("kol-of"),role:"img"},"/"),this._maxLength)," ",t("span",null,a("kol-characters"))))}get host(){return h(this)}};export{n as kol_input};