@public-ui/components 1.7.10 → 1.7.12

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-0b7aa54b.js";import{a as translate}from"./i18n-9c81e897.js";import{v as validateAlign}from"./align-29085133.js";import{v as validateLabel}from"./label-690befc4.js";import{d as devHint,f as featureHint,c as uiUxHintMillerscheZahl}from"./a11y.tipps-a79effa1.js";import{L as Log}from"./dev.utils-5f359e41.js";import{s as setState,e as watchNumber,c as watchJsonArrayString,k as koliBriQuerySelector}from"./prop.validators-e5a112ea.js";import"./index-632d7943.js";import"./index-c88c7ecf.js";import"./alignment-89119497.js";import"./reuse-d79ab469.js";const defaultStyleCss=":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}",KolTabsDefaultStyle0=defaultStyleCss,KolTabs=class{constructor(t){registerInstance(this,t),this.onCreateLabel=`${translate("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);devHint("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,a,i)=>{let l,o;l="_selected"===i?t:this.state._selected,o="_tabs"===i?t:this.state._tabs,o.length>0&&e.set("_selected",this.selectNextNotDisabledTab(l,o))},this.handleTabPanels=()=>{var t,e,a;if(this.tabPanelHost instanceof HTMLDivElement)for(let i=this.tabPanelHost.children.length;i<this.state._tabs.length;i++){const l=document.createElement("div");l.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),l.setAttribute("id",`tabpanel-${i}`),l.setAttribute("role","tabpanel"),l.setAttribute("hidden","");const o=document.createElement("slot");o.setAttribute("name",`tabpanel-slot-${i}`),l.appendChild(o),this.tabPanelHost.appendChild(l),(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 h("kol-button-group-wc",{role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>h("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&&h("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return h(Host,null,h("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),h("div",{ref:this.catchTabPanelHost})))}validateAlign(t){validateAlign(this,t)}validateAriaLabel(t){validateLabel(this,t,{required:!0})}validateLabel(t){validateLabel(this,t)}validateOn(t){if("object"==typeof t&&null!==t){featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:Log.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:Log.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),setState(this,"_on",e)}}validateSelected(t){watchNumber(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){watchJsonArrayString(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),uiUxHintMillerscheZahl("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,l;this._selected=e,"function"==typeof(null===(i=this._on)||void 0===i?void 0:i.onSelect)&&(null===(l=this._on)||void 0===l||l.onSelect(t,e)),!0===a&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return getElement(this)}static get watchers(){return{_align:["validateAlign"],_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};KolTabs.style={default:KolTabsDefaultStyle0};export{KolTabs as kol_tabs};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-0b7aa54b.js";import{a as translate}from"./i18n-e70e3fa4.js";import{v as validateAlign}from"./align-4b5623a0.js";import{v as validateLabel}from"./label-00203940.js";import{d as devHint,f as featureHint,c as uiUxHintMillerscheZahl}from"./a11y.tipps-b5477bd5.js";import{L as Log}from"./dev.utils-232c068c.js";import{s as setState,e as watchNumber,c as watchJsonArrayString,k as koliBriQuerySelector}from"./prop.validators-a73a5d11.js";import"./index-6f37dccf.js";import"./index-c88c7ecf.js";import"./alignment-e19b28a7.js";import"./reuse-d79ab469.js";const defaultStyleCss=":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}",KolTabsDefaultStyle0=defaultStyleCss,KolTabs=class{constructor(t){registerInstance(this,t),this.onCreateLabel=`${translate("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);devHint("[KolTabs] Alle Tabs sind deaktiviert und somit kann kein Tab angezeigt werden.")}}return t},this.syncSelectedAndTabs=(t,e,a,i)=>{let l,s;l="_selected"===i?t:this.state._selected,s="_tabs"===i?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(l,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 l=document.createElement("div");l.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),l.setAttribute("id",`tabpanel-${i}`),l.setAttribute("role","tabpanel"),l.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${i}`),l.appendChild(s),this.tabPanelHost.appendChild(l),(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 h("kol-button-group-wc",{role:"tablist","aria-label":this.state._label,onKeyDown:this.onKeyDown},this.state._tabs.map(((t,e)=>h("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&&h("kol-button-wc",{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return h(Host,null,h("div",{ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),h("div",{ref:this.catchTabPanelHost})))}validateAlign(t){validateAlign(this,t)}validateAriaLabel(t){validateLabel(this,t,{required:!0})}validateLabel(t){validateLabel(this,t)}validateOn(t){if("object"==typeof t&&null!==t){featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:Log.debug("[KolTabs] Der Label-Text für Neu in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} ist nicht korrekt gesetzt."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:Log.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),setState(this,"_on",e)}}validateSelected(t){watchNumber(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){watchJsonArrayString(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),uiUxHintMillerscheZahl("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,l;this._selected=e,"function"==typeof(null===(i=this._on)||void 0===i?void 0:i.onSelect)&&(null===(l=this._on)||void 0===l||l.onSelect(t,e)),!0===a&&(this.selectedTimeout=setTimeout((()=>{if(clearTimeout(this.selectedTimeout),this.tabPanelsElement){const t=koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}),250))}get host(){return getElement(this)}static get watchers(){return{_align:["validateAlign"],_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"],_tabsAlign:["validateTabsAlign"]}}};KolTabs.style={default:KolTabsDefaultStyle0};export{KolTabs as kol_tabs};

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

@@ -1 +1 @@
-{"file":"kol-tabs.entry.js","mappings":"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","names":[],"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"],"version":3}
+{"file":"kol-tabs.entry.js","mappings":"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","names":[],"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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,H as Host,r as registerInstance,g as getElement}from"./index-0b7aa54b.js";import{n as nonce}from"./dev.utils-5f359e41.js";import{a as watchBoolean,e as watchNumber,d as watchString,w as watchValidator,s as setState}from"./prop.validators-e5a112ea.js";import{s as showExpertSlot,a as propagateFocus}from"./reuse-d79ab469.js";import{I as InputController,g as getRenderStates}from"./controller-462e6487.js";import{v as validateRows}from"./rows-2137f8b9.js";import"./index-c88c7ecf.js";import"./a11y.tipps-a79effa1.js";import"./hide-label-eff4095b.js";import"./label-690befc4.js";import"./events-fa760b68.js";import"./tab-index-e11959e4.js";import"./associated.controller-e1334159.js";class TextareaController extends InputController{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){watchBoolean(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){watchNumber(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){watchString(this.component,"_placeholder",t)}validateReadOnly(t){watchBoolean(this.component,"_readOnly",t)}validateResize(t){watchValidator(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){watchBoolean(this.component,"_required",t)}validateRows(t){validateRows(this.component,t)}validateValue(t){watchString(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 defaultStyleCss=":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}",KolTextareaDefaultStyle0=defaultStyleCss,increaseTextareaHeight=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},KolTextarea=class{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,{class:{"has-value":this.state._hasValue}},h("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"},h("span",{slot:"label"},e?h("slot",null):this.state._label),h("div",{slot:"input"},h("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.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){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onInput=()=>{this.ref instanceof HTMLTextAreaElement&&(setState(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=increaseTextareaHeight(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-${nonce()}`,_label:"…",_resize:"vertical"},this.controller=new TextareaController(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>increaseTextareaHeight(this.ref)?this.state._rows:increaseTextareaHeight(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 getElement(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"]}}};KolTextarea.style={default:KolTextareaDefaultStyle0};export{KolTextarea as kol_textarea};
+import{h,H as Host,r as registerInstance,g as getElement}from"./index-0b7aa54b.js";import{n as nonce}from"./dev.utils-232c068c.js";import{a as watchBoolean,e as watchNumber,d as watchString,w as watchValidator,s as setState}from"./prop.validators-a73a5d11.js";import{s as showExpertSlot,a as propagateFocus}from"./reuse-d79ab469.js";import{I as InputController,g as getRenderStates}from"./controller-487bbb84.js";import{v as validateRows}from"./rows-9d616b00.js";import"./index-c88c7ecf.js";import"./a11y.tipps-b5477bd5.js";import"./hide-label-ff8dee89.js";import"./label-00203940.js";import"./events-fa760b68.js";import"./tab-index-bfaa121e.js";import"./associated.controller-700f38ae.js";class TextareaController extends InputController{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){watchBoolean(this.component,"_hasCounter",t,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(t){watchNumber(this.component,"_maxLength",t,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(t){watchString(this.component,"_placeholder",t)}validateReadOnly(t){watchBoolean(this.component,"_readOnly",t)}validateResize(t){watchValidator(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){watchBoolean(this.component,"_required",t)}validateRows(t){validateRows(this.component,t)}validateValue(t){watchString(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 defaultStyleCss=":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:'*'}",KolTextareaDefaultStyle0=defaultStyleCss,increaseTextareaHeight=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},KolTextarea=class{render(){const{ariaDescribedBy:t}=getRenderStates(this.state),e=showExpertSlot(this.state._label);return h(Host,{class:{"has-value":this.state._hasValue}},h("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"},h("span",{slot:"label"},e?h("slot",null):this.state._label),h("div",{slot:"input"},h("textarea",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":t.length>0?t.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){registerInstance(this,t),this.catchRef=t=>{this.ref=t,propagateFocus(this.host,this.ref)},this.onInput=()=>{this.ref instanceof HTMLTextAreaElement&&(setState(this,"_currentLength",this.ref.value.length),this.state._adjustHeight&&(this._rows=increaseTextareaHeight(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-${nonce()}`,_label:"…",_resize:"vertical"},this.controller=new TextareaController(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>increaseTextareaHeight(this.ref)?this.state._rows:increaseTextareaHeight(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 getElement(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"]}}};KolTextarea.style={default:KolTextareaDefaultStyle0};export{KolTextarea as kol_textarea};

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

@@ -1 +1 @@
-{"file":"kol-textarea.entry.js","mappings":"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","names":[],"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"],"version":3}
+{"file":"kol-textarea.entry.js","mappings":"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","names":[],"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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,r as registerInstance,F as Fragment}from"./index-0b7aa54b.js";import{a as translate}from"./i18n-9c81e897.js";import{n as nonce}from"./dev.utils-5f359e41.js";import"./index-632d7943.js";import"./index-c88c7ecf.js";import"./a11y.tipps-a79effa1.js";import"./reuse-d79ab469.js";const InternalToast=({toastState:t,onClose:s,key:e})=>h("div",{class:`toast ${t.status}`,key:e},h("kol-alert",{class:"alert",_alert:!0,_label:t.toast.label,_level:0,_hasCloser:!0,_type:t.toast.type,_variant:"card",_on:{onClose:s}},h("div",{ref:e=>{"function"==typeof t.toast.render&&e&&t.toast.render(e,{close:()=>s()})}},"string"==typeof t.toast.description?t.toast.description:null))),defaultStyleCss="@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",KolToastContainerDefaultStyle0=defaultStyleCss,TRANSITION_TIMEOUT=300,KolToastContainer=class{constructor(t){registerInstance(this,t),this.state={_toastStates:[]}}async enqueue(t){const s={toast:t,status:"adding",id:`toast-${nonce()}`};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))})}),300),()=>{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))})}),300)}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:[]})}),300)}render(){return h(Fragment,null,this.state._toastStates.length>1&&h("kol-button",{_label:translate("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((t=>h(InternalToast,{toastState:t,onClose:()=>this.handleClose(t),key:t.id}))))}};KolToastContainer.style={default:KolToastContainerDefaultStyle0};export{KolToastContainer as kol_toast_container};
+import{h,r as registerInstance,F as Fragment}from"./index-0b7aa54b.js";import{a as translate}from"./i18n-e70e3fa4.js";import{n as nonce}from"./dev.utils-232c068c.js";import"./index-6f37dccf.js";import"./index-c88c7ecf.js";import"./a11y.tipps-b5477bd5.js";import"./reuse-d79ab469.js";const InternalToast=({toastState:t,onClose:s,key:e})=>h("div",{class:`toast ${t.status}`,key:e},h("kol-alert",{class:"alert",_alert:!0,_label:t.toast.label,_level:0,_hasCloser:!0,_type:t.toast.type,_variant:"card",_on:{onClose:s}},h("div",{ref:e=>{"function"==typeof t.toast.render&&e&&t.toast.render(e,{close:()=>s()})}},"string"==typeof t.toast.description?t.toast.description:null))),defaultStyleCss="@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",KolToastContainerDefaultStyle0=defaultStyleCss,TRANSITION_TIMEOUT=300,KolToastContainer=class{constructor(t){registerInstance(this,t),this.state={_toastStates:[]}}async enqueue(t){const s={toast:t,status:"adding",id:`toast-${nonce()}`};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))})}),300),()=>{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))})}),300)}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:[]})}),300)}render(){return h(Fragment,null,this.state._toastStates.length>1&&h("kol-button",{_label:translate("kol-toast-close-all"),class:"close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((t=>h(InternalToast,{toastState:t,onClose:()=>this.handleClose(t),key:t.id}))))}};KolToastContainer.style={default:KolToastContainerDefaultStyle0};export{KolToastContainer as kol_toast_container};

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

@@ -1 +1 @@
-{"file":"kol-toast-container.entry.js","mappings":"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","names":[],"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// eslint-disable-next-line @typescript-eslint/require-await\n\t@Method()\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// eslint-disable-next-line @typescript-eslint/require-await\n\t@Method()\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"],"version":3}
+{"file":"kol-toast-container.entry.js","mappings":"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","names":[],"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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host}from"./index-0b7aa54b.js";import{v as validateHasCloser}from"./has-closer-3a6407b7.js";import{v as validateLabel}from"./label-690befc4.js";import{v as validateShow}from"./show-565151f8.js";import{a as watchBoolean,s as setState,e as watchNumber,w as watchValidator}from"./prop.validators-e5a112ea.js";import{w as watchHeadingLevel}from"./validation-53473433.js";import"./a11y.tipps-a79effa1.js";import"./dev.utils-5f359e41.js";import"./reuse-d79ab469.js";import"./index-c88c7ecf.js";const defaultStyleCss=":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}",KolToastDefaultStyle0=defaultStyleCss,KolToast=class{constructor(t){registerInstance(this,t),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){watchBoolean(this,"_alert",t)}validateHasCloser(t){validateHasCloser(this,t)}validateHeading(t){this.validateLabel(t)}validateLabel(t){validateLabel(this,t)}validateLevel(t){watchHeadingLevel(this,t)}validateOn(t){"object"!=typeof t||"function"!=typeof(null==t?void 0:t.onClose)&&!0!==t.onClose||setState(this,"_on",{onClose:t.onClose})}validateShow(t){validateShow(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){watchNumber(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){watchValidator(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 h(Host,null,this.state._show&&h("div",null,h("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},h("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};KolToast.style={default:KolToastDefaultStyle0};export{KolToast as kol_toast};
+import{r as registerInstance,h,H as Host}from"./index-0b7aa54b.js";import{v as validateHasCloser}from"./has-closer-5abbbc80.js";import{v as validateLabel}from"./label-00203940.js";import{v as validateShow}from"./show-9954c9fd.js";import{a as watchBoolean,s as setState,e as watchNumber,w as watchValidator}from"./prop.validators-a73a5d11.js";import{w as watchHeadingLevel}from"./validation-c75d7638.js";import"./a11y.tipps-b5477bd5.js";import"./dev.utils-232c068c.js";import"./reuse-d79ab469.js";import"./index-c88c7ecf.js";const defaultStyleCss=":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}",KolToastDefaultStyle0=defaultStyleCss,KolToast=class{constructor(t){registerInstance(this,t),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){watchBoolean(this,"_alert",t)}validateHasCloser(t){validateHasCloser(this,t)}validateHeading(t){this.validateLabel(t)}validateLabel(t){validateLabel(this,t)}validateLevel(t){watchHeadingLevel(this,t)}validateOn(t){"object"!=typeof t||"function"!=typeof(null==t?void 0:t.onClose)&&!0!==t.onClose||setState(this,"_on",{onClose:t.onClose})}validateShow(t){validateShow(this,t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateShowDuration(t){watchNumber(this,"_showDuration",t,{hooks:{afterPatch:this.handleShowAndDuration}})}validateType(t){watchValidator(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 h(Host,null,this.state._show&&h("div",null,h("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},h("slot",null))))}static get watchers(){return{_alert:["validateAlert"],_hasCloser:["validateHasCloser"],_heading:["validateHeading"],_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_show:["validateShow"],_showDuration:["validateShowDuration"],_type:["validateType"]}}};KolToast.style={default:KolToastDefaultStyle0};export{KolToast as kol_toast};

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

@@ -1 +1 @@
-{"file":"kol-toast.entry.js","mappings":"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","names":[],"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"],"version":3}
+{"file":"kol-toast.entry.js","mappings":"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","names":[],"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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h}from"./index-0b7aa54b.js";import{v as validateLabel}from"./label-690befc4.js";import{a as translate}from"./i18n-9c81e897.js";import"./a11y.tipps-a79effa1.js";import"./dev.utils-5f359e41.js";import"./reuse-d79ab469.js";import"./prop.validators-e5a112ea.js";import"./index-c88c7ecf.js";import"./index-632d7943.js";var Farbspektrum;!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"}(Farbspektrum||(Farbspektrum={}));const defaultStyleCss=":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}",KolVersionDefaultStyle0=defaultStyleCss,KolVersion=class{constructor(e){registerInstance(this,e),this._label=void 0,this._version=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return h("kol-badge",{_color:Farbspektrum.Hellgrau,_icons:{left:{icon:"codicon codicon-versions",label:translate("kol-version")}},_label:this.state._label})}validateLabel(e){validateLabel(this,e,{required:!0})}validateVersion(e){this.validateLabel(e)}componentWillLoad(){this.validateLabel(this._label||this._version)}static get watchers(){return{_label:["validateLabel"],_version:["validateVersion"]}}};KolVersion.style={default:KolVersionDefaultStyle0};export{KolVersion as kol_version};
+import{r as registerInstance,h}from"./index-0b7aa54b.js";import{v as validateLabel}from"./label-00203940.js";import{a as translate}from"./i18n-e70e3fa4.js";import"./a11y.tipps-b5477bd5.js";import"./dev.utils-232c068c.js";import"./reuse-d79ab469.js";import"./prop.validators-a73a5d11.js";import"./index-c88c7ecf.js";import"./index-6f37dccf.js";var Farbspektrum;!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"}(Farbspektrum||(Farbspektrum={}));const defaultStyleCss=":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}",KolVersionDefaultStyle0=defaultStyleCss,KolVersion=class{constructor(e){registerInstance(this,e),this._label=void 0,this._version=void 0,this.state={_label:"0.0.0-alpha.0"}}render(){return h("kol-badge",{_color:Farbspektrum.Hellgrau,_icons:{left:{icon:"codicon codicon-versions",label:translate("kol-version")}},_label:this.state._label})}validateLabel(e){validateLabel(this,e,{required:!0})}validateVersion(e){this.validateLabel(e)}componentWillLoad(){this.validateLabel(this._label||this._version)}static get watchers(){return{_label:["validateLabel"],_version:["validateVersion"]}}};KolVersion.style={default:KolVersionDefaultStyle0};export{KolVersion as kol_version};

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

@@ -1 +1 @@
-{"file":"kol-version.entry.js","mappings":";;;;;;;;;;;;;AAyBA,IAAY,YAkBX;AAlBD,WAAY,YAAY;IACvB,mCAAqB,CAAA;IACrB,qCAAuB,CAAA;IACvB,+BAAiB,CAAA;IACjB,kCAAoB,CAAA;IACpB,sCAAwB,CAAA;IACxB,gCAAkB,CAAA;IAClB,yCAAsB,CAAA;IACtB,gCAAkB,CAAA;IAClB,2CAAwB,CAAA;IACxB,qCAAkB,CAAA;IAClB,uCAAoB,CAAA;IACpB,oCAAsB,CAAA;IACtB,gCAAkB,CAAA;IAClB,kCAAoB,CAAA;IACpB,sCAAwB,CAAA;IACxB,sCAAwB,CAAA;IACxB,oCAAsB,CAAA;AACvB,CAAC,EAlBW,YAAY,KAAZ,YAAY;;ACzBxB,MAAM,eAAe,GAAG,u0BAAu0B,CAAC;AACh2B,gCAAe,eAAe;;MCajB,UAAU;;;;;qBAwBU;YAC/B,MAAM,EAAE,eAAe;SACvB;;IAzBM,MAAM;QACZ,QACC,iBACC,MAAM,EAAE,YAAY,CAAC,QAAQ,EAC7B,MAAM,EAAE;gBACP,IAAI,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,EAAE;aAC3E,EACD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GACxB,EACD;KACF;IAkBM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAAc;QACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjD;;;;;;;;;;;;","names":[],"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"],"version":3}
+{"file":"kol-version.entry.js","mappings":";;;;;;;;;;;;;AAyBA,IAAY,YAkBX;AAlBD,WAAY,YAAY;IACvB,mCAAqB,CAAA;IACrB,qCAAuB,CAAA;IACvB,+BAAiB,CAAA;IACjB,kCAAoB,CAAA;IACpB,sCAAwB,CAAA;IACxB,gCAAkB,CAAA;IAClB,yCAAsB,CAAA;IACtB,gCAAkB,CAAA;IAClB,2CAAwB,CAAA;IACxB,qCAAkB,CAAA;IAClB,uCAAoB,CAAA;IACpB,oCAAsB,CAAA;IACtB,gCAAkB,CAAA;IAClB,kCAAoB,CAAA;IACpB,sCAAwB,CAAA;IACxB,sCAAwB,CAAA;IACxB,oCAAsB,CAAA;AACvB,CAAC,EAlBW,YAAY,KAAZ,YAAY;;ACzBxB,MAAM,eAAe,GAAG,82BAA82B,CAAC;AACv4B,gCAAe,eAAe;;MCajB,UAAU;;;;;qBAwBU;YAC/B,MAAM,EAAE,eAAe;SACvB;;IAzBM,MAAM;QACZ,QACC,iBACC,MAAM,EAAE,YAAY,CAAC,QAAQ,EAC7B,MAAM,EAAE;gBACP,IAAI,EAAE,EAAE,IAAI,EAAE,0BAA0B,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,EAAE;aAC3E,EACD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GACxB,EACD;KACF;IAkBM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAAc;QACpC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KAC1B;IAEM,iBAAiB;QACvB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;KACjD;;;;;;;;;;;;","names":[],"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"],"version":3}