@public-ui/components 1.7.23 → 1.7.25

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as o,g as s}from"./index-dfb131c4.js";import{t as e}from"./i18n-8ac68853.js";import{v as a}from"./align-9ee9f2d6.js";import{v as n}from"./label-7db04673.js";import{d as l,f as r,c as d}from"./a11y.tipps-f2507b68.js";import{L as h}from"./dev.utils-d4a31161.js";import{s as b,e as u,c,k as p}from"./prop.validators-13f7a3fd.js";import{d as f,j as g}from"./component-names-fed305c7.js";import"./i18n-a2f79a81.js";import"./reuse-d79ab469.js";import"./alignment-30d47781.js";import"./index-117bd1aa.js";const v=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host{display:block}.kol-button-group-wc{display:inline-flex;flex-wrap:wrap}.kol-button-group-wc button{border-bottom-color:transparent;border-bottom-style:solid;display:block}div.grid,div[role=tabpanel]{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:0 1em 0 0}:host>.tabs-align-bottom>.kol-button-group-wc>div>div{margin:0 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:0 1em 0 0}:host>.tabs-align-top>.kol-button-group-wc>div>div{margin:0 1em}:host>div{display:grid}: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}",m=v,k=class{constructor(a){t(this,a),this.onCreateLabel=`${e("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,a)=>{if(a>0){if(e+a<t.length)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a+1):e+a}else if(a<0&&e+a>=0)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a-1):e+a;return e},this.onKeyDown=t=>{let e=null;switch(t.key){case"ArrowRight":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==e&&this.onSelect(t,e)},this.onClickSelect=(t,e)=>{this.onSelect(t,e)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,a=!0,i)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===a){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,i||t);t=i||t,a=!1}if(!1===a){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,i||t);l("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,a,i)=>{let s,o;s="_selected"===i?t:this.state._selected,o="_tabs"===i?t:this.state._tabs,o.length>0&&e.set("_selected",this.selectNextNotDisabledTab(s,o))},this.handleTabPanels=()=>{var t,e,a;if(this.tabPanelHost instanceof HTMLDivElement)for(let i=this.tabPanelHost.children.length;i<this.state._tabs.length;i++){const s=document.createElement("div");s.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),s.setAttribute("id",`tabpanel-${i}`),s.setAttribute("role","tabpanel"),s.setAttribute("hidden","");const o=document.createElement("slot");o.setAttribute("name",`tabpanel-slot-${i}`),s.appendChild(o),this.tabPanelHost.appendChild(s),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[i])&&(null===(a=this.host)||void 0===a||a.children[i].setAttribute("slot",`tabpanel-slot-${i}`))}},this.onCreate=t=>{var e,a;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(a=this.state._on)||void 0===a||a.onCreate(t))},this._align="top",this._ariaLabel=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_align:"top",_label:"…",_selected:0,_tabs:[]}}renderButtonGroup(){return i(g,{role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown,class:"kol-tabs"},this.state._tabs.map(((t,e)=>i(f,{_disabled:t._disabled,_icons:t._icons||t._icon,_hideLabel:t._hideLabel||t._iconOnly,_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:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&i(f,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(o,{key:"52f45558aab0cd4c7ac416f1194b9dd73363997a"},i("div",{key:"a566fffe475f6e28c9a3c2f345e7e31f607acd3a",ref:t=>{this.tabPanelsElement=t},class:{"kol-tabs-wc":!0,[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),i("div",{key:"366b6a45d8028b171b06d6e426936667294904da",ref:this.catchTabPanelHost})))}validateAlign(t){a(this,t)}validateAriaLabel(t){n(this,t,{required:!0})}validateLabel(t){n(this,t)}validateOn(t){if("object"==typeof t&&null!==t){r("[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:h.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:h.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),b(this,"_on",e)}}validateSelected(t){u(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){c(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),d("KolTabs",this.state._tabs.length)}validateTabsAlign(t){this.validateAlign(t)}componentWillLoad(){this.validateAlign(this._align||this._tabsAlign),this.validateLabel(this._label||this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs)}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){var a,i;if(this._selected=e,"function"==typeof(null===(a=this._on)||void 0===a?void 0:a.onSelect)&&(null===(i=this._on)||void 0===i||i.onSelect(t,e)),this.tabPanelsElement){const t=p(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}get host(){return s(this)}static get watchers(){return{_align:["validateAlign"],_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};k.style={default:m};export{k as kol_tabs};
+import{r as t,h as i,H as o,g as s}from"./index-75e4aa9f.js";import{t as e}from"./i18n-d1be0413.js";import{v as a}from"./align-700972a8.js";import{v as n}from"./label-4b21e985.js";import{d as l,f as r,c as d}from"./a11y.tipps-cb29ecd7.js";import{L as h}from"./dev.utils-7c6bbdd4.js";import{s as b,e as u,c,k as p}from"./prop.validators-be8ed69a.js";import{d as f,j as g}from"./component-names-a14739b8.js";import"./i18n-268d2aa6.js";import"./reuse-d79ab469.js";import"./alignment-6803b406.js";import"./index-14005aa7.js";const v=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host{display:block}.kol-button-group-wc{display:inline-flex;flex-wrap:wrap}.kol-button-group-wc button{border-bottom-color:transparent;border-bottom-style:solid;display:block}div.grid,div[role=tabpanel]{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:0 1em 0 0}:host>.tabs-align-bottom>.kol-button-group-wc>div>div{margin:0 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:0 1em 0 0}:host>.tabs-align-top>.kol-button-group-wc>div>div{margin:0 1em}:host>div{display:grid}: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}",m=v,k=class{constructor(a){t(this,a),this.onCreateLabel=`${e("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,a)=>{if(a>0){if(e+a<t.length)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a+1):e+a}else if(a<0&&e+a>=0)return t[e+a]._disabled?this.nextPossibleTabIndex(t,e,a-1):e+a;return e},this.onKeyDown=t=>{let e=null;switch(t.key){case"ArrowRight":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":e=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==e&&this.onSelect(t,e)},this.onClickSelect=(t,e)=>{this.onSelect(t,e)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,a=!0,i)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===a){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,i||t);t=i||t,a=!1}if(!1===a){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,i||t);l("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,a,i)=>{let s,o;s="_selected"===i?t:this.state._selected,o="_tabs"===i?t:this.state._tabs,o.length>0&&e.set("_selected",this.selectNextNotDisabledTab(s,o))},this.handleTabPanels=()=>{var t,e,a;if(this.tabPanelHost instanceof HTMLDivElement)for(let i=this.tabPanelHost.children.length;i<this.state._tabs.length;i++){const s=document.createElement("div");s.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),s.setAttribute("id",`tabpanel-${i}`),s.setAttribute("role","tabpanel"),s.setAttribute("hidden","");const o=document.createElement("slot");o.setAttribute("name",`tabpanel-slot-${i}`),s.appendChild(o),this.tabPanelHost.appendChild(s),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[i])&&(null===(a=this.host)||void 0===a||a.children[i].setAttribute("slot",`tabpanel-slot-${i}`))}},this.onCreate=t=>{var e,a;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(a=this.state._on)||void 0===a||a.onCreate(t))},this._align="top",this._ariaLabel=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this._tabsAlign="top",this.state={_align:"top",_label:"…",_selected:0,_tabs:[]}}renderButtonGroup(){return i(g,{role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown,class:"kol-tabs"},this.state._tabs.map(((t,e)=>i(f,{_disabled:t._disabled,_icons:t._icons||t._icon,_hideLabel:t._hideLabel||t._iconOnly,_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:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&i(f,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(o,{key:"52f45558aab0cd4c7ac416f1194b9dd73363997a"},i("div",{key:"a566fffe475f6e28c9a3c2f345e7e31f607acd3a",ref:t=>{this.tabPanelsElement=t},class:{"kol-tabs-wc":!0,[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),i("div",{key:"366b6a45d8028b171b06d6e426936667294904da",ref:this.catchTabPanelHost})))}validateAlign(t){a(this,t)}validateAriaLabel(t){n(this,t,{required:!0})}validateLabel(t){n(this,t)}validateOn(t){if("object"==typeof t&&null!==t){r("[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:h.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:h.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),b(this,"_on",e)}}validateSelected(t){u(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){c(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),d("KolTabs",this.state._tabs.length)}validateTabsAlign(t){this.validateAlign(t)}componentWillLoad(){this.validateAlign(this._align||this._tabsAlign),this.validateLabel(this._label||this._ariaLabel),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs)}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){var a,i;if(this._selected=e,"function"==typeof(null===(a=this._on)||void 0===a?void 0:a.onSelect)&&(null===(i=this._on)||void 0===i||i.onSelect(t,e)),this.tabPanelsElement){const t=p(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}get host(){return s(this)}static get watchers(){return{_align:["validateAlign"],_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};k.style={default:m};export{k as kol_tabs};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolTabsDefaultStyle0","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","length","_disabled","onKeyDown","event","selectedIndex","key","state","_tabs","_selected","onSelect","onClickSelect","index","onMouseDown","preventDefault","stopPropagation","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","set","handleTabPanels","HTMLDivElement","i","children","div","document","createElement","setAttribute","_label","replace","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","_align","renderButtonGroup","h","KolButtonGroupWcTag","role","class","map","button","KolButtonWcTag","_icons","_icon","_hideLabel","_iconOnly","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","render","Host","ref","tabPanelsElement","validateAlign","value","validateAriaLabel","validateLabel","required","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","validateTabsAlign","componentWillLoad","_tabsAlign","_ariaLabel","componentDidRender","removeAttribute","koliBriQuerySelector","focus"],"sources":["src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/component.tsx"],"sourcesContent":["@import '../style';\n@import '../host-display-block';\n\n.kol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n}\n\n.kol-button-group-wc button {\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tdisplay: block;\n}\n\ndiv.grid,\ndiv[role='tabpanel'] {\n\theight: 100%;\n}\n\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-right .kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n\n:host > .tabs-align-left .kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc {\n\torder: 2;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc > div {\n\tdisplay: flex;\n}\n\n:host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n\n:host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n\n:host > .tabs-align-top .kol-button-group-wc {\n\torder: 0;\n}\n\n:host > .tabs-align-top .kol-button-group-wc > div {\n\tdisplay: flex;\n}\n\n:host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n\n:host > .tabs-align-top > .kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n\n:host > div {\n\tdisplay: grid;\n}\n\n:host > .tabs-align-left .kol-button-group-wc,\n:host > .tabs-align-top .kol-button-group-wc {\n\torder: 0;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc,\n:host > .tabs-align-right .kol-button-group-wc {\n\torder: 1;\n}\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\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\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 type { Generic } from 'adopted-style-sheets';\nimport { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { AlignPropType, validateAlign } from '../../types/props/align';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { StencilUnknown } from '../../types/unknown';\nimport { devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { Log } from '../../utils/dev.utils';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber } from '../../utils/prop.validators';\nimport { API, KoliBriTabsCallbacks, States, TabButtonProps } from './types';\nimport { KolButtonGroupWcTag, KolButtonWcTag } from '../../core/component-names';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements API {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\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\tlet selectedIndex: number | null = null;\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowRight':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\tbreak;\n\t\t}\n\t\tif (selectedIndex !== null) {\n\t\t\tthis.onSelect(event, selectedIndex);\n\t\t}\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.preventDefault();\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<KolButtonGroupWcTag role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown} class=\"kol-tabs\">\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons || button._icon}\n\t\t\t\t\t\t_hideLabel={button._hideLabel || button._iconOnly}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\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={`${this.state._label.replace(/\\s/g, '-')}-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></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<KolButtonWcTag\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></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</KolButtonGroupWcTag>\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'kol-tabs-wc': true,\n\t\t\t\t\t\t[`tabs-align-${this.state._align}`]: 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 * Defines the position of the tab captions.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\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 * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/**\n\t * Deprecated: Setzt die Position der Registrierkarten.\n\t * @deprecated Use _align.\n\t */\n\t@Prop() public _tabsAlign?: AlignPropType = 'top';\n\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_label: '…', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\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@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: 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@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@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@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: AlignPropType): void {\n\t\tthis.validateAlign(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align || this._tabsAlign);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\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', `${this.state._label.replace(/\\s/g, '-')}-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): 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 (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\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"],"mappings":";;;ygBAAA,MAAMA,EAAkB,mrFACxB,MAAAC,EAAeD,E,MCuBFE,EAAO,M,yBAGXC,KAAAC,cAAgB,GAAGC,EAAU,eAC7BF,KAAAG,cAAgB,MAEhBH,KAAAI,qBAAuB,CAACC,EAAwBC,EAAgBC,KACvE,GAAIA,EAAO,EAAG,CACb,GAAID,EAASC,EAAOF,EAAKG,OAAQ,CAChC,GAAIH,EAAKC,EAASC,GAAME,UAAW,CAClC,OAAOT,KAAKI,qBAAqBC,EAAMC,EAAQC,EAAO,E,CAEvD,OAAOD,EAASC,C,OAEX,GAAIA,EAAO,EAAG,CACpB,GAAID,EAASC,GAAQ,EAAG,CACvB,GAAIF,EAAKC,EAASC,GAAME,UAAW,CAClC,OAAOT,KAAKI,qBAAqBC,EAAMC,EAAQC,EAAO,E,CAEvD,OAAOD,EAASC,C,EAGlB,OAAOD,CAAM,EAGNN,KAAAU,UAAaC,IACpB,IAAIC,EAA+B,KACnC,OAAQD,EAAME,KACb,IAAK,aACJD,EAAgBZ,KAAKI,qBAAqBJ,KAAKc,MAAMC,MAAOf,KAAKc,MAAME,UAAW,GAClF,MACD,IAAK,YACJJ,EAAgBZ,KAAKI,qBAAqBJ,KAAKc,MAAMC,MAAOf,KAAKc,MAAME,WAAY,GACnF,MAEF,GAAIJ,IAAkB,KAAM,CAC3BZ,KAAKiB,SAASN,EAAOC,E,GAINZ,KAAAkB,cAAgB,CAACP,EAAmBQ,KACpDnB,KAAKiB,SAASN,EAAOQ,EAAM,EASXnB,KAAAoB,YAAeT,IAC/BA,EAAMU,iBACNV,EAAMW,iBAAiB,EAGPtB,KAAAuB,UAA6C,CAC7DC,QAASxB,KAAKkB,cACdE,YAAapB,KAAKoB,aAuCFpB,KAAAyB,kBAAqBC,IACrC1B,KAAK2B,aAAeD,CAAE,EAmEf1B,KAAA4B,yBAA2B,CAACC,EAAkBxB,EAAwByB,EAAW,KAAMC,KAC9F,GAAIF,EAAWxB,EAAKG,OAAS,EAAG,CAC/BqB,EAAWxB,EAAKG,OAAS,C,CAE1B,GAAIqB,EAAW,EAAG,CACjBA,EAAW,C,CAEZ,GAAIG,MAAMC,QAAQ5B,IAASA,EAAKwB,GAAW,CAC1C,GAAIxB,EAAKwB,GAAUpB,UAAW,CAC7B,GAAIqB,IAAa,KAAM,CACtB,GAAID,EAAWxB,EAAKG,OAAS,EAAG,CAC/B,OAAOR,KAAK4B,yBAAyBC,EAAW,EAAGxB,EAAM,KAAM0B,GAAmBF,E,KAC5E,CACNA,EAAWE,GAAmBF,EAC9BC,EAAW,K,EAGb,GAAIA,IAAa,MAAO,CACvB,GAAID,EAAW,EAAG,CACjB,OAAO7B,KAAK4B,yBAAyBC,EAAW,EAAGxB,EAAM,MAAO0B,GAAmBF,E,KAC7E,CACNK,EAAQ,iF,IAKZ,OAAOL,CAAQ,EAGR7B,KAAAmC,oBAAsB,CAACC,EAAoBC,EAAiCC,EAAuCzB,KAC1H,IAAIgB,EACJ,GAAIhB,IAAQ,YAAa,CACxBgB,EAAWO,C,KACL,CACNP,EAAW7B,KAAKc,MAAME,S,CAEvB,IAAIX,EACJ,GAAIQ,IAAQ,QAAS,CACpBR,EAAO+B,C,KACD,CACN/B,EAAOL,KAAKc,MAAMC,K,CAEnB,GAAIV,EAAKG,OAAS,EAAG,CACpB6B,EAAUE,IAAI,YAAavC,KAAK4B,yBAAyBC,EAAUxB,G,GA0GpDL,KAAAwC,gBAAkB,K,UAClC,GAAIxC,KAAK2B,wBAAwBc,eAAgB,CAChD,IAAK,IAAIC,EAAI1C,KAAK2B,aAAagB,SAASnC,OAAQkC,EAAI1C,KAAKc,MAAMC,MAAMP,OAAQkC,IAAK,CACjF,MAAME,EAAMC,SAASC,cAAc,OACnCF,EAAIG,aAAa,kBAAmB,GAAG/C,KAAKc,MAAMkC,OAAOC,QAAQ,MAAO,YAAYP,KACpFE,EAAIG,aAAa,KAAM,YAAYL,KACnCE,EAAIG,aAAa,OAAQ,YACzBH,EAAIG,aAAa,SAAU,IAC3B,MAAMG,EAAOL,SAASC,cAAc,QACpCI,EAAKH,aAAa,OAAQ,iBAAiBL,KAC3CE,EAAIO,YAAYD,GAChBlD,KAAK2B,aAAawB,YAAYP,GAC9B,KAAIQ,EAAApD,KAAKqD,QAAI,MAAAD,SAAA,SAAAA,EAAET,oBAAoBW,kBAAkBC,EAAAvD,KAAKqD,QAAI,MAAAE,SAAA,SAAAA,EAAEZ,SAASD,IAAqC,EAE7Gc,EAAAxD,KAAKqD,QAAI,MAAAG,SAAA,SAAAA,EAAEb,SAASD,GAAGK,aAAa,OAAQ,iBAAiBL,I,KA8BzD1C,KAAAyD,SAAY9C,I,QACnBA,EAAMU,iBACNV,EAAMW,kBACN,WAAW8B,EAAApD,KAAKc,MAAM4C,OAAG,MAAAN,SAAA,SAAAA,EAAEK,YAAa,WAAY,EACnDF,EAAAvD,KAAKc,MAAM4C,OAAG,MAAAH,SAAA,SAAAA,EAAEE,SAAS9C,E,eA/Oa,M,kFAsB4B,E,qCAWxB,M,WAEZ,CAC/BgD,OAAQ,MACRX,OAAQ,IACRhC,UAAW,EACXD,MAAO,G,CArGA,iBAAA6C,GACP,OACCC,EAACC,EAAmB,CAACC,KAAK,UAAS,aAAa/D,KAAKc,MAAMkC,OAAQtC,UAAWV,KAAKU,UAAWsD,MAAM,YAClGhE,KAAKc,MAAMC,MAAMkD,KAAI,CAACC,EAAwB/C,IAC9C0C,EAACM,EAAc,CACd1D,UAAWyD,EAAOzD,UAClB2D,OAAQF,EAAOE,QAAUF,EAAOG,MAChCC,WAAYJ,EAAOI,YAAcJ,EAAOK,UACxCvB,OAAQkB,EAAOlB,OACfU,IAAK1D,KAAKuB,UACViD,UAAWxE,KAAKc,MAAME,YAAcG,EAAQ,GAAK,EACjDsD,cAAeP,EAAOO,cACtBC,SAAU1E,KAAKc,MAAME,YAAcG,EAAQ,SAAWwD,UACtDC,aAAc5E,KAAKc,MAAME,YAAcG,EAAQ,WAAawD,UAC5DE,cAAe,YAAY1D,IAC3B2D,cAAe9E,KAAKc,MAAME,YAAcG,EACxC4D,IAAK,GAAG/E,KAAKc,MAAMkC,OAAOC,QAAQ,MAAO,YAAY9B,IACrD6D,MAAM,MACNC,OAAQ9D,MAGTnB,KAAKG,eACL0D,EAACM,EAAc,CACdH,MAAM,gBACNhB,OAAQhD,KAAKC,cACbyD,IAAK,CACJlC,QAASxB,KAAKyD,Y,CAcb,MAAAyB,GACN,OACCrB,EAACsB,EAAI,CAAAtE,IAAA,4CACJgD,EAAA,OAAAhD,IAAA,2CACCuE,IAAM1D,IACL1B,KAAKqF,iBAAmB3D,CAAiB,EAE1CsC,MAAO,CACN,cAAe,KACf,CAAC,cAAchE,KAAKc,MAAM6C,UAAW,OAGrC3D,KAAK4D,oBACNC,EAAA,OAAAhD,IAAA,2CAAKuE,IAAKpF,KAAKyB,qB,CAmGZ,aAAA6D,CAAcC,GACpBD,EAActF,KAAMuF,E,CAOd,iBAAAC,CAAkBD,GACxBE,EAAczF,KAAMuF,EAAO,CAC1BG,SAAU,M,CAKL,aAAAD,CAAcF,GACpBE,EAAczF,KAAMuF,E,CAId,UAAAI,CAAWJ,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDK,EAAY,2EACZ,MAAMrE,EAAkC,GACxC,UAAWgE,EAAM9B,WAAa,mBAAqB8B,EAAM9B,WAAa,SAAU,CAC/E,UAAW8B,EAAM9B,WAAa,SAAU,CACvC,UAAW8B,EAAM9B,SAASoC,QAAU,UAAYN,EAAM9B,SAASoC,MAAMrF,OAAS,EAAG,CAChFR,KAAKC,cAAgBsF,EAAM9B,SAASoC,K,KAC9B,CACNC,EAAIC,MACH,0I,CAQF,UAAWR,EAAM9B,SAASuC,WAAa,WAAY,CAClDzE,EAAUkC,SAAW8B,EAAM9B,SAASuC,Q,KAC9B,CACNF,EAAIC,MACH,0J,MAQI,CACNxE,EAAUkC,SAAW8B,EAAM9B,Q,CAE5BzD,KAAKG,qBAAuBoB,EAAUkC,WAAa,U,CAEpD,UAAW8B,EAAMtE,WAAa,WAAY,CACzCM,EAAUN,SAAWsE,EAAMtE,Q,CAE5BgF,EAA+BjG,KAAM,MAAOuB,E,EAKvC,gBAAA2E,CAAiBX,GACvBY,EAAYnG,KAAM,YAAauF,EAAO,CACrCa,MAAO,CACNC,YAAarG,KAAKmC,sB,CAMd,YAAAmE,CAAaf,GACnBgB,EACCvG,KACA,SACCwG,UAAgCA,IAAS,UAAYA,IAAS,aAAeA,EAAKxD,SAAW,UAAYwD,EAAKxD,OAAOxC,OAAS,GAC/H+E,EACAZ,UACA,CACCyB,MAAO,CACNC,YAAarG,KAAKmC,uBAIrBsE,EAAuB,UAAWzG,KAAKc,MAAMC,MAAMP,O,CAI7C,iBAAAkG,CAAkBnB,GACxBvF,KAAKsF,cAAcC,E,CAGb,iBAAAoB,GACN3G,KAAKsF,cAActF,KAAK2D,QAAU3D,KAAK4G,YACvC5G,KAAKyF,cAAczF,KAAKgD,QAAUhD,KAAK6G,YACvC7G,KAAK2F,WAAW3F,KAAK0D,KACrB1D,KAAKkG,iBAAiBlG,KAAKgB,WAC3BhB,KAAKsG,aAAatG,KAAKe,M,CAuBjB,kBAAA+F,GACN9G,KAAKwC,kBACL,GAAIxC,KAAK2B,wBAAwBc,eAAgB,CAChD,IAAK,IAAIC,EAAI,EAAGA,EAAI1C,KAAK2B,aAAagB,SAASnC,OAAQkC,IAAK,CAC3D,GAAIA,IAAM1C,KAAKc,MAAME,UAAW,CAC/BhB,KAAK2B,aAAagB,SAASD,GAAGK,aAAa,SAAU,G,KAC/C,CACN/C,KAAK2B,aAAagB,SAASD,GAAGqE,gBAAgB,S,IAM1C,QAAA9F,CAASN,EAAgEQ,G,QAChFnB,KAAKgB,UAAYG,EACjB,WAAWiC,EAAApD,KAAK0D,OAAG,MAAAN,SAAA,SAAAA,EAAEnC,YAAa,WAAY,EAC7CsC,EAAAvD,KAAK0D,OAAG,MAAAH,SAAA,SAAAA,EAAEtC,SAASN,EAAOQ,E,CAE3B,GAAInB,KAAKqF,iBAAmD,CAC3D,MAAMnB,EAA6B8C,EAAqB,UAAUhH,KAAKc,MAAMkC,OAAOC,QAAQ,MAAO,YAAY9B,IAASnB,KAAKqF,kBAC7HnB,IAAM,MAANA,SAAM,SAANA,EAAQ+C,O"}
+{"version":3,"names":["defaultStyleCss","KolTabsDefaultStyle0","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","length","_disabled","onKeyDown","event","selectedIndex","key","state","_tabs","_selected","onSelect","onClickSelect","index","onMouseDown","preventDefault","stopPropagation","callbacks","onClick","catchTabPanelHost","el","tabPanelHost","selectNextNotDisabledTab","selected","upOrDown","initialSelected","Array","isArray","devHint","syncSelectedAndTabs","nextValue","nextState","_component","set","handleTabPanels","HTMLDivElement","i","children","div","document","createElement","setAttribute","_label","replace","slot","appendChild","_a","host","HTMLCollection","_b","_c","onCreate","_on","_align","renderButtonGroup","h","KolButtonGroupWcTag","role","class","map","button","KolButtonWcTag","_icons","_icon","_hideLabel","_iconOnly","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","render","Host","ref","tabPanelsElement","validateAlign","value","validateAriaLabel","validateLabel","required","validateOn","featureHint","label","Log","debug","callback","setState","validateSelected","watchNumber","hooks","beforePatch","validateTabs","watchJsonArrayString","item","uiUxHintMillerscheZahl","validateTabsAlign","componentWillLoad","_tabsAlign","_ariaLabel","componentDidRender","removeAttribute","koliBriQuerySelector","focus"],"sources":["src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/component.tsx"],"sourcesContent":["@import '../style';\n@import '../host-display-block';\n\n.kol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n}\n\n.kol-button-group-wc button {\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tdisplay: block;\n}\n\ndiv.grid,\ndiv[role='tabpanel'] {\n\theight: 100%;\n}\n\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n\n:host > .tabs-align-right .kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n\n:host > .tabs-align-left .kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc {\n\torder: 2;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc > div {\n\tdisplay: flex;\n}\n\n:host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n\n:host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n\n:host > .tabs-align-top .kol-button-group-wc {\n\torder: 0;\n}\n\n:host > .tabs-align-top .kol-button-group-wc > div {\n\tdisplay: flex;\n}\n\n:host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n\n:host > .tabs-align-top > .kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n\n:host > div {\n\tdisplay: grid;\n}\n\n:host > .tabs-align-left .kol-button-group-wc,\n:host > .tabs-align-top .kol-button-group-wc {\n\torder: 0;\n}\n\n:host > .tabs-align-bottom .kol-button-group-wc,\n:host > .tabs-align-right .kol-button-group-wc {\n\torder: 1;\n}\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\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\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 type { Generic } from 'adopted-style-sheets';\nimport { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { Stringified } from '../../types/common';\nimport { AlignPropType, validateAlign } from '../../types/props/align';\nimport { ButtonCallbacksPropType } from '../../types/props/button-callbacks';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { StencilUnknown } from '../../types/unknown';\nimport { devHint, featureHint, uiUxHintMillerscheZahl } from '../../utils/a11y.tipps';\nimport { Log } from '../../utils/dev.utils';\nimport { koliBriQuerySelector, setState, watchJsonArrayString, watchNumber } from '../../utils/prop.validators';\nimport { API, KoliBriTabsCallbacks, States, TabButtonProps } from './types';\nimport { KolButtonGroupWcTag, KolButtonWcTag } from '../../core/component-names';\n\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements API {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\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\tlet selectedIndex: number | null = null;\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowRight':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowLeft':\n\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\tbreak;\n\t\t}\n\t\tif (selectedIndex !== null) {\n\t\t\tthis.onSelect(event, selectedIndex);\n\t\t}\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.preventDefault();\n\t// \tevent.stopPropagation();\n\t// \tthis.onClose(button, event, index);\n\t// };\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t<KolButtonGroupWcTag role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown} class=\"kol-tabs\">\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons || button._icon}\n\t\t\t\t\t\t_hideLabel={button._hideLabel || button._iconOnly}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\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={`${this.state._label.replace(/\\s/g, '-')}-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></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<KolButtonWcTag\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></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</KolButtonGroupWcTag>\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'kol-tabs-wc': true,\n\t\t\t\t\t\t[`tabs-align-${this.state._align}`]: 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 * Defines the position of the tab captions.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType; // TODO: required in v2\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 * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t/**\n\t * Deprecated: Setzt die Position der Registrierkarten.\n\t * @deprecated Use _align.\n\t */\n\t@Prop() public _tabsAlign?: AlignPropType = 'top';\n\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_label: '…', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\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@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: 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@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@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@Watch('_tabsAlign')\n\tpublic validateTabsAlign(value?: AlignPropType): void {\n\t\tthis.validateAlign(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align || this._tabsAlign);\n\t\tthis.validateLabel(this._label || this._ariaLabel);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\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', `${this.state._label.replace(/\\s/g, '-')}-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): 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 (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\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"],"mappings":";;;ygBAAA,MAAMA,EAAkB,mrFACxB,MAAAC,EAAeD,E,MCuBFE,EAAO,M,yBAGXC,KAAAC,cAAgB,GAAGC,EAAU,eAC7BF,KAAAG,cAAgB,MAEhBH,KAAAI,qBAAuB,CAACC,EAAwBC,EAAgBC,KACvE,GAAIA,EAAO,EAAG,CACb,GAAID,EAASC,EAAOF,EAAKG,OAAQ,CAChC,GAAIH,EAAKC,EAASC,GAAME,UAAW,CAClC,OAAOT,KAAKI,qBAAqBC,EAAMC,EAAQC,EAAO,E,CAEvD,OAAOD,EAASC,C,OAEX,GAAIA,EAAO,EAAG,CACpB,GAAID,EAASC,GAAQ,EAAG,CACvB,GAAIF,EAAKC,EAASC,GAAME,UAAW,CAClC,OAAOT,KAAKI,qBAAqBC,EAAMC,EAAQC,EAAO,E,CAEvD,OAAOD,EAASC,C,EAGlB,OAAOD,CAAM,EAGNN,KAAAU,UAAaC,IACpB,IAAIC,EAA+B,KACnC,OAAQD,EAAME,KACb,IAAK,aACJD,EAAgBZ,KAAKI,qBAAqBJ,KAAKc,MAAMC,MAAOf,KAAKc,MAAME,UAAW,GAClF,MACD,IAAK,YACJJ,EAAgBZ,KAAKI,qBAAqBJ,KAAKc,MAAMC,MAAOf,KAAKc,MAAME,WAAY,GACnF,MAEF,GAAIJ,IAAkB,KAAM,CAC3BZ,KAAKiB,SAASN,EAAOC,E,GAINZ,KAAAkB,cAAgB,CAACP,EAAmBQ,KACpDnB,KAAKiB,SAASN,EAAOQ,EAAM,EASXnB,KAAAoB,YAAeT,IAC/BA,EAAMU,iBACNV,EAAMW,iBAAiB,EAGPtB,KAAAuB,UAA6C,CAC7DC,QAASxB,KAAKkB,cACdE,YAAapB,KAAKoB,aAuCFpB,KAAAyB,kBAAqBC,IACrC1B,KAAK2B,aAAeD,CAAE,EAmEf1B,KAAA4B,yBAA2B,CAACC,EAAkBxB,EAAwByB,EAAW,KAAMC,KAC9F,GAAIF,EAAWxB,EAAKG,OAAS,EAAG,CAC/BqB,EAAWxB,EAAKG,OAAS,C,CAE1B,GAAIqB,EAAW,EAAG,CACjBA,EAAW,C,CAEZ,GAAIG,MAAMC,QAAQ5B,IAASA,EAAKwB,GAAW,CAC1C,GAAIxB,EAAKwB,GAAUpB,UAAW,CAC7B,GAAIqB,IAAa,KAAM,CACtB,GAAID,EAAWxB,EAAKG,OAAS,EAAG,CAC/B,OAAOR,KAAK4B,yBAAyBC,EAAW,EAAGxB,EAAM,KAAM0B,GAAmBF,E,KAC5E,CACNA,EAAWE,GAAmBF,EAC9BC,EAAW,K,EAGb,GAAIA,IAAa,MAAO,CACvB,GAAID,EAAW,EAAG,CACjB,OAAO7B,KAAK4B,yBAAyBC,EAAW,EAAGxB,EAAM,MAAO0B,GAAmBF,E,KAC7E,CACNK,EAAQ,iF,IAKZ,OAAOL,CAAQ,EAGR7B,KAAAmC,oBAAsB,CAACC,EAAoBC,EAAiCC,EAAuCzB,KAC1H,IAAIgB,EACJ,GAAIhB,IAAQ,YAAa,CACxBgB,EAAWO,C,KACL,CACNP,EAAW7B,KAAKc,MAAME,S,CAEvB,IAAIX,EACJ,GAAIQ,IAAQ,QAAS,CACpBR,EAAO+B,C,KACD,CACN/B,EAAOL,KAAKc,MAAMC,K,CAEnB,GAAIV,EAAKG,OAAS,EAAG,CACpB6B,EAAUE,IAAI,YAAavC,KAAK4B,yBAAyBC,EAAUxB,G,GA0GpDL,KAAAwC,gBAAkB,K,UAClC,GAAIxC,KAAK2B,wBAAwBc,eAAgB,CAChD,IAAK,IAAIC,EAAI1C,KAAK2B,aAAagB,SAASnC,OAAQkC,EAAI1C,KAAKc,MAAMC,MAAMP,OAAQkC,IAAK,CACjF,MAAME,EAAMC,SAASC,cAAc,OACnCF,EAAIG,aAAa,kBAAmB,GAAG/C,KAAKc,MAAMkC,OAAOC,QAAQ,MAAO,YAAYP,KACpFE,EAAIG,aAAa,KAAM,YAAYL,KACnCE,EAAIG,aAAa,OAAQ,YACzBH,EAAIG,aAAa,SAAU,IAC3B,MAAMG,EAAOL,SAASC,cAAc,QACpCI,EAAKH,aAAa,OAAQ,iBAAiBL,KAC3CE,EAAIO,YAAYD,GAChBlD,KAAK2B,aAAawB,YAAYP,GAC9B,KAAIQ,EAAApD,KAAKqD,QAAI,MAAAD,SAAA,SAAAA,EAAET,oBAAoBW,kBAAkBC,EAAAvD,KAAKqD,QAAI,MAAAE,SAAA,SAAAA,EAAEZ,SAASD,IAAqC,EAE7Gc,EAAAxD,KAAKqD,QAAI,MAAAG,SAAA,SAAAA,EAAEb,SAASD,GAAGK,aAAa,OAAQ,iBAAiBL,I,KA8BzD1C,KAAAyD,SAAY9C,I,QACnBA,EAAMU,iBACNV,EAAMW,kBACN,WAAW8B,EAAApD,KAAKc,MAAM4C,OAAG,MAAAN,SAAA,SAAAA,EAAEK,YAAa,WAAY,EACnDF,EAAAvD,KAAKc,MAAM4C,OAAG,MAAAH,SAAA,SAAAA,EAAEE,SAAS9C,E,eA/Oa,M,kFAsB4B,E,qCAWxB,M,WAEZ,CAC/BgD,OAAQ,MACRX,OAAQ,IACRhC,UAAW,EACXD,MAAO,G,CArGA,iBAAA6C,GACP,OACCC,EAACC,EAAmB,CAACC,KAAK,UAAS,aAAa/D,KAAKc,MAAMkC,OAAQtC,UAAWV,KAAKU,UAAWsD,MAAM,YAClGhE,KAAKc,MAAMC,MAAMkD,KAAI,CAACC,EAAwB/C,IAC9C0C,EAACM,EAAc,CACd1D,UAAWyD,EAAOzD,UAClB2D,OAAQF,EAAOE,QAAUF,EAAOG,MAChCC,WAAYJ,EAAOI,YAAcJ,EAAOK,UACxCvB,OAAQkB,EAAOlB,OACfU,IAAK1D,KAAKuB,UACViD,UAAWxE,KAAKc,MAAME,YAAcG,EAAQ,GAAK,EACjDsD,cAAeP,EAAOO,cACtBC,SAAU1E,KAAKc,MAAME,YAAcG,EAAQ,SAAWwD,UACtDC,aAAc5E,KAAKc,MAAME,YAAcG,EAAQ,WAAawD,UAC5DE,cAAe,YAAY1D,IAC3B2D,cAAe9E,KAAKc,MAAME,YAAcG,EACxC4D,IAAK,GAAG/E,KAAKc,MAAMkC,OAAOC,QAAQ,MAAO,YAAY9B,IACrD6D,MAAM,MACNC,OAAQ9D,MAGTnB,KAAKG,eACL0D,EAACM,EAAc,CACdH,MAAM,gBACNhB,OAAQhD,KAAKC,cACbyD,IAAK,CACJlC,QAASxB,KAAKyD,Y,CAcb,MAAAyB,GACN,OACCrB,EAACsB,EAAI,CAAAtE,IAAA,4CACJgD,EAAA,OAAAhD,IAAA,2CACCuE,IAAM1D,IACL1B,KAAKqF,iBAAmB3D,CAAiB,EAE1CsC,MAAO,CACN,cAAe,KACf,CAAC,cAAchE,KAAKc,MAAM6C,UAAW,OAGrC3D,KAAK4D,oBACNC,EAAA,OAAAhD,IAAA,2CAAKuE,IAAKpF,KAAKyB,qB,CAmGZ,aAAA6D,CAAcC,GACpBD,EAActF,KAAMuF,E,CAOd,iBAAAC,CAAkBD,GACxBE,EAAczF,KAAMuF,EAAO,CAC1BG,SAAU,M,CAKL,aAAAD,CAAcF,GACpBE,EAAczF,KAAMuF,E,CAId,UAAAI,CAAWJ,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDK,EAAY,2EACZ,MAAMrE,EAAkC,GACxC,UAAWgE,EAAM9B,WAAa,mBAAqB8B,EAAM9B,WAAa,SAAU,CAC/E,UAAW8B,EAAM9B,WAAa,SAAU,CACvC,UAAW8B,EAAM9B,SAASoC,QAAU,UAAYN,EAAM9B,SAASoC,MAAMrF,OAAS,EAAG,CAChFR,KAAKC,cAAgBsF,EAAM9B,SAASoC,K,KAC9B,CACNC,EAAIC,MACH,0I,CAQF,UAAWR,EAAM9B,SAASuC,WAAa,WAAY,CAClDzE,EAAUkC,SAAW8B,EAAM9B,SAASuC,Q,KAC9B,CACNF,EAAIC,MACH,0J,MAQI,CACNxE,EAAUkC,SAAW8B,EAAM9B,Q,CAE5BzD,KAAKG,qBAAuBoB,EAAUkC,WAAa,U,CAEpD,UAAW8B,EAAMtE,WAAa,WAAY,CACzCM,EAAUN,SAAWsE,EAAMtE,Q,CAE5BgF,EAA+BjG,KAAM,MAAOuB,E,EAKvC,gBAAA2E,CAAiBX,GACvBY,EAAYnG,KAAM,YAAauF,EAAO,CACrCa,MAAO,CACNC,YAAarG,KAAKmC,sB,CAMd,YAAAmE,CAAaf,GACnBgB,EACCvG,KACA,SACCwG,UAAgCA,IAAS,UAAYA,IAAS,aAAeA,EAAKxD,SAAW,UAAYwD,EAAKxD,OAAOxC,OAAS,GAC/H+E,EACAZ,UACA,CACCyB,MAAO,CACNC,YAAarG,KAAKmC,uBAIrBsE,EAAuB,UAAWzG,KAAKc,MAAMC,MAAMP,O,CAI7C,iBAAAkG,CAAkBnB,GACxBvF,KAAKsF,cAAcC,E,CAGb,iBAAAoB,GACN3G,KAAKsF,cAActF,KAAK2D,QAAU3D,KAAK4G,YACvC5G,KAAKyF,cAAczF,KAAKgD,QAAUhD,KAAK6G,YACvC7G,KAAK2F,WAAW3F,KAAK0D,KACrB1D,KAAKkG,iBAAiBlG,KAAKgB,WAC3BhB,KAAKsG,aAAatG,KAAKe,M,CAuBjB,kBAAA+F,GACN9G,KAAKwC,kBACL,GAAIxC,KAAK2B,wBAAwBc,eAAgB,CAChD,IAAK,IAAIC,EAAI,EAAGA,EAAI1C,KAAK2B,aAAagB,SAASnC,OAAQkC,IAAK,CAC3D,GAAIA,IAAM1C,KAAKc,MAAME,UAAW,CAC/BhB,KAAK2B,aAAagB,SAASD,GAAGK,aAAa,SAAU,G,KAC/C,CACN/C,KAAK2B,aAAagB,SAASD,GAAGqE,gBAAgB,S,IAM1C,QAAA9F,CAASN,EAAgEQ,G,QAChFnB,KAAKgB,UAAYG,EACjB,WAAWiC,EAAApD,KAAK0D,OAAG,MAAAN,SAAA,SAAAA,EAAEnC,YAAa,WAAY,EAC7CsC,EAAAvD,KAAK0D,OAAG,MAAAH,SAAA,SAAAA,EAAEtC,SAASN,EAAOQ,E,CAE3B,GAAInB,KAAKqF,iBAAmD,CAC3D,MAAMnB,EAA6B8C,EAAqB,UAAUhH,KAAKc,MAAMkC,OAAOC,QAAQ,MAAO,YAAY9B,IAASnB,KAAKqF,kBAC7HnB,IAAM,MAANA,SAAM,SAANA,EAAQ+C,O","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as a}from"./index-dfb131c4.js";import{n as s}from"./dev.utils-d4a31161.js";import{a as l,e as n,d as h,w as r,s as o}from"./prop.validators-13f7a3fd.js";import{s as d,a as p}from"./reuse-d79ab469.js";import{I as c,g as u}from"./controller-6af9261e.js";import{v as f}from"./rows-85d94242.js";import{m as v}from"./component-names-fed305c7.js";import"./index-117bd1aa.js";import"./a11y.tipps-f2507b68.js";import"./hide-label-8bad6099.js";import"./label-7db04673.js";import"./events-fa760b68.js";import"./tab-index-48369c01.js";import"./associated.controller-675ace12.js";class b extends c{constructor(t,e,a){super(t,e,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateHasCounter(t){l(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){n(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){h(this.component,"_placeholder",t)}validateReadOnly(t){l(this.component,"_readOnly",t)}validateResize(t){r(this.component,"_resize",(t=>"string"==typeof t&&("both"===t||"horizontal"===t||"none"===t||"vertical"===t)),new Set("String {both, horizontal, vertical, none}"),t)}validateRequired(t){l(this.component,"_required",t)}validateRows(t){f(this.component,t)}validateValue(t){h(this.component,"_value",t,{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 y=':host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.required label>span::after,.required legend>span::after{content:"*"}:host{display:block}input,textarea{cursor:text}input[type=checkbox],input[type=color],input[type=file],input[type=radio],input[type=range],label,option,select{cursor:pointer}input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,select[multiple] option,textarea{font-size:calc(16rem / var(--kolibri-root-font-size, 16));width:100%}input[type=file]{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em}.kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}.kol-input{display:grid}.kol-input .input-slot{flex-grow:1}input:not([type=checkbox],[type=radio]),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>.kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}.kol-input.required .input-tooltip .span-label::after{content:"*"}',m=y,_=t=>{t.style.overflow="hidden";const e=t.rows,a=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/a);return t.rows=e,i},g=class{render(){const{ariaDescribedBy:a}=u(this.state),i=d(this.state._label);return t(e,{key:"720aae0c55d6ae89fffb833263cb08ea34f8aff7",class:{"kol-textarea":!0,"has-value":this.state._hasValue}},t(v,{key:"98a20921cf6a7a3da8bb746add054daa3683b0c6",class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"efbe731ad3f37e96023e340c6cc144f6a2b187fa",slot:"label"},i?t("slot",null):this.state._label),t("div",{key:"80c1b5a93d30e8323fbc76ef92dbec7d328e51e4",slot:"input"},t("textarea",Object.assign({key:"89c802de4220d0db3864c0b318d85b30034388d8",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,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,{onInput:this.onInput,style:{resize:this.state._resize},value:this.state._value})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,p(this.host,this.ref)},this.onInput=t=>{this.ref instanceof HTMLTextAreaElement&&(o(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=_(this.ref)),this.controller.onFacade.onInput(t))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"…",_resize:"vertical"},this.controller=new b(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){this.controller.validateAdjustHeight(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentDidLoad(){setTimeout((()=>{var t;this.ref&&(this._rows=(null===(t=this.state)||void 0===t?void 0:t._rows)&&this.state._rows>_(this.ref)?this.state._rows:_(this.ref))}),0)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:m};export{g as kol_textarea};
+import{h as t,H as e,r as i,g as a}from"./index-75e4aa9f.js";import{n as s}from"./dev.utils-7c6bbdd4.js";import{a as l,e as n,d as h,w as r,s as o}from"./prop.validators-be8ed69a.js";import{s as d,a as p}from"./reuse-d79ab469.js";import{I as c,g as u}from"./controller-0e4a8702.js";import{v as f}from"./rows-2bcffbc4.js";import{m as v}from"./component-names-a14739b8.js";import"./index-14005aa7.js";import"./a11y.tipps-cb29ecd7.js";import"./hide-label-d41d20f5.js";import"./label-4b21e985.js";import"./events-fa760b68.js";import"./tab-index-c7b23595.js";import"./associated.controller-1d0726f0.js";class b extends c{constructor(t,e,a){super(t,e,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=t}validateHasCounter(t){l(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){n(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){h(this.component,"_placeholder",t)}validateReadOnly(t){l(this.component,"_readOnly",t)}validateResize(t){r(this.component,"_resize",(t=>"string"==typeof t&&("both"===t||"horizontal"===t||"none"===t||"vertical"===t)),new Set("String {both, horizontal, vertical, none}"),t)}validateRequired(t){l(this.component,"_required",t)}validateRows(t){f(this.component,t)}validateValue(t){h(this.component,"_value",t,{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 y=':host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.required label>span::after,.required legend>span::after{content:"*"}:host{display:block}input,textarea{cursor:text}input[type=checkbox],input[type=color],input[type=file],input[type=radio],input[type=range],label,option,select{cursor:pointer}input[type=color],input[type=date],input[type=datetime-local],input[type=email],input[type=file],input[type=month],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=time],input[type=url],input[type=week],select,select[multiple] option,textarea{font-size:calc(16rem / var(--kolibri-root-font-size, 16));width:100%}input[type=file]{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em}.kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}.kol-input{display:grid}.kol-input .input-slot{flex-grow:1}input:not([type=checkbox],[type=radio]),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>.kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}.kol-input.required .input-tooltip .span-label::after{content:"*"}',m=y,_=t=>{t.style.overflow="hidden";const e=t.rows,a=t.clientHeight/e;t.rows=1;const i=Math.round(t.scrollHeight/a);return t.rows=e,i},g=class{render(){const{ariaDescribedBy:a}=u(this.state),i=d(this.state._label);return t(e,{key:"720aae0c55d6ae89fffb833263cb08ea34f8aff7",class:{"kol-textarea":!0,"has-value":this.state._hasValue}},t(v,{key:"98a20921cf6a7a3da8bb746add054daa3683b0c6",class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_alert:this.state._alert,_currentLength:this.state._currentLength,_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_readOnly:this.state._readOnly,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"efbe731ad3f37e96023e340c6cc144f6a2b187fa",slot:"label"},i?t("slot",null):this.state._label),t("div",{key:"80c1b5a93d30e8323fbc76ef92dbec7d328e51e4",slot:"input"},t("textarea",Object.assign({key:"89c802de4220d0db3864c0b318d85b30034388d8",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":a.length>0?a.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,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,{onInput:this.onInput,style:{resize:this.state._resize},value:this.state._value})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,p(this.host,this.ref)},this.onInput=t=>{this.ref instanceof HTMLTextAreaElement&&(o(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=_(this.ref)),this.controller.onFacade.onInput(t))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=!0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._id=void 0,this._label=void 0,this._maxLength=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideError:!1,_id:`id-${s()}`,_label:"…",_resize:"vertical"},this.controller=new b(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAdjustHeight(t){this.controller.validateAdjustHeight(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHasCounter(t){this.controller.validateHasCounter(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMaxLength(t){this.controller.validateMaxLength(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateReadOnly(t){this.controller.validateReadOnly(t)}validateResize(t){this.controller.validateResize(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentDidLoad(){setTimeout((()=>{var t;!0===this._adjustHeight&&this.ref?this._rows=(null===(t=this.state)||void 0===t?void 0:t._rows)&&this.state._rows>_(this.ref)?this.state._rows:_(this.ref):this._rows||(this._rows=1)}),0)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};g.style={default:m};export{g as kol_textarea};

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

@@ -1 +1 @@
-{"version":3,"names":["TextareaController","InputController","constructor","component","name","host","super","this","afterSyncCharCounter","_value","length","state","_currentLength","validateHasCounter","value","watchBoolean","hooks","afterPatch","validateMaxLength","watchNumber","min","validatePlaceholder","watchString","validateReadOnly","validateResize","watchValidator","Set","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","KolTextareaDefaultStyle0","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","_hasValue","KolInputTag","textarea","_hideLabel","_alert","_disabled","_error","_hideError","_hint","_id","_tooltipAlign","_touched","onClick","_a","ref","focus","role","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onInput","resize","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAdjustHeight","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","componentDidLoad","setTimeout","addValueChangeListener","v"],"sources":["src/components/textarea/controller.ts","src/components/textarea/style.scss?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { HasCounterPropType } from '../../types/props/has-counter';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputController } from '../@deprecated/input/controller';\nimport { CSSResize, Props, Watches } from './types';\n\nexport class TextareaController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string' && this.component._value.length > 0) {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\twatchBoolean(this.component, '_hasCounter', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\twatchNumber(this.component, '_maxLength', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t\tmin: 0,\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\tpublic validateResize(value?: CSSResize): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_resize',\n\t\t\t(value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'),\n\t\t\tnew Set('String {both, horizontal, vertical, none}'),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { AdjustHeightPropType } from '../../types/props/adjust-height';\nimport { HasCounterPropType } from '../../types/props/has-counter';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { RowsPropType } from '../../types/props/rows';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { TextareaController } from './controller';\nimport { API, CSSResize, States } from './types';\nimport { KolInputTag } from '../../core/component-names';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements API {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate ref?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'kol-textarea': true, 'has-value': this.state._hasValue }}>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{ textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_currentLength={this.state._currentLength}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\trows={this.state._rows}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonInput={this.onInput}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tresize: this.state._resize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Defines how many rows of text should be visible at the same time.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '…', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tsetTimeout(() => {\n\t\t\tif (this.ref /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows = this.state?._rows && this.state._rows > increaseTextareaHeight(this.ref) ? this.state._rows : increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.ref instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.ref.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"],"mappings":"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"}
+{"version":3,"names":["TextareaController","InputController","constructor","component","name","host","super","this","afterSyncCharCounter","_value","length","state","_currentLength","validateHasCounter","value","watchBoolean","hooks","afterPatch","validateMaxLength","watchNumber","min","validatePlaceholder","watchString","validateReadOnly","validateResize","watchValidator","Set","validateRequired","validateRows","validateValue","setFormAssociatedValue","componentWillLoad","_hasCounter","_maxLength","_placeholder","_readOnly","_resize","_required","_rows","defaultStyleCss","KolTextareaDefaultStyle0","increaseTextareaHeight","el","style","overflow","currentRows","rows","rowHeight","clientHeight","nextRows","Math","round","scrollHeight","KolTextarea","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","h","Host","key","class","_hasValue","KolInputTag","textarea","_hideLabel","_alert","_disabled","_error","_hideError","_hint","_id","_tooltipAlign","_touched","onClick","_a","ref","focus","role","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","undefined","autoCapitalize","autoCorrect","disabled","id","maxlength","_name","readOnly","required","placeholder","spellcheck","controller","onFacade","onInput","resize","hostRef","propagateFocus","event","HTMLTextAreaElement","setState","_adjustHeight","nonce","validateAccessKey","validateAdjustHeight","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","componentDidLoad","setTimeout","addValueChangeListener","v"],"sources":["src/components/textarea/controller.ts","src/components/textarea/style.scss?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { HasCounterPropType } from '../../types/props/has-counter';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { watchBoolean, watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { InputController } from '../@deprecated/input/controller';\nimport { CSSResize, Props, Watches } from './types';\n\nexport class TextareaController extends InputController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string' && this.component._value.length > 0) {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\twatchBoolean(this.component, '_hasCounter', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\twatchNumber(this.component, '_maxLength', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t\tmin: 0,\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic validateReadOnly(value?: boolean): void {\n\t\twatchBoolean(this.component, '_readOnly', value);\n\t}\n\n\tpublic validateResize(value?: CSSResize): void {\n\t\twatchValidator(\n\t\t\tthis.component,\n\t\t\t'_resize',\n\t\t\t(value) => typeof value === 'string' && (value === 'both' || value === 'horizontal' || value === 'none' || value === 'vertical'),\n\t\t\tnew Set('String {both, horizontal, vertical, none}'),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../input-line';\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { InputTypeOnDefault } from '../../types/input/types';\nimport { AdjustHeightPropType } from '../../types/props/adjust-height';\nimport { HasCounterPropType } from '../../types/props/has-counter';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { RowsPropType } from '../../types/props/rows';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { nonce } from '../../utils/dev.utils';\nimport { setState } from '../../utils/prop.validators';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { TextareaController } from './controller';\nimport { API, CSSResize, States } from './types';\nimport { KolInputTag } from '../../core/component-names';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTextarea implements API {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate ref?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'kol-textarea': true, 'has-value': this.state._hasValue }}>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{ textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }}\n\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t_currentLength={this.state._currentLength}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hasCounter={this.state._hasCounter}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_maxLength={this.state._maxLength}\n\t\t\t\t\t_readOnly={this.state._readOnly}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmaxlength={this.state._maxLength}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\treadOnly={this.state._readOnly}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\trows={this.state._rows}\n\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\tonInput={this.onInput}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tresize: this.state._resize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Shows the character count on the lower border of the input.\n\t * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label?: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Makes the input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t */\n\t@Prop() public _resize?: CSSResize = 'vertical';\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Defines how many rows of text should be visible at the same time.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop() public _value?: string;\n\n\t@State() public state: States = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '…', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: boolean): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: CSSResize): void {\n\t\tthis.controller.validateResize(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tsetTimeout(() => {\n\t\t\tif (this._adjustHeight === true && this.ref /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows = this.state?._rows && this.state._rows > increaseTextareaHeight(this.ref) ? this.state._rows : increaseTextareaHeight(this.ref);\n\t\t\t} else if (!this._rows) {\n\t\t\t\tthis._rows = 1;\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.ref instanceof HTMLTextAreaElement) {\n\t\t\tsetState(this, '_currentLength', this.ref.value.length);\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.ref);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,r as s,F as e,H as a}from"./index-dfb131c4.js";import{t as o}from"./i18n-8ac68853.js";import{n as c}from"./dev.utils-d4a31161.js";import{l as i,p as n}from"./component-names-fed305c7.js";import"./i18n-a2f79a81.js";import"./reuse-d79ab469.js";const l=({toastState:s,onClose:a,key:e})=>t("div",{class:`toast ${s.status}`,key:e},t(i,{class:"kol-alert alert",_alert:!0,_label:s.toast.label,_level:0,_hasCloser:!0,_type:s.toast.type,_variant:"card",_on:{onClose:a}},t("div",{ref:t=>{"function"==typeof s.toast.render&&t&&s.toast.render(t,{close:()=>a()})}},"string"==typeof s.toast.description?s.toast.description:null))),r="@layer kol-component {\n  :host {\n    display: flex;\n    flex-direction: column;\n    position: fixed;\n    z-index: 200;\n  }\n  .close-all {\n    align-self: flex-end;\n  }\n}",b=r,h=300,d=class{constructor(t){s(this,t),this.state={_toastStates:[]}}async enqueue(t){const s={toast:t,status:"adding",id:`toast-${c()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[s,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===s.id?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),h),()=>{this.handleClose(s)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((s=>(s.id===t.id&&(s.status="removing"),s)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((s=>s.id!==t.id))})}),h)}async closeAll(){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]})}),h)}render(){return t(a,{key:"ec2876a778c1c986f7963ca9c3b22cf074614a65",class:"kol-toast-container"},t(e,{key:"2b66532d05219daa75c8aa2e1be42a9ce4681b0b"},this.state._toastStates.length>1&&t(n,{key:"52cebc7ce0ec46564c7fb0b871abbac04be6a205",_label:o("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((s=>t(l,{toastState:s,onClose:()=>this.handleClose(s),key:s.id})))))}};d.style={default:b};export{d as kol_toast_container};
+import{h as t,r as s,F as e,H as a}from"./index-75e4aa9f.js";import{t as o}from"./i18n-d1be0413.js";import{n as c}from"./dev.utils-7c6bbdd4.js";import{l as i,p as n}from"./component-names-a14739b8.js";import"./i18n-268d2aa6.js";import"./reuse-d79ab469.js";const l=({toastState:s,onClose:a,key:e})=>t("div",{class:`toast ${s.status}`,key:e},t(i,{class:"kol-alert alert",_alert:!0,_label:s.toast.label,_level:0,_hasCloser:!0,_type:s.toast.type,_variant:"card",_on:{onClose:a}},t("div",{ref:t=>{"function"==typeof s.toast.render&&t&&s.toast.render(t,{close:()=>a()})}},"string"==typeof s.toast.description?s.toast.description:null))),r="@layer kol-component {\n  :host {\n    display: flex;\n    flex-direction: column;\n    position: fixed;\n    z-index: 200;\n  }\n  .close-all {\n    align-self: flex-end;\n  }\n}",b=r,h=300,d=class{constructor(t){s(this,t),this.state={_toastStates:[]}}async enqueue(t){const s={toast:t,status:"adding",id:`toast-${c()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[s,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===s.id?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),h),()=>{this.handleClose(s)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((s=>(s.id===t.id&&(s.status="removing"),s)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((s=>s.id!==t.id))})}),h)}async closeAll(){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]})}),h)}render(){return t(a,{key:"ec2876a778c1c986f7963ca9c3b22cf074614a65",class:"kol-toast-container"},t(e,{key:"2b66532d05219daa75c8aa2e1be42a9ce4681b0b"},this.state._toastStates.length>1&&t(n,{key:"52cebc7ce0ec46564c7fb0b871abbac04be6a205",_label:o("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((s=>t(l,{toastState:s,onClose:()=>this.handleClose(s),key:s.id})))))}};d.style={default:b};export{d as kol_toast_container};

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

@@ -1 +1 @@
-{"version":3,"names":["InternalToast","toastState","onClose","key","handleRef","element","toast","render","close","h","class","status","KolAlertTag","_alert","_label","label","_level","_hasCloser","_type","type","_variant","_on","ref","description","defaultStyleCss","KolToastContainerDefaultStyle0","TRANSITION_TIMEOUT","KolToastContainer","_toastStates","enqueue","newToastState","id","nonce","this","state","Object","assign","setTimeout","map","localToastState","handleClose","filter","closeAll","Host","Fragment","length","KolButtonTag","translate","onClick"],"sources":["src/components/toaster/InternalToast.tsx","src/components/toaster/style.scss?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/component.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { ToastState } from './types';\nimport { KolAlertTag } from '../../core/component-names';\n\ntype Props = {\n\ttoastState: ToastState;\n\tonClose: () => void;\n\tkey: string;\n};\nexport const InternalToast = ({ toastState, onClose, key }: Props) => {\n\tconst handleRef = (element?: HTMLDivElement) => {\n\t\tif (typeof toastState.toast.render === 'function' && element) {\n\t\t\ttoastState.toast.render(element, { close: () => onClose() });\n\t\t}\n\t};\n\n\treturn (\n\t\t<div class={`toast ${toastState.status}`} key={key}>\n\t\t\t<KolAlertTag\n\t\t\t\tclass=\"kol-alert alert\"\n\t\t\t\t_alert={true}\n\t\t\t\t_label={toastState.toast.label}\n\t\t\t\t_level={0}\n\t\t\t\t_hasCloser={true}\n\t\t\t\t_type={toastState.toast.type}\n\t\t\t\t_variant=\"card\"\n\t\t\t\t_on={{ onClose }}\n\t\t\t>\n\t\t\t\t<div ref={handleRef}>{typeof toastState.toast.description === 'string' ? toastState.toast.description : null}</div>\n\t\t\t</KolAlertTag>\n\t\t</div>\n\t);\n};\n","@layer kol-component {\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: fixed;\n\t\tz-index: 200;\n\t}\n\n\t.close-all {\n\t\talign-self: flex-end;\n\t}\n}\n","import { Component, Fragment, h, Host, JSX, Method, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { nonce } from '../../utils/dev.utils';\nimport { API, States, Toast, ToastState } from './types';\nimport { InternalToast } from './InternalToast';\nimport { KolButtonTag } from '../../core/component-names';\n\nconst TRANSITION_TIMEOUT = 300;\n\n@Component({\n\ttag: 'kol-toast-container',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToastContainer implements API {\n\t@State() public state: States = {\n\t\t_toastStates: [],\n\t};\n\n\t// Stencil requires async function:\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async enqueue(toast: Toast) {\n\t\tconst newToastState: ToastState = {\n\t\t\ttoast,\n\t\t\tstatus: 'adding',\n\t\t\tid: `toast-${nonce()}`,\n\t\t};\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: [newToastState, ...this.state._toastStates],\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.map((localToastState) =>\n\t\t\t\t\tlocalToastState.id === newToastState.id\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...localToastState,\n\t\t\t\t\t\t\t\tstatus: 'settled',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: localToastState,\n\t\t\t\t),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\n\t\treturn () => {\n\t\t\tthis.handleClose(newToastState);\n\t\t};\n\t}\n\n\tprivate handleClose(toastState: ToastState) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => {\n\t\t\t\tif (localToastState.id === toastState.id) {\n\t\t\t\t\tlocalToastState.status = 'removing';\n\t\t\t\t}\n\t\t\t\treturn localToastState;\n\t\t\t}),\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeAll() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => ({\n\t\t\t\t...localToastState,\n\t\t\t\tstatus: 'removing',\n\t\t\t})),\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: [],\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-toast-container\">\n\t\t\t\t<Fragment>\n\t\t\t\t\t{this.state._toastStates.length > 1 && (\n\t\t\t\t\t\t<KolButtonTag\n\t\t\t\t\t\t\t_label={translate('kol-toast-close-all')}\n\t\t\t\t\t\t\tclass=\"close-all\"\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\tvoid this.closeAll();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t></KolButtonTag>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._toastStates.map((toastState) => (\n\t\t\t\t\t\t<InternalToast toastState={toastState} onClose={() => this.handleClose(toastState)} key={toastState.id} />\n\t\t\t\t\t))}\n\t\t\t\t</Fragment>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;gQASO,MAAMA,EAAgB,EAAGC,aAAYC,UAASC,UACpD,MAAMC,EAAaC,IAClB,UAAWJ,EAAWK,MAAMC,SAAW,YAAcF,EAAS,CAC7DJ,EAAWK,MAAMC,OAAOF,EAAS,CAAEG,MAAO,IAAMN,K,GAIlD,OACCO,EAAA,OAAKC,MAAO,SAAST,EAAWU,SAAUR,IAAKA,GAC9CM,EAACG,EAAW,CACXF,MAAM,kBACNG,OAAQ,KACRC,OAAQb,EAAWK,MAAMS,MACzBC,OAAQ,EACRC,WAAY,KACZC,MAAOjB,EAAWK,MAAMa,KACxBC,SAAS,OACTC,IAAK,CAAEnB,YAEPO,EAAA,OAAKa,IAAKlB,UAAmBH,EAAWK,MAAMiB,cAAgB,SAAWtB,EAAWK,MAAMiB,YAAc,OAEpG,EC9BR,MAAMC,EAAkB,sLACxB,MAAAC,EAAeD,ECOf,MAAME,EAAqB,I,MASdC,EAAiB,M,oCACG,CAC/BC,aAAc,G,CAMR,aAAMC,CAAQvB,GACpB,MAAMwB,EAA4B,CACjCxB,QACAK,OAAQ,SACRoB,GAAI,SAASC,OAEdC,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAc,CAACE,KAAkBG,KAAKC,MAAMN,gBAG7CS,YAAW,KACVJ,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaU,KAAKC,GAC1CA,EAAgBR,KAAOD,EAAcC,G,+BAE/BQ,GAAe,CAClB5B,OAAQ,YAER4B,KAEJ,GACCb,GAEH,MAAO,KACNO,KAAKO,YAAYV,EAAc,C,CAIzB,WAAAU,CAAYvC,GACnBgC,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaU,KAAKC,IAC1C,GAAIA,EAAgBR,KAAO9B,EAAW8B,GAAI,CACzCQ,EAAgB5B,OAAS,U,CAE1B,OAAO4B,CAAe,MAIxBF,YAAW,KACVJ,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaa,QAAQF,GAAoBA,EAAgBR,KAAO9B,EAAW8B,MACpG,GACCL,E,CAKG,cAAMgB,GACZT,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaU,KAAKC,GAAeJ,OAAAC,OAAAD,OAAAC,OAAA,GACtDG,GAAe,CAClB5B,OAAQ,iBAIV0B,YAAW,KACVJ,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAc,IACd,GACCF,E,CAGG,MAAAnB,GACN,OACCE,EAACkC,EAAI,CAAAxC,IAAA,2CAACO,MAAM,uBACXD,EAACmC,EAAQ,CAAAzC,IAAA,4CACP8B,KAAKC,MAAMN,aAAaiB,OAAS,GACjCpC,EAACqC,EAAY,CAAA3C,IAAA,2CACZW,OAAQiC,EAAU,uBAClBrC,MAAM,YACNW,IAAK,CACJ2B,QAAS,UACHf,KAAKS,UAAU,KAKvBT,KAAKC,MAAMN,aAAaU,KAAKrC,GAC7BQ,EAACT,EAAa,CAACC,WAAYA,EAAYC,QAAS,IAAM+B,KAAKO,YAAYvC,GAAaE,IAAKF,EAAW8B,Q"}
+{"version":3,"names":["InternalToast","toastState","onClose","key","handleRef","element","toast","render","close","h","class","status","KolAlertTag","_alert","_label","label","_level","_hasCloser","_type","type","_variant","_on","ref","description","defaultStyleCss","KolToastContainerDefaultStyle0","TRANSITION_TIMEOUT","KolToastContainer","_toastStates","enqueue","newToastState","id","nonce","this","state","Object","assign","setTimeout","map","localToastState","handleClose","filter","closeAll","Host","Fragment","length","KolButtonTag","translate","onClick"],"sources":["src/components/toaster/InternalToast.tsx","src/components/toaster/style.scss?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/component.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { ToastState } from './types';\nimport { KolAlertTag } from '../../core/component-names';\n\ntype Props = {\n\ttoastState: ToastState;\n\tonClose: () => void;\n\tkey: string;\n};\nexport const InternalToast = ({ toastState, onClose, key }: Props) => {\n\tconst handleRef = (element?: HTMLDivElement) => {\n\t\tif (typeof toastState.toast.render === 'function' && element) {\n\t\t\ttoastState.toast.render(element, { close: () => onClose() });\n\t\t}\n\t};\n\n\treturn (\n\t\t<div class={`toast ${toastState.status}`} key={key}>\n\t\t\t<KolAlertTag\n\t\t\t\tclass=\"kol-alert alert\"\n\t\t\t\t_alert={true}\n\t\t\t\t_label={toastState.toast.label}\n\t\t\t\t_level={0}\n\t\t\t\t_hasCloser={true}\n\t\t\t\t_type={toastState.toast.type}\n\t\t\t\t_variant=\"card\"\n\t\t\t\t_on={{ onClose }}\n\t\t\t>\n\t\t\t\t<div ref={handleRef}>{typeof toastState.toast.description === 'string' ? toastState.toast.description : null}</div>\n\t\t\t</KolAlertTag>\n\t\t</div>\n\t);\n};\n","@layer kol-component {\n\t:host {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tposition: fixed;\n\t\tz-index: 200;\n\t}\n\n\t.close-all {\n\t\talign-self: flex-end;\n\t}\n}\n","import { Component, Fragment, h, Host, JSX, Method, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { nonce } from '../../utils/dev.utils';\nimport { API, States, Toast, ToastState } from './types';\nimport { InternalToast } from './InternalToast';\nimport { KolButtonTag } from '../../core/component-names';\n\nconst TRANSITION_TIMEOUT = 300;\n\n@Component({\n\ttag: 'kol-toast-container',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToastContainer implements API {\n\t@State() public state: States = {\n\t\t_toastStates: [],\n\t};\n\n\t// Stencil requires async function:\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async enqueue(toast: Toast) {\n\t\tconst newToastState: ToastState = {\n\t\t\ttoast,\n\t\t\tstatus: 'adding',\n\t\t\tid: `toast-${nonce()}`,\n\t\t};\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: [newToastState, ...this.state._toastStates],\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.map((localToastState) =>\n\t\t\t\t\tlocalToastState.id === newToastState.id\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...localToastState,\n\t\t\t\t\t\t\t\tstatus: 'settled',\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: localToastState,\n\t\t\t\t),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\n\t\treturn () => {\n\t\t\tthis.handleClose(newToastState);\n\t\t};\n\t}\n\n\tprivate handleClose(toastState: ToastState) {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => {\n\t\t\t\tif (localToastState.id === toastState.id) {\n\t\t\t\t\tlocalToastState.status = 'removing';\n\t\t\t\t}\n\t\t\t\treturn localToastState;\n\t\t\t}),\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: this.state._toastStates.filter((localToastState) => localToastState.id !== toastState.id),\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeAll() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_toastStates: this.state._toastStates.map((localToastState) => ({\n\t\t\t\t...localToastState,\n\t\t\t\tstatus: 'removing',\n\t\t\t})),\n\t\t};\n\n\t\tsetTimeout(() => {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_toastStates: [],\n\t\t\t};\n\t\t}, TRANSITION_TIMEOUT);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-toast-container\">\n\t\t\t\t<Fragment>\n\t\t\t\t\t{this.state._toastStates.length > 1 && (\n\t\t\t\t\t\t<KolButtonTag\n\t\t\t\t\t\t\t_label={translate('kol-toast-close-all')}\n\t\t\t\t\t\t\tclass=\"close-all\"\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\t\tvoid this.closeAll();\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t></KolButtonTag>\n\t\t\t\t\t)}\n\t\t\t\t\t{this.state._toastStates.map((toastState) => (\n\t\t\t\t\t\t<InternalToast toastState={toastState} onClose={() => this.handleClose(toastState)} key={toastState.id} />\n\t\t\t\t\t))}\n\t\t\t\t</Fragment>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;gQASO,MAAMA,EAAgB,EAAGC,aAAYC,UAASC,UACpD,MAAMC,EAAaC,IAClB,UAAWJ,EAAWK,MAAMC,SAAW,YAAcF,EAAS,CAC7DJ,EAAWK,MAAMC,OAAOF,EAAS,CAAEG,MAAO,IAAMN,K,GAIlD,OACCO,EAAA,OAAKC,MAAO,SAAST,EAAWU,SAAUR,IAAKA,GAC9CM,EAACG,EAAW,CACXF,MAAM,kBACNG,OAAQ,KACRC,OAAQb,EAAWK,MAAMS,MACzBC,OAAQ,EACRC,WAAY,KACZC,MAAOjB,EAAWK,MAAMa,KACxBC,SAAS,OACTC,IAAK,CAAEnB,YAEPO,EAAA,OAAKa,IAAKlB,UAAmBH,EAAWK,MAAMiB,cAAgB,SAAWtB,EAAWK,MAAMiB,YAAc,OAEpG,EC9BR,MAAMC,EAAkB,sLACxB,MAAAC,EAAeD,ECOf,MAAME,EAAqB,I,MASdC,EAAiB,M,oCACG,CAC/BC,aAAc,G,CAMR,aAAMC,CAAQvB,GACpB,MAAMwB,EAA4B,CACjCxB,QACAK,OAAQ,SACRoB,GAAI,SAASC,OAEdC,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAc,CAACE,KAAkBG,KAAKC,MAAMN,gBAG7CS,YAAW,KACVJ,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaU,KAAKC,GAC1CA,EAAgBR,KAAOD,EAAcC,G,+BAE/BQ,GAAe,CAClB5B,OAAQ,YAER4B,KAEJ,GACCb,GAEH,MAAO,KACNO,KAAKO,YAAYV,EAAc,C,CAIzB,WAAAU,CAAYvC,GACnBgC,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaU,KAAKC,IAC1C,GAAIA,EAAgBR,KAAO9B,EAAW8B,GAAI,CACzCQ,EAAgB5B,OAAS,U,CAE1B,OAAO4B,CAAe,MAIxBF,YAAW,KACVJ,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaa,QAAQF,GAAoBA,EAAgBR,KAAO9B,EAAW8B,MACpG,GACCL,E,CAKG,cAAMgB,GACZT,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaU,KAAKC,GAAeJ,OAAAC,OAAAD,OAAAC,OAAA,GACtDG,GAAe,CAClB5B,OAAQ,iBAIV0B,YAAW,KACVJ,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAc,IACd,GACCF,E,CAGG,MAAAnB,GACN,OACCE,EAACkC,EAAI,CAAAxC,IAAA,2CAACO,MAAM,uBACXD,EAACmC,EAAQ,CAAAzC,IAAA,4CACP8B,KAAKC,MAAMN,aAAaiB,OAAS,GACjCpC,EAACqC,EAAY,CAAA3C,IAAA,2CACZW,OAAQiC,EAAU,uBAClBrC,MAAM,YACNW,IAAK,CACJ2B,QAAS,UACHf,KAAKS,UAAU,KAKvBT,KAAKC,MAAMN,aAAaU,KAAKrC,GAC7BQ,EAACT,EAAa,CAACC,WAAYA,EAAYC,QAAS,IAAM+B,KAAKO,YAAYvC,GAAaE,IAAKF,EAAW8B,Q","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-dfb131c4.js";import{v as s}from"./has-closer-2c2d8b99.js";import{v as a}from"./label-7db04673.js";import{v as o}from"./show-17be1bc7.js";import{a as n,s as h,e as l,w as r}from"./prop.validators-13f7a3fd.js";import{w as d}from"./validation-7c648181.js";import{l as c}from"./component-names-fed305c7.js";import"./a11y.tipps-f2507b68.js";import"./dev.utils-d4a31161.js";import"./reuse-d79ab469.js";import"./index-117bd1aa.js";const p=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host{display:block}:host>div{background-color:#fff;height:0;left:0;position:fixed;top:0;width:100%;z-index:200}:host>div>.kol-alert{display:block;margin:auto;max-width:750px}:host>div>.kol-button-wc{display:block;margin:auto;position:relative;top:0;width:1em}",f=p,b=class{constructor(i){t(this,i),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{this.close()}),this.state._showDuration))},this.close=()=>{var t;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._label=void 0,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(t){n(this,"_alert",t)}validateHasCloser(t){s(this,t)}validateHeading(t){this.validateLabel(t)}validateLabel(t){a(this,t)}validateLevel(t){d(this,t)}validateOn(t){"object"!=typeof t||"function"!=typeof(null==t?void 0:t.onClose)&&!0!==t.onClose||h(this,"_on",{onClose:t.onClose})}validateShow(t){o(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){l(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){r(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label||this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateShow(this._show),this.validateShowDuration(this._showDuration),this.validateType(this._type)}render(){return i(e,{key:"0542a43b3083b6cbb7adadaed3551ab94f9b1879",class:"kol-toast"},this.state._show&&i("div",{key:"0916074ad0021f2ae726b8678d6535c2c08c42ec"},i(c,{key:"50fce2512d5268de53a02272fbaa565c65915c2d",_alert:this.state._alert,_label:this.state._label,_level:this.state._level,_hasCloser:this.state._hasCloser,_type:this.state._type,_variant:"card",_on:this.on,class:"kol-alert"},i("slot",{key:"88703cc54794c0630b91cf44707fef95c9da925a"}))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};b.style={default:f};export{b as kol_toast};
+import{r as t,h as i,H as e}from"./index-75e4aa9f.js";import{v as a}from"./has-closer-1025a5cf.js";import{v as s}from"./label-4b21e985.js";import{v as o}from"./show-379f69c8.js";import{a as n,s as h,e as l,w as r}from"./prop.validators-be8ed69a.js";import{w as d}from"./validation-c16fa069.js";import{l as c}from"./component-names-a14739b8.js";import"./a11y.tipps-cb29ecd7.js";import"./dev.utils-7c6bbdd4.js";import"./reuse-d79ab469.js";import"./index-14005aa7.js";const p=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}:host{display:block}:host>div{background-color:#fff;height:0;left:0;position:fixed;top:0;width:100%;z-index:200}:host>div>.kol-alert{display:block;margin:auto;max-width:750px}:host>div>.kol-button-wc{display:block;margin:auto;position:relative;top:0;width:1em}",f=p,u=class{constructor(a){t(this,a),this.handleShowAndDuration=()=>{!0===this.state._show&&"number"==typeof this.state._showDuration&&this.state._showDuration>=0&&(clearTimeout(this.durationTimeout),this.durationTimeout=setTimeout((()=>{this.close()}),this.state._showDuration))},this.close=()=>{var t;this._show=!1,this.state=Object.assign(Object.assign({},this.state),{_show:!1}),void 0!==(null===(t=this._on)||void 0===t?void 0:t.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClose:this.close},this._alert=!0,this._hasCloser=!1,this._heading="",this._label=void 0,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(t){n(this,"_alert",t)}validateHasCloser(t){a(this,t)}validateHeading(t){this.validateLabel(t)}validateLabel(t){s(this,t)}validateLevel(t){d(this,t)}validateOn(t){"object"!=typeof t||"function"!=typeof(null==t?void 0:t.onClose)&&!0!==t.onClose||h(this,"_on",{onClose:t.onClose})}validateShow(t){o(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){l(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){r(this,"_type",(t=>"string"==typeof t&&("default"===t||"error"===t||"info"===t||"success"===t||"warning"===t)),new Set("String {success, info, warning, error}"),t)}componentWillLoad(){this.validateAlert(this._alert),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label||this._heading),this.validateLevel(this._level),this.validateOn(this._on),this.validateShow(this._show),this.validateShowDuration(this._showDuration),this.validateType(this._type)}render(){return i(e,{key:"0542a43b3083b6cbb7adadaed3551ab94f9b1879",class:"kol-toast"},this.state._show&&i("div",{key:"0916074ad0021f2ae726b8678d6535c2c08c42ec"},i(c,{key:"50fce2512d5268de53a02272fbaa565c65915c2d",_alert:this.state._alert,_label:this.state._label,_level:this.state._level,_hasCloser:this.state._hasCloser,_type:this.state._type,_variant:"card",_on:this.on,class:"kol-alert"},i("slot",{key:"88703cc54794c0630b91cf44707fef95c9da925a"}))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};u.style={default:f};export{u as kol_toast};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolToastDefaultStyle0","KolToast","this","handleShowAndDuration","state","_show","_showDuration","clearTimeout","durationTimeout","setTimeout","close","Object","assign","_a","_on","onClose","undefined","Event","on","_alert","_level","validateAlert","value","watchBoolean","validateHasCloser","validateHeading","validateLabel","validateLevel","watchHeadingLevel","validateOn","setState","validateShow","hooks","afterPatch","validateShowDuration","watchNumber","validateType","watchValidator","Set","componentWillLoad","_hasCloser","_label","_heading","_type","render","h","Host","key","class","KolAlertTag","_variant"],"sources":["src/components/toast/style.scss?tag=kol-toast&mode=default&encapsulation=shadow","src/components/toast/component.tsx"],"sourcesContent":["@import '../style';\n@import '../host-display-block';\n\n:host > div {\n\tbackground-color: #fff;\n\t/* needed for overlay situations */\n\theight: 0;\n\tleft: 0;\n\tposition: fixed;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 200;\n}\n\n:host > div > .kol-alert {\n\tdisplay: block;\n\tmargin: auto;\n\tmax-width: 750px;\n}\n\n:host > div > .kol-button-wc {\n\tdisplay: block;\n\tmargin: auto;\n\tposition: relative;\n\ttop: 0;\n\twidth: 1em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { HasCloserPropType, validateHasCloser } from '../../types/props/has-closer';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { ShowPropType, validateShow } from '../../types/props/show';\nimport { KoliBriToastEventCallbacks } from '../../types/toast';\nimport { setState, watchBoolean, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { AlertType } from '../alert/types';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, States } from './types';\nimport { KolAlertTag } from '../../core/component-names';\n\n/**\n * @slot - Der Inhalt der Meldung.\n * @deprecated - Use ToastService - see toaster\n */\n@Component({\n\ttag: 'kol-toast',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToast implements API {\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _heading?: string = '';\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Toasts an.\n\t */\n\t@Prop() public _on?: KoliBriToastEventCallbacks;\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = true;\n\n\t/**\n\t * Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.\n\t */\n\t@Prop() public _showDuration?: number = 10000;\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: AlertType = 'default';\n\n\t@State() public state: States = {\n\t\t_alert: true,\n\t\t_level: 1,\n\t\t_show: true,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriToastEventCallbacks): void {\n\t\tif (typeof value === 'object' && (typeof value?.onClose === 'function' || value.onClose === true)) {\n\t\t\tsetState<KoliBriToastEventCallbacks>(this, '_on', { onClose: value.onClose });\n\t\t}\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value, { hooks: { afterPatch: this.handleShowAndDuration } });\n\t}\n\n\t@Watch('_showDuration')\n\tpublic validateShowDuration(value?: number): void {\n\t\twatchNumber(this, '_showDuration', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.handleShowAndDuration,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label || this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateShow(this._show);\n\t\tthis.validateShowDuration(this._showDuration);\n\t\tthis.validateType(this._type);\n\t}\n\n\tprivate durationTimeout?: number;\n\n\tprivate readonly handleShowAndDuration = () => {\n\t\tif (this.state._show === true && typeof this.state._showDuration === 'number' && this.state._showDuration >= 0) {\n\t\t\tclearTimeout(this.durationTimeout);\n\t\t\tthis.durationTimeout = setTimeout(() => {\n\t\t\t\tthis.close();\n\t\t\t}, this.state._showDuration) as unknown as number;\n\t\t}\n\t};\n\n\tprivate readonly close = () => {\n\t\tthis._show = false;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_show: false,\n\t\t};\n\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClose: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-toast\">\n\t\t\t\t{this.state._show && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<KolAlertTag\n\t\t\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t\t_level={this.state._level}\n\t\t\t\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t\t\t\t_type={this.state._type}\n\t\t\t\t\t\t\t_variant=\"card\"\n\t\t\t\t\t\t\t// tabindex=\"0\"\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\tclass=\"kol-alert\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</KolAlertTag>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;idAAA,MAAMA,EAAkB,mnCACxB,MAAAC,EAAeD,E,MCuBFE,EAAQ,M,yBA6HHC,KAAAC,sBAAwB,KACxC,GAAID,KAAKE,MAAMC,QAAU,aAAeH,KAAKE,MAAME,gBAAkB,UAAYJ,KAAKE,MAAME,eAAiB,EAAG,CAC/GC,aAAaL,KAAKM,iBAClBN,KAAKM,gBAAkBC,YAAW,KACjCP,KAAKQ,OAAO,GACVR,KAAKE,MAAME,c,GAICJ,KAAAQ,MAAQ,K,MACxBR,KAAKG,MAAQ,MACbH,KAAKE,MAAKO,OAAAC,OAAAD,OAAAC,OAAA,GACNV,KAAKE,OAAK,CACbC,MAAO,QAGR,KAAIQ,EAAAX,KAAKY,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCd,KAAKY,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZf,KAAAgB,GAAK,CACrBH,QAASb,KAAKQ,O,YA/ImB,K,gBAMI,M,cAMH,G,kCAUI,E,8BAW0B,K,mBAKzB,I,WAKL,U,WAEH,CAC/BS,OAAQ,KACRC,OAAQ,EACRf,MAAO,K,CAID,aAAAgB,CAAcC,GACpBC,EAAarB,KAAM,SAAUoB,E,CAIvB,iBAAAE,CAAkBF,GACxBE,EAAkBtB,KAAMoB,E,CAIlB,eAAAG,CAAgBH,GACtBpB,KAAKwB,cAAcJ,E,CAIb,aAAAI,CAAcJ,GACpBI,EAAcxB,KAAMoB,E,CAId,aAAAK,CAAcL,GACpBM,EAAkB1B,KAAMoB,E,CAIlB,UAAAO,CAAWP,GACjB,UAAWA,IAAU,kBAAoBA,IAAK,MAALA,SAAK,SAALA,EAAOP,WAAY,YAAcO,EAAMP,UAAY,MAAO,CAClGe,EAAqC5B,KAAM,MAAO,CAAEa,QAASO,EAAMP,S,EAK9D,YAAAgB,CAAaT,GACnBS,EAAa7B,KAAMoB,EAAO,CAAEU,MAAO,CAAEC,WAAY/B,KAAKC,wB,CAIhD,oBAAA+B,CAAqBZ,GAC3Ba,EAAYjC,KAAM,gBAAiBoB,EAAO,CACzCU,MAAO,CACNC,WAAY/B,KAAKC,wB,CAMb,YAAAiC,CAAad,GACnBe,EACCnC,KACA,SACCoB,UAAiBA,IAAU,WAAaA,IAAU,WAAaA,IAAU,SAAWA,IAAU,QAAUA,IAAU,WAAaA,IAAU,YAC1I,IAAIgB,IAAI,0CACRhB,E,CAIK,iBAAAiB,GACNrC,KAAKmB,cAAcnB,KAAKiB,QACxBjB,KAAKsB,kBAAkBtB,KAAKsC,YAC5BtC,KAAKwB,cAAcxB,KAAKuC,QAAUvC,KAAKwC,UACvCxC,KAAKyB,cAAczB,KAAKkB,QACxBlB,KAAK2B,WAAW3B,KAAKY,KACrBZ,KAAK6B,aAAa7B,KAAKG,OACvBH,KAAKgC,qBAAqBhC,KAAKI,eAC/BJ,KAAKkC,aAAalC,KAAKyC,M,CA8BjB,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACV9C,KAAKE,MAAMC,OACXwC,EAAA,OAAAE,IAAA,4CACCF,EAACI,EAAW,CAAAF,IAAA,2CACX5B,OAAQjB,KAAKE,MAAMe,OACnBsB,OAAQvC,KAAKE,MAAMqC,OACnBrB,OAAQlB,KAAKE,MAAMgB,OACnBoB,WAAYtC,KAAKE,MAAMoC,WACvBG,MAAOzC,KAAKE,MAAMuC,MAClBO,SAAS,OAETpC,IAAKZ,KAAKgB,GACV8B,MAAM,aAENH,EAAA,QAAAE,IAAA,+C"}
+{"version":3,"names":["defaultStyleCss","KolToastDefaultStyle0","KolToast","this","handleShowAndDuration","state","_show","_showDuration","clearTimeout","durationTimeout","setTimeout","close","Object","assign","_a","_on","onClose","undefined","Event","on","_alert","_level","validateAlert","value","watchBoolean","validateHasCloser","validateHeading","validateLabel","validateLevel","watchHeadingLevel","validateOn","setState","validateShow","hooks","afterPatch","validateShowDuration","watchNumber","validateType","watchValidator","Set","componentWillLoad","_hasCloser","_label","_heading","_type","render","h","Host","key","class","KolAlertTag","_variant"],"sources":["src/components/toast/style.scss?tag=kol-toast&mode=default&encapsulation=shadow","src/components/toast/component.tsx"],"sourcesContent":["@import '../style';\n@import '../host-display-block';\n\n:host > div {\n\tbackground-color: #fff;\n\t/* needed for overlay situations */\n\theight: 0;\n\tleft: 0;\n\tposition: fixed;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: 200;\n}\n\n:host > div > .kol-alert {\n\tdisplay: block;\n\tmargin: auto;\n\tmax-width: 750px;\n}\n\n:host > div > .kol-button-wc {\n\tdisplay: block;\n\tmargin: auto;\n\tposition: relative;\n\ttop: 0;\n\twidth: 1em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HeadingLevel } from '../../types/heading-level';\nimport { HasCloserPropType, validateHasCloser } from '../../types/props/has-closer';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { ShowPropType, validateShow } from '../../types/props/show';\nimport { KoliBriToastEventCallbacks } from '../../types/toast';\nimport { setState, watchBoolean, watchNumber, watchValidator } from '../../utils/prop.validators';\nimport { AlertType } from '../alert/types';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { API, States } from './types';\nimport { KolAlertTag } from '../../core/component-names';\n\n/**\n * @slot - Der Inhalt der Meldung.\n * @deprecated - Use ToastService - see toaster\n */\n@Component({\n\ttag: 'kol-toast',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolToast implements API {\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop() public _alert?: boolean = true;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Deprecated: Gibt die Beschriftung der Komponente an.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _heading?: string = '';\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t/**\n\t * Gibt die EventCallback-Function für das Schließen des Toasts an.\n\t */\n\t@Prop() public _on?: KoliBriToastEventCallbacks;\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = true;\n\n\t/**\n\t * Gibt an, wie viele Millisekunden der Toast eingeblendet werden soll.\n\t */\n\t@Prop() public _showDuration?: number = 10000;\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: AlertType = 'default';\n\n\t@State() public state: States = {\n\t\t_alert: true,\n\t\t_level: 1,\n\t\t_show: true,\n\t};\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\twatchBoolean(this, '_alert', value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_heading')\n\tpublic validateHeading(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriToastEventCallbacks): void {\n\t\tif (typeof value === 'object' && (typeof value?.onClose === 'function' || value.onClose === true)) {\n\t\t\tsetState<KoliBriToastEventCallbacks>(this, '_on', { onClose: value.onClose });\n\t\t}\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value, { hooks: { afterPatch: this.handleShowAndDuration } });\n\t}\n\n\t@Watch('_showDuration')\n\tpublic validateShowDuration(value?: number): void {\n\t\twatchNumber(this, '_showDuration', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.handleShowAndDuration,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_type')\n\tpublic validateType(value?: AlertType): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_type',\n\t\t\t(value) => typeof value === 'string' && (value === 'default' || value === 'error' || value === 'info' || value === 'success' || value === 'warning'),\n\t\t\tnew Set('String {success, info, warning, error}'),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlert(this._alert);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label || this._heading);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateShow(this._show);\n\t\tthis.validateShowDuration(this._showDuration);\n\t\tthis.validateType(this._type);\n\t}\n\n\tprivate durationTimeout?: number;\n\n\tprivate readonly handleShowAndDuration = () => {\n\t\tif (this.state._show === true && typeof this.state._showDuration === 'number' && this.state._showDuration >= 0) {\n\t\t\tclearTimeout(this.durationTimeout);\n\t\t\tthis.durationTimeout = setTimeout(() => {\n\t\t\t\tthis.close();\n\t\t\t}, this.state._showDuration) as unknown as number;\n\t\t}\n\t};\n\n\tprivate readonly close = () => {\n\t\tthis._show = false;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_show: false,\n\t\t};\n\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClose: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-toast\">\n\t\t\t\t{this.state._show && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<KolAlertTag\n\t\t\t\t\t\t\t_alert={this.state._alert}\n\t\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t\t_level={this.state._level}\n\t\t\t\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t\t\t\t_type={this.state._type}\n\t\t\t\t\t\t\t_variant=\"card\"\n\t\t\t\t\t\t\t// tabindex=\"0\"\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\tclass=\"kol-alert\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</KolAlertTag>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;idAAA,MAAMA,EAAkB,mnCACxB,MAAAC,EAAeD,E,MCuBFE,EAAQ,M,yBA6HHC,KAAAC,sBAAwB,KACxC,GAAID,KAAKE,MAAMC,QAAU,aAAeH,KAAKE,MAAME,gBAAkB,UAAYJ,KAAKE,MAAME,eAAiB,EAAG,CAC/GC,aAAaL,KAAKM,iBAClBN,KAAKM,gBAAkBC,YAAW,KACjCP,KAAKQ,OAAO,GACVR,KAAKE,MAAME,c,GAICJ,KAAAQ,MAAQ,K,MACxBR,KAAKG,MAAQ,MACbH,KAAKE,MAAKO,OAAAC,OAAAD,OAAAC,OAAA,GACNV,KAAKE,OAAK,CACbC,MAAO,QAGR,KAAIQ,EAAAX,KAAKY,OAAG,MAAAD,SAAA,SAAAA,EAAEE,WAAYC,UAAW,CACpCd,KAAKY,IAAIC,QAAQ,IAAIE,MAAM,S,GAIZf,KAAAgB,GAAK,CACrBH,QAASb,KAAKQ,O,YA/ImB,K,gBAMI,M,cAMH,G,kCAUI,E,8BAW0B,K,mBAKzB,I,WAKL,U,WAEH,CAC/BS,OAAQ,KACRC,OAAQ,EACRf,MAAO,K,CAID,aAAAgB,CAAcC,GACpBC,EAAarB,KAAM,SAAUoB,E,CAIvB,iBAAAE,CAAkBF,GACxBE,EAAkBtB,KAAMoB,E,CAIlB,eAAAG,CAAgBH,GACtBpB,KAAKwB,cAAcJ,E,CAIb,aAAAI,CAAcJ,GACpBI,EAAcxB,KAAMoB,E,CAId,aAAAK,CAAcL,GACpBM,EAAkB1B,KAAMoB,E,CAIlB,UAAAO,CAAWP,GACjB,UAAWA,IAAU,kBAAoBA,IAAK,MAALA,SAAK,SAALA,EAAOP,WAAY,YAAcO,EAAMP,UAAY,MAAO,CAClGe,EAAqC5B,KAAM,MAAO,CAAEa,QAASO,EAAMP,S,EAK9D,YAAAgB,CAAaT,GACnBS,EAAa7B,KAAMoB,EAAO,CAAEU,MAAO,CAAEC,WAAY/B,KAAKC,wB,CAIhD,oBAAA+B,CAAqBZ,GAC3Ba,EAAYjC,KAAM,gBAAiBoB,EAAO,CACzCU,MAAO,CACNC,WAAY/B,KAAKC,wB,CAMb,YAAAiC,CAAad,GACnBe,EACCnC,KACA,SACCoB,UAAiBA,IAAU,WAAaA,IAAU,WAAaA,IAAU,SAAWA,IAAU,QAAUA,IAAU,WAAaA,IAAU,YAC1I,IAAIgB,IAAI,0CACRhB,E,CAIK,iBAAAiB,GACNrC,KAAKmB,cAAcnB,KAAKiB,QACxBjB,KAAKsB,kBAAkBtB,KAAKsC,YAC5BtC,KAAKwB,cAAcxB,KAAKuC,QAAUvC,KAAKwC,UACvCxC,KAAKyB,cAAczB,KAAKkB,QACxBlB,KAAK2B,WAAW3B,KAAKY,KACrBZ,KAAK6B,aAAa7B,KAAKG,OACvBH,KAAKgC,qBAAqBhC,KAAKI,eAC/BJ,KAAKkC,aAAalC,KAAKyC,M,CA8BjB,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,aACV9C,KAAKE,MAAMC,OACXwC,EAAA,OAAAE,IAAA,4CACCF,EAACI,EAAW,CAAAF,IAAA,2CACX5B,OAAQjB,KAAKE,MAAMe,OACnBsB,OAAQvC,KAAKE,MAAMqC,OACnBrB,OAAQlB,KAAKE,MAAMgB,OACnBoB,WAAYtC,KAAKE,MAAMoC,WACvBG,MAAOzC,KAAKE,MAAMuC,MAClBO,SAAS,OAETpC,IAAKZ,KAAKgB,GACV8B,MAAM,aAENH,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as s,g as o}from"./index-dfb131c4.js";import{o as e,f as a,s as n,a as h,c as l,b as d}from"./floating-ui.dom.esm-d8551a17.js";import{v as r}from"./align-9ee9f2d6.js";import{d as p}from"./prop.validators-13f7a3fd.js";import{v as c}from"./label-7db04673.js";import{g as f}from"./dev.utils-d4a31161.js";import{p as u}from"./reuse-d79ab469.js";import{g as m}from"./component-names-fed305c7.js";import"./alignment-30d47781.js";import"./index-117bd1aa.js";import"./a11y.tipps-f2507b68.js";const b=(t,i)=>{p(t,"_id",i)},v=new Set;function y(t){v.forEach((t=>{t.style.setProperty("z-index","999")})),v.add(t),t.style.setProperty("z-index","1000")}function g(t){if(v.delete(t),v.size>0){const t=Array.from(v).pop();t&&t.style.setProperty("z-index","1000")}}const w=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.kol-tooltip-wc .tooltip-floating{animation-duration:0.5s;animation-iteration-count:1;animation-name:fadeInOpacity;animation-timing-function:ease-in;box-sizing:border-box;display:none;position:absolute;visibility:hidden;top:0;left:0;max-width:90vw;max-height:90vh;width:var(--kol-tooltip-width)}.kol-tooltip-wc .tooltip-area{background-color:#fff;color:#000}.kol-tooltip-wc .tooltip-arrow{height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}.kol-tooltip-wc .tooltip-content{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",x=w,k=class{constructor(t){i(this,t),this.hasFocusIn=!1,this.hasMouseIn=!1,this.alignTooltip=()=>{var t;if("test"!==u&&this.previousSibling&&this.tooltipElement){const i=this.previousSibling,o=this.tooltipElement,s=this.arrowElement,r=[e(null!==(t=null==s?void 0:s.offsetHeight)&&void 0!==t?t:10),a(),n()];s&&r.push(h({element:s})),l(i,o,{placement:this.state._align,middleware:r}).then((({x:t,y:i,middlewareData:e,placement:n})=>{var a,l;Object.assign(o.style,{left:`${t}px`,top:`${i}px`,visibility:"visible"}),s&&((null===(a=e.arrow)||void 0===a?void 0:a.x)?Object.assign(s.style,{left:`${e.arrow.x}px`,top:"bottom"===n?-s.offsetHeight/2+"px":"",bottom:"top"===n?-s.offsetHeight/2+"px":""}):(null===(l=e.arrow)||void 0===l?void 0:l.y)&&Object.assign(s.style,{left:"right"===n?-s.offsetWidth/2+"px":"",right:"left"===n?-s.offsetWidth/2+"px":"",top:`${e.arrow.y}px`}))}))}},this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){y(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),f().addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,i=this.tooltipElement;this.cleanupAutoPositioning=d(t,i,this.alignTooltip)}},this.hideTooltip=()=>{this.tooltipElement&&(g(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),f().removeEventListener("keyup",this.hideTooltipByEscape)},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.addEventListener("mouseleave",this.handleMouseleave.bind(this)),t.addEventListener("focusin",this.handleFocusIn.bind(this)),t.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),t.removeEventListener("focusin",this.handleFocusIn.bind(this)),t.removeEventListener("focusout",this.handleFocusout.bind(this))},this.resyncListeners=(t,i,e=!1)=>{t&&this.removeListeners(t),i&&(e&&(this.previousSibling=i),this.addListeners(i))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()}),250)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_label:"…"}}handleMouseEnter(){this.hasMouseIn=!0,this.showOrHideTooltip()}handleMouseleave(){this.hasMouseIn=!1,this.showOrHideTooltip()}handleFocusIn(){this.hasFocusIn=!0,this.showOrHideTooltip()}handleFocusout(){this.hasFocusIn=!1,this.showOrHideTooltip()}render(){return t(s,{key:"7f8ecf9c0a2290dfd6906b51ff94c044fb244312",class:"kol-tooltip-wc"},""!==this.state._label&&t("div",{key:"1a19732e88a727300b48f71a7747e2258a94b57f",class:"tooltip-floating",ref:this.catchTooltipElement},t("div",{key:"c61adf4a1eef293b9c3d6f6685fca8b7243d7a8e",class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),t(m,{key:"92da4f72212174f0d0ae65a31f4d06065a707844",class:"tooltip-area tooltip-content",id:this.state._id,_label:this.state._label})))}validateAlign(t){r(this,t)}validateId(t){b(this,t)}validateLabel(t){c(this,t,{required:!0})}componentWillLoad(){this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t;this.resyncListeners(this.previousSibling,null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t;this.previousSibling=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return o(this)}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};k.style=x;export{k as kol_tooltip_wc};
+import{r as i,h as t,H as s,g as o}from"./index-75e4aa9f.js";import{o as e,f as a,s as n,a as h,c as l,b as d}from"./floating-ui.dom.esm-bc22dc07.js";import{v as r}from"./align-700972a8.js";import{d as p}from"./prop.validators-be8ed69a.js";import{v as c}from"./label-4b21e985.js";import{g as f}from"./dev.utils-7c6bbdd4.js";import{p as u}from"./reuse-d79ab469.js";import{g as m}from"./component-names-a14739b8.js";import"./alignment-6803b406.js";import"./index-14005aa7.js";import"./a11y.tipps-cb29ecd7.js";const b=(t,i)=>{p(t,"_id",i)},v=new Set;function y(t){v.forEach((t=>{t.style.setProperty("z-index","999")})),v.add(t),t.style.setProperty("z-index","1000")}function g(t){if(v.delete(t),v.size>0){const t=Array.from(v).pop();t&&t.style.setProperty("z-index","1000")}}const w=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role=button],button:not([role=link]),.kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}.kol-span-wc{display:grid;place-items:center}.kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>.kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}.kol-tooltip-wc .tooltip-floating{animation-duration:0.5s;animation-iteration-count:1;animation-name:fadeInOpacity;animation-timing-function:ease-in;box-sizing:border-box;display:none;position:absolute;visibility:hidden;top:0;left:0;max-width:90vw;max-height:90vh;width:var(--kol-tooltip-width)}.kol-tooltip-wc .tooltip-area{background-color:#fff;color:#000}.kol-tooltip-wc .tooltip-arrow{height:10px;position:absolute;transform:rotate(45deg);width:10px;z-index:999}.kol-tooltip-wc .tooltip-content{position:relative;z-index:1000}@keyframes fadeInOpacity{0%{opacity:0}100%{opacity:1}}",x=w,k=class{constructor(t){i(this,t),this.hasFocusIn=!1,this.hasMouseIn=!1,this.alignTooltip=()=>{var t;if("test"!==u&&this.previousSibling&&this.tooltipElement){const i=this.previousSibling,o=this.tooltipElement,s=this.arrowElement,r=[e(null!==(t=null==s?void 0:s.offsetHeight)&&void 0!==t?t:10),a(),n()];s&&r.push(h({element:s})),l(i,o,{placement:this.state._align,middleware:r}).then((({x:t,y:i,middlewareData:e,placement:n})=>{var a,l;Object.assign(o.style,{left:`${t}px`,top:`${i}px`,visibility:"visible"}),s&&((null===(a=e.arrow)||void 0===a?void 0:a.x)?Object.assign(s.style,{left:`${e.arrow.x}px`,top:"bottom"===n?-s.offsetHeight/2+"px":"",bottom:"top"===n?-s.offsetHeight/2+"px":""}):(null===(l=e.arrow)||void 0===l?void 0:l.y)&&Object.assign(s.style,{left:"right"===n?-s.offsetWidth/2+"px":"",right:"left"===n?-s.offsetWidth/2+"px":"",top:`${e.arrow.y}px`}))}))}},this.showTooltip=()=>{if(this.previousSibling&&this.tooltipElement){y(this.tooltipElement),this.tooltipElement.style.setProperty("display","block"),f().addEventListener("keyup",this.hideTooltipByEscape);const t=this.previousSibling,i=this.tooltipElement;this.cleanupAutoPositioning=d(t,i,this.alignTooltip)}},this.hideTooltip=()=>{this.tooltipElement&&(g(this.tooltipElement),this.tooltipElement.style.setProperty("display","none"),this.tooltipElement.style.setProperty("visibility","hidden"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),f().removeEventListener("keyup",this.hideTooltipByEscape)},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.addEventListener("mouseleave",this.handleMouseleave.bind(this)),t.addEventListener("focusin",this.handleFocusIn.bind(this)),t.addEventListener("focusout",this.handleFocusout.bind(this))},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter.bind(this)),t.removeEventListener("mouseleave",this.handleMouseleave.bind(this)),t.removeEventListener("focusin",this.handleFocusIn.bind(this)),t.removeEventListener("focusout",this.handleFocusout.bind(this))},this.resyncListeners=(t,i,e=!1)=>{t&&this.removeListeners(t),i&&(e&&(this.previousSibling=i),this.addListeners(i))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout((()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()}),300)},this._align="top",this._id=void 0,this._label=void 0,this.state={_align:"top",_label:"…"}}handleMouseEnter(){this.hasMouseIn=!0,this.showOrHideTooltip()}handleMouseleave(){this.hasMouseIn=!1,this.showOrHideTooltip()}handleFocusIn(){this.hasFocusIn=!0,this.showOrHideTooltip()}handleFocusout(){this.hasFocusIn=!1,this.showOrHideTooltip()}render(){return t(s,{key:"7f8ecf9c0a2290dfd6906b51ff94c044fb244312",class:"kol-tooltip-wc"},""!==this.state._label&&t("div",{key:"1a19732e88a727300b48f71a7747e2258a94b57f",class:"tooltip-floating",ref:this.catchTooltipElement},t("div",{key:"c61adf4a1eef293b9c3d6f6685fca8b7243d7a8e",class:"tooltip-area tooltip-arrow",ref:this.catchArrowElement}),t(m,{key:"92da4f72212174f0d0ae65a31f4d06065a707844",class:"tooltip-area tooltip-content",id:this.state._id,_label:this.state._label})))}validateAlign(t){r(this,t)}validateId(t){b(this,t)}validateLabel(t){c(this,t,{required:!0})}componentWillLoad(){this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t;this.resyncListeners(this.previousSibling,null===(t=this.host)||void 0===t?void 0:t.previousElementSibling,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t;this.previousSibling=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return o(this)}static get watchers(){return{_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};k.style=x;export{k as kol_tooltip_wc};