@public-ui/components 1.6.0-rc.17 → 1.6.0-rc.19

package/dist/components/kol-input-text.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{e as watchBoolean,l as featureHint,v as propagateFocus,m as setState,n as nonce}from"./prop.validators.js";import{v as validateHideLabel,d as defineCustomElement$3}from"./component3.js";import{p as propagateSubmitEventToForm,d as defineCustomElement$7}from"./component5.js";import{g as getRenderStates}from"./controller.js";import{a as InputTextController}from"./controller3.js";import{d as defineCustomElement$9}from"./shadow.js";import{d as defineCustomElement$8}from"./component6.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component13.js";import{d as defineCustomElement$2}from"./component.js";const validateAlert=(t,e)=>{watchBoolean(t,"_alert",e)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}";featureHint("[KolInputText] Pre- und post-Label für Währung usw.");const KolInputText$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._list)&&this.state._list.length>0,a=!1===this.state._label;return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_list:this.state._list,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},h("span",{slot:"label"},a?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})),h("kol-tooltip",{"aria-hidden":"true",hidden:a||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{var e;this.ref=t,propagateFocus(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{setState(this,"_currentLength",t.target.value.length),"Enter"===t.code||"NumpadEnter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,a;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(a=this.ref)||void 0===a?void 0:a.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hasCounter=void 0,this._hideLabel=void 0,this._hint="",this._icon=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=void 0,this._required=void 0,this._size=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,_id:`id-${nonce()}`,_hasValue:!1,_label:!1,_list:[],_type:"text"},this.controller=new InputTextController(this,"input-text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){validateAlert(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)}validateHideLabel(t){validateHideLabel(this,t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePattern(t){this.controller.validatePattern(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateSmartButton(t){this.controller.validateSmartButton(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}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 this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_pattern:["validatePattern"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_required:["validateRequired"],_size:["validateSize"],_smartButton:["validateSmartButton"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_type:["validateType"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-text",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[4],_error:[1],_hasCounter:[4,"_has-counter"],_hideLabel:[4,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_label:[8],_list:[1],_maxLength:[2,"_max-length"],_name:[1],_on:[16],_pattern:[1],_placeholder:[1],_readOnly:[4,"_read-only"],_required:[4],_size:[2],_smartButton:[1,"_smart-button"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_type:[1],_value:[1025],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-text","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-input-text":customElements.get(t)||customElements.define(t,KolInputText$1);break;case"kol-alert":customElements.get(t)||defineCustomElement$9();break;case"kol-alert-wc":customElements.get(t)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-input":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolInputText=KolInputText$1,defineCustomElement=defineCustomElement$1;export{KolInputText,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{f as watchBoolean,l as featureHint,v as propagateFocus,m as setState,n as nonce}from"./prop.validators.js";import{v as validateHideLabel,d as defineCustomElement$3}from"./component3.js";import{p as propagateSubmitEventToForm,d as defineCustomElement$7}from"./component5.js";import{g as getRenderStates}from"./controller.js";import{a as InputTextController}from"./controller3.js";import{d as defineCustomElement$9}from"./shadow.js";import{d as defineCustomElement$8}from"./component6.js";import{d as defineCustomElement$6}from"./component4.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component13.js";import{d as defineCustomElement$2}from"./component.js";const validateAlert=(t,e)=>{watchBoolean(t,"_alert",e)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[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}";featureHint("[KolInputText] Pre- und post-Label für Währung usw.");const KolInputText$1=proxyCustomElement(class extends HTMLElement{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=Array.isArray(this.state._suggestions)&&this.state._suggestions.length>0,a=!1===this.state._label;return h(Host,{class:{"has-value":this.state._hasValue}},h("kol-input",{class:{[this.state._type]:!0,"hide-label":!!this.state._hideLabel},_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_suggestions:this.state._suggestions,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_smartButton:this.state._smartButton,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},h("span",{slot:"label"},a?h("slot",null):this.state._label),h("div",{slot:"input"},h("input",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoComplete:this.state._autoComplete,autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,list:e?`${this.state._id}-list`:void 0,maxlength:this.state._maxLength,name:this.state._name,pattern:this.state._pattern,placeholder:this.state._placeholder,readOnly:this.state._readOnly,required:this.state._required,size:this.state._size,spellcheck:"false",type:this.state._type,value:this.state._value},this.controller.onFacade,{onKeyUp:this.onKeyUp})),h("kol-tooltip",{"aria-hidden":"true",hidden:a||!this.state._hideLabel,_align:this._tooltipAlign,_id:`${this.state._id}-tooltip`,_label:"string"==typeof this.state._label?this.state._label:""}))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{var e;this.ref=t,propagateFocus(this.host,this.ref),this.disconnectedCallback(),null===(e=this.ref)||void 0===e||e.addEventListener("search",this.onChange)},this.onKeyUp=t=>{setState(this,"_currentLength",t.target.value.length),"Enter"===t.code||"NumpadEnter"===t.code?propagateSubmitEventToForm({form:this.host,ref:this.ref}):this.onChange(t)},this.onChange=t=>{var e,a;this.oldValue!==(null===(e=this.ref)||void 0===e?void 0:e.value)&&(this.oldValue=null===(a=this.ref)||void 0===a?void 0:a.value,this.controller.onFacade.onChange(t))},this._accessKey=void 0,this._alert=!0,this._autoComplete=void 0,this._disabled=void 0,this._error=void 0,this._hasCounter=void 0,this._hideLabel=void 0,this._hint="",this._icon=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=void 0,this._required=void 0,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,_id:`id-${nonce()}`,_hasValue:!1,_label:!1,_suggestions:[],_type:"text"},this.controller=new InputTextController(this,"input-text",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){validateAlert(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)}validateHideLabel(t){validateHideLabel(this,t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(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 this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_autoComplete:["validateAutoComplete"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_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"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-input-text",{_accessKey:[1,"_access-key"],_alert:[1540],_autoComplete:[1,"_auto-complete"],_disabled:[4],_error:[1],_hasCounter:[4,"_has-counter"],_hideLabel:[4,"_hide-label"],_hint:[1],_icon:[1],_id:[1],_label:[8],_list:[1],_maxLength:[2,"_max-length"],_name:[1],_on:[16],_pattern:[1],_placeholder:[1],_readOnly:[4,"_read-only"],_required:[4],_size:[2],_suggestions:[1],_smartButton:[1,"_smart-button"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_type:[1],_value:[1025],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-text","kol-alert","kol-alert-wc","kol-button-wc","kol-heading-wc","kol-icon","kol-input","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-input-text":customElements.get(t)||customElements.define(t,KolInputText$1);break;case"kol-alert":customElements.get(t)||defineCustomElement$9();break;case"kol-alert-wc":customElements.get(t)||defineCustomElement$8();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$7();break;case"kol-heading-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-input":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolInputText=KolInputText$1,defineCustomElement=defineCustomElement$1;export{KolInputText,defineCustomElement};

package/dist/components/kol-input-text.js.map

@@ -1 +1 @@
-{"file":"kol-input-text.js","mappings":";;;;;;;;;;;;;;;;AAgBO,MAAM,aAAa,GAAG,CAAC,SAAoC,EAAE,KAAe;EAClF,YAAY,CAAC,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;AAC1C,CAAC;;AClBD,MAAM,eAAe,GAAG,01DAA01D;;ACoBl3D,WAAW,CAAC,qDAAqD,CAAC,CAAC;MAYtDA,cAAY;EA+BjB,MAAM;IACZ,MAAM,EAAE,eAAe,EAAE,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC;IAElD,QACC,EAAC,IAAI,IACJ,KAAK,EAAE;QACN,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;OACjC,IAED,iBACC,KAAK,EAAE;QACN,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI;QACxB,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;OACrC,EACD,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,EACzC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EACnC,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACrC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,OAAO,EAAE,gBAAM,OAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,EAAE,CAAA,EAAA,IAGhC,YAAM,IAAI,EAAC,OAAO,IAAE,aAAa,GAAG,eAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAQ,EAC7E,WAAK,IAAI,EAAC,OAAO,IAChB,2BACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAC,EAAE,EACR,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,sBACd,eAAe,CAAC,MAAM,GAAG,CAAC,GAAG,eAAe,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,SAAS,qBACnE,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,QAAQ,EAC1C,cAAc,EAAC,KAAK,EACpB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,EACtC,WAAW,EAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC9B,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAClB,IAAI,EAAE,OAAO,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,OAAO,GAAG,SAAS,EACpD,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAChC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC5B,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EACpC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC9B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC9B,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACtB,UAAU,EAAC,OAAO,EAClB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAgB,IAC9B,IAAI,CAAC,UAAU,CAAC,QAAQ,IAE5B,OAAO,EAAE,IAAI,CAAC,OAAO,IACpB,EACF,kCAKa,MAAM,EAClB,MAAM,EAAE,aAAa,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAC/C,MAAM,EAAE,IAAI,CAAC,aAAa,EAC1B,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,UAAU,EAChC,MAAM,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,GACxD,CACV,CACK,CACN,EACN;GACF;EAsJD;;;;IA5PiB,aAAQ,GAAG,CAAC,GAAsB;;MAClD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;MACpC,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC5B,MAAA,IAAI,CAAC,GAAG,0CAAE,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpD,CAAC;IAEe,YAAO,GAAG,CAAC,KAAoB;MAC/C,QAAQ,CAAC,IAAI,EAAE,gBAAgB,EAAG,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;MAClF,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa,EAAE;QAC3D,0BAA0B,CAAC;UAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;UACf,GAAG,EAAE,IAAI,CAAC,GAAG;SACb,CAAC,CAAC;OACH;WAAM;QACN,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;OACrB;KACD,CAAC;IAEe,aAAQ,GAAG,CAAC,KAAY;;MACxC,IAAI,IAAI,CAAC,QAAQ,MAAK,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAA,EAAE;QACtC,IAAI,CAAC,QAAQ,GAAG,MAAA,IAAI,CAAC,GAAG,0CAAE,KAAK,CAAC;QAChC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;OACzC;KACD,CAAC;;kBA0FgE,IAAI;;;;;;iBA8BtC,EAAE;;;;;;;;;;;;;;;;yBAiFK,KAAK;oBAKwB,KAAK;iBAKlC,MAAM;;iBAOb;MAC/B,aAAa,EAAE,KAAK;MACpB,cAAc,EAAE,CAAC;MACjB,GAAG,EAAE,MAAM,KAAK,EAAE,EAAE;MACpB,SAAS,EAAE,KAAK;MAChB,MAAM,EAAE,KAAK;MACb,KAAK,EAAE,EAAE;MACT,KAAK,EAAE,MAAM;KACb;IAGA,IAAI,CAAC,UAAU,GAAG,IAAI,mBAAmB,CAAC,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;GACzE;EAGM,iBAAiB,CAAC,KAAc;IACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;GACzC;EAGM,aAAa,CAAC,KAAe;IACnC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,oBAAoB,CAAC,KAAsB;IACjD,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;GAC5C;EAGM,gBAAgB,CAAC,KAAe;IACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;GACxC;EAGM,aAAa,CAAC,KAAc;IAClC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GACrC;EAGM,kBAAkB,CAAC,KAAe;IACxC,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;GAC1C;EAGM,iBAAiB,CAAC,KAAe;IACvC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC/B;EAGM,YAAY,CAAC,KAAc;IACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;GACpC;EAGM,YAAY,CAAC,KAA0C;IAC7D,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;GACpC;EAGM,UAAU,CAAC,KAAc;IAC/B,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;GAClC;EAGM,aAAa,CAAC,KAAmC;IACvD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GACrC;EAGM,YAAY,CAAC,KAA6B;IAChD,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;GACpC;EAGM,iBAAiB,CAAC,KAAc;IACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;GACzC;EAGM,YAAY,CAAC,KAAc;IACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;GACpC;EAGM,UAAU,CAAC,KAA0B;IAC3C,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;GAClC;EAGM,eAAe,CAAC,KAAc;IACpC,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;GACvC;EAGM,mBAAmB,CAAC,KAAc;IACxC,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;GAC3C;EAGM,gBAAgB,CAAC,KAAe;IACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;GACxC;EAGM,gBAAgB,CAAC,KAAe;IACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;GACxC;EAMM,YAAY,CAAC,KAAc;IACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;GACpC;EAGM,mBAAmB,CAAC,KAA4B;IACtD,IAAI,CAAC,UAAU,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC;GAC3C;EAGM,2BAA2B,CAAC,KAAc;IAChD,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;GACnD;EAGM,gBAAgB,CAAC,KAAc;IACrC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;GACxC;EAGM,eAAe,CAAC,KAAe;IACrC,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;GACvC;EAGM,YAAY,CAAC,KAAqB;IACxC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;GACpC;EAGM,aAAa,CAAC,KAAc;IAClC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GACrC;EAEM,iBAAiB;IACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;IAC5B,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;IAEpC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;IAC3C,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;GAC5E;EAEM,oBAAoB;;IAC1B,MAAA,IAAI,CAAC,GAAG,0CAAE,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;GACvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolInputText"],"sources":["src/types/props/alert.ts","src/components/input-text/style.css?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropAlert = {\n\talert: boolean;\n};\n\n/* validator */\nexport const validateAlert = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTextType } from '../../types/input/control/text';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { validateAlert } from '../../types/props/alert';\nimport { Align } from '../../types/props/align';\nimport { validateHideLabel } from '../../types/props/hide-label';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { ComponentApi, States } from './types';\n\nfeatureHint(`[KolInputText] Pre- und post-Label für Währung usw.`);\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-input-text',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t\tthis.disconnectedCallback();\n\t\tthis.ref?.addEventListener('search', this.onChange);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\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 hasList = Array.isArray(this.state._list) && this.state._list.length > 0;\n\t\tconst hasExpertSlot = this.state._label === false; // _label=\"\" or _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_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_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_list={this.state._list}\n\t\t\t\t\t_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_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\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={hasList ? `${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\t<kol-tooltip\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_id={`${this.state._id}-tooltip`}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\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 * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t */\n\t@Prop() public _hasCounter?: boolean;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Gibt die Liste der Vorschlagswörter an.\n\t */\n\t@Prop() public _list?: Stringified<string[]>;\n\n\t/**\n\t * Gibt an, wie viele Zeichen maximal eingegeben werden können.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt ein Prüfmuster (Pattern) für das Eingabefeld an.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop() public _readOnly?: boolean;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche ins das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\n\t */\n\t@Prop() public _smartButton?: 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?: string;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (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 * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_hasValue: false,\n\t\t_label: false, // ⚠ required\n\t\t_list: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'input-text', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tvalidateAlert(this, value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_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<string[]>): void {\n\t\tthis.controller.validateList(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_pattern')\n\tpublic validatePattern(value?: string): void {\n\t\tthis.controller.validatePattern(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_smartButton')\n\tpublic validateSmartButton(value?: ButtonProps | string): void {\n\t\tthis.controller.validateSmartButton(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): 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"],"version":3}
+{"file":"kol-input-text.js","mappings":"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","names":["KolInputText"],"sources":["src/types/props/alert.ts","src/components/input-text/style.css?tag=kol-input-text&mode=default&encapsulation=shadow","src/components/input-text/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropAlert = {\n\talert: boolean;\n};\n\n/* validator */\nexport const validateAlert = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_alert', value);\n};\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { ButtonProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTextType } from '../../types/input/control/text';\nimport { InputTypeOnDefault, InputTypeOnOff } from '../../types/input/types';\nimport { validateAlert } from '../../types/props/alert';\nimport { Align } from '../../types/props/align';\nimport { validateHideLabel } from '../../types/props/hide-label';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus } from '../../utils/reuse';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport { getRenderStates } from '../input/controller';\nimport { InputTextController } from './controller';\nimport { ComponentApi, States } from './types';\nimport { SuggestionsPropType } from '../../types/props/suggestions';\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.css',\n\t},\n\tshadow: true,\n})\nexport class KolInputText implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolInputTextElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate oldValue?: string;\n\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t\tthis.disconnectedCallback();\n\t\tthis.ref?.addEventListener('search', this.onChange);\n\t};\n\n\tprivate readonly onKeyUp = (event: KeyboardEvent) => {\n\t\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 = this.state._label === false; // _label=\"\" or _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_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_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\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_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\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\t<kol-tooltip\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,\n\t\t\t\t\t\t\t * verhindert aber nicht das Aria-Labelledby vorgelesen wird.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\thidden={hasExpertSlot || !this.state._hideLabel}\n\t\t\t\t\t\t\t_align={this._tooltipAlign}\n\t\t\t\t\t\t\t_id={`${this.state._id}-tooltip`}\n\t\t\t\t\t\t\t_label={typeof this.state._label === 'string' ? this.state._label : ''}\n\t\t\t\t\t\t></kol-tooltip>\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 * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Gibt an, ob das Eingabefeld autovervollständigt werden kann.\n\t */\n\t@Prop() public _autoComplete?: InputTypeOnOff;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.\n\t */\n\t@Prop() public _hasCounter?: boolean;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * 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 * Gibt an, wie viele Zeichen maximal eingegeben werden können.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Gibt ein Prüfmuster (Pattern) für das Eingabefeld an.\n\t */\n\t@Prop() public _pattern?: string;\n\n\t/**\n\t * Gibt den Platzhalter des Eingabefeldes an, wenn es leer ist.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Setzt das Eingabefeld in den schreibgeschützten Modus.\n\t */\n\t@Prop() public _readOnly?: boolean;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\n\n\t/**\n\t * Setzt die Breite des Eingabefeldes in Buchstabenbreiten.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Suggestions to provide for the input.\n\t */\n\t@Prop() public _suggestions?: SuggestionsPropType;\n\n\t/**\n\t * Ermöglicht eine Schaltfläche in das Eingabefeld mit einer beliebigen Aktion zu einzufügen (ohne label).\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?: string;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (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 * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'top';\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Setzt den Typ der Komponente oder des interaktiven Elements in der Komponente an.\n\t */\n\t@Prop() public _type?: InputTextType = 'text';\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: States = {\n\t\t_autoComplete: 'off',\n\t\t_currentLength: 0,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_hasValue: false,\n\t\t_label: false, // ⚠ required\n\t\t_suggestions: [],\n\t\t_type: 'text',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new InputTextController(this, 'input-text', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tvalidateAlert(this, value);\n\t}\n\n\t@Watch('_autoComplete')\n\tpublic validateAutoComplete(value?: InputTypeOnOff): void {\n\t\tthis.controller.validateAutoComplete(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: boolean): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_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?: string): 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"],"version":3}

package/dist/components/kol-kolibri.js

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

package/dist/components/kol-link-button.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as propagateFocus}from"./prop.validators.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$2}from"./component.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",KolLinkButton$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription=translate("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal"}render(){return h(Host,null,h("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icon:this._icon,_label:this._label,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},h("slot",{name:"expert",slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-link-button",{_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[4,"_aria-expanded"],_ariaLabel:[1,"_aria-label"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_download:[8],_hideLabel:[4,"_hide-label"],_href:[1],_icon:[1],_iconOnly:[4,"_icon-only"],_label:[8],_on:[16],_role:[1],_tabIndex:[2,"_tab-index"],_target:[1],_targetDescription:[1,"_target-description"],_tooltipAlign:[1,"_tooltip-align"],_variant:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link-button","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-link-button":customElements.get(t)||customElements.define(t,KolLinkButton$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolLinkButton=KolLinkButton$1,defineCustomElement=defineCustomElement$1;export{KolLinkButton,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{v as propagateFocus}from"./prop.validators.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$2}from"./component.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:inline-block}:is(a,button){display:inline-flex;place-items:center;text-align:center;text-decoration-line:none}:is(a,button)>kol-span-wc{margin:auto;width:100%}:is(button):disabled{cursor:not-allowed;opacity:0.5}",KolLinkButton$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._download=!1,this._hideLabel=!1,this._href=void 0,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._listenAriaCurrent=void 0,this._on=void 0,this._role=void 0,this._tabIndex=void 0,this._target=void 0,this._targetDescription=translate("kol-open-link-in-tab"),this._tooltipAlign="right",this._variant="normal"}render(){return h(Host,null,h("kol-link-wc",{ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_disabled:this._disabled,_download:this._download,_hideLabel:this._hideLabel,_href:this._href,_icon:this._icon,_label:this._label,_listenAriaCurrent:this._listenAriaCurrent,_on:this._on,_role:"button",_tabIndex:this._tabIndex,_target:this._target,_targetDescription:this._targetDescription,_tooltipAlign:this._tooltipAlign},h("slot",{name:"expert",slot:"expert"})))}get host(){return this}static get style(){return{default:defaultStyleCss}}},[33,"kol-link-button",{_ariaControls:[1,"_aria-controls"],_ariaCurrent:[8,"_aria-current"],_ariaExpanded:[4,"_aria-expanded"],_ariaLabel:[1,"_aria-label"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_download:[8],_hideLabel:[4,"_hide-label"],_href:[1],_icon:[1],_iconOnly:[4,"_icon-only"],_label:[8],_listenAriaCurrent:[8,"_listen-aria-current"],_on:[16],_role:[1],_tabIndex:[2,"_tab-index"],_target:[1],_targetDescription:[1,"_target-description"],_tooltipAlign:[1,"_tooltip-align"],_variant:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link-button","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-link-button":customElements.get(t)||customElements.define(t,KolLinkButton$1);break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolLinkButton=KolLinkButton$1,defineCustomElement=defineCustomElement$1;export{KolLinkButton,defineCustomElement};

package/dist/components/kol-link-button.js.map

@@ -1 +1 @@
-{"file":"kol-link-button.js","mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,u5BAAu5B;;MC0Bl6BA,eAAa;;;;;IAIR,aAAQ,GAAG,CAAC,GAA0B;MACtD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;qBAuEmC,KAAK;qBAKI,KAAK;sBAKb,KAAK;;;;;;;;;8BA+CE,SAAS,CAAC,sBAAsB,CAAC;yBAKvC,OAAO;oBAKG,QAAQ;;EAxIlD,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,mBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE;QACN,MAAM,EAAE,IAAI;QACZ,CAAC,IAAI,CAAC,QAAkB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;QACrD,CAAC,IAAI,CAAC,YAAsB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;OAClI,EACD,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjC,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC5B,CACR,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolLinkButton"],"sources":["src/components/link-button/style.css?tag=kol-link-button&mode=default&encapsulation=shadow","src/components/link-button/component.tsx"],"sourcesContent":["@import url(../button.css);\n","import { Generic } from '@a11y-ui/core';\nimport { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport {\n\tAlternativButtonLinkRole,\n\tKoliBriButtonVariant,\n\tLinkOnCallbacks,\n\tLinkTarget,\n\tOptionalLinkButtonProps,\n\tRequiredLinkButtonProps,\n} from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Align } from '../../types/props/align';\nimport { AriaCurrent } from '../../types/props/aria-current';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { propagateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton implements Generic.Element.Members<RequiredLinkButtonProps, OptionalLinkButtonProps> {\n\t@Element() private readonly host?: HTMLKolLinkButtonElement;\n\tprivate ref?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-link-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_download={this._download}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"button\"\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_targetDescription={this._targetDescription}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-link-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t *  @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.\n\t */\n\t@Prop() public _download?: boolean | string = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Gibt die Ziel-Url des Links an.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für den Link an.\n\t * @deprecated\n\t */\n\t@Prop() public _on?: LinkOnCallbacks;\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (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 * Gibt an wo der Link geöffnet werden soll.\n\t */\n\t@Prop() public _target?: LinkTarget;\n\n\t/**\n\t * Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.\n\t */\n\t@Prop() public _targetDescription?: string = translate('kol-open-link-in-tab');\n\n\t/**\n\t * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'right';\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"version":3}
+{"file":"kol-link-button.js","mappings":";;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,u5BAAu5B;;MCkBl6BA,eAAa;;;;;IAIR,aAAQ,GAAG,CAAC,GAA0B;MACtD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC;MACf,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;;;;;;;qBAkFmC,KAAK;qBAKI,KAAK;sBAKb,KAAK;;;;;;;;;;8BAoDE,SAAS,CAAC,sBAAsB,CAAC;yBAKvC,OAAO;oBAKG,QAAQ;;EAxJlD,MAAM;IACZ,QACC,EAAC,IAAI,QACJ,mBACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE;QACN,MAAM,EAAE,IAAI;QACZ,CAAC,IAAI,CAAC,QAAkB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;QACrD,CAAC,IAAI,CAAC,YAAsB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;OAClI,EACD,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,QAAQ,EACd,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAC3C,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjC,YAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CAC5B,CACR,EACN;GACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolLinkButton"],"sources":["src/components/link-button/style.css?tag=kol-link-button&mode=default&encapsulation=shadow","src/components/link-button/component.tsx"],"sourcesContent":["@import url(../button.css);\n","import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { AlternativButtonLinkRole, KoliBriButtonVariant, LinkOnCallbacks, LinkProps, LinkTarget } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Align } from '../../types/props/align';\nimport { AriaCurrent } from '../../types/props/aria-current';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { propagateFocus } from '../../utils/reuse';\n\n@Component({\n\ttag: 'kol-link-button',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolLinkButton implements LinkProps {\n\t@Element() private readonly host?: HTMLKolLinkButtonElement;\n\tprivate ref?: HTMLKolLinkWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolLinkWcElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<kol-link-wc\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaCurrent={this._ariaCurrent}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaLabel={this._ariaLabel}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_download={this._download}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_href={this._href}\n\t\t\t\t\t_icon={this._icon}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_listenAriaCurrent={this._listenAriaCurrent}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role=\"button\"\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_target={this._target}\n\t\t\t\t\t_targetDescription={this._targetDescription}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</kol-link-wc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t *\n\t * @deprecated will be removed in v2\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Gibt an, welchen aktuellen Auswahlstatus das interaktive Element der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n\t *\n\t * @deprecated use _listen-aria-current instead\n\t */\n\t@Prop() public _ariaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt an, ob durch das interaktive Element in der Komponente etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t *\n\t * @deprecated will be removed in v2\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob interaktive Element in der Komponente ausgewählt ist (z.B. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t *\n\t * @deprecated will be removed in v2\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Gibt an, welche Custom-Class übergeben werden soll, wenn _variant=\"custom\" gesetzt ist.\n\t */\n\t@Prop() public _customClass?: string;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t *\n\t * @deprecated Ein Link kann nicht deaktiviert werden, nutzen Sie den Button-Link stattdessen.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Teilt dem Browser mit, dass sich hinter dem Link eine Datei befindet. Setzt optional den Dateinamen.\n\t */\n\t@Prop() public _download?: boolean | string = false;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Gibt die Ziel-Url des Links an.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Listen on a aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.\n\t */\n\t@Prop() public _listenAriaCurrent?: AriaCurrent;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für den Link an.\n\t * @deprecated\n\t */\n\t@Prop() public _on?: LinkOnCallbacks;\n\n\t/**\n\t * Gibt die Rolle des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _role?: AlternativButtonLinkRole;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (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 * Gibt an wo der Link geöffnet werden soll.\n\t */\n\t@Prop() public _target?: LinkTarget;\n\n\t/**\n\t * Gibt die Beschreibung an, wenn der Link in einem anderen Programm geöffnet wird.\n\t */\n\t@Prop() public _targetDescription?: string = translate('kol-open-link-in-tab');\n\n\t/**\n\t * Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.\n\t */\n\t@Prop() public _tooltipAlign?: Align = 'right';\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriButtonVariant = 'normal';\n}\n"],"version":3}

package/dist/components/kol-link-group.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{w as watchString,a as watchValidator,e as watchBoolean}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$7}from"./component4.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$6}from"./component2.js";import{d as defineCustomElement$5}from"./shadow3.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$2}from"./component.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{list-style:none;margin:0;padding:0}nav.horizontal ul{display:flex;flex-wrap:wrap}nav.horizontal li{margin-left:1.25rem;margin-right:0.25rem}nav.horizontal li:first-child{margin-left:0}nav.horizontal li:last-child{margin-right:0}nav.vertical li{margin-left:1.75rem;margin-right:0.5rem}li.list-none{list-style-type:none !important;margin-left:0}",ListItem=e=>{const t=[];return e.links.map(((i,a)=>{t.push(h("li",{key:a,class:{ident:a>0&&"vertical"===e.orientation,"list-none":0===a&&"horizontal"===e.orientation},style:{listStyleType:e.listStyleType}},h("kol-link",Object.assign({},i))))})),t},KolLinkGroup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.isUl=!0,this._ariaLabel=void 0,this._listStyleType=void 0,this._heading=void 0,this._label=void 0,this._level=void 0,this._links=void 0,this._ordered=void 0,this._orientation="vertical",this.state={_label:"…",_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){var e;return h("nav",{"aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},"string"==typeof this.state._heading&&(null===(e=this.state._heading)||void 0===e?void 0:e.length)>0&&h("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),!1===this.isUl?h("ol",null,h(ListItem,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})):h("ul",null,h(ListItem,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateAriaLabel(e){this.validateLabel(e)}validateHeading(e){watchString(this,"_heading",e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateListStyleType(e){watchValidator(this,"_listStyleType",(e=>{switch(e){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),e)}validateLinks(e){watchNavLinks("KolLinkGroup",this,e)}validateOrdered(e){watchBoolean(this,"_ordered",e)}validateOrientation(e){watchValidator(this,"_orientation",(e=>"horizontal"===e||"vertical"===e),new Set(["Orientation {horizontal, vertical}"]),e,{defaultValue:"vertical"})}componentWillLoad(){this.validateHeading(this._heading),this.validateLabel(this._label||this._ariaLabel),this.validateLevel(this._level),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_listStyleType:["validateListStyleType"],_links:["validateLinks"],_ordered:["validateOrdered"],_orientation:["validateOrientation"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-link-group",{_ariaLabel:[1,"_aria-label"],_listStyleType:[1,"_list-style-type"],_heading:[1],_label:[1],_level:[2],_links:[1],_ordered:[4],_orientation:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link-group","kol-heading-wc","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-link-group":customElements.get(e)||customElements.define(e,KolLinkGroup$1);break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-icon":customElements.get(e)||defineCustomElement$6();break;case"kol-link":customElements.get(e)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$2()}}))}const KolLinkGroup=KolLinkGroup$1,defineCustomElement=defineCustomElement$1;export{KolLinkGroup,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{b as watchString,w as watchValidator,f as watchBoolean}from"./prop.validators.js";import{w as watchHeadingLevel,d as defineCustomElement$7}from"./component4.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$6}from"./component2.js";import{d as defineCustomElement$5}from"./shadow3.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$2}from"./component.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{list-style:none;margin:0;padding:0}nav.horizontal ul{display:flex;flex-wrap:wrap}nav.horizontal li{margin-left:1.25rem;margin-right:0.25rem}nav.horizontal li:first-child{margin-left:0}nav.horizontal li:last-child{margin-right:0}nav.vertical li{margin-left:1.75rem;margin-right:0.5rem}li.list-none{list-style-type:none !important;margin-left:0}",ListItem=e=>{const t=[];return e.links.map(((i,a)=>{t.push(h("li",{key:a,class:{ident:a>0&&"vertical"===e.orientation,"list-none":0===a&&"horizontal"===e.orientation},style:{listStyleType:e.listStyleType}},h("kol-link",Object.assign({},i))))})),t},KolLinkGroup$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.isUl=!0,this._ariaLabel=void 0,this._listStyleType=void 0,this._heading=void 0,this._label=void 0,this._level=void 0,this._links=void 0,this._ordered=void 0,this._orientation="vertical",this.state={_label:"…",_listStyleType:"disc",_links:[],_orientation:"vertical"}}render(){var e;return h("nav",{"aria-label":this.state._label,class:{vertical:"vertical"===this.state._orientation,horizontal:"horizontal"===this.state._orientation}},"string"==typeof this.state._heading&&(null===(e=this.state._heading)||void 0===e?void 0:e.length)>0&&h("kol-heading-wc",{_label:this.state._heading,_level:this.state._level}),!1===this.isUl?h("ol",null,h(ListItem,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})):h("ul",null,h(ListItem,{links:this.state._links,orientation:this.state._orientation,listStyleType:this.state._listStyleType})))}validateAriaLabel(e){this.validateLabel(e)}validateHeading(e){watchString(this,"_heading",e)}validateLabel(e){validateLabel(this,e)}validateLevel(e){watchHeadingLevel(this,e)}validateListStyleType(e){watchValidator(this,"_listStyleType",(e=>{switch(e){case"disc":case"circle":case"square":case"none":return this.isUl=!0,!0;case"decimal":case"decimal-leading-zero":case"lower-alpha":case"lower-latin":case"lower-greek":case"lower-roman":case"upper-alpha":case"upper-latin":case"upper-roman":return this.isUl=!1,!0;default:return!1}}),new Set(["https://www.w3schools.com/tags/tag_ol.asp"]),e)}validateLinks(e){watchNavLinks("KolLinkGroup",this,e)}validateOrdered(e){watchBoolean(this,"_ordered",e)}validateOrientation(e){watchValidator(this,"_orientation",(e=>"horizontal"===e||"vertical"===e),new Set(["Orientation {horizontal, vertical}"]),e,{defaultValue:"vertical"})}componentWillLoad(){this.validateHeading(this._heading),this.validateLabel(this._label||this._ariaLabel),this.validateLevel(this._level),this.validateListStyleType(this._listStyleType),this.validateLinks(this._links),this.validateOrientation(this._orientation)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_listStyleType:["validateListStyleType"],_links:["validateLinks"],_ordered:["validateOrdered"],_orientation:["validateOrientation"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-link-group",{_ariaLabel:[1,"_aria-label"],_listStyleType:[1,"_list-style-type"],_heading:[1],_label:[1],_level:[2],_links:[1],_ordered:[4],_orientation:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-link-group","kol-heading-wc","kol-icon","kol-link","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((e=>{switch(e){case"kol-link-group":customElements.get(e)||customElements.define(e,KolLinkGroup$1);break;case"kol-heading-wc":customElements.get(e)||defineCustomElement$7();break;case"kol-icon":customElements.get(e)||defineCustomElement$6();break;case"kol-link":customElements.get(e)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(e)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(e)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(e)||defineCustomElement$2()}}))}const KolLinkGroup=KolLinkGroup$1,defineCustomElement=defineCustomElement$1;export{KolLinkGroup,defineCustomElement};

package/dist/components/kol-modal.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{N as getKoliBri,a as watchValidator,l as featureHint,m as setState,w as watchString}from"./prop.validators.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.overlay{background-color:rgba(0, 0, 0, 0.33);display:flex;height:100%;inset:0;position:fixed;width:100%;z-index:100}.modal{margin:auto;max-height:100%;max-width:100%}",KolModal$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onKeyDown=t=>{t&&"Escape"===t.code&&(this._activeElement=null)},this._activeElement=void 0,this._ariaLabel=void 0,this._label=void 0,this._on=void 0,this._width="100%",this.state={_activeElement:null,_label:"…",_width:"100%"}}componentDidRender(){this.hostElement&&(this.state._activeElement?getKoliBri().Modal.openModal(this.hostElement,this.state._activeElement):getKoliBri().Modal.closeModal(this.hostElement))}disconnectedCallback(){this.hostElement&&getKoliBri().Modal.closeModal(this.hostElement)}render(){return h(Host,{ref:t=>{this.hostElement=t}},this.state._activeElement&&h("div",{class:"overlay"},h("div",{class:"modal",style:{width:this.state._width},"aria-label":this.state._label,"aria-modal":"true",role:"dialog",onKeyDown:this.onKeyDown,ref:t=>{t&&(t.setAttribute("tabindex","0"),setTimeout((()=>t.focus()),250))}},h("slot",null))))}validateActiveElement(t){watchValidator(this,"_activeElement",(t=>"object"==typeof t||null===t),new Set(["HTMLElement","null"]),t,{defaultValue:null})}validateAriaLabel(t){this.validateLabel(t)}validateLabel(t){validateLabel(this,t)}validateOn(t){if("object"==typeof t&&null!==t){featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onClose&&!0!==t.onClose||(e.onClose=t.onClose),setState(this,"_on",e)}}validateWidth(t){watchString(this,"_width",t,{defaultValue:"100%"})}componentWillLoad(){this.validateActiveElement(this._activeElement),this.validateLabel(this._label||this._ariaLabel),this.validateOn(this._on),this.validateWidth(this._width)}static get watchers(){return{_activeElement:["validateActiveElement"],_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-modal",{_activeElement:[1040],_ariaLabel:[1,"_aria-label"],_label:[1],_on:[16],_width:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-modal"].forEach((t=>{if("kol-modal"===t)customElements.get(t)||customElements.define(t,KolModal$1)}))}const KolModal=KolModal$1,defineCustomElement=defineCustomElement$1;export{KolModal,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{v as validateLabel}from"./label.js";import{O as getKoliBri,w as watchValidator,l as featureHint,m as setState,b as watchString}from"./prop.validators.js";const defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.overlay{background-color:rgba(0, 0, 0, 0.33);display:flex;height:100%;inset:0;position:fixed;width:100%;z-index:100}.modal{margin:auto;max-height:100%;max-width:100%}",KolModal$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onKeyDown=t=>{t&&"Escape"===t.code&&(this._activeElement=null)},this._activeElement=void 0,this._ariaLabel=void 0,this._label=void 0,this._on=void 0,this._width="100%",this.state={_activeElement:null,_label:"…",_width:"100%"}}componentDidRender(){this.hostElement&&(this.state._activeElement?getKoliBri().Modal.openModal(this.hostElement,this.state._activeElement):getKoliBri().Modal.closeModal(this.hostElement))}disconnectedCallback(){this.hostElement&&getKoliBri().Modal.closeModal(this.hostElement)}render(){return h(Host,{ref:t=>{this.hostElement=t}},this.state._activeElement&&h("div",{class:"overlay"},h("div",{class:"modal",style:{width:this.state._width},"aria-label":this.state._label,"aria-modal":"true",role:"dialog",onKeyDown:this.onKeyDown,ref:t=>{t&&(t.setAttribute("tabindex","0"),setTimeout((()=>t.focus()),250))}},h("slot",null))))}validateActiveElement(t){watchValidator(this,"_activeElement",(t=>"object"==typeof t||null===t),new Set(["HTMLElement","null"]),t,{defaultValue:null})}validateAriaLabel(t){this.validateLabel(t)}validateLabel(t){validateLabel(this,t)}validateOn(t){if("object"==typeof t&&null!==t){featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onClose&&!0!==t.onClose||(e.onClose=t.onClose),setState(this,"_on",e)}}validateWidth(t){watchString(this,"_width",t,{defaultValue:"100%"})}componentWillLoad(){this.validateActiveElement(this._activeElement),this.validateLabel(this._label||this._ariaLabel),this.validateOn(this._on),this.validateWidth(this._width)}static get watchers(){return{_activeElement:["validateActiveElement"],_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-modal",{_activeElement:[1040],_ariaLabel:[1,"_aria-label"],_label:[1],_on:[16],_width:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-modal"].forEach((t=>{if("kol-modal"===t)customElements.get(t)||customElements.define(t,KolModal$1)}))}const KolModal=KolModal$1,defineCustomElement=defineCustomElement$1;export{KolModal,defineCustomElement};

package/dist/components/kol-modal.js.map

@@ -1 +1 @@
-{"file":"kol-modal.js","mappings":"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","names":["KolModal"],"sources":["src/components/modal/style.css?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/component.tsx"],"sourcesContent":["@import url(../style.css);\n.overlay {\n\tbackground-color: rgba(0, 0, 0, 0.33);\n\tdisplay: flex;\n\theight: 100%;\n\tinset: 0;\n\tposition: fixed;\n\twidth: 100%;\n\tz-index: 100;\n}\n.modal {\n\tmargin: auto;\n\tmax-height: 100%;\n\tmax-width: 100%;\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { KoliBriModalEventCallbacks } from '../../types/modal';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { getKoliBri } from '../../utils/dev.utils';\nimport { setState, watchString, watchValidator } from '../../utils/prop.validators';\nimport { ModalService } from './service';\nimport { KoliBriModalAPI, KoliBriModalStates } from './types';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n * @deprecated use the native <dialog> instead\n */\n\n/**\n * @slot - Der Inhalt des Modals.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements KoliBriModalAPI {\n\tprivate hostElement?: HTMLElement;\n\n\tpublic componentDidRender(): void {\n\t\tif (this.hostElement /* SSR instanceof HTMLElement */) {\n\t\t\tif (this.state._activeElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t(getKoliBri().Modal as ModalService).openModal(this.hostElement, this.state._activeElement);\n\t\t\t} else {\n\t\t\t\t(getKoliBri().Modal as ModalService).closeModal(this.hostElement);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tif (this.hostElement /* SSR instanceof HTMLElement */) {\n\t\t\t(getKoliBri().Modal as ModalService).closeModal(this.hostElement);\n\t\t}\n\t}\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tif (event && event.code === 'Escape') {\n\t\t\tthis._activeElement = null;\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.hostElement = el as HTMLElement;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._activeElement /* SSR instanceof HTMLElement */ && (\n\t\t\t\t\t<div class=\"overlay\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"modal\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: this.state._width,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label={this.state._label}\n\t\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\tonKeyDown={this.onKeyDown}\n\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t\t\t\t\tel.setAttribute('tabindex', '0');\n\t\t\t\t\t\t\t\t\tsetTimeout(() => el.focus(), 250);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt die Referenz auf das auslösende HTML-Element an, wodurch das Modal geöffnet wurde.\n\t */\n\t@Prop({ mutable: true }) public _activeElement?: HTMLElement | null;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t *  @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Modals an.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Setzt die Breite des Modals. (max-width: 100%).\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t@State() public state: KoliBriModalStates = {\n\t\t_activeElement: null,\n\t\t_label: '…', // ⚠ required\n\t\t_width: '100%',\n\t};\n\n\t@Watch('_activeElement')\n\tpublic validateActiveElement(value?: HTMLElement | null): void {\n\t\twatchValidator(this, '_activeElement', (value): boolean => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {\n\t\t\tdefaultValue: null,\n\t\t});\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\twatchString(this, '_width', value, {\n\t\t\tdefaultValue: '100%',\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActiveElement(this._activeElement);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t}\n}\n"],"version":3}
+{"file":"kol-modal.js","mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,61BAA61B;;MC0Bx2BA,UAAQ;;;;;IAmBH,cAAS,GAAG,CAAC,KAAoB;MACjD,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;QACrC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;OAC3B;KACD,CAAC;;;;;kBA4D+B,MAAM;iBAEK;MAC3C,cAAc,EAAE,IAAI;MACpB,MAAM,EAAE,GAAG;MACX,MAAM,EAAE,MAAM;KACd;;EAtFM,kBAAkB;IACxB,IAAI,IAAI,CAAC,WAAW,EAAmC;MACtD,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,EAAmC;QAC9D,UAAU,EAAE,CAAC,KAAsB,CAAC,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;OAC5F;WAAM;QACL,UAAU,EAAE,CAAC,KAAsB,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;OAClE;KACD;GACD;EAEM,oBAAoB;IAC1B,IAAI,IAAI,CAAC,WAAW,EAAmC;MACrD,UAAU,EAAE,CAAC,KAAsB,CAAC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KAClE;GACD;EAQM,MAAM;IACZ,QACC,EAAC,IAAI,IACJ,GAAG,EAAE,CAAC,EAAE;QACP,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC;OACrC,IAEA,IAAI,CAAC,KAAK,CAAC,cAAc,KACzB,WAAK,KAAK,EAAC,SAAS,IACnB,WACC,KAAK,EAAC,OAAO,EACb,KAAK,EAAE;QACN,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM;OACxB,gBACW,IAAI,CAAC,KAAK,CAAC,MAAM,gBAClB,MAAM,EACjB,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,EAAE;QACP,IAAI,EAAE,EAAmC;UACxC,EAAE,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;UACjC,UAAU,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,GAAG,CAAC,CAAC;SAClC;OACD,IAED,eAAQ,CACH,CACD,CACN,CACK,EACN;GACF;EAoCM,qBAAqB,CAAC,KAA0B;IACtD,cAAc,CAAC,IAAI,EAAE,gBAAgB,EAAE,CAAC,KAAK,KAAc,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE,IAAI,GAAG,CAAC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE;MAChJ,YAAY,EAAE,IAAI;KAClB,CAAC,CAAC;GACH;EAMM,iBAAiB,CAAC,KAAc;IACtC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;GAC1B;EAGM,aAAa,CAAC,KAAqB;IACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;GAC3B;EAGM,UAAU,CAAC,KAAkC;IACnD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;MAChD,WAAW,CAAC,yEAAyE,CAAC,CAAC;MACvF,MAAM,SAAS,GAA+B,EAAE,CAAC;MACjD,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,UAAU,IAAI,KAAK,CAAC,OAAO,KAAK,IAAI,EAAE;QAClE,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;OAClC;MACD,QAAQ,CAA6B,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;KAC7D;GACD;EAGM,aAAa,CAAC,KAAc;IAClC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;MAClC,YAAY,EAAE,MAAM;KACpB,CAAC,CAAC;GACH;EAEM,iBAAiB;IACvB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAChD,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;IACnD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GAChC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolModal"],"sources":["src/components/modal/style.css?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/component.tsx"],"sourcesContent":["@import url(../style.css);\n.overlay {\n\tbackground-color: rgba(0, 0, 0, 0.33);\n\tdisplay: flex;\n\theight: 100%;\n\tinset: 0;\n\tposition: fixed;\n\twidth: 100%;\n\tz-index: 100;\n}\n.modal {\n\tmargin: auto;\n\tmax-height: 100%;\n\tmax-width: 100%;\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { KoliBriModalEventCallbacks } from '../../types/modal';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { featureHint } from '../../utils/a11y.tipps';\nimport { getKoliBri } from '../../utils/dev.utils';\nimport { setState, watchString, watchValidator } from '../../utils/prop.validators';\nimport { ModalService } from './service';\nimport { KoliBriModalAPI, KoliBriModalStates } from './types';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n * @deprecated use the native <dialog> instead\n */\n\n/**\n * @slot - Der Inhalt des Modals.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements KoliBriModalAPI {\n\tprivate hostElement?: HTMLElement;\n\n\tpublic componentDidRender(): void {\n\t\tif (this.hostElement /* SSR instanceof HTMLElement */) {\n\t\t\tif (this.state._activeElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t(getKoliBri().Modal as ModalService).openModal(this.hostElement, this.state._activeElement);\n\t\t\t} else {\n\t\t\t\t(getKoliBri().Modal as ModalService).closeModal(this.hostElement);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tif (this.hostElement /* SSR instanceof HTMLElement */) {\n\t\t\t(getKoliBri().Modal as ModalService).closeModal(this.hostElement);\n\t\t}\n\t}\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tif (event && event.code === 'Escape') {\n\t\t\tthis._activeElement = null;\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.hostElement = el as HTMLElement;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._activeElement /* SSR instanceof HTMLElement */ && (\n\t\t\t\t\t<div class=\"overlay\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"modal\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: this.state._width,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label={this.state._label}\n\t\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\tonKeyDown={this.onKeyDown}\n\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t\t\t\t\tel.setAttribute('tabindex', '0');\n\t\t\t\t\t\t\t\t\tsetTimeout(() => el.focus(), 250);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt die Referenz auf das auslösende HTML-Element an, wodurch das Modal geöffnet wurde.\n\t */\n\t@Prop({ mutable: true }) public _activeElement?: HTMLElement | null;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Modals an.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Setzt die Breite des Modals. (max-width: 100%).\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t@State() public state: KoliBriModalStates = {\n\t\t_activeElement: null,\n\t\t_label: '…', // ⚠ required\n\t\t_width: '100%',\n\t};\n\n\t@Watch('_activeElement')\n\tpublic validateActiveElement(value?: HTMLElement | null): void {\n\t\twatchValidator(this, '_activeElement', (value): boolean => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {\n\t\t\tdefaultValue: null,\n\t\t});\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\twatchString(this, '_width', value, {\n\t\t\tdefaultValue: '100%',\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActiveElement(this._activeElement);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t}\n}\n"],"version":3}

package/dist/components/kol-nav.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{e as watchBoolean,x as devWarning,a as watchValidator,E as a11yHintLabelingLandmarks,d as devHint}from"./prop.validators.js";import{v as validateLabel}from"./label.js";import{w as watchNavLinks}from"./validation.js";import{d as defineCustomElement$8}from"./shadow4.js";import{d as defineCustomElement$7}from"./component11.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$2}from"./component.js";const validateCollapsible=(t,a)=>{watchBoolean(t,"_collapsible",a)},validateCompact=(t,a)=>{watchBoolean(t,"_compact",a)},validateHasCompactButton=(t,a)=>{watchBoolean(t,"_hasCompactButton",a)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>div{display:grid;place-items:center}nav{width:100%}.list{display:flex;list-style:none;margin:0;padding:0}.list.vertical{flex-direction:column}.entry{display:flex}.entry kol-button-wc:first-child,.entry kol-link-wc,.entry kol-span-wc{flex-grow:1}.entry kol-span-wc{justify-items:start}",UNIQUE_ARIA_LABEL=new Set;function addAriaLabel(t){UNIQUE_ARIA_LABEL.has(t)?console.error(`There already is a kol-nav with the label "${t}"`):UNIQUE_ARIA_LABEL.add(t)}function removeAriaLabel(t){UNIQUE_ARIA_LABEL.delete(t)}const KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onClick=t=>{t._active=!t._active,this.state=Object.assign({},this.state)},this.hasActiveChild=t=>!!(Array.isArray(t._children)&&t._children.length>0)&&t._children.some(this.hasActiveChild),this.linkList=t=>h("ul",{class:"list "+(0===t.deep&&"horizontal"===t.orientation?" horizontal":" vertical"),"data-deep":t.deep},t.links.map(((a,e)=>this.li(t.collapsible,t.compact,t.deep,e,a,t.orientation)))),this._ariaCurrentValue=!1,this._ariaLabel=void 0,this._collapsible=!0,this._compact=!1,this._hasCompactButton=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this._variant="primary",this.state={_ariaCurrentValue:!1,_label:"…",_collapsible:!0,_hasCompactButton:!1,_links:[],_orientation:"vertical",_variant:"primary"}}entry(t,a,e,i,n){return h("div",{class:"entry"},h("kol-button-link-text-switch",{"_has-children":e,"_hide-label":a,_link:i,_selected:n}),e?this.expandButton(t,i,n):"")}expandButton(t,a,e){return h("kol-button-wc",{class:"expand-button",_ariaExpanded:e,_disabled:!t,_icon:"codicon codicon-"+(e?"remove":"add"),_hideLabel:!0,_label:`Untermenü zu ${a._label} ${e?"schließen":"öffnen"}`,_on:{onClick:()=>this.onClick(a)}})}li(t,a,e,i,n,l){const o=Array.isArray(n._children)&&n._children.length>0,s=!!n._active,r=o&&!!n._active;return h("li",{class:{expanded:r,selected:s,"has-children":o},key:i},this.entry(t,a,o,n,s),o&&s?h(this.linkList,{collapsible:t,compact:a,deep:e+1,links:n._children||[],orientation:l}):"")}render(){let t=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(t=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const a=!0===this.state._collapsible,e=!0===this.state._compact,i=this.state._orientation;return h(Host,null,h("div",{class:{[i]:!0,[this.state._variant]:!0}},h("nav",{"aria-label":this.state._label,id:"nav"},h(this.linkList,{collapsible:a,compact:e,deep:0,links:this.state._links,orientation:i})),t&&h("div",{class:"mt-2 w-full compact"},h("kol-button",{_ariaControls:"nav",_ariaExpanded:!e,_icon:e?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(e?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_compact:!1===this.state._compact})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateAriaCurrentValue(t){watchValidator(this,"_ariaCurrentValue",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateAriaLabel(t){this.validateLabel(t)}validateCollapsible(t){validateCollapsible(this,t)}validateCompact(t){validateCompact(this,t)}validateHasCompactButton(t){validateHasCompactButton(this,t)}validateLabel(t){removeAriaLabel(this.state._label),validateLabel(this,t),a11yHintLabelingLandmarks(t),addAriaLabel(this.state._label)}validateLinks(t){watchNavLinks("KolNav",this,t),devHint("[KolNav] Die Navigationsstruktur wird noch nicht rekursiv validiert.")}validateOrientation(t){watchValidator(this,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}validateVariant(t){watchValidator(this,"_variant",(t=>"primary"===t||"secondary"===t),new Set(["KoliBriNavVariant {primary, secondary}"]),t,{defaultValue:"primary"})}componentWillLoad(){this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateCollapsible(this._collapsible),this.validateCompact(this._compact),this.validateHasCompactButton(this._hasCompactButton),this.validateLabel(this._label||this._ariaLabel),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.validateVariant(this._variant)}disconnectedCallback(){removeAriaLabel(this.state._label)}static get watchers(){return{_ariaCurrentValue:["validateAriaCurrentValue"],_ariaLabel:["validateAriaLabel"],_collapsible:["validateCollapsible"],_compact:["validateCompact"],_hasCompactButton:["validateHasCompactButton"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-nav",{_ariaCurrentValue:[8,"_aria-current-value"],_ariaLabel:[1,"_aria-label"],_collapsible:[4],_compact:[4],_hasCompactButton:[4,"_has-compact-button"],_label:[1],_links:[1],_orientation:[1],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav","kol-button","kol-button-link-text-switch","kol-button-wc","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-nav":customElements.get(t)||customElements.define(t,KolNav$1);break;case"kol-button":customElements.get(t)||defineCustomElement$8();break;case"kol-button-link-text-switch":customElements.get(t)||defineCustomElement$7();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as translate}from"./i18n.js";import{f as watchBoolean,x as devWarning,w as watchValidator,E as a11yHintLabelingLandmarks,d as devHint}from"./prop.validators.js";import{v as validateLabel}from"./label.js";import{w as watchNavLinks}from"./validation.js";import{v as validateHideLabel,d as defineCustomElement$3}from"./component3.js";import{d as defineCustomElement$8}from"./shadow4.js";import{d as defineCustomElement$7}from"./component11.js";import{d as defineCustomElement$6}from"./component5.js";import{d as defineCustomElement$5}from"./component2.js";import{d as defineCustomElement$4}from"./component9.js";import{d as defineCustomElement$2}from"./component.js";const validateCollapsible=(t,e)=>{watchBoolean(t,"_collapsible",e)},validateHasCompactButton=(t,e)=>{watchBoolean(t,"_hasCompactButton",e)},defaultStyleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host>div{display:grid;place-items:center}nav{width:100%}.list{display:flex;list-style:none;margin:0;padding:0}.list.vertical{flex-direction:column}.entry{display:flex}.entry kol-button-wc:first-child,.entry kol-link-wc,.entry kol-span-wc{flex-grow:1}.entry kol-span-wc{justify-items:start}",UNIQUE_ARIA_LABEL=new Set;function addAriaLabel(t){UNIQUE_ARIA_LABEL.has(t)?console.error(`There already is a kol-nav with the label "${t}"`):UNIQUE_ARIA_LABEL.add(t)}function removeAriaLabel(t){UNIQUE_ARIA_LABEL.delete(t)}const KolNav$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onClick=t=>{t._active=!t._active,this.state=Object.assign({},this.state)},this.hasActiveChild=t=>!!(Array.isArray(t._children)&&t._children.length>0)&&t._children.some(this.hasActiveChild),this.linkList=t=>h("ul",{class:"list "+(0===t.deep&&"horizontal"===t.orientation?" horizontal":" vertical"),"data-deep":t.deep},t.links.map(((e,a)=>this.li(t.collapsible,t.hideLabel,t.deep,a,e,t.orientation)))),this._ariaCurrentValue=!1,this._ariaLabel=void 0,this._collapsible=!0,this._compact=!1,this._hasCompactButton=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this._variant="primary",this.state={_ariaCurrentValue:!1,_collapsible:!0,_hasCompactButton:!1,_hideLabel:!1,_label:"…",_links:[],_orientation:"vertical",_variant:"primary"}}entry(t,e,a,i,n){return h("div",{class:"entry"},h("kol-button-link-text-switch",{_link:Object.assign(Object.assign({},i),{_hideLabel:e})}),a?this.expandButton(t,i,n):"")}expandButton(t,e,a){return h("kol-button-wc",{class:"expand-button",_ariaExpanded:a,_disabled:!t,_icon:"codicon codicon-"+(a?"remove":"add"),_hideLabel:!0,_label:`Untermenü zu ${e._label} ${a?"schließen":"öffnen"}`,_on:{onClick:()=>this.onClick(e)}})}li(t,e,a,i,n,l){const o=!!n._active,s=Array.isArray(n._children)&&n._children.length>0,r=s&&o;return h("li",{class:{active:o,expanded:r,"has-children":s,selected:r},key:i},this.entry(t,e,s,n,o),r?h(this.linkList,{collapsible:t,hideLabel:e,deep:a+1,links:n._children||[],orientation:l}):"")}render(){let t=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(t=!1,devWarning("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const e=!0===this.state._collapsible,a=!0===this.state._hideLabel,i=this.state._orientation;return h(Host,null,h("div",{class:{[i]:!0,[this.state._variant]:!0}},h("nav",{"aria-label":this.state._label,id:"nav"},h(this.linkList,{collapsible:e,hideLabel:a,deep:0,links:this.state._links,orientation:i})),t&&h("div",{class:"mt-2 w-full compact"},h("kol-button",{_ariaControls:"nav",_ariaExpanded:!a,_icon:a?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:translate(a?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateAriaCurrentValue(t){watchValidator(this,"_ariaCurrentValue",(t=>!0===t||"date"===t||"location"===t||"page"===t||"step"===t||"time"===t),new Set(["boolean","String {data, location, page, step, time}"]),t)}validateAriaLabel(t){this.validateLabel(t)}validateCollapsible(t){validateCollapsible(this,t)}validateCompact(t){this.validateHideLabel(t)}validateHasCompactButton(t){validateHasCompactButton(this,t)}validateHideLabel(t){validateHideLabel(this,t)}validateLabel(t){removeAriaLabel(this.state._label),validateLabel(this,t),a11yHintLabelingLandmarks(t),addAriaLabel(this.state._label)}validateLinks(t){watchNavLinks("KolNav",this,t),devHint("[KolNav] Die Navigationsstruktur wird noch nicht rekursiv validiert.")}validateOrientation(t){watchValidator(this,"_orientation",(t=>"horizontal"===t||"vertical"===t),new Set(["Orientation {horizontal, vertical}"]),t,{defaultValue:"vertical"})}validateVariant(t){watchValidator(this,"_variant",(t=>"primary"===t||"secondary"===t),new Set(["KoliBriNavVariant {primary, secondary}"]),t,{defaultValue:"primary"})}componentWillLoad(){this.validateAriaCurrentValue(this._ariaCurrentValue),this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel||this._compact),this.validateHasCompactButton(this._hasCompactButton),this.validateLabel(this._label||this._ariaLabel),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.validateVariant(this._variant)}disconnectedCallback(){removeAriaLabel(this.state._label)}static get watchers(){return{_ariaCurrentValue:["validateAriaCurrentValue"],_ariaLabel:["validateAriaLabel"],_collapsible:["validateCollapsible"],_compact:["validateCompact"],_hasCompactButton:["validateHasCompactButton"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"],_variant:["validateVariant"]}}static get style(){return{default:defaultStyleCss}}},[33,"kol-nav",{_ariaCurrentValue:[8,"_aria-current-value"],_ariaLabel:[1,"_aria-label"],_collapsible:[4],_compact:[4],_hasCompactButton:[4,"_has-compact-button"],_hideLabel:[4,"_hide-label"],_label:[1],_links:[1],_orientation:[1],_variant:[1],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-nav","kol-button","kol-button-link-text-switch","kol-button-wc","kol-icon","kol-link-wc","kol-span-wc","kol-tooltip"].forEach((t=>{switch(t){case"kol-nav":customElements.get(t)||customElements.define(t,KolNav$1);break;case"kol-button":customElements.get(t)||defineCustomElement$8();break;case"kol-button-link-text-switch":customElements.get(t)||defineCustomElement$7();break;case"kol-button-wc":customElements.get(t)||defineCustomElement$6();break;case"kol-icon":customElements.get(t)||defineCustomElement$5();break;case"kol-link-wc":customElements.get(t)||defineCustomElement$4();break;case"kol-span-wc":customElements.get(t)||defineCustomElement$3();break;case"kol-tooltip":customElements.get(t)||defineCustomElement$2()}}))}const KolNav=KolNav$1,defineCustomElement=defineCustomElement$1;export{KolNav,defineCustomElement};

package/dist/components/kol-nav.js.map

@@ -1 +1 @@
-{"file":"kol-nav.js","mappings":"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","names":["KolNav"],"sources":["src/types/props/collapsible.ts","src/types/props/compact.ts","src/types/props/has-compact-button.ts","src/components/nav/style.css?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Wenn auf false gesetzt können Knoten in der Navigation nicht zugeklappt werden.\n */\n/** en\n * If set to false navigation nodes cannot be collapsed.\n */\nexport type PropCollapsible = {\n\tcollapsible: boolean;\n};\n\n/* validator */\nexport const validateCollapsible = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Macht die Navigation kompakt.\n */\n/** en\n * Makes the navigation compact.\n */\nexport type PropCompact = {\n\tcompact: boolean;\n};\n\n/* validator */\nexport const validateCompact = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_compact', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Erzeugt eine Schaltfläche, die _collapsible umschaltet. Nur verfügbar bei _orientation=\"vertical\".\n */\n/** en\n * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n */\nexport type PropHasCompactButton = {\n\thasCompactButton: boolean;\n};\n\n/* validator */\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","@import url(../style.css);\n:host > div {\n\tdisplay: grid;\n\tplace-items: center;\n}\nnav {\n\twidth: 100%;\n}\n.list {\n\tdisplay: flex;\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n.list.vertical {\n\tflex-direction: column;\n}\n.entry {\n\tdisplay: flex;\n}\n.entry kol-button-wc:first-child,\n.entry kol-link-wc,\n.entry kol-span-wc {\n\tflex-grow: 1;\n}\n.entry kol-span-wc {\n\tjustify-items: start;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { ButtonOrLinkOrTextWithChildrenProps, ButtonWithChildrenProps } from '../../types/button-link-text';\nimport { Stringified } from '../../types/common';\nimport { Orientation } from '../../types/orientation';\nimport { AriaCurrent } from '../../types/props/aria-current';\nimport { validateCollapsible } from '../../types/props/collapsible';\nimport { validateCompact } from '../../types/props/compact';\nimport { validateHasCompactButton } from '../../types/props/has-compact-button';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { a11yHintLabelingLandmarks, devHint, devWarning } from '../../utils/a11y.tipps';\nimport { watchValidator } from '../../utils/prop.validators';\nimport { KoliBriNavAPI, KoliBriNavStates } from './types';\nimport { watchNavLinks } from './validation';\n\n/**\n * @deprecated\n */\nexport type KoliBriNavVariant = 'primary' | 'secondary';\n\n/**\n * There can be several navigations on one page (e.g. main navigation, subnavigation, breadcrumbs).\n * The navigations must be clearly named for accessibility reasons. To ensure this, all Aria labels are\n * stored in an set and checked for uniqueness.\n */\nconst UNIQUE_ARIA_LABEL: Set<string> = new Set();\nfunction addAriaLabel(ariaLabel: string): void {\n\tif (UNIQUE_ARIA_LABEL.has(ariaLabel)) {\n\t\tconsole.error(`There already is a kol-nav with the label \"${ariaLabel}\"`);\n\t} else {\n\t\tUNIQUE_ARIA_LABEL.add(ariaLabel);\n\t}\n}\nfunction removeAriaLabel(ariaLabel: string): void {\n\tUNIQUE_ARIA_LABEL.delete(ariaLabel);\n}\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements KoliBriNavAPI {\n\tprivate readonly onClick = (link: ButtonOrLinkOrTextWithChildrenProps): void => {\n\t\tlink._active = !link._active;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t};\n\t};\n\n\tprivate readonly hasActiveChild = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\t\tif (Array.isArray(link._children) && link._children.length > 0) {\n\t\t\treturn link._children.some(this.hasActiveChild);\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tprivate entry(collapsible: boolean, compact: boolean, hasChildren: boolean, link: ButtonOrLinkOrTextWithChildrenProps, selected: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<div class=\"entry\">\n\t\t\t\t<kol-button-link-text-switch _has-children={hasChildren} _hide-label={compact} _link={link} _selected={selected} />\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, link as ButtonWithChildrenProps, selected) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, selected: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button-wc\n\t\t\t\tclass=\"expand-button\"\n\t\t\t\t_ariaExpanded={selected}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icon={'codicon codicon-' + (selected ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`Untermenü zu ${link._label} ${selected ? 'schließen' : 'öffnen'}`}\n\t\t\t\t_on={{ onClick: () => this.onClick(link) }}\n\t\t\t></kol-button-wc>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\tcompact: boolean,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: Orientation\n\t): JSX.Element {\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst selected = !!link._active;\n\t\tconst expanded = hasChildren && !!link._active;\n\t\treturn (\n\t\t\t<li class={{ expanded, selected, 'has-children': hasChildren }} key={index}>\n\t\t\t\t{this.entry(collapsible, compact, hasChildren, link, selected)}\n\t\t\t\t{hasChildren && selected ? (\n\t\t\t\t\t<this.linkList collapsible={collapsible} compact={compact} deep={deep + 1} links={link._children || []} orientation={orientation} />\n\t\t\t\t) : (\n\t\t\t\t\t''\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\tcompact: boolean;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: Orientation;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul class={`list ${props.deep === 0 && props.orientation === 'horizontal' ? ' horizontal' : ' vertical'}`} data-deep={props.deep}>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.compact, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst compact = this.state._compact === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[orientation]: true,\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<nav aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t\t<this.linkList collapsible={collapsible} compact={compact} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t\t</nav>\n\t\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t\t<div class=\"mt-2 w-full compact\">\n\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t\t_ariaExpanded={!compact}\n\t\t\t\t\t\t\t\t_icon={compact ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t_label={translate(compact ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t\t_compact: this.state._compact === false,\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}}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Wert von aria-current an, der bei dem aktuellen Kontext innerhalb der Navigation verwendet werden soll.\n\t */\n\t@Prop() public _ariaCurrentValue: AriaCurrent = false;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t *  @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Knoten in der Navigation zusammengeklappt werden können. Ist standardmäßig aktiv.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Gibt an, ob die Navigation kompakt angezeigt wird.\n\t */\n\t@Prop() public _compact?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.\n\t * @deprecated Version 2\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t */\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/**\n\t * Gibt die horizontale oder vertikale Ausrichtung der Komponente an.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t *\n\t * @deprecated This property is deprecated and will be removed in the next major version.\n\t */\n\t@Prop() public _variant?: KoliBriNavVariant = 'primary';\n\n\t@State() public state: KoliBriNavStates = {\n\t\t_ariaCurrentValue: false,\n\t\t_label: '…', // ⚠ required\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t\t_variant: 'primary',\n\t};\n\n\t@Watch('_ariaCurrentValue')\n\tpublic validateAriaCurrentValue(value?: AriaCurrent): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_ariaCurrentValue',\n\t\t\t(value) => value === true || value === 'date' || value === 'location' || value === 'page' || value === 'step' || value === 'time',\n\t\t\tnew Set(['boolean', 'String {data, location, page, step, time}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: boolean): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_compact')\n\tpublic validateCompact(value?: boolean): void {\n\t\tvalidateCompact(this, value);\n\t}\n\n\t/**\n\t * @deprecated Version 2\n\t */\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tremoveAriaLabel(this.state._label); // remove the current\n\t\tvalidateLabel(this, value);\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddAriaLabel(this.state._label); // add the new; not value, because that could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] Die Navigationsstruktur wird noch nicht rekursiv validiert.`);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t}\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriNavVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'primary' || value === 'secondary', new Set(['KoliBriNavVariant {primary, secondary}']), value, {\n\t\t\tdefaultValue: 'primary',\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaCurrentValue(this._ariaCurrentValue);\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateCompact(this._compact);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveAriaLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: '1 Navigationspunkt', _href: '#abc', _icon: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//     { _label: '2 Navigationspunkt', _href: '#abc', _icon: 'codicon codicon-folder-closed' },\n//     {\n//       _active: true,\n//       _label: '3 Navigationspunkt',\n//       _href: '#abc',\n//       _icon: 'codicon codicon-folder-closed',\n//       _children: [\n//         { _label: '3.1 Navigationspunkt', _href: '#abc', _icon: 'codicon codicon-folder-closed' },\n//         { _label: '3.2 Navigationspunkt', _href: '#abc', _icon: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//         {\n//           _active: true,\n//           _label: '3.3 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n//             { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         {\n//           _label: '3.4 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n//             { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         { _label: '3.5 Navigationspunkt', _href: '#abc' },\n//       ],\n//     },\n//     { _label: '4 Navigationspunkt', _href: '#abc' },\n//   ])\n// );\n"],"version":3}
+{"file":"kol-nav.js","mappings":"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","names":["KolNav"],"sources":["src/types/props/collapsible.ts","src/types/props/has-compact-button.ts","src/components/nav/style.css?tag=kol-nav&mode=default&encapsulation=shadow","src/components/nav/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Wenn auf false gesetzt können Knoten in der Navigation nicht zugeklappt werden.\n */\n/** en\n * If set to false navigation nodes cannot be collapsed.\n */\nexport type PropCollapsible = {\n\tcollapsible: boolean;\n};\n\n/* validator */\nexport const validateCollapsible = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_collapsible', value);\n};\n","import { Generic } from '@a11y-ui/core';\n\nimport { watchBoolean } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Erzeugt eine Schaltfläche, die _collapsible umschaltet. Nur verfügbar bei _orientation=\"vertical\".\n */\n/** en\n * Creates a button below the navigation, that toggles _collapsible. Only available for _orientation=\"vertical\".\n */\nexport type PropHasCompactButton = {\n\thasCompactButton: boolean;\n};\n\n/* validator */\nexport const validateHasCompactButton = (component: Generic.Element.Component, value?: boolean): void => {\n\twatchBoolean(component, '_hasCompactButton', value);\n};\n","@import url(../style.css);\n:host > div {\n\tdisplay: grid;\n\tplace-items: center;\n}\nnav {\n\twidth: 100%;\n}\n.list {\n\tdisplay: flex;\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 0;\n}\n.list.vertical {\n\tflex-direction: column;\n}\n.entry {\n\tdisplay: flex;\n}\n.entry kol-button-wc:first-child,\n.entry kol-link-wc,\n.entry kol-span-wc {\n\tflex-grow: 1;\n}\n.entry kol-span-wc {\n\tjustify-items: start;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { ButtonOrLinkOrTextWithChildrenProps, ButtonWithChildrenProps } from '../../types/button-link-text';\nimport { Stringified } from '../../types/common';\nimport { Orientation } from '../../types/orientation';\nimport { AriaCurrent } from '../../types/props/aria-current';\nimport { validateCollapsible } from '../../types/props/collapsible';\nimport { validateHasCompactButton } from '../../types/props/has-compact-button';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { a11yHintLabelingLandmarks, devHint, devWarning } from '../../utils/a11y.tipps';\nimport { watchValidator } from '../../utils/prop.validators';\nimport { KoliBriNavAPI, KoliBriNavStates } from './types';\nimport { watchNavLinks } from './validation';\nimport { HideLabelPropType, validateHideLabel } from '../../types/props/hide-label';\n\n/**\n * @deprecated Removed in v2\n */\nexport type KoliBriNavVariant = 'primary' | 'secondary';\n\n/**\n * There can be several navigations on one page (e.g. main navigation, subnavigation, breadcrumbs).\n * The navigations must be clearly named for accessibility reasons. To ensure this, all Aria labels are\n * stored in a set and checked for uniqueness.\n */\nconst UNIQUE_ARIA_LABEL: Set<string> = new Set();\nfunction addAriaLabel(ariaLabel: string): void {\n\tif (UNIQUE_ARIA_LABEL.has(ariaLabel)) {\n\t\tconsole.error(`There already is a kol-nav with the label \"${ariaLabel}\"`);\n\t} else {\n\t\tUNIQUE_ARIA_LABEL.add(ariaLabel);\n\t}\n}\nfunction removeAriaLabel(ariaLabel: string): void {\n\tUNIQUE_ARIA_LABEL.delete(ariaLabel);\n}\n\nconst linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\tif (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {\n\t\tif (Array.isArray(link._children)) {\n\t\t\treturn linksValidator(link._children);\n\t\t}\n\t\treturn false;\n\t}\n\treturn true;\n};\n\nconst linksValidator = (links: ButtonOrLinkOrTextWithChildrenProps[]): boolean => {\n\tif (Array.isArray(links)) {\n\t\treturn links.find(linkValidator) !== undefined;\n\t}\n\treturn true;\n};\n\n@Component({\n\ttag: 'kol-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolNav implements KoliBriNavAPI {\n\tprivate readonly onClick = (link: ButtonOrLinkOrTextWithChildrenProps): void => {\n\t\tlink._active = !link._active;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t};\n\t};\n\n\tprivate readonly hasActiveChild = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {\n\t\tif (Array.isArray(link._children) && link._children.length > 0) {\n\t\t\treturn link._children.some(this.hasActiveChild);\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tprivate entry(collapsible: boolean, hideLabel: boolean, hasChildren: boolean, link: ButtonOrLinkOrTextWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<div class=\"entry\">\n\t\t\t\t<kol-button-link-text-switch\n\t\t\t\t\t_link={{\n\t\t\t\t\t\t...link,\n\t\t\t\t\t\t_hideLabel: hideLabel,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t{hasChildren ? this.expandButton(collapsible, link as ButtonWithChildrenProps, expanded) : ''}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {\n\t\treturn (\n\t\t\t<kol-button-wc\n\t\t\t\tclass=\"expand-button\"\n\t\t\t\t_ariaExpanded={expanded}\n\t\t\t\t_disabled={!collapsible}\n\t\t\t\t_icon={'codicon codicon-' + (expanded ? 'remove' : 'add')}\n\t\t\t\t_hideLabel\n\t\t\t\t_label={`Untermenü zu ${link._label} ${expanded ? 'schließen' : 'öffnen'}`}\n\t\t\t\t_on={{ onClick: () => this.onClick(link) }}\n\t\t\t></kol-button-wc>\n\t\t);\n\t}\n\n\tprivate li(\n\t\tcollapsible: boolean,\n\t\thideLabel: boolean,\n\t\tdeep: number,\n\t\tindex: number,\n\t\tlink: ButtonOrLinkOrTextWithChildrenProps,\n\t\torientation: Orientation\n\t): JSX.Element {\n\t\tconst active = !!link._active;\n\t\tconst hasChildren = Array.isArray(link._children) && link._children.length > 0;\n\t\tconst expanded = hasChildren && active;\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={{\n\t\t\t\t\tactive,\n\t\t\t\t\texpanded,\n\t\t\t\t\t'has-children': hasChildren,\n\t\t\t\t\tselected: expanded, // TODO: remove in v2\n\t\t\t\t}}\n\t\t\t\tkey={index}\n\t\t\t>\n\t\t\t\t{this.entry(collapsible, hideLabel, hasChildren, link, active)}\n\t\t\t\t{expanded ? (\n\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={deep + 1} links={link._children || []} orientation={orientation} />\n\t\t\t\t) : (\n\t\t\t\t\t''\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n\n\tprivate linkList = (props: {\n\t\tcollapsible: boolean;\n\t\thideLabel: boolean;\n\t\tdeep: number;\n\t\tlinks: ButtonOrLinkOrTextWithChildrenProps[];\n\t\torientation: Orientation;\n\t}): JSX.Element => {\n\t\treturn (\n\t\t\t<ul class={`list ${props.deep === 0 && props.orientation === 'horizontal' ? ' horizontal' : ' vertical'}`} data-deep={props.deep}>\n\t\t\t\t{props.links.map((link, index: number) => {\n\t\t\t\t\treturn this.li(props.collapsible, props.hideLabel, props.deep, index, link, props.orientation);\n\t\t\t\t})}\n\t\t\t</ul>\n\t\t);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tlet hasCompactButton = this.state._hasCompactButton;\n\t\tif (this.state._orientation === 'horizontal' && this.state._hasCompactButton === true) {\n\t\t\thasCompactButton = false;\n\t\t\tdevWarning(`[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden.`);\n\t\t}\n\t\tconst collapsible = this.state._collapsible === true;\n\t\tconst hideLabel = this.state._hideLabel === true;\n\t\tconst orientation = this.state._orientation;\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[orientation]: true,\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<nav aria-label={this.state._label} id=\"nav\">\n\t\t\t\t\t\t<this.linkList collapsible={collapsible} hideLabel={hideLabel} deep={0} links={this.state._links} orientation={orientation}></this.linkList>\n\t\t\t\t\t</nav>\n\t\t\t\t\t{hasCompactButton && (\n\t\t\t\t\t\t<div class=\"mt-2 w-full compact\">\n\t\t\t\t\t\t\t<kol-button\n\t\t\t\t\t\t\t\t_ariaControls=\"nav\"\n\t\t\t\t\t\t\t\t_ariaExpanded={!hideLabel}\n\t\t\t\t\t\t\t\t_icon={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}\n\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t_label={translate(hideLabel ? 'kol-nav-maximize' : 'kol-nav-minimize')}\n\t\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\t\tonClick: (): void => {\n\t\t\t\t\t\t\t\t\t\tthis.state = {\n\t\t\t\t\t\t\t\t\t\t\t...this.state,\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel: this.state._hideLabel === false,\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}}\n\t\t\t\t\t\t\t\t_tooltipAlign=\"right\"\n\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t></kol-button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Wert von aria-current an, der bei dem aktuellen Kontext innerhalb der Navigation verwendet werden soll.\n\t */\n\t@Prop() public _ariaCurrentValue: AriaCurrent = false;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Gibt an, ob Knoten in der Navigation zusammengeklappt werden können. Ist standardmäßig aktiv.\n\t */\n\t@Prop() public _collapsible?: boolean = true;\n\n\t/**\n\t * Gibt an, ob die Navigation kompakt angezeigt wird.\n\t * @deprecated Use _hide-label\n\t */\n\t@Prop() public _compact?: boolean = false;\n\n\t/**\n\t * Gibt an, ob die Navigation eine zusätzliche Schaltfläche zum Aus- und Einklappen der Navigation anzeigen soll.\n\t * @deprecated Version 2\n\t */\n\t@Prop() public _hasCompactButton?: boolean = false;\n\n\t/**\n\t * Defines if navigation labels should be hidden\n\t */\n\t@Prop() public _hideLabel?: HideLabelPropType = false;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\n\n\t/**\n\t * Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t */\n\t@Prop() public _links!: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>;\n\n\t/**\n\t * Gibt die horizontale oder vertikale Ausrichtung der Komponente an.\n\t */\n\t@Prop() public _orientation?: Orientation = 'vertical';\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t *\n\t * @deprecated This property is deprecated and will be removed in the next major version.\n\t */\n\t@Prop() public _variant?: KoliBriNavVariant = 'primary';\n\n\t@State() public state: KoliBriNavStates = {\n\t\t_ariaCurrentValue: false,\n\t\t_collapsible: true,\n\t\t_hasCompactButton: false,\n\t\t_hideLabel: false,\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t\t_orientation: 'vertical',\n\t\t_variant: 'primary',\n\t};\n\n\t@Watch('_ariaCurrentValue')\n\tpublic validateAriaCurrentValue(value?: AriaCurrent): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_ariaCurrentValue',\n\t\t\t(value) => value === true || value === 'date' || value === 'location' || value === 'page' || value === 'step' || value === 'time',\n\t\t\tnew Set(['boolean', 'String {data, location, page, step, time}']),\n\t\t\tvalue\n\t\t);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_collapsible')\n\tpublic validateCollapsible(value?: boolean): void {\n\t\tvalidateCollapsible(this, value);\n\t}\n\n\t@Watch('_compact')\n\tpublic validateCompact(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t/**\n\t * @deprecated Version 2\n\t */\n\t@Watch('_hasCompactButton')\n\tpublic validateHasCompactButton(value?: boolean): void {\n\t\tvalidateHasCompactButton(this, value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType) {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tremoveAriaLabel(this.state._label); // remove the current\n\t\tvalidateLabel(this, value);\n\t\ta11yHintLabelingLandmarks(value);\n\t\taddAriaLabel(this.state._label); // add the new; not value, because that could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<ButtonOrLinkOrTextWithChildrenProps[]>): void {\n\t\twatchNavLinks('KolNav', this, value);\n\t\tdevHint(`[KolNav] Die Navigationsstruktur wird noch nicht rekursiv validiert.`);\n\t}\n\n\t@Watch('_orientation')\n\tpublic validateOrientation(value?: Orientation): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_orientation',\n\t\t\t(value): boolean => value === 'horizontal' || value === 'vertical',\n\t\t\tnew Set(['Orientation {horizontal, vertical}']),\n\t\t\tvalue,\n\t\t\t{\n\t\t\t\tdefaultValue: 'vertical',\n\t\t\t}\n\t\t);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriNavVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'primary' || value === 'secondary', new Set(['KoliBriNavVariant {primary, secondary}']), value, {\n\t\t\tdefaultValue: 'primary',\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaCurrentValue(this._ariaCurrentValue);\n\t\tthis.validateCollapsible(this._collapsible);\n\t\tthis.validateHideLabel(this._hideLabel || this._compact);\n\t\tthis.validateHasCompactButton(this._hasCompactButton);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t\tthis.validateOrientation(this._orientation);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveAriaLabel(this.state._label);\n\t}\n}\n\n// console.log(\n//   stringifyJson([\n//     { _label: '1 Navigationspunkt', _href: '#abc', _icon: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//     { _label: '2 Navigationspunkt', _href: '#abc', _icon: 'codicon codicon-folder-closed' },\n//     {\n//       _active: true,\n//       _label: '3 Navigationspunkt',\n//       _href: '#abc',\n//       _icon: 'codicon codicon-folder-closed',\n//       _children: [\n//         { _label: '3.1 Navigationspunkt', _href: '#abc', _icon: 'codicon codicon-folder-closed' },\n//         { _label: '3.2 Navigationspunkt', _href: '#abc', _icon: 'codicon codicon-folder-closed', _target: 'asdasd' },\n//         {\n//           _active: true,\n//           _label: '3.3 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _active: true, _label: '3.3.1 Navigationspunkt (aktiv)', _href: '#abc' },\n//             { _label: '3.3.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         {\n//           _label: '3.4 Navigationspunkt',\n//           _href: '#abc',\n//           _children: [\n//             { _label: '3.4.1 Navigationspunkt', _href: '#abc' },\n//             { _label: '3.4.2 Navigationspunkt', _href: '#abc' },\n//           ],\n//         },\n//         { _label: '3.5 Navigationspunkt', _href: '#abc' },\n//       ],\n//     },\n//     { _label: '4 Navigationspunkt', _href: '#abc' },\n//   ])\n// );\n"],"version":3}

package/dist/components/kol-popover.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{c as computePosition,o as offset,f as flip,s as shift,b as arrow}from"./floating-ui.dom.esm.js";import{w as watchString,p as processEnv,b as getDocument}from"./prop.validators.js";import{v as validateShow}from"./show.js";const validateAlign=(t,e)=>{watchString(t,"_align",e)},styleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-popover{height:0;position:absolute}kol-popover .popover{background-color:#fff;min-height:max-content;min-width:max-content;opacity:0;position:absolute}kol-popover .hidden{display:none}kol-popover .show{animation:0.3s ease-in forwards fadeInOpacity}kol-popover .disappear{animation:0.3s ease-in backwards fadeInOpacity}kol-popover .arrow{background-color:inherit;height:var(--font-size);position:absolute;rotate:0.125turn;width:var(--font-size);z-index:-1}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",KolPopover$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.alignPopover=t=>{setTimeout((()=>{var e;if("test"!==processEnv&&this.triggerElement&&this.popoverElement){const o=this.triggerElement,i=this.popoverElement,s=this.arrowElement,n=[offset(null!==(e=null==s?void 0:s.offsetHeight)&&void 0!==e?e:10),flip(),shift()];s&&n.push(arrow({element:s})),computePosition(o,i,{placement:this.state._align,middleware:n}).then((({x:e,y:o,middlewareData:i,placement:s})=>{this.setPosition(e,o,i,s,t)}))}}))},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_visible:!0})}))},this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}setPosition(t,e,o,i,s){if(this.popoverElement){const n={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`}),this.arrowElement&&o.arrow)switch(i){case"top":this.arrowElement.style.inset=`100% auto auto ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${o.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${o.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}n.left!==this.popoverElement.style.left||n.top!==this.popoverElement.style.top?this.alignPopover(s):"function"==typeof s&&s()}}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=getDocument().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var t;const e=getDocument().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",this.showPopover)}render(){return h(Host,{ref:this.catchHostAndTriggerElement},h("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},h("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),h("slot",null)))}validateAlign(t){validateAlign(this,t)}validateShow(t){validateShow(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}static get style(){return styleCss}},[4,"kol-popover",{_align:[1],_show:[1540],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-popover"].forEach((t=>{if("kol-popover"===t)customElements.get(t)||customElements.define(t,KolPopover$1)}))}const KolPopover=KolPopover$1,defineCustomElement=defineCustomElement$1;export{KolPopover,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{c as computePosition,o as offset,f as flip,s as shift,b as arrow}from"./floating-ui.dom.esm.js";import{v as validateAlign}from"./align.js";import{v as validateShow}from"./show.js";import{p as processEnv,a as getDocument}from"./prop.validators.js";const styleCss=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}kol-popover{height:0;position:absolute}kol-popover .popover{background-color:#fff;min-height:max-content;min-width:max-content;opacity:0;position:absolute}kol-popover .hidden{display:none}kol-popover .show{animation:0.3s ease-in forwards fadeInOpacity}kol-popover .disappear{animation:0.3s ease-in backwards fadeInOpacity}kol-popover .arrow{background-color:inherit;height:var(--font-size);position:absolute;rotate:0.125turn;width:var(--font-size);z-index:-1}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",KolPopover$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.alignPopover=t=>{setTimeout((()=>{var e;if("test"!==processEnv&&this.triggerElement&&this.popoverElement){const o=this.triggerElement,i=this.popoverElement,s=this.arrowElement,n=[offset(null!==(e=null==s?void 0:s.offsetHeight)&&void 0!==e?e:10),flip(),shift()];s&&n.push(arrow({element:s})),computePosition(o,i,{placement:this.state._align,middleware:n}).then((({x:e,y:o,middlewareData:i,placement:s})=>{this.setPosition(e,o,i,s,t)}))}}))},this.showPopover=()=>{this.addListenersToBody(),this.alignPopover((()=>{this.state=Object.assign(Object.assign({},this.state),{_visible:!0})}))},this.hidePopoverByEscape=t=>{"Escape"===t.key&&this.hidePopover()},this.hidePopoverByClickOutside=t=>{this.host&&!this.host.contains(t.target)&&this.hidePopover()},this.catchHostAndTriggerElement=t=>{t&&(this.host=t,this.triggerElement=t.previousElementSibling)},this.catchPopoverElement=t=>{this.popoverElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}setPosition(t,e,o,i,s){if(this.popoverElement){const n={left:this.popoverElement.style.left,top:this.popoverElement.style.top};if(Object.assign(this.popoverElement.style,{left:`${t}px`,top:`${e}px`}),this.arrowElement&&o.arrow)switch(i){case"top":this.arrowElement.style.inset=`100% auto auto ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 -50%";break;case"right":this.arrowElement.style.inset=`${o.arrow.y||0}px 100% auto auto`,this.arrowElement.style.translate="50% 0";break;case"bottom":this.arrowElement.style.inset=`auto auto 100% ${o.arrow.x||0}px`,this.arrowElement.style.translate="0 50%";break;case"left":this.arrowElement.style.inset=`${o.arrow.y||0}px auto auto 100%`,this.arrowElement.style.translate="-50% 0"}n.left!==this.popoverElement.style.left||n.top!==this.popoverElement.style.top?this.alignPopover(s):"function"==typeof s&&s()}}hidePopover(){var t;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody()}addListenersToBody(){var t;const e=getDocument().body;e.addEventListener("keyup",this.hidePopoverByEscape),e.addEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.addEventListener("scroll",this.showPopover,{passive:!0})}removeListenersToBody(){var t;const e=getDocument().body;e.removeEventListener("keyup",this.hidePopoverByEscape),e.removeEventListener("click",this.hidePopoverByClickOutside),null===(t=document.scrollingElement)||void 0===t||t.removeEventListener("scroll",this.showPopover)}render(){return h(Host,{ref:this.catchHostAndTriggerElement},h("div",{class:{popover:!0,hidden:!this.state._show,show:this.state._visible},ref:this.catchPopoverElement},h("div",{class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),h("slot",null)))}validateAlign(t){validateAlign(this,t)}validateShow(t){validateShow(this,t),t&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}static get style(){return styleCss}},[4,"kol-popover",{_align:[1],_show:[1540],state:[32]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-popover"].forEach((t=>{if("kol-popover"===t)customElements.get(t)||customElements.define(t,KolPopover$1)}))}const KolPopover=KolPopover$1,defineCustomElement=defineCustomElement$1;export{KolPopover,defineCustomElement};