@public-ui/components 1.7.11 → 1.7.13

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 e}from"./index-0b7aa54b.js";import{a as s}from"./i18n-3c3ea069.js";import{v as a}from"./align-e436d1e2.js";import{v as n}from"./label-f44203be.js";import{d as l,f as r,c as d}from"./a11y.tipps-f7f7cb4b.js";import{L as h}from"./dev.utils-c9e7cb5f.js";import{s as b,e as u,c,k as p}from"./prop.validators-8b68b7ca.js";import"./index-d354dce9.js";import"./index-c88c7ecf.js";import"./alignment-e13116c6.js";import"./reuse-d79ab469.js";const f=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}: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}",g=f,v=class{constructor(e){t(this,e),this.onCreateLabel=`${s("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,i)=>{if(i>0){if(e+i<t.length)return t[e+i]._disabled?this.nextPossibleTabIndex(t,e,i+1):e+i}else if(i<0&&e+i>=0)return t[e+i]._disabled?this.nextPossibleTabIndex(t,e,i-1):e+i;return e},this.onKeyDown=t=>{const e=setTimeout((()=>{clearTimeout(e);let i=null;switch(t.key){case"ArrowRight":i=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":i=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==i&&this.onSelect(t,i,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,i=!0,a)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===i){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,a||t);t=a||t,i=!1}if(!1===i){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,a||t);l("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,i,a)=>{let o,s;o="_selected"===a?t:this.state._selected,s="_tabs"===a?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,s))},this.handleTabPanels=()=>{var t,e,i;if(this.tabPanelHost instanceof HTMLDivElement)for(let a=this.tabPanelHost.children.length;a<this.state._tabs.length;a++){const o=document.createElement("div");o.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${a}`),o.setAttribute("id",`tabpanel-${a}`),o.setAttribute("role","tabpanel"),o.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${a}`),o.appendChild(s),this.tabPanelHost.appendChild(o),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[a])&&(null===(i=this.host)||void 0===i||i.children[a].setAttribute("slot",`tabpanel-slot-${a}`))}},this.onCreate=t=>{var e,i;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(i=this.state._on)||void 0===i||i.onCreate(t))},this._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("kol-button-group-wc",{role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>i("kol-button-wc",{_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("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(o,null,i("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),i("div",{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,i=!1){var a,o;this._selected=e,"function"==typeof(null===(a=this._on)||void 0===a?void 0:a.onSelect)&&(null===(o=this._on)||void 0===o||o.onSelect(t,e)),!0===i&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=p(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};v.style={default:g};export{v as kol_tabs};
+import{r as t,h as i,H as e,g as o}from"./index-cf7b0813.js";import{a as s}from"./i18n-3701fda5.js";import{v as a}from"./align-6a271473.js";import{v as n}from"./label-efb10d30.js";import{d as l,f as r,c as d}from"./a11y.tipps-90beea3f.js";import{L as h}from"./dev.utils-3d1ba6ea.js";import{s as b,e as u,c,k as p}from"./prop.validators-c2b3a276.js";import"./index-cfc376ee.js";import"./index-c88c7ecf.js";import"./alignment-b1fc396e.js";import"./reuse-d79ab469.js";const f=":host{--a11y-min-size:44px;background-color:white;color:black;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}[hidden]{display:none !important}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.hidden{display:none;visibility:hidden}: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}",g=f,v=class{constructor(e){t(this,e),this.onCreateLabel=`${s("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=>{const e=setTimeout((()=>{clearTimeout(e);let a=null;switch(t.key){case"ArrowRight":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,1);break;case"ArrowLeft":a=this.nextPossibleTabIndex(this.state._tabs,this.state._selected,-1)}null!==a&&this.onSelect(t,a,!0)}),250)},this.onClickSelect=(t,e)=>{this.onSelect(t,e,!0)},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 o,s;o="_selected"===i?t:this.state._selected,s="_tabs"===i?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,s))},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 o=document.createElement("div");o.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),o.setAttribute("id",`tabpanel-${i}`),o.setAttribute("role","tabpanel"),o.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${i}`),o.appendChild(s),this.tabPanelHost.appendChild(o),(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("kol-button-group-wc",{role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>i("kol-button-wc",{_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("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return i(e,{key:"be1e630d4846c8ef49d61c9cab2552124894a3ad"},i("div",{key:"9aab458792e5d7837f1c1fd161ec45b6f35e9be1",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),i("div",{key:"c1a2e1a886e97df496dae2528502fe3932c06122",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,a=!1){var i,o;this._selected=e,"function"==typeof(null===(i=this._on)||void 0===i?void 0:i.onSelect)&&(null===(o=this._on)||void 0===o||o.onSelect(t,e)),!0===a&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=p(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return o(this)}static get watchers(){return{_align:["validateAlign"],_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};v.style={default:g};export{v 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","timeout","setTimeout","clearTimeout","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","role","map","button","_icons","_icon","_hideLabel","_iconOnly","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","class","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","focus","selectedTimeout","koliBriQuerySelector"],"sources":["src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\nkol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n}\nkol-button-group-wc button {\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tdisplay: block;\n}\ndiv.grid,\ndiv[role='tabpanel'] {\n\theight: 100%;\n}\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-right kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n:host > .tabs-align-left kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n:host > .tabs-align-bottom kol-button-group-wc {\n\torder: 2;\n}\n:host > .tabs-align-bottom kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-top kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n\torder: 1;\n}\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\twidth: 100%;\n}\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import 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';\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.css',\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\tprivate selectedTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tlet selectedIndex: number | null = null;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (selectedIndex !== null) {\n\t\t\t\tthis.onSelect(event, selectedIndex, true);\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index, true);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.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<kol-button-group-wc role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_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></kol-button-wc>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t)}\n\t\t\t</kol-button-group-wc>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._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, focus = false): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (focus === true) {\n\t\t\t// TODO: prüfen, ob hier noch was offen ist\n\t\t\t// devHint('[KolTabs] Tab-Fokus-verschieben geht im Moment nicht.');\n\t\t\tthis.selectedTimeout = setTimeout(() => {\n\t\t\t\tclearTimeout(this.selectedTimeout);\n\t\t\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\t\t\tbutton?.focus();\n\t\t\t\t}\n\t\t\t}, 250);\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.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":";;;idAAA,MAAMA,EAAkB,onFACxB,MAAAC,EAAeD,E,MCsBFE,EAAO,M,yBAGXC,KAAAC,cAAgB,GAAGC,EAAU,eAC7BF,KAAAG,cAAgB,MAGhBH,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,MAAMC,EAAUC,YAAW,KAC1BC,aAAaF,GACb,IAAIG,EAA+B,KACnC,OAAQJ,EAAMK,KACb,IAAK,aACJD,EAAgBf,KAAKI,qBAAqBJ,KAAKiB,MAAMC,MAAOlB,KAAKiB,MAAME,UAAW,GAClF,MACD,IAAK,YACJJ,EAAgBf,KAAKI,qBAAqBJ,KAAKiB,MAAMC,MAAOlB,KAAKiB,MAAME,WAAY,GACnF,MAEF,GAAIJ,IAAkB,KAAM,CAC3Bf,KAAKoB,SAAST,EAAOI,EAAe,K,IAEnC,IAAI,EAGSf,KAAAqB,cAAgB,CAACV,EAAmBW,KACpDtB,KAAKoB,SAAST,EAAOW,EAAO,KAAK,EASjBtB,KAAAuB,YAAeZ,IAC/BA,EAAMa,iBACNb,EAAMc,iBAAiB,EAGPzB,KAAA0B,UAA6C,CAC7DC,QAAS3B,KAAKqB,cACdE,YAAavB,KAAKuB,aAuCFvB,KAAA4B,kBAAqBC,IACrC7B,KAAK8B,aAAeD,CAAE,EAkEf7B,KAAA+B,yBAA2B,CAACC,EAAkB3B,EAAwB4B,EAAW,KAAMC,KAC9F,GAAIF,EAAW3B,EAAKG,OAAS,EAAG,CAC/BwB,EAAW3B,EAAKG,OAAS,C,CAE1B,GAAIwB,EAAW,EAAG,CACjBA,EAAW,C,CAEZ,GAAIG,MAAMC,QAAQ/B,IAASA,EAAK2B,GAAW,CAC1C,GAAI3B,EAAK2B,GAAUvB,UAAW,CAC7B,GAAIwB,IAAa,KAAM,CACtB,GAAID,EAAW3B,EAAKG,OAAS,EAAG,CAC/B,OAAOR,KAAK+B,yBAAyBC,EAAW,EAAG3B,EAAM,KAAM6B,GAAmBF,E,KAC5E,CACNA,EAAWE,GAAmBF,EAC9BC,EAAW,K,EAGb,GAAIA,IAAa,MAAO,CACvB,GAAID,EAAW,EAAG,CACjB,OAAOhC,KAAK+B,yBAAyBC,EAAW,EAAG3B,EAAM,MAAO6B,GAAmBF,E,KAC7E,CACNK,EAAQ,iF,IAKZ,OAAOL,CAAQ,EAGRhC,KAAAsC,oBAAsB,CAACC,EAAoBC,EAAiCC,EAAuCzB,KAC1H,IAAIgB,EACJ,GAAIhB,IAAQ,YAAa,CACxBgB,EAAWO,C,KACL,CACNP,EAAWhC,KAAKiB,MAAME,S,CAEvB,IAAId,EACJ,GAAIW,IAAQ,QAAS,CACpBX,EAAOkC,C,KACD,CACNlC,EAAOL,KAAKiB,MAAMC,K,CAEnB,GAAIb,EAAKG,OAAS,EAAG,CACpBgC,EAAUE,IAAI,YAAa1C,KAAK+B,yBAAyBC,EAAU3B,G,GA0GpDL,KAAA2C,gBAAkB,K,UAClC,GAAI3C,KAAK8B,wBAAwBc,eAAgB,CAChD,IAAK,IAAIC,EAAI7C,KAAK8B,aAAagB,SAAStC,OAAQqC,EAAI7C,KAAKiB,MAAMC,MAAMV,OAAQqC,IAAK,CACjF,MAAME,EAAMC,SAASC,cAAc,OACnCF,EAAIG,aAAa,kBAAmB,GAAGlD,KAAKiB,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,GAChBrD,KAAK8B,aAAawB,YAAYP,GAC9B,KAAIQ,EAAAvD,KAAKwD,QAAI,MAAAD,SAAA,SAAAA,EAAET,oBAAoBW,kBAAkBC,EAAA1D,KAAKwD,QAAI,MAAAE,SAAA,SAAAA,EAAEZ,SAASD,IAAqC,EAE7Gc,EAAA3D,KAAKwD,QAAI,MAAAG,SAAA,SAAAA,EAAEb,SAASD,GAAGK,aAAa,OAAQ,iBAAiBL,I,KAqCzD7C,KAAA4D,SAAYjD,I,QACnBA,EAAMa,iBACNb,EAAMc,kBACN,WAAW8B,EAAAvD,KAAKiB,MAAM4C,OAAG,MAAAN,SAAA,SAAAA,EAAEK,YAAa,WAAY,EACnDF,EAAA1D,KAAKiB,MAAM4C,OAAG,MAAAH,SAAA,SAAAA,EAAEE,SAASjD,E,eAtPa,M,kFAsB4B,E,qCAWxB,M,WAEZ,CAC/BmD,OAAQ,MACRX,OAAQ,IACRhC,UAAW,EACXD,MAAO,G,CApGA,iBAAA6C,GACP,OACCC,EAAA,uBAAqBC,KAAK,UAAS,aAAajE,KAAKiB,MAAMkC,OAAQzC,UAAWV,KAAKU,WACjFV,KAAKiB,MAAMC,MAAMgD,KAAI,CAACC,EAAwB7C,IAC9C0C,EAAA,iBACCvD,UAAW0D,EAAO1D,UAClB2D,OAAQD,EAAOC,QAAUD,EAAOE,MAChCC,WAAYH,EAAOG,YAAcH,EAAOI,UACxCpB,OAAQgB,EAAOhB,OACfU,IAAK7D,KAAK0B,UACV8C,UAAWxE,KAAKiB,MAAME,YAAcG,EAAQ,GAAK,EACjDmD,cAAeN,EAAOM,cACtBC,SAAU1E,KAAKiB,MAAME,YAAcG,EAAQ,SAAWqD,UACtDC,aAAc5E,KAAKiB,MAAME,YAAcG,EAAQ,WAAaqD,UAC5DE,cAAe,YAAYvD,IAC3BwD,cAAe9E,KAAKiB,MAAME,YAAcG,EACxCyD,IAAK,GAAG/E,KAAKiB,MAAMkC,OAAOC,QAAQ,MAAO,YAAY9B,IACrD0D,MAAM,MACNC,OAAQ3D,MAGTtB,KAAKG,eACL6D,EAAA,iBACCkB,MAAM,gBACN/B,OAAQnD,KAAKC,cACb4D,IAAK,CACJlC,QAAS3B,KAAK4D,Y,CAcb,MAAAuB,GACN,OACCnB,EAACoB,EAAI,KACJpB,EAAA,OACCqB,IAAMxD,IACL7B,KAAKsF,iBAAmBzD,CAAiB,EAE1CqD,MAAO,CACN,CAAC,cAAclF,KAAKiB,MAAM6C,UAAW,OAGrC9D,KAAK+D,oBACNC,EAAA,OAAKqB,IAAKrF,KAAK4B,qB,CAmGZ,aAAA2D,CAAcC,GACpBD,EAAcvF,KAAMwF,E,CAOd,iBAAAC,CAAkBD,GACxBE,EAAc1F,KAAMwF,EAAO,CAC1BG,SAAU,M,CAKL,aAAAD,CAAcF,GACpBE,EAAc1F,KAAMwF,E,CAId,UAAAI,CAAWJ,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChDK,EAAY,2EACZ,MAAMnE,EAAkC,GACxC,UAAW8D,EAAM5B,WAAa,mBAAqB4B,EAAM5B,WAAa,SAAU,CAC/E,UAAW4B,EAAM5B,WAAa,SAAU,CACvC,UAAW4B,EAAM5B,SAASkC,QAAU,UAAYN,EAAM5B,SAASkC,MAAMtF,OAAS,EAAG,CAChFR,KAAKC,cAAgBuF,EAAM5B,SAASkC,K,KAC9B,CACNC,EAAIC,MACH,0I,CAQF,UAAWR,EAAM5B,SAASqC,WAAa,WAAY,CAClDvE,EAAUkC,SAAW4B,EAAM5B,SAASqC,Q,KAC9B,CACNF,EAAIC,MACH,0J,MAQI,CACNtE,EAAUkC,SAAW4B,EAAM5B,Q,CAE5B5D,KAAKG,qBAAuBuB,EAAUkC,WAAa,U,CAEpD,UAAW4B,EAAMpE,WAAa,WAAY,CACzCM,EAAUN,SAAWoE,EAAMpE,Q,CAE5B8E,EAA+BlG,KAAM,MAAO0B,E,EAKvC,gBAAAyE,CAAiBX,GACvBY,EAAYpG,KAAM,YAAawF,EAAO,CACrCa,MAAO,CACNC,YAAatG,KAAKsC,sB,CAMd,YAAAiE,CAAaf,GACnBgB,EACCxG,KACA,SACCyG,UAAgCA,IAAS,UAAYA,IAAS,aAAeA,EAAKtD,SAAW,UAAYsD,EAAKtD,OAAO3C,OAAS,GAC/HgF,EACAb,UACA,CACC0B,MAAO,CACNC,YAAatG,KAAKsC,uBAIrBoE,EAAuB,UAAW1G,KAAKiB,MAAMC,MAAMV,O,CAI7C,iBAAAmG,CAAkBnB,GACxBxF,KAAKuF,cAAcC,E,CAGb,iBAAAoB,GACN5G,KAAKuF,cAAcvF,KAAK8D,QAAU9D,KAAK6G,YACvC7G,KAAK0F,cAAc1F,KAAKmD,QAAUnD,KAAK8G,YACvC9G,KAAK4F,WAAW5F,KAAK6D,KACrB7D,KAAKmG,iBAAiBnG,KAAKmB,WAC3BnB,KAAKuG,aAAavG,KAAKkB,M,CAuBjB,kBAAA6F,GACN/G,KAAK2C,kBACL,GAAI3C,KAAK8B,wBAAwBc,eAAgB,CAChD,IAAK,IAAIC,EAAI,EAAGA,EAAI7C,KAAK8B,aAAagB,SAAStC,OAAQqC,IAAK,CAC3D,GAAIA,IAAM7C,KAAKiB,MAAME,UAAW,CAC/BnB,KAAK8B,aAAagB,SAASD,GAAGK,aAAa,SAAU,G,KAC/C,CACNlD,KAAK8B,aAAagB,SAASD,GAAGmE,gBAAgB,S,IAM1C,QAAA5F,CAAST,EAAgEW,EAAe2F,EAAQ,O,QACvGjH,KAAKmB,UAAYG,EACjB,WAAWiC,EAAAvD,KAAK6D,OAAG,MAAAN,SAAA,SAAAA,EAAEnC,YAAa,WAAY,EAC7CsC,EAAA1D,KAAK6D,OAAG,MAAAH,SAAA,SAAAA,EAAEtC,SAAST,EAAOW,E,CAE3B,GAAI2F,IAAU,KAAM,CAGnBjH,KAAKkH,gBAAkBrG,YAAW,KACjCC,aAAad,KAAKkH,iBAClB,GAAIlH,KAAKsF,iBAAmD,CAC3D,MAAMnB,EAA6BgD,EAAqB,UAAUnH,KAAKiB,MAAMkC,OAAOC,QAAQ,MAAO,YAAY9B,IAAStB,KAAKsF,kBAC7HnB,IAAM,MAANA,SAAM,SAANA,EAAQ8C,O,IAEP,I"}
+{"version":3,"names":["defaultStyleCss","KolTabsDefaultStyle0","KolTabs","this","onCreateLabel","translate","showCreateTab","nextPossibleTabIndex","tabs","offset","step","length","_disabled","onKeyDown","event","timeout","setTimeout","clearTimeout","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","role","map","button","_icons","_icon","_hideLabel","_iconOnly","_tabIndex","_tooltipAlign","_variant","undefined","_customClass","_ariaControls","_ariaSelected","_id","_role","_value","class","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","focus","selectedTimeout","koliBriQuerySelector"],"sources":["src/components/tabs/style.css?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\nkol-button-group-wc {\n\tdisplay: inline-flex;\n\tflex-wrap: wrap;\n}\nkol-button-group-wc button {\n\tborder-bottom-color: transparent;\n\tborder-bottom-style: solid;\n\tdisplay: block;\n}\ndiv.grid,\ndiv[role='tabpanel'] {\n\theight: 100%;\n}\n:host > .tabs-align-right {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto;\n}\n:host > .tabs-align-right kol-button-group-wc {\n\tdisplay: grid;\n\torder: 2;\n}\n:host > .tabs-align-left {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr;\n}\n:host > .tabs-align-left kol-button-group-wc {\n\tdisplay: grid;\n\torder: 0;\n}\n:host > .tabs-align-bottom {\n\tdisplay: grid;\n\tgrid-template-rows: 1fr auto;\n}\n:host > .tabs-align-bottom kol-button-group-wc {\n\torder: 2;\n}\n:host > .tabs-align-bottom kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-bottom > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > .tabs-align-top {\n\tdisplay: grid;\n\tgrid-template-rows: auto 1fr;\n}\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-top kol-button-group-wc > div {\n\tdisplay: flex;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div:first-child {\n\tmargin: 0 1em 0 0;\n}\n:host > .tabs-align-top > kol-button-group-wc > div > div {\n\tmargin: 0 1em;\n}\n:host > div {\n\tdisplay: grid;\n}\n:host > .tabs-align-left kol-button-group-wc,\n:host > .tabs-align-top kol-button-group-wc {\n\torder: 0;\n}\n:host > .tabs-align-bottom kol-button-group-wc,\n:host > .tabs-align-right kol-button-group-wc {\n\torder: 1;\n}\n:host > div.tabs-align-left kol-button-group-wc > div,\n:host > div.tabs-align-left kol-button-group-wc > div > div,\n:host > div.tabs-align-right kol-button-group-wc > div,\n:host > div.tabs-align-right kol-button-group-wc > div > div {\n\tdisplay: grid;\n}\n:host > div.tabs-align-left kol-button-group-wc > div > div kol-button-wc,\n:host > div.tabs-align-right kol-button-group-wc > div > div kol-button-wc {\n\twidth: 100%;\n}\n:host > div.tabs-align-bottom kol-button-group-wc div,\n:host > div.tabs-align-top kol-button-group-wc div {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n}\n","import 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';\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.css',\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\tprivate selectedTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step: number): number => {\n\t\tif (step > 0) {\n\t\t\tif (offset + step < tabs.length) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t} else if (step < 0) {\n\t\t\tif (offset + step >= 0) {\n\t\t\t\tif (tabs[offset + step]._disabled) {\n\t\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step - 1);\n\t\t\t\t}\n\t\t\t\treturn offset + step;\n\t\t\t}\n\t\t}\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tconst timeout = setTimeout(() => {\n\t\t\tclearTimeout(timeout);\n\t\t\tlet selectedIndex: number | null = null;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, 1);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tselectedIndex = this.nextPossibleTabIndex(this.state._tabs, this.state._selected, -1);\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\tif (selectedIndex !== null) {\n\t\t\t\tthis.onSelect(event, selectedIndex, true);\n\t\t\t}\n\t\t}, 250);\n\t};\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.onSelect(event, index, true);\n\t};\n\n\t// private readonly onClickClose = (event: Event, button: TabButtonProps, index: number) => {\n\t// \tevent.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<kol-button-group-wc role=\"tablist\" aria-label={this.state._label} onKeyDown={this.onKeyDown}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_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></kol-button-wc>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<kol-button-wc\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button-wc>\n\t\t\t\t)}\n\t\t\t</kol-button-group-wc>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<div\n\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t\t}}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[`tabs-align-${this.state._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, focus = false): void {\n\t\tthis._selected = index;\n\t\tif (typeof this._on?.onSelect === 'function') {\n\t\t\tthis._on?.onSelect(event, index);\n\t\t}\n\t\tif (focus === true) {\n\t\t\t// TODO: prüfen, ob hier noch was offen ist\n\t\t\t// devHint('[KolTabs] Tab-Fokus-verschieben geht im Moment nicht.');\n\t\t\tthis.selectedTimeout = setTimeout(() => {\n\t\t\t\tclearTimeout(this.selectedTimeout);\n\t\t\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\t\t\tbutton?.focus();\n\t\t\t\t}\n\t\t\t}, 250);\n\t\t}\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.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":"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"}

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-0b7aa54b.js";import{n as s}from"./dev.utils-c9e7cb5f.js";import{a as l,e as n,d as h,w as r,s as o}from"./prop.validators-8b68b7ca.js";import{s as d,a as p}from"./reuse-d79ab469.js";import{I as u,g as c}from"./controller-1e428fb8.js";import{v}from"./rows-02006071.js";import"./index-c88c7ecf.js";import"./a11y.tipps-f7f7cb4b.js";import"./hide-label-1ba311ef.js";import"./label-f44203be.js";import"./events-fa760b68.js";import"./tab-index-468d318a.js";import"./associated.controller-c7add452.js";class f extends u{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){v(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}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.error.hidden{display:none}",b=y,m=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},_=class{render(){const{ariaDescribedBy:a}=c(this.state),i=d(this.state._label);return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{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",{slot:"label"},i?t("slot",null):this.state._label),t("div",{slot:"input"},t("textarea",Object.assign({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=()=>{this.ref instanceof HTMLTextAreaElement&&(o(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=m(this.ref)))},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 f(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>m(this.ref)?this.state._rows:m(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"]}}};_.style={default:b};export{_ as kol_textarea};
+import{h as t,H as e,r as i,g as a}from"./index-cf7b0813.js";import{n as s}from"./dev.utils-3d1ba6ea.js";import{a as l,e as n,d as h,w as d,s as r}from"./prop.validators-c2b3a276.js";import{s as o,a as c}from"./reuse-d79ab469.js";import{I as p,g as u}from"./controller-b90cfb96.js";import{v as f}from"./rows-4a3d4e60.js";import"./index-c88c7ecf.js";import"./a11y.tipps-90beea3f.js";import"./hide-label-4df0e368.js";import"./label-efb10d30.js";import"./events-fa760b68.js";import"./tab-index-a9976462.js";import"./associated.controller-54459452.js";class v extends p{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){d(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:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,option,select,textarea,.input-label){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}",b=y,m=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},_=class{render(){const{ariaDescribedBy:a}=u(this.state),i=o(this.state._label);return t(e,{key:"167c7a02e594ac5bc34bcf92ea7a7d9115fdcc9d",class:{"has-value":this.state._hasValue}},t("kol-input",{key:"912d0306c10c55646d43a853d6faccc91dd1f07e",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:"3c9ffd3f11b2b111967260fcdfeb0963ac0254c7",slot:"label"},i?t("slot",null):this.state._label),t("div",{key:"a75008135953f90fcfa4795ff3df6512fa3e3c0d",slot:"input"},t("textarea",Object.assign({key:"a39da00d59818eaccf2806321f25ad0f01e46aef",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,c(this.host,this.ref)},this.onInput=()=>{this.ref instanceof HTMLTextAreaElement&&(r(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=m(this.ref)))},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 v(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>m(this.ref)?this.state._rows:m(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"]}}};_.style={default:b};export{_ 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","class","_hasValue","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","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.css?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 url(../input-line.css);\n.error.hidden {\n\tdisplay: none;\n}\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';\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.css',\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={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\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</kol-input>\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 = () => {\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}\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","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","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.css?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 url(../input-line.css);\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';\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.css',\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={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\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</kol-input>\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 = () => {\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}\n\t};\n}\n"],"mappings":"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"}

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}from"./index-0b7aa54b.js";import{a as o}from"./i18n-3c3ea069.js";import{n as a}from"./dev.utils-c9e7cb5f.js";import"./index-d354dce9.js";import"./index-c88c7ecf.js";import"./a11y.tipps-f7f7cb4b.js";import"./reuse-d79ab469.js";const i=({toastState:s,onClose:e,key:a})=>t("div",{class:`toast ${s.status}`,key:a},t("kol-alert",{class:"alert",_alert:!0,_label:s.toast.label,_level:0,_hasCloser:!0,_type:s.toast.type,_variant:"card",_on:{onClose:e}},t("div",{ref:t=>{"function"==typeof s.toast.render&&t&&s.toast.render(t,{close:()=>e()})}},"string"==typeof s.toast.description?s.toast.description:null))),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",l=n,c=300,r=class{constructor(t){s(this,t),this.state={_toastStates:[]}}async enqueue(t){const s={toast:t,status:"adding",id:`toast-${a()}`};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))})}),c),()=>{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))})}),c)}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:[]})}),c)}render(){return t(e,null,this.state._toastStates.length>1&&t("kol-button",{_label:o("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((s=>t(i,{toastState:s,onClose:()=>this.handleClose(s),key:s.id}))))}};r.style={default:l};export{r as kol_toast_container};
+import{h as t,r as s,F as e}from"./index-cf7b0813.js";import{a as o}from"./i18n-3701fda5.js";import{n as a}from"./dev.utils-3d1ba6ea.js";import"./index-cfc376ee.js";import"./index-c88c7ecf.js";import"./a11y.tipps-90beea3f.js";import"./reuse-d79ab469.js";const i=({toastState:s,onClose:e,key:a})=>t("div",{class:`toast ${s.status}`,key:a},t("kol-alert",{class:"alert",_alert:!0,_label:s.toast.label,_level:0,_hasCloser:!0,_type:s.toast.type,_variant:"card",_on:{onClose:e}},t("div",{ref:t=>{"function"==typeof s.toast.render&&t&&s.toast.render(t,{close:()=>e()})}},"string"==typeof s.toast.description?s.toast.description:null))),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",c=n,l=300,r=class{constructor(t){s(this,t),this.state={_toastStates:[]}}async enqueue(t){const s={toast:t,status:"adding",id:`toast-${a()}`};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))})}),l),()=>{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))})}),l)}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:[]})}),l)}render(){return t(e,{key:"2c9e021d640aa320053781d0796d3de3bcf30e18"},this.state._toastStates.length>1&&t("kol-button",{_label:o("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((s=>t(i,{toastState:s,onClose:()=>this.handleClose(s),key:s.id}))))}};r.style={default:c};export{r 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","_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","Fragment","length","translate","onClick"],"sources":["src/components/toaster/InternalToast.tsx","src/components/toaster/style.css?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/component.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { ToastState } from './types';\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<kol-alert\n\t\t\t\tclass=\"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</kol-alert>\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, 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';\n\nconst TRANSITION_TIMEOUT = 300;\n\n@Component({\n\ttag: 'kol-toast-container',\n\tstyleUrls: {\n\t\tdefault: './style.css',\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  }\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<Fragment>\n\t\t\t\t{this.state._toastStates.length > 1 && (\n\t\t\t\t\t<kol-button\n\t\t\t\t\t\t_label={translate('kol-toast-close-all')}\n\t\t\t\t\t\tclass=\"close-all\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid this.closeAll();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button>\n\t\t\t\t)}\n\t\t\t\t{this.state._toastStates.map((toastState) => (\n\t\t\t\t\t<InternalToast toastState={toastState} onClose={() => this.handleClose(toastState)} key={toastState.id} />\n\t\t\t\t))}\n\t\t\t</Fragment>\n\t\t);\n\t}\n}\n"],"mappings":";;;8PAQO,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,EAAA,aACCC,MAAM,QACNE,OAAQ,KACRC,OAAQZ,EAAWK,MAAMQ,MACzBC,OAAQ,EACRC,WAAY,KACZC,MAAOhB,EAAWK,MAAMY,KACxBC,SAAS,OACTC,IAAK,CAAElB,YAEPO,EAAA,OAAKY,IAAKjB,UAAmBH,EAAWK,MAAMgB,cAAgB,SAAWrB,EAAWK,MAAMgB,YAAc,OAEpG,EC7BR,MAAMC,EAAkB,0LACxB,MAAAC,EAAeD,ECMf,MAAME,EAAqB,I,MASdC,EAAiB,M,oCACG,CAC/BC,aAAc,G,CAMR,aAAMC,CAAQtB,GACpB,MAAMuB,EAA4B,CACjCvB,QACAK,OAAQ,SACRmB,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,CAClB3B,OAAQ,YAER2B,KAEJ,GACCb,GAEH,MAAO,KACNO,KAAKO,YAAYV,EAAc,C,CAIzB,WAAAU,CAAYtC,GACnB+B,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaU,KAAKC,IAC1C,GAAIA,EAAgBR,KAAO7B,EAAW6B,GAAI,CACzCQ,EAAgB3B,OAAS,U,CAE1B,OAAO2B,CAAe,MAIxBF,YAAW,KACVJ,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaa,QAAQF,GAAoBA,EAAgBR,KAAO7B,EAAW6B,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,CAClB3B,OAAQ,iBAIVyB,YAAW,KACVJ,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAc,IACd,GACCF,E,CAGG,MAAAlB,GACN,OACCE,EAACiC,EAAQ,KACPV,KAAKC,MAAMN,aAAagB,OAAS,GACjClC,EAAA,cACCI,OAAQ+B,EAAU,uBAClBlC,MAAM,YACNU,IAAK,CACJyB,QAAS,UACHb,KAAKS,UAAU,KAKvBT,KAAKC,MAAMN,aAAaU,KAAKpC,GAC7BQ,EAACT,EAAa,CAACC,WAAYA,EAAYC,QAAS,IAAM8B,KAAKO,YAAYtC,GAAaE,IAAKF,EAAW6B,O"}
+{"version":3,"names":["InternalToast","toastState","onClose","key","handleRef","element","toast","render","close","h","class","status","_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","Fragment","length","translate","onClick"],"sources":["src/components/toaster/InternalToast.tsx","src/components/toaster/style.css?tag=kol-toast-container&mode=default&encapsulation=shadow","src/components/toaster/component.tsx"],"sourcesContent":["import { h } from '@stencil/core';\nimport { ToastState } from './types';\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<kol-alert\n\t\t\t\tclass=\"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</kol-alert>\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, 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';\n\nconst TRANSITION_TIMEOUT = 300;\n\n@Component({\n\ttag: 'kol-toast-container',\n\tstyleUrls: {\n\t\tdefault: './style.css',\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  }\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<Fragment>\n\t\t\t\t{this.state._toastStates.length > 1 && (\n\t\t\t\t\t<kol-button\n\t\t\t\t\t\t_label={translate('kol-toast-close-all')}\n\t\t\t\t\t\tclass=\"close-all\"\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: () => {\n\t\t\t\t\t\t\t\tvoid this.closeAll();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}}\n\t\t\t\t\t></kol-button>\n\t\t\t\t)}\n\t\t\t\t{this.state._toastStates.map((toastState) => (\n\t\t\t\t\t<InternalToast toastState={toastState} onClose={() => this.handleClose(toastState)} key={toastState.id} />\n\t\t\t\t))}\n\t\t\t</Fragment>\n\t\t);\n\t}\n}\n"],"mappings":";;;8PAQO,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,EAAA,aACCC,MAAM,QACNE,OAAQ,KACRC,OAAQZ,EAAWK,MAAMQ,MACzBC,OAAQ,EACRC,WAAY,KACZC,MAAOhB,EAAWK,MAAMY,KACxBC,SAAS,OACTC,IAAK,CAAElB,YAEPO,EAAA,OAAKY,IAAKjB,UAAmBH,EAAWK,MAAMgB,cAAgB,SAAWrB,EAAWK,MAAMgB,YAAc,OAEpG,EC7BR,MAAMC,EAAkB,0LACxB,MAAAC,EAAeD,ECMf,MAAME,EAAqB,I,MASdC,EAAiB,M,oCACG,CAC/BC,aAAc,G,CAMR,aAAMC,CAAQtB,GACpB,MAAMuB,EAA4B,CACjCvB,QACAK,OAAQ,SACRmB,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,CAClB3B,OAAQ,YAER2B,KAEJ,GACCb,GAEH,MAAO,KACNO,KAAKO,YAAYV,EAAc,C,CAIzB,WAAAU,CAAYtC,GACnB+B,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaU,KAAKC,IAC1C,GAAIA,EAAgBR,KAAO7B,EAAW6B,GAAI,CACzCQ,EAAgB3B,OAAS,U,CAE1B,OAAO2B,CAAe,MAIxBF,YAAW,KACVJ,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAcK,KAAKC,MAAMN,aAAaa,QAAQF,GAAoBA,EAAgBR,KAAO7B,EAAW6B,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,CAClB3B,OAAQ,iBAIVyB,YAAW,KACVJ,KAAKC,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACNH,KAAKC,OAAK,CACbN,aAAc,IACd,GACCF,E,CAGG,MAAAlB,GACN,OACCE,EAACiC,EAAQ,CAAAvC,IAAA,4CACP6B,KAAKC,MAAMN,aAAagB,OAAS,GACjClC,EAAA,cACCI,OAAQ+B,EAAU,uBAClBlC,MAAM,YACNU,IAAK,CACJyB,QAAS,UACHb,KAAKS,UAAU,KAKvBT,KAAKC,MAAMN,aAAaU,KAAKpC,GAC7BQ,EAACT,EAAa,CAACC,WAAYA,EAAYC,QAAS,IAAM8B,KAAKO,YAAYtC,GAAaE,IAAKF,EAAW6B,O"}

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-0b7aa54b.js";import{v as s}from"./has-closer-f65d23a4.js";import{v as a}from"./label-f44203be.js";import{v as o}from"./show-7433e50e.js";import{a as h,s as n,e as l,w as r}from"./prop.validators-8b68b7ca.js";import{w as d}from"./validation-ce725c92.js";import"./a11y.tipps-f7f7cb4b.js";import"./dev.utils-c9e7cb5f.js";import"./reuse-d79ab469.js";import"./index-c88c7ecf.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}: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}",c=p,u=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){h(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||n(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,null,this.state._show&&i("div",null,i("kol-alert",{_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},i("slot",null))))}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:c};export{u as kol_toast};
+import{r as t,h as i,H as e}from"./index-cf7b0813.js";import{v as s}from"./has-closer-ecd5110c.js";import{v as a}from"./label-efb10d30.js";import{v as o}from"./show-c018058d.js";import{a as h,s as n,e as l,w as r}from"./prop.validators-c2b3a276.js";import{w as d}from"./validation-6b3fb356.js";import"./a11y.tipps-90beea3f.js";import"./dev.utils-3d1ba6ea.js";import"./reuse-d79ab469.js";import"./index-c88c7ecf.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}",c=p,u=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){h(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||n(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:"3126796e9dab24ea6322b4839821966fe0630daf"},this.state._show&&i("div",null,i("kol-alert",{_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},i("slot",null))))}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:c};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","_variant"],"sources":["src/components/toast/style.css?tag=kol-toast&mode=default&encapsulation=shadow","src/components/toast/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\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:host > div > kol-alert {\n\tdisplay: block;\n\tmargin: auto;\n\tmax-width: 750px;\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';\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.css',\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>\n\t\t\t\t{this.state._show && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<kol-alert\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>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-alert>\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":";;;+ZAAA,MAAMA,EAAkB,0kCACxB,MAAAC,EAAeD,E,MCsBFE,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,KACH5C,KAAKE,MAAMC,OACXwC,EAAA,WACCA,EAAA,aACC1B,OAAQjB,KAAKE,MAAMe,OACnBsB,OAAQvC,KAAKE,MAAMqC,OACnBrB,OAAQlB,KAAKE,MAAMgB,OACnBoB,WAAYtC,KAAKE,MAAMoC,WACvBG,MAAOzC,KAAKE,MAAMuC,MAClBI,SAAS,OAETjC,IAAKZ,KAAKgB,IAEV2B,EAAA,e"}
+{"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","_variant"],"sources":["src/components/toast/style.css?tag=kol-toast&mode=default&encapsulation=shadow","src/components/toast/component.tsx"],"sourcesContent":["@import url(../style.css);\n@import url(../host-display-block.css);\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:host > div > kol-alert {\n\tdisplay: block;\n\tmargin: auto;\n\tmax-width: 750px;\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';\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.css',\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>\n\t\t\t\t{this.state._show && (\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<kol-alert\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>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</kol-alert>\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":";;;+ZAAA,MAAMA,EAAkB,inCACxB,MAAAC,EAAeD,E,MCsBFE,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,4CACH7C,KAAKE,MAAMC,OACXwC,EAAA,WACCA,EAAA,aACC1B,OAAQjB,KAAKE,MAAMe,OACnBsB,OAAQvC,KAAKE,MAAMqC,OACnBrB,OAAQlB,KAAKE,MAAMgB,OACnBoB,WAAYtC,KAAKE,MAAMoC,WACvBG,MAAOzC,KAAKE,MAAMuC,MAClBK,SAAS,OAETlC,IAAKZ,KAAKgB,IAEV2B,EAAA,e"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as e}from"./index-0b7aa54b.js";import{v as t}from"./label-f44203be.js";import{a as o}from"./i18n-3c3ea069.js";import"./a11y.tipps-f7f7cb4b.js";import"./dev.utils-c9e7cb5f.js";import"./reuse-d79ab469.js";import"./prop.validators-8b68b7ca.js";import"./index-c88c7ecf.js";import"./index-d354dce9.js";var n;!function(e){e.Violett="#5f316e",e.Dunkelrot="#780f2d",e.Rot="#c0003c",e.Orange="#cd5038",e.Hellorange="#f7bb3d",e.Gelb="#f9e03a",e["Hellgrün"]="#c1ca31",e.Oliv="#597c39",e["Dunkelgrün"]="#005c45",e["Grün"]="#00854a",e["Türkis"]="#00818b",e.Hellblau="#80cdec",e.Blau="#0077b6",e.Petrol="#007194",e.Dunkelblau="#004b76",e.Dunkelgrau="#576164",e.Hellgrau="#bec5c9"}(n||(n={}));const a=":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}",r=a,s=class{constructor(e){i(this,e),this._label=void 0,this._version=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return e("kol-badge",{_color:n.Hellgrau,_icons:{left:{icon:"codicon codicon-versions",label:o("kol-version")}},_label:this.state._label})}validateLabel(e){t(this,e,{required:!0})}validateVersion(e){this.validateLabel(e)}componentWillLoad(){this.validateLabel(this._label||this._version)}static get watchers(){return{_label:["validateLabel"],_version:["validateVersion"]}}};s.style={default:r};export{s as kol_version};
+import{r as i,h as e}from"./index-cf7b0813.js";import{v as t}from"./label-efb10d30.js";import{a as n}from"./i18n-3701fda5.js";import"./a11y.tipps-90beea3f.js";import"./dev.utils-3d1ba6ea.js";import"./reuse-d79ab469.js";import"./prop.validators-c2b3a276.js";import"./index-c88c7ecf.js";import"./index-cfc376ee.js";var o;!function(e){e.Violett="#5f316e",e.Dunkelrot="#780f2d",e.Rot="#c0003c",e.Orange="#cd5038",e.Hellorange="#f7bb3d",e.Gelb="#f9e03a",e["Hellgrün"]="#c1ca31",e.Oliv="#597c39",e["Dunkelgrün"]="#005c45",e["Grün"]="#00854a",e["Türkis"]="#00818b",e.Hellblau="#80cdec",e.Blau="#0077b6",e.Petrol="#007194",e.Dunkelblau="#004b76",e.Dunkelgrau="#576164",e.Hellgrau="#bec5c9"}(o||(o={}));const a=":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}",s=a,r=class{constructor(e){i(this,e),this._label=void 0,this._version=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return e("kol-badge",{key:"517d542f789eabd86874a6a592d7d7c0f55b549e",_color:o.Hellgrau,_icons:{left:{icon:"codicon codicon-versions",label:n("kol-version")}},_label:this.state._label})}validateLabel(e){t(this,e,{required:!0})}validateVersion(e){this.validateLabel(e)}componentWillLoad(){this.validateLabel(this._label||this._version)}static get watchers(){return{_label:["validateLabel"],_version:["validateVersion"]}}};r.style={default:s};export{r as kol_version};

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

@@ -1 +1 @@
-{"version":3,"names":["Farbspektrum","defaultStyleCss","KolVersionDefaultStyle0","KolVersion","_label","render","h","_color","Hellgrau","_icons","left","icon","label","translate","this","state","validateLabel","value","required","validateVersion","componentWillLoad","_version"],"sources":["src/enums/color.ts","src/components/version/style.css?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/component.tsx"],"sourcesContent":["/**\n * @deprecated We will remove this enum in the next major release.\n */\nexport type FarbspektrumNames =\n\t| 'Violett'\n\t| 'Dunkelrot'\n\t| 'Rot'\n\t| 'Orange'\n\t| 'Hellorange'\n\t| 'Gelb'\n\t| 'Hellgrün'\n\t| 'Oliv'\n\t| 'Dunkelgrün'\n\t| 'Grün'\n\t| 'Türkis'\n\t| 'Hellblau'\n\t| 'Blau'\n\t| 'Petrol'\n\t| 'Dunkelblau'\n\t| 'Dunkelgrau'\n\t| 'Hellgrau';\n\n/**\n * @deprecated We will remove this enum in the next major release.\n */\nexport enum Farbspektrum {\n\t'Violett' = '#5f316e',\n\t'Dunkelrot' = '#780f2d',\n\t'Rot' = '#c0003c',\n\t'Orange' = '#cd5038',\n\t'Hellorange' = '#f7bb3d',\n\t'Gelb' = '#f9e03a',\n\t'Hellgrün' = '#c1ca31',\n\t'Oliv' = '#597c39',\n\t'Dunkelgrün' = '#005c45',\n\t'Grün' = '#00854a',\n\t'Türkis' = '#00818b',\n\t'Hellblau' = '#80cdec',\n\t'Blau' = '#0077b6',\n\t'Petrol' = '#007194',\n\t'Dunkelblau' = '#004b76',\n\t'Dunkelgrau' = '#576164',\n\t'Hellgrau' = '#bec5c9',\n}\n","@import url(../style.css);\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Farbspektrum } from '../../enums/color';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { API, States } from './types';\nimport { translate } from '../../i18n';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-badge\n\t\t\t\t_color={Farbspektrum.Hellgrau}\n\t\t\t\t_icons={{\n\t\t\t\t\tleft: { icon: 'codicon codicon-versions', label: translate('kol-version') },\n\t\t\t\t}}\n\t\t\t\t_label={this.state._label}\n\t\t\t/>\n\t\t);\n\t}\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 * Deprecated: Gibt die Versionsnummer als Text an.\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _version?: string;\n\n\t@State() public state: States = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_version')\n\tpublic validateVersion(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._version);\n\t}\n}\n"],"mappings":";;;yTAyBA,IAAYA,GAAZ,SAAYA,GACXA,EAAA,qBACAA,EAAA,uBACAA,EAAA,iBACAA,EAAA,oBACAA,EAAA,wBACAA,EAAA,kBACAA,EAAA,sBACAA,EAAA,kBACAA,EAAA,wBACAA,EAAA,kBACAA,EAAA,oBACAA,EAAA,sBACAA,EAAA,kBACAA,EAAA,oBACAA,EAAA,wBACAA,EAAA,wBACAA,EAAA,qBACA,EAlBD,CAAYA,MAAY,KCzBxB,MAAMC,EAAkB,w0BACxB,MAAAC,EAAeD,E,MCaFE,EAAU,M,kFAwBU,CAC/BC,OAAQ,gB,CAxBF,MAAAC,GACN,OACCC,EAAA,aACCC,OAAQP,EAAaQ,SACrBC,OAAQ,CACPC,KAAM,CAAEC,KAAM,2BAA4BC,MAAOC,EAAU,iBAE5DT,OAAQU,KAAKC,MAAMX,Q,CAqBf,aAAAY,CAAcC,GACpBD,EAAcF,KAAMG,EAAO,CAC1BC,SAAU,M,CAKL,eAAAC,CAAgBF,GACtBH,KAAKE,cAAcC,E,CAGb,iBAAAG,GACNN,KAAKE,cAAcF,KAAKV,QAAUU,KAAKO,S"}
+{"version":3,"names":["Farbspektrum","defaultStyleCss","KolVersionDefaultStyle0","KolVersion","_label","render","h","key","_color","Hellgrau","_icons","left","icon","label","translate","this","state","validateLabel","value","required","validateVersion","componentWillLoad","_version"],"sources":["src/enums/color.ts","src/components/version/style.css?tag=kol-version&mode=default&encapsulation=shadow","src/components/version/component.tsx"],"sourcesContent":["/**\n * @deprecated We will remove this enum in the next major release.\n */\nexport type FarbspektrumNames =\n\t| 'Violett'\n\t| 'Dunkelrot'\n\t| 'Rot'\n\t| 'Orange'\n\t| 'Hellorange'\n\t| 'Gelb'\n\t| 'Hellgrün'\n\t| 'Oliv'\n\t| 'Dunkelgrün'\n\t| 'Grün'\n\t| 'Türkis'\n\t| 'Hellblau'\n\t| 'Blau'\n\t| 'Petrol'\n\t| 'Dunkelblau'\n\t| 'Dunkelgrau'\n\t| 'Hellgrau';\n\n/**\n * @deprecated We will remove this enum in the next major release.\n */\nexport enum Farbspektrum {\n\t'Violett' = '#5f316e',\n\t'Dunkelrot' = '#780f2d',\n\t'Rot' = '#c0003c',\n\t'Orange' = '#cd5038',\n\t'Hellorange' = '#f7bb3d',\n\t'Gelb' = '#f9e03a',\n\t'Hellgrün' = '#c1ca31',\n\t'Oliv' = '#597c39',\n\t'Dunkelgrün' = '#005c45',\n\t'Grün' = '#00854a',\n\t'Türkis' = '#00818b',\n\t'Hellblau' = '#80cdec',\n\t'Blau' = '#0077b6',\n\t'Petrol' = '#007194',\n\t'Dunkelblau' = '#004b76',\n\t'Dunkelgrau' = '#576164',\n\t'Hellgrau' = '#bec5c9',\n}\n","@import url(../style.css);\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Farbspektrum } from '../../enums/color';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { API, States } from './types';\nimport { translate } from '../../i18n';\n\n@Component({\n\ttag: 'kol-version',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolVersion implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-badge\n\t\t\t\t_color={Farbspektrum.Hellgrau}\n\t\t\t\t_icons={{\n\t\t\t\t\tleft: { icon: 'codicon codicon-versions', label: translate('kol-version') },\n\t\t\t\t}}\n\t\t\t\t_label={this.state._label}\n\t\t\t/>\n\t\t);\n\t}\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 * Deprecated: Gibt die Versionsnummer als Text an.\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _version?: string;\n\n\t@State() public state: States = {\n\t\t_label: '0.0.0-alpha.0',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_version')\n\tpublic validateVersion(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._version);\n\t}\n}\n"],"mappings":";;;yTAyBA,IAAYA,GAAZ,SAAYA,GACXA,EAAA,qBACAA,EAAA,uBACAA,EAAA,iBACAA,EAAA,oBACAA,EAAA,wBACAA,EAAA,kBACAA,EAAA,sBACAA,EAAA,kBACAA,EAAA,wBACAA,EAAA,kBACAA,EAAA,oBACAA,EAAA,sBACAA,EAAA,kBACAA,EAAA,oBACAA,EAAA,wBACAA,EAAA,wBACAA,EAAA,qBACA,EAlBD,CAAYA,MAAY,KCzBxB,MAAMC,EAAkB,+2BACxB,MAAAC,EAAeD,E,MCaFE,EAAU,M,kFAwBU,CAC/BC,OAAQ,gB,CAxBF,MAAAC,GACN,OACCC,EAAA,aAAAC,IAAA,2CACCC,OAAQR,EAAaS,SACrBC,OAAQ,CACPC,KAAM,CAAEC,KAAM,2BAA4BC,MAAOC,EAAU,iBAE5DV,OAAQW,KAAKC,MAAMZ,Q,CAqBf,aAAAa,CAAcC,GACpBD,EAAcF,KAAMG,EAAO,CAC1BC,SAAU,M,CAKL,eAAAC,CAAgBF,GACtBH,KAAKE,cAAcC,E,CAGb,iBAAAG,GACNN,KAAKE,cAAcF,KAAKX,QAAUW,KAAKO,S"}