@public-ui/components 1.4.0-rc.11 → 1.4.0-rc.12

package/dist/cjs/kol-select.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),reuse=require("./reuse-b43997f3.js"),controller$1=require("./controller-8c609713.js"),prop_validators=require("./prop.validators-da7d3db2.js"),controllerIcon=require("./controller-icon-ac752d0d.js"),controller=require("./controller-0753ec3a.js"),a11y_tipps=require("./a11y.tipps-ab1afcfd.js"),label=require("./label-b702acbd.js");require("./tab-index-a499e8df.js"),require("./log-c0dc35c9.js"),require("./index-cc5674d0.js"),require("./icon-2a4562a6.js");const validateInputSelectList=e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0&&(e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===label.hasEnoughReadableChars(e.label,3)&&!1===label.containsOnlyNumbers(e.label)&&a11y_tipps.a11yHint(`Ein abweichendes Aria-Label (${e.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===validateInputSelectList(e))));class SelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.beforePatchListValue=(e,t)=>{const i=t.has("_list")?t.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);!1===this.component._multiple&&0===a.length?(t.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(e)&&a.length<e.length&&(t.set("_value",a),this.onStateChange())}},this.component=e}validateHeight(e){prop_validators.watchString(this.component,"_height",e)}validateList(e){prop_validators.watchJsonArrayString(this.component,"_list",validateInputSelectList,e,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(e){prop_validators.watchBoolean(this.component,"_multiple",e,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateSize(e){prop_validators.watchNumber(this.component,"_size",e,{min:1})}validateValue(e){prop_validators.watchJsonArrayString(this.component,"_value",(()=>!0),e,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(e){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof e){const t=setTimeout((()=>{clearTimeout(t),e(reuse.STATE_CHANGE_EVENT)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}",isSelected=(e,t)=>Array.isArray(e)&&e.includes(t),KolSelect=class{renderOptgroup(e,t){var i;return index.h("optgroup",{disabled:!0===e.disabled,label:e.label},null===(i=e.options)||void 0===i?void 0:i.map(((e,i)=>{const a=`${t}-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):index.h("option",{disabled:!0===e.disabled,key:a,selected:isSelected(this.state._value,e.value),value:a},e.label)})))}render(){const{ariaDiscribedBy:e}=controller$1.getRenderStates(this.state);return index.h(index.Host,null,index.h("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched},index.h("span",{slot:"label"},index.h("slot",null)),index.h("select",Object.assign({ref:this.catchRef,part:"select",title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,t)=>{const i=`-${t}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):index.h("option",{disabled:!0===e.disabled,key:i,selected:isSelected(this.state._value,e.value),value:i},e.label)})))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.ref=e,reuse.propergateFocus(this.host,this.ref)},this.onChange=e=>{var t,i;this._value=Array.from((null===(t=this.ref)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(e,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_height:"",_id:"⚠",_list:[],_multiple:!1,_value:[]},this.controller=new SelectController(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHeight(e){this.controller.validateHeight(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcon(e){this.controller.validateIcon(e)}validateId(e){this.controller.validateId(e)}validateList(e){this.controller.validateList(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateSize(e){this.controller.validateSize(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:defaultStyleCss},exports.kol_select=KolSelect;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),reuse=require("./reuse-b43997f3.js"),controller$1=require("./controller-e360e5cb.js"),prop_validators=require("./prop.validators-f12095c6.js"),controllerIcon=require("./controller-icon-1d62450d.js"),controller=require("./controller-e35def7e.js"),a11y_tipps=require("./a11y.tipps-8ac081a4.js"),label=require("./label-076e7d4c.js");require("./tab-index-5cca6068.js"),require("./dev.utils-863840e0.js"),require("./index-cc5674d0.js"),require("./icon-0b9d4c29.js");const validateInputSelectList=e=>"object"==typeof e&&null!==e&&"string"==typeof e.label&&e.label.length>0&&(e.disabled=!0===e.disabled,e.label=`${e.label}`.trim(),!1===label.hasEnoughReadableChars(e.label,3)&&!1===label.containsOnlyNumbers(e.label)&&a11y_tipps.a11yHint(`Ein abweichendes Aria-Label (${e.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(e.options)||void 0===e.options.find((e=>!1===validateInputSelectList(e))));class SelectController extends controllerIcon.InputIconController{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.beforePatchListValue=(e,t)=>{const i=t.has("_list")?t.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,i);const e=t.has("_value")?t.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],i);!1===this.component._multiple&&0===a.length?(t.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(e)&&a.length<e.length&&(t.set("_value",a),this.onStateChange())}},this.component=e}validateHeight(e){prop_validators.watchString(this.component,"_height",e)}validateList(e){prop_validators.watchJsonArrayString(this.component,"_list",validateInputSelectList,e,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(e){prop_validators.watchBoolean(this.component,"_multiple",e,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateSize(e){prop_validators.watchNumber(this.component,"_size",e,{min:1})}validateValue(e){prop_validators.watchJsonArrayString(this.component,"_value",(()=>!0),e,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(e){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof e){const t=setTimeout((()=>{clearTimeout(t),e(reuse.STATE_CHANGE_EVENT)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}",isSelected=(e,t)=>Array.isArray(e)&&e.includes(t),KolSelect=class{renderOptgroup(e,t){var i;return index.h("optgroup",{disabled:!0===e.disabled,label:e.label},null===(i=e.options)||void 0===i?void 0:i.map(((e,i)=>{const a=`${t}-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):index.h("option",{disabled:!0===e.disabled,key:a,selected:isSelected(this.state._value,e.value),value:a},e.label)})))}render(){const{ariaDiscribedBy:e}=controller$1.getRenderStates(this.state);return index.h(index.Host,null,index.h("kol-input",{_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched},index.h("span",{slot:"label"},index.h("slot",null)),index.h("select",Object.assign({ref:this.catchRef,part:"select",title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,t)=>{const i=`-${t}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):index.h("option",{disabled:!0===e.disabled,key:i,selected:isSelected(this.state._value,e.value),value:i},e.label)})))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.ref=e,reuse.propergateFocus(this.host,this.ref)},this.onChange=e=>{var t,i;this._value=Array.from((null===(t=this.ref)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(e,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_height:"",_id:"⚠",_list:[],_multiple:!1,_value:[]},this.controller=new SelectController(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHeight(e){this.controller.validateHeight(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcon(e){this.controller.validateIcon(e)}validateId(e){this.controller.validateId(e)}validateList(e){this.controller.validateList(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateSize(e){this.controller.validateSize(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:defaultStyleCss},exports.kol_select=KolSelect;

package/dist/cjs/kol-skip-nav.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),a11y_tipps=require("./a11y.tipps-ab1afcfd.js"),prop_validators=require("./prop.validators-da7d3db2.js"),validation=require("./validation-9fd3dc0c.js");require("./log-c0dc35c9.js"),require("./reuse-b43997f3.js"),require("./index-cc5674d0.js");const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}ul{display:grid;list-style:none;place-items:center}ul li{height:0}",KolSkipNav=class{constructor(i){index.registerInstance(this,i),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return index.h("nav",{"aria-label":this.state._ariaLabel},index.h("ul",null,this.state._links.map(((i,a)=>index.h("li",{key:a},index.h("kol-link",Object.assign({},i,{_stealth:!0})))))))}validateAriaLabel(i){prop_validators.watchString(this,"_ariaLabel",i,{required:!0}),a11y_tipps.a11yHintLabelingLandmarks(i)}validateLinks(i){validation.watchNavLinks("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};KolSkipNav.style={default:defaultStyleCss},exports.kol_skip_nav=KolSkipNav;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),a11y_tipps=require("./a11y.tipps-8ac081a4.js"),prop_validators=require("./prop.validators-f12095c6.js"),validation=require("./validation-a3cdcfac.js");require("./dev.utils-863840e0.js"),require("./reuse-b43997f3.js"),require("./index-cc5674d0.js");const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}ul{display:grid;list-style:none;place-items:center}ul li{height:0}",KolSkipNav=class{constructor(i){index.registerInstance(this,i),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return index.h("nav",{"aria-label":this.state._ariaLabel},index.h("ul",null,this.state._links.map(((i,a)=>index.h("li",{key:a},index.h("kol-link",Object.assign({},i,{_stealth:!0})))))))}validateAriaLabel(i){prop_validators.watchString(this,"_ariaLabel",i,{required:!0}),a11y_tipps.a11yHintLabelingLandmarks(i)}validateLinks(i){validation.watchNavLinks("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};KolSkipNav.style={default:defaultStyleCss},exports.kol_skip_nav=KolSkipNav;

package/dist/cjs/kol-spin.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-da7d3db2.js"),i18n=require("./i18n-d56b3736.js");require("./index-cc5674d0.js"),require("./a11y.tipps-ab1afcfd.js"),require("./log-c0dc35c9.js"),require("./reuse-b43997f3.js");const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border:0.1rem solid #fff;border-radius:50%;height:0.8rem;width:0.8rem;top:0.1rem;position:absolute}.spin span:nth-child(1){z-index:0;animation:spin1 2s infinite;left:0.1rem}.spin span:nth-child(2){z-index:1;animation:spin2 2s infinite;left:0.1rem}.spin span:nth-child(3){z-index:1;animation:spin2 2s infinite;left:1.1rem}.spin span:nth-child(4){z-index:0;animation:spin3 2s infinite;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}",KolSpin=class{constructor(i){index.registerInstance(this,i),this.showToggled=!1,this._show=!1,this.state={}}render(){return index.h(index.Host,null,this.state._show?index.h("span",{"aria-busy":"true","aria-label":i18n.translate("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},index.h("span",{class:"bg-spin-1"}),index.h("span",{class:"bg-spin-2"}),index.h("span",{class:"bg-spin-3"}),index.h("span",{class:"bg-neutral"})):this.showToggled&&index.h("span",{"aria-label":i18n.translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,prop_validators.watchBoolean(this,"_show",i)}componentWillLoad(){this.validateShow(this._show)}static get watchers(){return{_show:["validateShow"]}}};KolSpin.style={default:defaultStyleCss},exports.kol_spin=KolSpin;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-f12095c6.js"),i18n=require("./i18n-a8392156.js");require("./index-cc5674d0.js"),require("./a11y.tipps-8ac081a4.js"),require("./dev.utils-863840e0.js"),require("./reuse-b43997f3.js");const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}.spin{display:inline-block;height:1rem;position:relative;width:3rem}.spin span{animation-timing-function:cubic-bezier(0, 1, 1, 0);border:0.1rem solid #fff;border-radius:50%;height:0.8rem;width:0.8rem;top:0.1rem;position:absolute}.spin span:nth-child(1){z-index:0;animation:spin1 2s infinite;left:0.1rem}.spin span:nth-child(2){z-index:1;animation:spin2 2s infinite;left:0.1rem}.spin span:nth-child(3){z-index:1;animation:spin2 2s infinite;left:1.1rem}.spin span:nth-child(4){z-index:0;animation:spin3 2s infinite;left:2.1rem}@keyframes spin1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes spin2{0%{transform:translate(0, 0)}100%{transform:translate(1rem, 0)}}@keyframes spin3{0%{transform:scale(1)}100%{transform:scale(0)}}",KolSpin=class{constructor(i){index.registerInstance(this,i),this.showToggled=!1,this._show=!1,this.state={}}render(){return index.h(index.Host,null,this.state._show?index.h("span",{"aria-busy":"true","aria-label":i18n.translate("kol-action-running"),"aria-live":"polite",class:"spin",role:"alert"},index.h("span",{class:"bg-spin-1"}),index.h("span",{class:"bg-spin-2"}),index.h("span",{class:"bg-spin-3"}),index.h("span",{class:"bg-neutral"})):this.showToggled&&index.h("span",{"aria-label":i18n.translate("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(i){this.showToggled=!0===this.state._show&&!1===this._show,prop_validators.watchBoolean(this,"_show",i)}componentWillLoad(){this.validateShow(this._show)}static get watchers(){return{_show:["validateShow"]}}};KolSpin.style={default:defaultStyleCss},exports.kol_spin=KolSpin;

package/dist/cjs/kol-symbol.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-da7d3db2.js"),i18n=require("./i18n-d56b3736.js");require("./index-cc5674d0.js"),require("./a11y.tipps-ab1afcfd.js"),require("./log-c0dc35c9.js"),require("./reuse-b43997f3.js");const KolSymbol=class{constructor(e){index.registerInstance(this,e),this._ariaLabel=void 0,this._symbol=void 0,this.state={_ariaLabel:i18n.translate("kol-warning"),_symbol:"⚠"}}render(){return index.h(index.Host,null,index.h("span",{"aria-label":this.state._ariaLabel,role:"term"},this.state._symbol))}validateAriaLabel(e){prop_validators.watchString(this,"_ariaLabel",e,{required:!0})}validateSymbol(e){prop_validators.watchString(this,"_symbol",e,{required:!0})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_symbol:["validateSymbol"]}}};exports.kol_symbol=KolSymbol;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-f12095c6.js"),i18n=require("./i18n-a8392156.js");require("./index-cc5674d0.js"),require("./a11y.tipps-8ac081a4.js"),require("./dev.utils-863840e0.js"),require("./reuse-b43997f3.js");const KolSymbol=class{constructor(e){index.registerInstance(this,e),this._ariaLabel=void 0,this._symbol=void 0,this.state={_ariaLabel:i18n.translate("kol-warning"),_symbol:"⚠"}}render(){return index.h(index.Host,null,index.h("span",{"aria-label":this.state._ariaLabel,role:"term"},this.state._symbol))}validateAriaLabel(e){prop_validators.watchString(this,"_ariaLabel",e,{required:!0})}validateSymbol(e){prop_validators.watchString(this,"_symbol",e,{required:!0})}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateSymbol(this._symbol)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_symbol:["validateSymbol"]}}};exports.kol_symbol=KolSymbol;

package/dist/cjs/kol-table.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-da7d3db2.js"),i18n=require("./i18n-d56b3736.js");require("./index-cc5674d0.js"),require("./a11y.tipps-ab1afcfd.js"),require("./log-c0dc35c9.js"),require("./reuse-b43997f3.js");const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host>div{overflow-x:auto;overflow-y:hidden}table{width:100%}th>div{display:grid;grid-template-columns:1fr auto;place-items:center;gap:0.25em}div.pagination{padding:0.5em}div.pagination,div.pagination>div:last-child{display:grid;place-items:center;gap:0.5em}@media (min-width: 1024px){div.pagination,div.pagination>div:last-child{grid-auto-flow:column}div.pagination kol-pagination{display:flex;gap:calc(4 * var(--kolibri-spacing))}}",PAGINATION_OPTIONS=[10,20,50,100],CELL_REFS=new Map,KolTable=class{constructor(t){index.registerInstance(this,t),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),prop_validators.setState(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,e,a)=>{"_pagination"===a&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=()=>{let t=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"NOS":t=[...this.state._data];break;case"ASC":t=this.sortFunction([...this.state._data]);break;default:t=this.sortFunction([...this.state._data]).reverse()}prop_validators.setState(this,"_sortedData",t)},this._caption=void 0,this._data=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"",_data:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){prop_validators.watchString(this,"_caption",t,{required:!0})}validateData(t){prop_validators.emptyStringByArrayHandler(t,(()=>{prop_validators.objectObjectHandler(t,(()=>{void 0===t&&(t=[]);try{t=prop_validators.parseJson(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&prop_validators.setState(this,"_data",t,{afterPatch:()=>{const t=setTimeout((()=>{clearTimeout(t),this.updateSortedData()}))}})}))}))}validateHeaders(t){prop_validators.emptyStringByArrayHandler(t,(()=>{prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,e;const a=t;null===(i=a.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(e=a.vertical)||void 0===e||e.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))}))}}})}))}))}validateMinWidth(t){prop_validators.watchString(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.watchValidator(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.colSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}getNumberOfRows(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.rowSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,e;let a=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(e=t.vertical)&&void 0!==e?e:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,i){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const e=this.getPrimaryHeader(i),a=this.getNumberOfCols(i.horizontal,t),o=this.getNumberOfRows(i.vertical,t),n=[],s=[],r=[];i.vertical.forEach(((t,i)=>{s[i]=0,r[i]=[]}));for(let l=0;l<o;l++){const o=[];i.vertical.forEach(((t,i)=>{let e=0;if(r[i].forEach((t=>e+=t)),e<=l){const a=t[l-e+s[i]];if("object"==typeof a){o.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),r[i].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let e=1;e<a.colSpan;e++)r[i+e].push(t);s[i]++}}}));for(let i=0;i<a;i++)!0===this.horizontal?"object"==typeof e[i]&&null!==e[i]&&"string"==typeof e[i].key&&"object"==typeof t[l]&&null!==t[l]&&o.push(Object.assign(Object.assign({},e[i]),{colSpan:void 0,data:t[l],label:t[l][e[i].key],rowSpan:void 0})):"object"==typeof e[l]&&null!==e[l]&&"string"==typeof e[l].key&&"object"==typeof t[i]&&null!==t[i]&&o.push(Object.assign(Object.assign({},e[l]),{colSpan:void 0,data:t[i],label:t[i][e[l].key],rowSpan:void 0}));n.push(o)}if(0===t.length){let t=0,e=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{e+=t.rowSpan||1})));const a={colSpan:t,label:i18n.translate("kol-no-entries"),render:void 0,rowSpan:Math.max(e,1)};0===n.length?n.push([a]):n[0].push(a)}return n}selectDisplayedData(t,i,e){return"number"==typeof i&&i>0&&"number"==typeof e&&e>0?(this.pageStartSlice=i*(e-1),this.pageEndSlice=i*e>t.length?t.length:i*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(CELL_REFS.get(i)),CELL_REFS.set(i,setTimeout((()=>{if(clearTimeout(CELL_REFS.get(i)),"function"==typeof t.render){const e=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof e&&(i.innerHTML=e)}}))))}render(){var t,i;const e=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(i=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==i?i:10:this.state._sortedData.length,this.state._pagination._page||1),a=this.createDataField(e,this.state._headers);return index.h(index.Host,null,index.h("div",{tabindex:"0"},index.h("table",{style:{minWidth:this.state._minWidth}},index.h("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&index.h("thead",null,this.state._headers.horizontal.map(((t,i)=>index.h("tr",{key:`thead-${i}`},t.map(((t,e)=>!0===t.asTd?index.h("td",{key:`thead-${i}-${e}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}):index.h("th",{key:`thead-${i}-${e}-${t.label}`,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},index.h("div",{class:"w-full flex gap-1 items-center"},index.h("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&index.h("kol-button",{exportparts:"button,ghost",_ariaLabel:i18n.translate("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"fas fa-sort":"ASC"===this.sortDirections.get(t.sort)?"fas fa-sort-up":"fas fa-sort-down",_iconOnly:!0,_label:i18n.translate("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))))))))),index.h("tbody",null,a.map(((t,i)=>index.h("tr",{key:`tbody-${i}`},t.map(((t,e)=>!1===t.asTd?index.h("th",{key:`tbody-${i}-${e}-${t.label}`,scope:"number"==typeof t.rowSpan&&t.rowSpan>1?"rowgroup":"row",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},index.h("div",{class:"w-full flex gap-1 items-center"},index.h("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&index.h("kol-button",{exportparts:"button,ghost",_ariaLabel:i18n.translate("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"fas fa-sort":"ASC"===this.sortDirections.get(t.sort)?"fas fa-sort-up":"fas fa-sort-down",_iconOnly:!0,_label:i18n.translate("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))):index.h("td",{key:`tbody-${i}-${e}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}))))))))),this.pageEndSlice>0&&this.showPagination&&index.h("div",{class:"pagination"},index.h("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),index.h("div",null,index.h("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};KolTable.style={default:defaultStyleCss},exports.kol_table=KolTable;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-f12095c6.js"),i18n=require("./i18n-a8392156.js");require("./index-cc5674d0.js"),require("./a11y.tipps-8ac081a4.js"),require("./dev.utils-863840e0.js"),require("./reuse-b43997f3.js");const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host>div{overflow-x:auto;overflow-y:hidden}table{width:100%}th>div{display:grid;grid-template-columns:1fr auto;place-items:center;gap:0.25em}div.pagination{padding:0.5em}div.pagination,div.pagination>div:last-child{display:grid;place-items:center;gap:0.5em}@media (min-width: 1024px){div.pagination,div.pagination>div:last-child{grid-auto-flow:column}div.pagination kol-pagination{display:flex;gap:calc(4 * var(--kolibri-spacing))}}",PAGINATION_OPTIONS=[10,20,50,100],CELL_REFS=new Map,KolTable=class{constructor(t){index.registerInstance(this,t),this.horizontal=!0,this.sortDirections=new Map,this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.setSortDirection=(t,i)=>{this.sortDirections.clear(),this.sortDirections.set(t,i),this.sortFunction=t},this.handlePagination={onClick:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,i),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePage:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,i),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:i}))},onChangePageSize:(t,i)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,i),prop_validators.setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:i})),prop_validators.setState(this,"_pageSize",i)}},this.beforePatchPagination=(t,i,e,a)=>{"_pagination"===a&&(this.showPagination=!0===t||""===t||"object"==typeof t&&null!==t)},this.updateSortedData=()=>{let t=this.state._data;if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"NOS":t=[...this.state._data];break;case"ASC":t=this.sortFunction([...this.state._data]);break;default:t=this.sortFunction([...this.state._data]).reverse()}prop_validators.setState(this,"_sortedData",t)},this._caption=void 0,this._data=void 0,this._headers=void 0,this._minWidth=void 0,this._pagination=void 0,this.state={_caption:"",_data:[],_headers:{horizontal:[],vertical:[]},_pagination:{_page:1,_pageSize:10,_total:0},_sortedData:[]}}validateCaption(t){prop_validators.watchString(this,"_caption",t,{required:!0})}validateData(t){prop_validators.emptyStringByArrayHandler(t,(()=>{prop_validators.objectObjectHandler(t,(()=>{void 0===t&&(t=[]);try{t=prop_validators.parseJson(t)}catch(t){}Array.isArray(t)&&void 0===t.find((t=>!("object"==typeof t&&null!==t)))&&prop_validators.setState(this,"_data",t,{afterPatch:()=>{const t=setTimeout((()=>{clearTimeout(t),this.updateSortedData()}))}})}))}))}validateHeaders(t){prop_validators.emptyStringByArrayHandler(t,(()=>{prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var i,e;const a=t;null===(i=a.horizontal)||void 0===i||i.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))})),null===(e=a.vertical)||void 0===e||e.forEach((t=>{t.forEach((t=>{"function"==typeof t.sort&&"string"==typeof t.sortDirection&&this.setSortDirection(t.sort,t.sortDirection)}))}))}}})}))}))}validateMinWidth(t){prop_validators.watchString(this,"_minWidth",t,{defaultValue:void 0})}validatePagination(t){try{t=prop_validators.parseJson(t)}catch(t){}prop_validators.watchValidator(this,"_pagination",(()=>!0),new Set(["boolean","KoliBriTablePagination"]),t,{hooks:{beforePatch:this.beforePatchPagination}})}componentWillLoad(){this.validateCaption(this._caption),this.validateData(this._data),this.validateHeaders(this._headers),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination)}getNumberOfCols(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.colSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}getNumberOfRows(t,i){let e=0;return t.forEach((t=>{let i=0;t.forEach((t=>{var e;return i+=null!==(e=t.rowSpan)&&void 0!==e?e:1})),e<i&&(e=i)})),0===e&&(e=i.length),e}filterHeaderKeys(t){const i=[];return t.forEach((t=>{t.forEach((t=>{"string"==typeof t.key&&i.push(t)}))})),i}getPrimaryHeader(t){var i,e;let a=this.filterHeaderKeys(null!==(i=t.horizontal)&&void 0!==i?i:[]);return this.horizontal=!0,0===a.length&&(a=this.filterHeaderKeys(null!==(e=t.vertical)&&void 0!==e?e:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(t,i){i.horizontal=Array.isArray(null==i?void 0:i.horizontal)?i.horizontal:[],i.vertical=Array.isArray(null==i?void 0:i.vertical)?i.vertical:[];const e=this.getPrimaryHeader(i),a=this.getNumberOfCols(i.horizontal,t),o=this.getNumberOfRows(i.vertical,t),n=[],s=[],r=[];i.vertical.forEach(((t,i)=>{s[i]=0,r[i]=[]}));for(let l=0;l<o;l++){const o=[];i.vertical.forEach(((t,i)=>{let e=0;if(r[i].forEach((t=>e+=t)),e<=l){const a=t[l-e+s[i]];if("object"==typeof a){o.push(Object.assign(Object.assign({},a),{asTd:!1,data:{}}));let t=1;if("number"==typeof a.rowSpan&&a.rowSpan>1&&(t=a.rowSpan),r[i].push(t),"number"==typeof a.colSpan&&a.colSpan>1)for(let e=1;e<a.colSpan;e++)r[i+e].push(t);s[i]++}}}));for(let i=0;i<a;i++)!0===this.horizontal?"object"==typeof e[i]&&null!==e[i]&&"string"==typeof e[i].key&&"object"==typeof t[l]&&null!==t[l]&&o.push(Object.assign(Object.assign({},e[i]),{colSpan:void 0,data:t[l],label:t[l][e[i].key],rowSpan:void 0})):"object"==typeof e[l]&&null!==e[l]&&"string"==typeof e[l].key&&"object"==typeof t[i]&&null!==t[i]&&o.push(Object.assign(Object.assign({},e[l]),{colSpan:void 0,data:t[i],label:t[i][e[l].key],rowSpan:void 0}));n.push(o)}if(0===t.length){let t=0,e=0;Array.isArray(i.horizontal)&&i.horizontal.length>0&&i.horizontal[0].forEach((i=>{t+=i.colSpan||1})),Array.isArray(i.vertical)&&i.vertical.length>0&&(t-=i.vertical.length,i.vertical[0].forEach((t=>{e+=t.rowSpan||1})));const a={colSpan:t,label:i18n.translate("kol-no-entries"),render:void 0,rowSpan:Math.max(e,1)};0===n.length?n.push([a]):n[0].push(a)}return n}selectDisplayedData(t,i,e){return"number"==typeof i&&i>0&&"number"==typeof e&&e>0?(this.pageStartSlice=i*(e-1),this.pageEndSlice=i*e>t.length?t.length:i*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}cellRender(t,i){i&&(clearTimeout(CELL_REFS.get(i)),CELL_REFS.set(i,setTimeout((()=>{if(clearTimeout(CELL_REFS.get(i)),"function"==typeof t.render){const e=t.render(i,{asTd:t.asTd,label:t.label,textAlign:t.textAlign,width:t.width},t.data,this.state._data);"string"==typeof e&&(i.innerHTML=e)}}))))}render(){var t,i;const e=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(i=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==i?i:10:this.state._sortedData.length,this.state._pagination._page||1),a=this.createDataField(e,this.state._headers);return index.h(index.Host,null,index.h("div",{tabindex:"0"},index.h("table",{style:{minWidth:this.state._minWidth}},index.h("caption",null,this.state._caption),Array.isArray(this.state._headers.horizontal)&&index.h("thead",null,this.state._headers.horizontal.map(((t,i)=>index.h("tr",{key:`thead-${i}`},t.map(((t,e)=>!0===t.asTd?index.h("td",{key:`thead-${i}-${e}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}):index.h("th",{key:`thead-${i}-${e}-${t.label}`,scope:"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},index.h("div",{class:"w-full flex gap-1 items-center"},index.h("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&index.h("kol-button",{exportparts:"button,ghost",_ariaLabel:i18n.translate("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"fas fa-sort":"ASC"===this.sortDirections.get(t.sort)?"fas fa-sort-up":"fas fa-sort-down",_iconOnly:!0,_label:i18n.translate("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))))))))),index.h("tbody",null,a.map(((t,i)=>index.h("tr",{key:`tbody-${i}`},t.map(((t,e)=>!1===t.asTd?index.h("th",{key:`tbody-${i}-${e}-${t.label}`,scope:"number"==typeof t.rowSpan&&t.rowSpan>1?"rowgroup":"row",colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},"aria-sort":"function"==typeof t.sort?t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"none":"ASC"===this.sortDirections.get(t.sort)?"ascending":"descending":void 0,"data-sort":`sort-${this.sortDirections.get(t.sort)}`},index.h("div",{class:"w-full flex gap-1 items-center"},index.h("div",{class:{"w-full":!0,[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},innerHTML:t.label,style:{textAlign:t.textAlign}}),"function"==typeof t.sort&&index.h("kol-button",{exportparts:"button,ghost",_ariaLabel:i18n.translate("kol-change-order",{placeholders:{colLabel:t.label}}),_icon:t.sort!==this.sortFunction||"NOS"===this.sortDirections.get(t.sort)||void 0===this.sortDirections.get(t.sort)?"fas fa-sort":"ASC"===this.sortDirections.get(t.sort)?"fas fa-sort-up":"fas fa-sort-down",_iconOnly:!0,_label:i18n.translate("kol-change-order",{placeholders:{colLabel:t.label}}),_on:{onClick:()=>{if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData()}}},_variant:"ghost"}))):index.h("td",{key:`tbody-${i}-${e}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?i=>{this.cellRender(t,i)}:void 0,innerHTML:"function"!=typeof t.render?t.label:""}))))))))),this.pageEndSlice>0&&this.showPagination&&index.h("div",{class:"pagination"},index.h("span",null,"Einträge ",this.pageEndSlice>0?this.pageStartSlice+1:0," bis ",this.pageEndSlice," von"," ",this.state._pagination._total||(Array.isArray(this.state._data)?this.state._data.length:0)," angezeigt"),index.h("div",null,index.h("kol-pagination",{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_total:this.state._pagination._total||this.state._data.length}))))}static get watchers(){return{_caption:["validateCaption"],_data:["validateData"],_headers:["validateHeaders"],_minWidth:["validateMinWidth"],_pagination:["validatePagination"]}}};KolTable.style={default:defaultStyleCss},exports.kol_table=KolTable;

package/dist/cjs/kol-tabs.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),a11y_tipps=require("./a11y.tipps-ab1afcfd.js"),log=require("./log-c0dc35c9.js"),prop_validators=require("./prop.validators-da7d3db2.js"),i18n=require("./i18n-d56b3736.js");require("./reuse-b43997f3.js"),require("./index-cc5674d0.js");const AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES=new Set(['"left", "right"']),AVAILABLE_VERTICAL_ALIGNMENT_VALUES=new Set(['"left", "right"']),AVAILABLE_ALIGNMENT_VALUES=new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES,...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]),validateAlignment=(t,e,i)=>{prop_validators.watchValidator(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),AVAILABLE_ALIGNMENT_VALUES,i)},defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host kol-button-group-wc{display:inline-flex;gap:calc(2 * var(--kolibri-spacing));flex-wrap:wrap}:host kol-button-group-wc button{border:0;border-bottom-color:transparent;border-bottom-style:solid;border-bottom-width:var(--kolibri-spacing)}:host kol-button-group-wc button[aria-selected='true'],:host kol-button-group-wc button:focus{border-bottom-color:var(--kolibri-color-accent)}:host .close-button{font-size:50%;height:fit-content;left:-3em;position:relative;top:0.25em}:host div[role='tabpanel']{height:100%}:host div.grid{height:100%}:host>.tabs-align-right{display:grid;grid-template-columns:1fr auto}:host>.tabs-align-right kol-button-group-wc{display:grid;order:2}:host>.tabs-align-left{display:grid;grid-template-columns:auto 1fr}:host>.tabs-align-left kol-button-group-wc{display:grid;order:0}:host>.tabs-align-bottom{display:grid;grid-template-rows:1fr auto}:host>.tabs-align-bottom kol-button-group-wc{order:2}:host>.tabs-align-bottom kol-button-group-wc>div{display:flex}:host>.tabs-align-bottom>kol-button-group-wc>div>div:first-child{margin:0px 1em 0px 0px}:host>.tabs-align-bottom>kol-button-group-wc>div>div{margin:0px 1em}:host>.tabs-align-top{display:grid;grid-template-rows:auto 1fr}:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-top kol-button-group-wc>div{display:flex}:host>.tabs-align-top>kol-button-group-wc>div>div:first-child{margin:0px 1em 0px 0px}:host>.tabs-align-top>kol-button-group-wc>div>div{margin:0px 1em}:host>div{display:grid}:host>div.tabs-align-left{grid-template-columns:auto 1fr}:host>div.tabs-align-right{grid-template-columns:1fr auto}:host>.tabs-align-left kol-button-group-wc,:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-bottom kol-button-group-wc,:host>.tabs-align-right kol-button-group-wc{order:1}:host>div.tabs-align-left kol-button-group-wc>div,:host>div.tabs-align-left kol-button-group-wc>div>div,:host>div.tabs-align-right kol-button-group-wc>div,:host>div.tabs-align-right kol-button-group-wc>div>div{display:grid}:host>div.tabs-align-left kol-button-group-wc>div>div kol-button-wc,:host>div.tabs-align-right kol-button-group-wc>div>div kol-button-wc{width:100%}:host>div.tabs-align-bottom kol-button-group-wc div,:host>div.tabs-align-top kol-button-group-wc div{display:flex;flex-wrap:wrap}",KolTabs=class{constructor(t){index.registerInstance(this,t),this.onCreateLabel=`${i18n.translate("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,i)=>{if(i>0){if(e+i<t.length)return t[e+i]._disabled?this.nextPossibleTabIndex(t,e,i+1):e+i}else if(i<0&&e+i>=0)return t[e+i]._disabled?this.nextPossibleTabIndex(t,e,i-1):e+i;return e},this.onKeyDown=t=>{const e=setTimeout((()=>{clearTimeout(e);let i=null;switch(t.key){case"ArrowRight":i=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":i=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==i&&this.onSelect(t,i,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},this.onMouseDown=t=>{t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,i=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===i){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,i=!1}if(!1===i){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);a11y_tipps.devHint("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,i,o)=>{let a,l;a="_selected"===o?t:this.state._selected,l="_tabs"===o?t:this.state._tabs,l.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,l))},this.handleTabPanels=()=>{var t,e,i;if(this.tabPanelHost instanceof HTMLDivElement)for(let o=this.tabPanelHost.children.length;o<this.state._tabs.length;o++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`tab-${o}`),a.setAttribute("id",`tabpanel-${o}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const l=document.createElement("slot");l.setAttribute("name",`tabpanel-slot-${o}`),a.appendChild(l),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[o])&&(null===(i=this.host)||void 0===i||i.children[o].setAttribute("slot",`tabpanel-slot-${o}`))}},this.onCreate=t=>{var e,i;t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(i=this.state._on)||void 0===i||i.onCreate(t))},this._ariaLabel=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_ariaLabel:"…",_selected:0,_tabs:[],_tabsAlign:"top"}}renderButtonGroup(){return index.h("kol-button-group-wc",{role:"tablist","aria-label":this.state._ariaLabel,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>index.h("kol-button-wc",{_disabled:t._disabled,_icon:t._icon,_iconOnly:t._iconOnly,_label:t._label&&t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&index.h("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return index.h(index.Host,null,index.h("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._tabsAlign}`]:!0}},this.renderButtonGroup(),index.h("div",{ref:this.catchTabPanelHost})))}validateAriaLabel(t){prop_validators.watchString(this,"_ariaLabel",t,{required:!0}),a11y_tipps.a11yHintLabelingLandmarks(t)}validateOn(t){if("object"==typeof t&&null!==t){a11y_tipps.featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:log.Log.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:log.Log.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),prop_validators.setState(this,"_on",e)}}validateSelected(t){prop_validators.watchNumber(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){prop_validators.watchJsonArrayString(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),a11y_tipps.uiUxHintMillerscheZahl("KolTabs",this.state._tabs.length)}validateTabsAlign(t){validateAlignment(this,"_tabsAlign",t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateTabsAlign(this._tabsAlign)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,e,i=!1){var o,a;this._selected=e,"function"==typeof(null===(o=this._on)||void 0===o?void 0:o.onSelect)&&(null===(a=this._on)||void 0===a||a.onSelect(t,e)),!0===i&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=prop_validators.koliBriQuerySelector(`button#tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return index.getElement(this)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};KolTabs.style={default:defaultStyleCss},exports.kol_tabs=KolTabs;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),a11y_tipps=require("./a11y.tipps-8ac081a4.js"),prop_validators=require("./prop.validators-f12095c6.js"),i18n=require("./i18n-a8392156.js"),dev_utils=require("./dev.utils-863840e0.js");require("./index-cc5674d0.js"),require("./reuse-b43997f3.js");const AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES=new Set(['"left", "right"']),AVAILABLE_VERTICAL_ALIGNMENT_VALUES=new Set(['"left", "right"']),AVAILABLE_ALIGNMENT_VALUES=new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES,...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]),validateAlignment=(t,e,i)=>{prop_validators.watchValidator(t,e,(t=>"bottom"===t||"left"===t||"right"===t||"top"===t),AVAILABLE_ALIGNMENT_VALUES,i)},defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host kol-button-group-wc{display:inline-flex;gap:calc(2 * var(--kolibri-spacing));flex-wrap:wrap}:host kol-button-group-wc button{border:0;border-bottom-color:transparent;border-bottom-style:solid;border-bottom-width:var(--kolibri-spacing)}:host kol-button-group-wc button[aria-selected='true'],:host kol-button-group-wc button:focus{border-bottom-color:var(--kolibri-color-accent)}:host .close-button{font-size:50%;height:fit-content;left:-3em;position:relative;top:0.25em}:host div[role='tabpanel']{height:100%}:host div.grid{height:100%}:host>.tabs-align-right{display:grid;grid-template-columns:1fr auto}:host>.tabs-align-right kol-button-group-wc{display:grid;order:2}:host>.tabs-align-left{display:grid;grid-template-columns:auto 1fr}:host>.tabs-align-left kol-button-group-wc{display:grid;order:0}:host>.tabs-align-bottom{display:grid;grid-template-rows:1fr auto}:host>.tabs-align-bottom kol-button-group-wc{order:2}:host>.tabs-align-bottom kol-button-group-wc>div{display:flex}:host>.tabs-align-bottom>kol-button-group-wc>div>div:first-child{margin:0px 1em 0px 0px}:host>.tabs-align-bottom>kol-button-group-wc>div>div{margin:0px 1em}:host>.tabs-align-top{display:grid;grid-template-rows:auto 1fr}:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-top kol-button-group-wc>div{display:flex}:host>.tabs-align-top>kol-button-group-wc>div>div:first-child{margin:0px 1em 0px 0px}:host>.tabs-align-top>kol-button-group-wc>div>div{margin:0px 1em}:host>div{display:grid}:host>div.tabs-align-left{grid-template-columns:auto 1fr}:host>div.tabs-align-right{grid-template-columns:1fr auto}:host>.tabs-align-left kol-button-group-wc,:host>.tabs-align-top kol-button-group-wc{order:0}:host>.tabs-align-bottom kol-button-group-wc,:host>.tabs-align-right kol-button-group-wc{order:1}:host>div.tabs-align-left kol-button-group-wc>div,:host>div.tabs-align-left kol-button-group-wc>div>div,:host>div.tabs-align-right kol-button-group-wc>div,:host>div.tabs-align-right kol-button-group-wc>div>div{display:grid}:host>div.tabs-align-left kol-button-group-wc>div>div kol-button-wc,:host>div.tabs-align-right kol-button-group-wc>div>div kol-button-wc{width:100%}:host>div.tabs-align-bottom kol-button-group-wc div,:host>div.tabs-align-top kol-button-group-wc div{display:flex;flex-wrap:wrap}",KolTabs=class{constructor(t){index.registerInstance(this,t),this.onCreateLabel=`${i18n.translate("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,i)=>{if(i>0){if(e+i<t.length)return t[e+i]._disabled?this.nextPossibleTabIndex(t,e,i+1):e+i}else if(i<0&&e+i>=0)return t[e+i]._disabled?this.nextPossibleTabIndex(t,e,i-1):e+i;return e},this.onKeyDown=t=>{const e=setTimeout((()=>{clearTimeout(e);let i=null;switch(t.key){case"ArrowRight":i=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":i=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==i&&this.onSelect(t,i,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},this.onMouseDown=t=>{t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,i=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===i){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,i=!1}if(!1===i){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);a11y_tipps.devHint("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,i,o)=>{let a,l;a="_selected"===o?t:this.state._selected,l="_tabs"===o?t:this.state._tabs,l.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,l))},this.handleTabPanels=()=>{var t,e,i;if(this.tabPanelHost instanceof HTMLDivElement)for(let o=this.tabPanelHost.children.length;o<this.state._tabs.length;o++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`tab-${o}`),a.setAttribute("id",`tabpanel-${o}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const l=document.createElement("slot");l.setAttribute("name",`tabpanel-slot-${o}`),a.appendChild(l),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[o])&&(null===(i=this.host)||void 0===i||i.children[o].setAttribute("slot",`tabpanel-slot-${o}`))}},this.onCreate=t=>{var e,i;t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(i=this.state._on)||void 0===i||i.onCreate(t))},this._ariaLabel=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_ariaLabel:"…",_selected:0,_tabs:[],_tabsAlign:"top"}}renderButtonGroup(){return index.h("kol-button-group-wc",{role:"tablist","aria-label":this.state._ariaLabel,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>index.h("kol-button-wc",{_disabled:t._disabled,_icon:t._icon,_iconOnly:t._iconOnly,_label:t._label&&t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&index.h("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return index.h(index.Host,null,index.h("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._tabsAlign}`]:!0}},this.renderButtonGroup(),index.h("div",{ref:this.catchTabPanelHost})))}validateAriaLabel(t){prop_validators.watchString(this,"_ariaLabel",t,{required:!0}),a11y_tipps.a11yHintLabelingLandmarks(t)}validateOn(t){if("object"==typeof t&&null!==t){a11y_tipps.featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:dev_utils.Log.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:dev_utils.Log.debug("[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),prop_validators.setState(this,"_on",e)}}validateSelected(t){prop_validators.watchNumber(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){prop_validators.watchJsonArrayString(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),a11y_tipps.uiUxHintMillerscheZahl("KolTabs",this.state._tabs.length)}validateTabsAlign(t){validateAlignment(this,"_tabsAlign",t)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateTabsAlign(this._tabsAlign)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}onSelect(t,e,i=!1){var o,a;this._selected=e,"function"==typeof(null===(o=this._on)||void 0===o?void 0:o.onSelect)&&(null===(a=this._on)||void 0===a||a.onSelect(t,e)),!0===i&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=prop_validators.koliBriQuerySelector(`button#tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return index.getElement(this)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};KolTabs.style={default:defaultStyleCss},exports.kol_tabs=KolTabs;

package/dist/cjs/kol-tabs.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"kol-tabs.entry.cjs.js","mappings":"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","names":["watchValidator","translate","devHint","h","index","Host","watchString","a11yHintLabelingLandmarks","featureHint","Log","setState","watchNumber","watchJsonArrayString","uiUxHintMillerscheZahl","koliBriQuerySelector"],"sources":["./src/utils/validators/alignment.ts","./src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","./src/components/tabs/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Alignment } from '../../types/props/alignment';\nimport { watchValidator } from '../prop.validators';\n\nconst AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES = new Set(['\"left\", \"right\"']);\n// export const validateHorizontalAlignment = (component: Generic.Element.Component, propName: string, value?: HorizontalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'left' || value === 'right', AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_VERTICAL_ALIGNMENT_VALUES = new Set(['\"left\", \"right\"']);\n// export const validateVertivalAlignment = (component: Generic.Element.Component, propName: string, value?: VerticalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'top' || value === 'bottom', AVAILABLE_VERTICAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_ALIGNMENT_VALUES = new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, ...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]);\nexport const validateAlignment = (component: Generic.Element.Component, propName: string, value?: Alignment): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\tpropName,\n\t\t(value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top',\n\t\tAVAILABLE_ALIGNMENT_VALUES,\n\t\tvalue\n\t);\n};\n","@import '../style.css';\n\n:host kol-button-group-wc {\n\tdisplay: inline-flex;\n\tgap: calc(2 * var(--kolibri-spacing));\n\tflex-wrap: wrap;\n}\n:host kol-button-group-wc button {\n\tborder: 0;\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tborder-bottom-width: var(--kolibri-spacing);\n}\n\n:host kol-button-group-wc button[aria-selected='true'],\n:host kol-button-group-wc button:focus {\n\tborder-bottom-color: var(--kolibri-color-accent);\n}\n\n:host .close-button {\n\tfont-size: 50%;\n\theight: fit-content;\n\tleft: -3em;\n\tposition: relative;\n\ttop: 0.25em;\n}\n\n:host div[role='tabpanel'] {\n\theight: 100%;\n}\n:host div.grid {\n\theight: 100%;\n}\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-right kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n:host > .tabs-align-left kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n:host > .tabs-align-bottom kol-button-group-wc {\n\torder: 2;\n}\n:host > .tabs-align-bottom kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\tmargin: 0px 1em 0px 0px;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0px 1em;\n}\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-top kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\tmargin: 0px 1em 0px 0px;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0px 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left {\n\tgrid-template-columns: auto 1fr;\n}\n:host > div.tabs-align-right {\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n\torder: 1;\n}\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\twidth: 100%;\n}\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\nimport { KoliBriIconProp } from '../../types/icon';\n\nimport { Generic } from '@a11y-ui/core';\nimport { EventCallback, EventValueOrEventCallback } from '../../types/callbacks';\nimport { Stringified } from '../../types/common';\nimport { Alignment } from '../../types/props/alignment';\nimport { a11yHintLabelingLandmarks, devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { Log } from '../../utils/log';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { validateAlignment } from '../../utils/validators/alignment';\nimport { translate } from '../../i18n';\nimport { KoliBriButtonCallbacks } from '../../types/button-link';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\nexport type KoliBriTabsCallbacks = /* {\n\tonClose?: true | EventOrEventValueCallback<Event, number>;\n} & */ {\n\tonCreate?:\n\t\t| EventCallback<Event>\n\t\t| {\n\t\t\t\tlabel: string;\n\t\t\t\tcallback: EventCallback<Event>;\n\t\t  };\n} & {\n\t[Events.onSelect]?: EventValueOrEventCallback<CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, number>;\n};\n\ntype RequiredTabButtonProps = {\n\tlabel: string;\n};\ntype OptionalTabButtonProps = {\n\tdisabled: boolean;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\ttooltipAlign: Alignment;\n};\nexport type TabButtonProps = Generic.Element.Members<RequiredTabButtonProps, OptionalTabButtonProps>;\n\n/**\n * API\n */\ntype RequiredProps = {\n\tariaLabel: string;\n\ttabs: Stringified<TabButtonProps[]>;\n};\ntype OptionalProps = {\n\ton: KoliBriTabsCallbacks;\n\ttabsAlign: Alignment;\n\tselected: number;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\ttabsAlign: Alignment;\n\tselected: number;\n\ttabs: TabButtonProps[];\n};\ntype OptionalStates = {\n\ton: KoliBriTabsCallbacks;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate selectedTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tlet selectedIndex: number | null = null;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (selectedIndex !== null) {\n\t\t\t\tthis.onSelect(event, selectedIndex, true);\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index, true);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: KoliBriButtonCallbacks<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<kol-button-group-wc role=\"tablist\" aria-label={this.state._ariaLabel} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icon={button._icon}\n\t\t\t\t\t\t_iconOnly={button._iconOnly}\n\t\t\t\t\t\t_label={button._label && button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as KoliBriButtonCallbacks<unknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t)}\n\t\t\t</kol-button-group-wc>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._tabsAlign}`]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t\t<div ref={this.catchTabPanelHost}>{/* <slot /> */}</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Gibt an, welches Tab selektiert sein soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/**\n\t * Gibt an, ob die Tab-Schalter entweder oben, rechts, unten oder links angeordnet sind.\n\t */\n\t@Prop() public _tabsAlign?: Alignment = 'top';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_ariaLabel: '…',\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t\t_tabsAlign: 'top',\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): 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: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function' || typeof value.onCreate === 'object') {\n\t\t\t\tif (typeof value.onCreate === 'object') {\n\t\t\t\t\tif (typeof value.onCreate.label === 'string' && value.onCreate.label.length > 0) {\n\t\t\t\t\t\tthis.onCreateLabel = value.onCreate.label;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: Alignment): void {\n\t\tvalidateAlignment(this, '_tabsAlign', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateTabsAlign(this._tabsAlign);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number, focus = false): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (focus === true) {\n\t\t\t// TODO: prüfen, ob hier noch was offen ist\n\t\t\t// devHint('[KolTabs] Tab-Fokus-verschieben geht im Moment nicht.');\n\t\t\tthis.selectedTimeout = setTimeout(() => {\n\t\t\t\tclearTimeout(this.selectedTimeout);\n\t\t\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#tab-${index}`, this.tabPanelsElement);\n\t\t\t\t\tbutton?.focus();\n\t\t\t\t}\n\t\t\t}, 250);\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"version":3}
+{"file":"kol-tabs.entry.cjs.js","mappings":"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","names":["watchValidator","translate","devHint","h","index","Host","watchString","a11yHintLabelingLandmarks","featureHint","Log","setState","watchNumber","watchJsonArrayString","uiUxHintMillerscheZahl","koliBriQuerySelector"],"sources":["./src/utils/validators/alignment.ts","./src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","./src/components/tabs/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Alignment } from '../../types/props/alignment';\nimport { watchValidator } from '../prop.validators';\n\nconst AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES = new Set(['\"left\", \"right\"']);\n// export const validateHorizontalAlignment = (component: Generic.Element.Component, propName: string, value?: HorizontalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'left' || value === 'right', AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_VERTICAL_ALIGNMENT_VALUES = new Set(['\"left\", \"right\"']);\n// export const validateVertivalAlignment = (component: Generic.Element.Component, propName: string, value?: VerticalAlignment): void => {\n// \twatchValidator(component, propName, (value) => value === 'top' || value === 'bottom', AVAILABLE_VERTICAL_ALIGNMENT_VALUES, value);\n// };\n\nconst AVAILABLE_ALIGNMENT_VALUES = new Set([...AVAILABLE_HORIZONTAL_ALIGNMENT_VALUES, ...AVAILABLE_VERTICAL_ALIGNMENT_VALUES]);\nexport const validateAlignment = (component: Generic.Element.Component, propName: string, value?: Alignment): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\tpropName,\n\t\t(value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top',\n\t\tAVAILABLE_ALIGNMENT_VALUES,\n\t\tvalue\n\t);\n};\n","@import '../style.css';\n\n:host kol-button-group-wc {\n\tdisplay: inline-flex;\n\tgap: calc(2 * var(--kolibri-spacing));\n\tflex-wrap: wrap;\n}\n:host kol-button-group-wc button {\n\tborder: 0;\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tborder-bottom-width: var(--kolibri-spacing);\n}\n\n:host kol-button-group-wc button[aria-selected='true'],\n:host kol-button-group-wc button:focus {\n\tborder-bottom-color: var(--kolibri-color-accent);\n}\n\n:host .close-button {\n\tfont-size: 50%;\n\theight: fit-content;\n\tleft: -3em;\n\tposition: relative;\n\ttop: 0.25em;\n}\n\n:host div[role='tabpanel'] {\n\theight: 100%;\n}\n:host div.grid {\n\theight: 100%;\n}\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-right kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n:host > .tabs-align-left kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n:host > .tabs-align-bottom kol-button-group-wc {\n\torder: 2;\n}\n:host > .tabs-align-bottom kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\tmargin: 0px 1em 0px 0px;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0px 1em;\n}\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-top kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\tmargin: 0px 1em 0px 0px;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0px 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left {\n\tgrid-template-columns: auto 1fr;\n}\n:host > div.tabs-align-right {\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n\torder: 1;\n}\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\twidth: 100%;\n}\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Events } from '../../enums/events';\nimport { KoliBriIconProp } from '../../types/icon';\n\nimport { Generic } from '@a11y-ui/core';\nimport { EventCallback, EventValueOrEventCallback } from '../../types/callbacks';\nimport { Stringified } from '../../types/common';\nimport { Alignment } from '../../types/props/alignment';\nimport { a11yHintLabelingLandmarks, devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { validateAlignment } from '../../utils/validators/alignment';\nimport { translate } from '../../i18n';\nimport { KoliBriButtonCallbacks } from '../../types/button-link';\nimport { Log } from '../../utils/dev.utils';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\nexport type KoliBriTabsCallbacks = /* {\n\tonClose?: true | EventOrEventValueCallback<Event, number>;\n} & */ {\n\tonCreate?:\n\t\t| EventCallback<Event>\n\t\t| {\n\t\t\t\tlabel: string;\n\t\t\t\tcallback: EventCallback<Event>;\n\t\t  };\n} & {\n\t[Events.onSelect]?: EventValueOrEventCallback<CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, number>;\n};\n\ntype RequiredTabButtonProps = {\n\tlabel: string;\n};\ntype OptionalTabButtonProps = {\n\tdisabled: boolean;\n\ticon: Stringified<KoliBriIconProp>;\n\ticonOnly: boolean;\n\ttooltipAlign: Alignment;\n};\nexport type TabButtonProps = Generic.Element.Members<RequiredTabButtonProps, OptionalTabButtonProps>;\n\n/**\n * API\n */\ntype RequiredProps = {\n\tariaLabel: string;\n\ttabs: Stringified<TabButtonProps[]>;\n};\ntype OptionalProps = {\n\ton: KoliBriTabsCallbacks;\n\ttabsAlign: Alignment;\n\tselected: number;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\ttabsAlign: Alignment;\n\tselected: number;\n\ttabs: TabButtonProps[];\n};\ntype OptionalStates = {\n\ton: KoliBriTabsCallbacks;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate selectedTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tlet selectedIndex: number | null = null;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (selectedIndex !== null) {\n\t\t\t\tthis.onSelect(event, selectedIndex, true);\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index, true);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: KoliBriButtonCallbacks<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<kol-button-group-wc role=\"tablist\" aria-label={this.state._ariaLabel} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icon={button._icon}\n\t\t\t\t\t\t_iconOnly={button._iconOnly}\n\t\t\t\t\t\t_label={button._label && button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as KoliBriButtonCallbacks<unknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t)}\n\t\t\t</kol-button-group-wc>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._tabsAlign}`]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t\t<div ref={this.catchTabPanelHost}>{/* <slot /> */}</div>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt den Text an, der die Navigation von anderen Navigationen differenziert.\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Gibt an, welches Tab selektiert sein soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Gibt die geordnete Liste der Seitenhierarchie in Links an.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/**\n\t * Gibt an, ob die Tab-Schalter entweder oben, rechts, unten oder links angeordnet sind.\n\t */\n\t@Prop() public _tabsAlign?: Alignment = 'top';\n\n\t/**\n\t * @see: components/abbr/component.tsx (@State)\n\t */\n\t@State() public state: States = {\n\t\t_ariaLabel: '…',\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t\t_tabsAlign: 'top',\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): 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: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function' || typeof value.onCreate === 'object') {\n\t\t\t\tif (typeof value.onCreate === 'object') {\n\t\t\t\t\tif (typeof value.onCreate.label === 'string' && value.onCreate.label.length > 0) {\n\t\t\t\t\t\tthis.onCreateLabel = value.onCreate.label;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t\tif (typeof value.onCreate.callback === 'function') {\n\t\t\t\t\t\tcallbacks.onCreate = value.onCreate.callback;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tLog.debug(\n\t\t\t\t\t\t\t`[KolTabs] Die onCreate-Callback-Funktion für Neu in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} ist nicht korrekt gesetzt.`\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t\t}\n\t\t\t\tthis.showCreateTab = typeof callbacks.onCreate === 'function';\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t},\n\t\t\t}\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t */\n\t@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: Alignment): void {\n\t\tvalidateAlignment(this, '_tabsAlign', value);\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (componentWillLoad)\n\t */\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateTabsAlign(this._tabsAlign);\n\t}\n\n\tprivate readonly handleTabPanels = () => {\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = this.tabPanelHost.children.length; i < this.state._tabs.length; i++) {\n\t\t\t\tconst div = document.createElement('div');\n\t\t\t\tdiv.setAttribute('aria-labelledby', `tab-${i}`);\n\t\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\t\tdiv.setAttribute('hidden', '');\n\t\t\t\tconst slot = document.createElement('slot');\n\t\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\t\tdiv.appendChild(slot);\n\t\t\t\tthis.tabPanelHost.appendChild(div);\n\t\t\t\tif (this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t// div.appendChild(this.host?.children[0]);\n\t\t\t\t\tthis.host?.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.handleTabPanels();\n\t\tif (this.tabPanelHost instanceof HTMLDivElement) {\n\t\t\tfor (let i = 0; i < this.tabPanelHost.children.length; i++) {\n\t\t\t\tif (i !== this.state._selected) {\n\t\t\t\t\tthis.tabPanelHost.children[i].setAttribute('hidden', '');\n\t\t\t\t} else {\n\t\t\t\t\tthis.tabPanelHost.children[i].removeAttribute('hidden');\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number, focus = false): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (focus === true) {\n\t\t\t// TODO: prüfen, ob hier noch was offen ist\n\t\t\t// devHint('[KolTabs] Tab-Fokus-verschieben geht im Moment nicht.');\n\t\t\tthis.selectedTimeout = setTimeout(() => {\n\t\t\t\tclearTimeout(this.selectedTimeout);\n\t\t\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#tab-${index}`, this.tabPanelsElement);\n\t\t\t\t\tbutton?.focus();\n\t\t\t\t}\n\t\t\t}, 250);\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onCreate === 'function') {\n\t\t\tthis.state._on?.onCreate(event);\n\t\t}\n\t};\n}\n"],"version":3}

package/dist/cjs/kol-textarea.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),i18n=require("./i18n-d56b3736.js"),prop_validators=require("./prop.validators-da7d3db2.js"),reuse=require("./reuse-b43997f3.js"),controller=require("./controller-8c609713.js");require("./index-cc5674d0.js"),require("./a11y.tipps-ab1afcfd.js"),require("./log-c0dc35c9.js"),require("./tab-index-a499e8df.js");class TextareaController extends controller.InputController{constructor(e,t,a){super(e,t,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){prop_validators.watchBoolean(this.component,"_hasCounter",e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){prop_validators.watchNumber(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){prop_validators.watchString(this.component,"_placeholder",e)}validateReadOnly(e){prop_validators.watchBoolean(this.component,"_readOnly",e)}validateResize(e){prop_validators.watchValidator(this.component,"_resize",(e=>"string"==typeof e&&("both"===e||"horizontal"===e||"none"===e||"vertical"===e)),new Set("String {both, horizontal, vertical, none}"),e)}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateRows(e){prop_validators.watchNumber(this.component,"_rows",e)}validateValue(e){prop_validators.watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}",increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,a=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/a);return e.rows=t,i},KolTextarea=class{render(){const{ariaDiscribedBy:e}=controller.getRenderStates(this.state);return index.h(index.Host,null,index.h("kol-input",{_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched},index.h("span",{slot:"label"},index.h("slot",null)),index.h("div",{slot:"input"},index.h("textarea",Object.assign({ref:this.catchRef,part:"textarea",title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onKeyUp:this.onChange,style:{resize:this.state._resize},value:this.state._value})),this.state._hasCounter&&index.h("span",{"aria-atomic":"true","aria-live":"polite"},this.state._currentLength,this.state._maxLength&&index.h(index.Fragment,null,index.h("span",{"aria-label":i18n.translate("kol-of"),role:"img"},"/"),this.state._maxLength)," ",index.h("span",null,i18n.translate("kol-characters"))))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.ref=e,reuse.propergateFocus(this.host,this.ref)},this.onChange=e=>{this.ref instanceof HTMLTextAreaElement&&(prop_validators.setState(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(e)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._hasCounter=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._resize="vertical",this._required=void 0,this._rows=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_id:"⚠",_resize:"vertical"},this.controller=new TextareaController(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.validateAdjustHeight(this._adjustHeight)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolTextarea.style={default:defaultStyleCss},exports.kol_textarea=KolTextarea;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),i18n=require("./i18n-a8392156.js"),prop_validators=require("./prop.validators-f12095c6.js"),reuse=require("./reuse-b43997f3.js"),controller=require("./controller-e360e5cb.js");require("./index-cc5674d0.js"),require("./a11y.tipps-8ac081a4.js"),require("./dev.utils-863840e0.js"),require("./tab-index-5cca6068.js");class TextareaController extends controller.InputController{constructor(e,t,a){super(e,t,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){prop_validators.watchBoolean(this.component,"_hasCounter",e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){prop_validators.watchNumber(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){prop_validators.watchString(this.component,"_placeholder",e)}validateReadOnly(e){prop_validators.watchBoolean(this.component,"_readOnly",e)}validateResize(e){prop_validators.watchValidator(this.component,"_resize",(e=>"string"==typeof e&&("both"===e||"horizontal"===e||"none"===e||"vertical"===e)),new Set("String {both, horizontal, vertical, none}"),e)}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateRows(e){prop_validators.watchNumber(this.component,"_rows",e)}validateValue(e){prop_validators.watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}",increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,a=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/a);return e.rows=t,i},KolTextarea=class{render(){const{ariaDiscribedBy:e}=controller.getRenderStates(this.state);return index.h(index.Host,null,index.h("kol-input",{_alert:this.state._alert,_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_readOnly:this.state._readOnly,_required:this.state._required,_touched:this.state._touched},index.h("span",{slot:"label"},index.h("slot",null)),index.h("div",{slot:"input"},index.h("textarea",Object.assign({ref:this.catchRef,part:"textarea",title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,maxlength:this.state._maxLength,name:this.state._name,readOnly:this.state._readOnly,required:this.state._required,rows:this.state._rows,placeholder:this.state._placeholder,spellcheck:"false"},this.controller.onFacade,{onKeyUp:this.onChange,style:{resize:this.state._resize},value:this.state._value})),this.state._hasCounter&&index.h("span",{"aria-atomic":"true","aria-live":"polite"},this.state._currentLength,this.state._maxLength&&index.h(index.Fragment,null,index.h("span",{"aria-label":i18n.translate("kol-of"),role:"img"},"/"),this.state._maxLength)," ",index.h("span",null,i18n.translate("kol-characters"))))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.ref=e,reuse.propergateFocus(this.host,this.ref)},this.onChange=e=>{this.ref instanceof HTMLTextAreaElement&&(prop_validators.setState(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.ref))),"function"==typeof this.controller.onFacade.onChange&&this.controller.onFacade.onChange(e)},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._hasCounter=void 0,this._disabled=void 0,this._error=void 0,this._hideLabel=void 0,this._hint="",this._id=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=void 0,this._resize="vertical",this._required=void 0,this._rows=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_id:"⚠",_resize:"vertical"},this.controller=new TextareaController(this,"textarea",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateId(e){this.controller.validateId(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.validateAdjustHeight(this._adjustHeight)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolTextarea.style={default:defaultStyleCss},exports.kol_textarea=KolTextarea;

package/dist/cjs/kol-toast.cjs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-da7d3db2.js"),validation=require("./validation-421fff30.js"),a11y_tipps=require("./a11y.tipps-ab1afcfd.js");require("./index-cc5674d0.js"),require("./log-c0dc35c9.js"),require("./reuse-b43997f3.js");const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host>div{position:fixed;top:0;left:0;width:100%;height:0;z-index:200}:host>div>kol-alert{display:block;margin:auto;padding:calc(4 * var(--kolibri-spacing));max-width:750px}:host>div>kol-button-wc{top:0;position:relative;display:block;margin:auto;width:1em}",KolToast=class{constructor(i){index.registerInstance(this,i),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{clearTimeout(this.durationTimeout),this.close()}),this.state._showDuration))},this.close=()=>{var i;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(i=this._on)||void 0===i?void 0:i.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._level=1,this._on=void 0,this._show=!0,this._showDuration=1e4,this._type="default",this.state={_alert:!0,_level:1,_show:!0}}validateAlert(i){prop_validators.watchBoolean(this,"_alert",i)}validateHasCloser(i){prop_validators.watchBoolean(this,"_hasCloser",i)}validateHeading(i){prop_validators.watchString(this,"_heading",i)}validateLevel(i){validation.watchHeadingLevel(this,i)}validateOn(i){if("object"==typeof i&&null!==i){a11y_tipps.featureHint("[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const t={};"function"!=typeof i.onClose&&!0!==i.onClose||(t.onClose=i.onClose),prop_validators.setState(this,"_on",t)}}validateShow(i){prop_validators.watchBoolean(this,"_show",i,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(i){prop_validators.watchNumber(this,"_showDuration",i,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(i){prop_validators.watchValidator(this,"_type",(i=>"string"==typeof i&&("default"===i||"error"===i||"info"===i||"success"===i||"warning"===i)),new Set("String {success, info, warning, error}"),i)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateShow(this._show),this.validateShowDuration(this._showDuration),this.validateType(this._type)}render(){return index.h(index.Host,null,this.state._show&&index.h("div",null,index.h("kol-alert",{_alert:this.state._alert,_heading:this.state._heading,_level:this.state._level,_hasCloser:this.state._hasCloser,_type:this.state._type,_variant:"card",_on:this.on},index.h("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};KolToast.style={default:defaultStyleCss},exports.kol_toast=KolToast;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-29c5d3c6.js"),prop_validators=require("./prop.validators-f12095c6.js"),validation=require("./validation-0f3345ed.js"),a11y_tipps=require("./a11y.tipps-8ac081a4.js");require("./index-cc5674d0.js"),require("./dev.utils-863840e0.js"),require("./reuse-b43997f3.js");const defaultStyleCss=":host{--kolibri-border-color:#e0e0e0;--kolibri-border-radius:0.125rem;--kolibri-border-width:1px;--kolibri-color-error:#f44336;--kolibri-color-info:#2196f3;--kolibri-color-success:#4caf50;--kolibri-color-warning:#ff9800;--kolibri-color-primary:#3f51b5;--kolibri-color-secondary:#ff4081;--kolibri-color-normal:#9e9e9e;--kolibri-color-danger:#f44336;--kolibri-color-ghost:#f5f5f5;--kolibri-color-disabled:#bdbdbd;--kolibri-color-text:#222222;--kolibri-color-visited:#9c27b0;--kolibri-font-family:Verdana, Arial, Tahoma, Helvetica, sans-serif;--kolibri-font-size:16px;--kolibri-spacing:0.25rem}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}*{box-sizing:border-box;font-family:var(--kolibri-font-family)}kol-icon{color:inherit}kol-span-wc{display:grid;place-items:center;width:100%}kol-span-wc>span{display:flex;gap:var(--kolibri-spacing);place-items:center}button{min-height:44px;min-width:44px;padding:0;margin:0}a,button,input,select,textarea{cursor:pointer;font-family:inherit}a.icon-only>kol-span-wc>span>span,button.icon-only>kol-span-wc>span>span{display:none}a{display:inline-flex;place-items:baseline}button{background-color:transparent;border-width:0}h1,h2,h3,h4,h5,h6{font-size:1rem;margin:0}:host>div{position:fixed;top:0;left:0;width:100%;height:0;z-index:200}:host>div>kol-alert{display:block;margin:auto;padding:calc(4 * var(--kolibri-spacing));max-width:750px}:host>div>kol-button-wc{top:0;position:relative;display:block;margin:auto;width:1em}",KolToast=class{constructor(i){index.registerInstance(this,i),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{clearTimeout(this.durationTimeout),this.close()}),this.state._showDuration))},this.close=()=>{var i;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(i=this._on)||void 0===i?void 0:i.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._level=1,this._on=void 0,this._show=!0,this._showDuration=1e4,this._type="default",this.state={_alert:!0,_level:1,_show:!0}}validateAlert(i){prop_validators.watchBoolean(this,"_alert",i)}validateHasCloser(i){prop_validators.watchBoolean(this,"_hasCloser",i)}validateHeading(i){prop_validators.watchString(this,"_heading",i)}validateLevel(i){validation.watchHeadingLevel(this,i)}validateOn(i){if("object"==typeof i&&null!==i){a11y_tipps.featureHint("[KolToast] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const t={};"function"!=typeof i.onClose&&!0!==i.onClose||(t.onClose=i.onClose),prop_validators.setState(this,"_on",t)}}validateShow(i){prop_validators.watchBoolean(this,"_show",i,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(i){prop_validators.watchNumber(this,"_showDuration",i,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(i){prop_validators.watchValidator(this,"_type",(i=>"string"==typeof i&&("default"===i||"error"===i||"info"===i||"success"===i||"warning"===i)),new Set("String {success, info, warning, error}"),i)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateHeading(this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateShow(this._show),this.validateShowDuration(this._showDuration),this.validateType(this._type)}render(){return index.h(index.Host,null,this.state._show&&index.h("div",null,index.h("kol-alert",{_alert:this.state._alert,_heading:this.state._heading,_level:this.state._level,_hasCloser:this.state._hasCloser,_type:this.state._type,_variant:"card",_on:this.on},index.h("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};KolToast.style={default:defaultStyleCss},exports.kol_toast=KolToast;