@public-ui/components 3.0.0-rc.0 → 3.0.0-rc.1

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-907ce00e.js"),componentNames=require("./component-names-7808fb62.js"),i18n=require("./i18n-1d085d07.js"),dev_utils=require("./dev.utils-2bfc459d.js"),events$1=require("./events-221fcb43.js"),prop_validators=require("./prop.validators-37d21dea.js"),events=require("./events-4981f0c3.js"),label=require("./label-d84e4f92.js");require("./i18n-737701e2.js"),require("./reuse-8cfefa9b.js"),require("./dev.utils-58fde089.js"),require("./index-bf4a6924.js"),require("./common-1ab929ac.js");const validateTableHeaderCells=(e,t)=>{prop_validators.emptyStringByArrayHandler(t,(()=>{prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(e){}prop_validators.watchValidator(e,"_headerCells",(e=>"object"==typeof e&&null!==e),new Set(["TableHeaderCellsPropType"]),t)}))}))},KolTableStateless=class{constructor(e){index.registerInstance(this,e),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(e,t,a)=>{var i,l;let n=String(t);return this.horizontal&&(null===(i=e[0])||void 0===i?void 0:i.data)&&(n=null!==(l=this.getDataKey(e[0].data))&&void 0!==l?l:n),index.h("tr",{key:`row-${n}`},this.renderSelectionCell(e,t),e.map(((e,i)=>this.renderTableCell(e,t,i,a))))},this.renderTableCell=(e,t,a,i)=>{let l=`${t}-${a}-${e.label}`;if(e.data){const i=this.getDataKey(e.data);l=i?`${i}-${this.horizontal?a:t}`:l}return!1===e.asTd?this.renderHeadingCell(e,t,a,i):index.h("td",{key:`cell-${l}`,class:{[e.textAlign]:"string"==typeof e.textAlign&&e.textAlign.length>0},colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")},this.state={_data:[],_label:"",_headerCells:{horizontal:[],vertical:[]}},this.tableDivElementHasScrollbar=!1,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}validateData(e){events.validateTableData(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){events.validateTableDataFoot(this,e)}validateHeaderCells(e){validateTableHeaderCells(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateMinWidth(e){prop_validators.watchString(this,"_minWidth",e,{defaultValue:void 0})}validateOn(e){events.validateTableCallbacks(this,e)}validateSelection(e){events.validateTableSelection(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const a=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let i=this.checkboxRefs.indexOf(a);i>-1&&(e.preventDefault(),"ArrowDown"===e.key?(i=(i+1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()):"ArrowUp"===e.key&&(e.preventDefault(),i=(i+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,dev_utils.nonce())})),this.dataToKeyMap.forEach(((t,a)=>{e.includes(a)||this.dataToKeyMap.delete(a)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const a=e.render(t,e,e.data,this.state._data);"string"==typeof a&&(t.textContent=a)}}))))}getNumberOfCols(e,t){let a=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var a;return t+=null!==(a=e.colSpan)&&void 0!==a?a:1})),a<t&&(a=t)})),0===a&&(a=t.length),a}getNumberOfRows(e,t){var a;let i=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var a;return t+=null!==(a=e.rowSpan)&&void 0!==a?a:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,i}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,a;let i=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.getThePrimaryHeadersWithKeysIfExists(null!==(a=e.vertical)&&void 0!==a?a:[]),i.length>0&&(this.horizontal=!1)),i}createDataField(e,t,a){var i;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const l=this.getPrimaryHeaders(t),n=this.getNumberOfCols(t.horizontal,e);let o=this.getNumberOfRows(t.vertical,e),s=0;a&&(s=o,o+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const r=[],d=[],c=[];t.vertical.forEach(((e,t)=>{d[t]=0,c[t]=[]}));for(let i=s;i<o;i++){const o=[];t.vertical.forEach(((e,t)=>{let a=0;if(c[t].forEach((e=>a+=e)),a<=i){const l=e[i-a+d[t]];if("object"==typeof l){o.push(Object.assign(Object.assign({},l),{asTd:!1,data:{}}));let e=1;if("number"==typeof l.rowSpan&&l.rowSpan>1&&(e=l.rowSpan),c[t].push(e),"number"==typeof l.colSpan&&l.colSpan>1)for(let a=1;a<l.colSpan;a++)c[t+a].push(e);d[t]++}}}));for(let t=0;t<n;t++)if(!0===this.horizontal){const n=a&&this.state._dataFoot?this.state._dataFoot[i-s]:e[i];"object"==typeof l[t]&&null!==l[t]&&"string"==typeof l[t].key&&"object"==typeof n&&null!==n&&o.push(Object.assign(Object.assign({},l[t]),{colSpan:void 0,data:n,label:n[l[t].key],rowSpan:void 0}))}else"object"==typeof l[i]&&null!==l[i]&&"string"==typeof l[i].key&&"object"==typeof e[t]&&null!==e[t]&&o.push(Object.assign(Object.assign({},l[i]),{colSpan:void 0,data:e[t],label:e[t][l[i].key],rowSpan:void 0}));r.push(o)}if(0===e.length){let e=0,a=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{a+=e.rowSpan||1})));const i={colSpan:e,label:i18n.translate("kol-no-entries"),render:void 0,rowSpan:Math.max(a,1)};0===r.length?r.push([i]):r[0].push(i)}return r}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection)}renderSelectionCell(e,t){var a,i,l;const n=this.state._selection;if(!n)return"";const o=null!==(a=n.keyPropertyName)&&void 0!==a?a:"id",s=null===(i=e[0])||void 0===i?void 0:i.data;if(!s)return"";const r=s[o],d=n.multiple||void 0===n.multiple,c=null===(l=null==n?void 0:n.selectedKeys)||void 0===l?void 0:l.includes(r),h=n.label(s),v={name:"selection",checked:c,id:r,"aria-label":h};return index.h("td",{key:`tbody-${t}-selection`,class:"selection-cell"},index.h("div",{class:"input "+(c?"checked":"")},d?index.h("label",{class:"checkbox-container"},index.h(componentNames.KolIconTag,{class:"icon",_icons:"codicon "+(c?"codicon-check":""),_label:""}),index.h("input",Object.assign({ref:e=>e&&this.checkboxRefs.push(e)},v,{type:"checkbox",onInput:e=>{var t,a,i;const l=c?null===(a=null==n?void 0:n.selectedKeys)||void 0===a?void 0:a.filter((e=>e!==r)):[...null!==(t=null==n?void 0:n.selectedKeys)&&void 0!==t?t:[],r];events$1.tryToDispatchKoliBriEvent("selection-change",this.host,l),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i[events.Events.onSelectionChange])&&this.state._on[events.Events.onSelectionChange](e,null!=l?l:[])}}))):index.h("label",{class:"radio-container"},index.h("input",Object.assign({},v,{type:"radio",onInput:e=>{var t;events$1.tryToDispatchKoliBriEvent("selection-change",this.host,r),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[events.Events.onSelectionChange])&&this.state._on[events.Events.onSelectionChange](e,r)}}))),index.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${r}-label`,_label:h})))}renderHeadingSelectionCell(){var e,t;const a=this.state._selection;if(!a||!a.multiple&&void 0!==a.multiple)return index.h("th",{key:"thead-0"});const i=null!==(e=a.keyPropertyName)&&void 0!==e?e:"id",l=null===(t=a.selectedKeys)||void 0===t?void 0:t.length,n=l===this.state._data.length,o=0!==l&&!n;let s="kol-table-selection-indeterminate";n&&!o&&(s="kol-table-selection-none"),0===l&&(s="kol-table-selection-all");const r=i18n.translate(s);return index.h("th",{key:"thead-0-selection",class:"selection-cell selection-control"},index.h("div",{class:"input "+(o?"indeterminate":n?"checked":"")},index.h("label",{class:"checkbox-container"},index.h(componentNames.KolIconTag,{class:"icon",_icons:"codicon "+(o?"codicon-remove":n?"codicon-check":""),_label:""}),index.h("input",{ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:n&&!o,"aria-label":r,type:"checkbox",onInput:e=>{var t;const a=n?[]:this.state._data.map((e=>null==e?void 0:e[i]));events$1.tryToDispatchKoliBriEvent("selection-change",this.host,a),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[events.Events.onSelectionChange])&&this.state._on[events.Events.onSelectionChange](e,a)}})),index.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${s}-label`,_label:r})))}renderHeaderTdCell(){return index.h(index.Fragment,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&index.h("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(e,t,a,i){let l,n="codicon codicon-fold";if(e.sortDirection)switch(e.sortDirection){case"ASC":n="codicon codicon-chevron-up",l="ascending";break;case"DESC":n="codicon codicon-chevron-down",l="descending"}const o=i?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col";return index.h("th",{key:`${t}-${a}-${e.label}`,class:e.textAlign?`align-${e.textAlign}`:void 0,scope:o,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:e.width},"aria-sort":l,"data-sort":`sort-${e.sortDirection}`},e.sortDirection?index.h(componentNames.KolButtonWcTag,{class:"table-sort-button",exportparts:"icon",_icons:{right:n},_label:e.label,_on:{onClick:t=>{var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onSort)&&e.key&&e.sortDirection&&this.state._on.onSort(t,{key:e.key,currentSortDirection:e.sortDirection})}}}):e.label)}renderSpacer(e,t){var a,i;const l=(null===(a=this.state._headerCells.vertical)||void 0===a?void 0:a.length)||0,n=null===(i=null==t?void 0:t[0])||void 0===i?void 0:i.reduce(((e,t)=>e+(t.colSpan||1)),0),o=this.state._selection?1:0;return index.h("tr",{"aria-hidden":"true",class:`${e}-spacer`},index.h("td",{colSpan:l+n+o}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const e=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return index.h("tfoot",null,[this.renderSpacer("foot",e),e.map(((e,t)=>this.renderTableRow(e,t,!0)))])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],index.h(index.Host,{key:"4a01d08b67fa32cb98a9d92044bc6ac219838243",class:"kol-table-stateless-wc"},index.h("div",{key:"6daa90f7474c6e1602f1446a7852d769dd8e71b9",ref:e=>this.tableDivElement=e,class:"table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},index.h("table",{key:"9d604b2c5a57fddbacc85093c636dd4deae7b21d",style:{minWidth:this.state._minWidth}},index.h("div",{key:"8ad517ca9d73eddcda3334164c50cb5e5ff824eb",class:"focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),index.h("caption",{key:"c9feb58b3a5a51bf0f7b6d35785494989dfed8e4",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&index.h("thead",{key:"9c99834d9fbbd8ab12fee77e8ca33d6ad064390a"},[this.state._headerCells.horizontal.map(((e,t)=>index.h("tr",{key:`thead-${t}`},this.state._selection&&this.renderHeadingSelectionCell(),0===t&&this.renderHeaderTdCell(),Array.isArray(e)&&e.map(((e,a)=>!0===e.asTd?index.h("td",{key:`thead-${t}-${a}-${e.label}`,class:{[e.textAlign]:"string"==typeof e.textAlign&&e.textAlign.length>0},colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:""):this.renderHeadingCell(e,t,a,!1)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),index.h("tbody",{key:"e52d4221c5cf7f445f1735428907c8a4b2cd5740"},e.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot())))}get host(){return index.getElement(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};exports.kol_table_stateless_wc=KolTableStateless;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c048b81b.js"),componentNames=require("./component-names-7808fb62.js"),i18n=require("./i18n-1d085d07.js"),dev_utils=require("./dev.utils-dd5eab59.js"),events$1=require("./events-221fcb43.js"),prop_validators=require("./prop.validators-37d21dea.js"),events=require("./events-4981f0c3.js"),label=require("./label-d84e4f92.js");require("./i18n-737701e2.js"),require("./reuse-8cfefa9b.js"),require("./dev.utils-58fde089.js"),require("./index-bf4a6924.js"),require("./common-1ab929ac.js");const validateTableHeaderCells=(e,t)=>{prop_validators.emptyStringByArrayHandler(t,(()=>{prop_validators.objectObjectHandler(t,(()=>{try{t=prop_validators.parseJson(t)}catch(e){}prop_validators.watchValidator(e,"_headerCells",(e=>"object"==typeof e&&null!==e),new Set(["TableHeaderCellsPropType"]),t)}))}))},KolTableStateless=class{constructor(e){index.registerInstance(this,e),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(e,t,a)=>{var i,l;let n=String(t);return this.horizontal&&(null===(i=e[0])||void 0===i?void 0:i.data)&&(n=null!==(l=this.getDataKey(e[0].data))&&void 0!==l?l:n),index.h("tr",{key:`row-${n}`},this.renderSelectionCell(e,t),e.map(((e,i)=>this.renderTableCell(e,t,i,a))))},this.renderTableCell=(e,t,a,i)=>{let l=`${t}-${a}-${e.label}`;if(e.data){const i=this.getDataKey(e.data);l=i?`${i}-${this.horizontal?a:t}`:l}return!1===e.asTd?this.renderHeadingCell(e,t,a,i):index.h("td",{key:`cell-${l}`,class:{[e.textAlign]:"string"==typeof e.textAlign&&e.textAlign.length>0},colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")},this.state={_data:[],_label:"",_headerCells:{horizontal:[],vertical:[]}},this.tableDivElementHasScrollbar=!1,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}validateData(e){events.validateTableData(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){events.validateTableDataFoot(this,e)}validateHeaderCells(e){validateTableHeaderCells(this,e)}validateLabel(e){label.validateLabel(this,e,{required:!0})}validateMinWidth(e){prop_validators.watchString(this,"_minWidth",e,{defaultValue:void 0})}validateOn(e){events.validateTableCallbacks(this,e)}validateSelection(e){events.validateTableSelection(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const a=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let i=this.checkboxRefs.indexOf(a);i>-1&&(e.preventDefault(),"ArrowDown"===e.key?(i=(i+1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()):"ArrowUp"===e.key&&(e.preventDefault(),i=(i+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,dev_utils.nonce())})),this.dataToKeyMap.forEach(((t,a)=>{e.includes(a)||this.dataToKeyMap.delete(a)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const a=e.render(t,e,e.data,this.state._data);"string"==typeof a&&(t.textContent=a)}}))))}getNumberOfCols(e,t){let a=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var a;return t+=null!==(a=e.colSpan)&&void 0!==a?a:1})),a<t&&(a=t)})),0===a&&(a=t.length),a}getNumberOfRows(e,t){var a;let i=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var a;return t+=null!==(a=e.rowSpan)&&void 0!==a?a:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,i}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,a;let i=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.getThePrimaryHeadersWithKeysIfExists(null!==(a=e.vertical)&&void 0!==a?a:[]),i.length>0&&(this.horizontal=!1)),i}createDataField(e,t,a){var i;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const l=this.getPrimaryHeaders(t),n=this.getNumberOfCols(t.horizontal,e);let o=this.getNumberOfRows(t.vertical,e),s=0;a&&(s=o,o+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const r=[],d=[],c=[];t.vertical.forEach(((e,t)=>{d[t]=0,c[t]=[]}));for(let i=s;i<o;i++){const o=[];t.vertical.forEach(((e,t)=>{let a=0;if(c[t].forEach((e=>a+=e)),a<=i){const l=e[i-a+d[t]];if("object"==typeof l){o.push(Object.assign(Object.assign({},l),{asTd:!1,data:{}}));let e=1;if("number"==typeof l.rowSpan&&l.rowSpan>1&&(e=l.rowSpan),c[t].push(e),"number"==typeof l.colSpan&&l.colSpan>1)for(let a=1;a<l.colSpan;a++)c[t+a].push(e);d[t]++}}}));for(let t=0;t<n;t++)if(!0===this.horizontal){const n=a&&this.state._dataFoot?this.state._dataFoot[i-s]:e[i];"object"==typeof l[t]&&null!==l[t]&&"string"==typeof l[t].key&&"object"==typeof n&&null!==n&&o.push(Object.assign(Object.assign({},l[t]),{colSpan:void 0,data:n,label:n[l[t].key],rowSpan:void 0}))}else"object"==typeof l[i]&&null!==l[i]&&"string"==typeof l[i].key&&"object"==typeof e[t]&&null!==e[t]&&o.push(Object.assign(Object.assign({},l[i]),{colSpan:void 0,data:e[t],label:e[t][l[i].key],rowSpan:void 0}));r.push(o)}if(0===e.length){let e=0,a=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{a+=e.rowSpan||1})));const i={colSpan:e,label:i18n.translate("kol-no-entries"),render:void 0,rowSpan:Math.max(a,1)};0===r.length?r.push([i]):r[0].push(i)}return r}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection)}renderSelectionCell(e,t){var a,i,l;const n=this.state._selection;if(!n)return"";const o=null!==(a=n.keyPropertyName)&&void 0!==a?a:"id",s=null===(i=e[0])||void 0===i?void 0:i.data;if(!s)return"";const r=s[o],d=n.multiple||void 0===n.multiple,c=null===(l=null==n?void 0:n.selectedKeys)||void 0===l?void 0:l.includes(r),h=n.label(s),v={name:"selection",checked:c,id:r,"aria-label":h};return index.h("td",{key:`tbody-${t}-selection`,class:"selection-cell"},index.h("div",{class:"input "+(c?"checked":"")},d?index.h("label",{class:"checkbox-container"},index.h(componentNames.KolIconTag,{class:"icon",_icons:"codicon "+(c?"codicon-check":""),_label:""}),index.h("input",Object.assign({ref:e=>e&&this.checkboxRefs.push(e)},v,{type:"checkbox",onInput:e=>{var t,a,i;const l=c?null===(a=null==n?void 0:n.selectedKeys)||void 0===a?void 0:a.filter((e=>e!==r)):[...null!==(t=null==n?void 0:n.selectedKeys)&&void 0!==t?t:[],r];events$1.tryToDispatchKoliBriEvent("selection-change",this.host,l),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i[events.Events.onSelectionChange])&&this.state._on[events.Events.onSelectionChange](e,null!=l?l:[])}}))):index.h("label",{class:"radio-container"},index.h("input",Object.assign({},v,{type:"radio",onInput:e=>{var t;events$1.tryToDispatchKoliBriEvent("selection-change",this.host,r),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[events.Events.onSelectionChange])&&this.state._on[events.Events.onSelectionChange](e,r)}}))),index.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${r}-label`,_label:h})))}renderHeadingSelectionCell(){var e,t;const a=this.state._selection;if(!a||!a.multiple&&void 0!==a.multiple)return index.h("th",{key:"thead-0"});const i=null!==(e=a.keyPropertyName)&&void 0!==e?e:"id",l=null===(t=a.selectedKeys)||void 0===t?void 0:t.length,n=l===this.state._data.length,o=0!==l&&!n;let s="kol-table-selection-indeterminate";n&&!o&&(s="kol-table-selection-none"),0===l&&(s="kol-table-selection-all");const r=i18n.translate(s);return index.h("th",{key:"thead-0-selection",class:"selection-cell selection-control"},index.h("div",{class:"input "+(o?"indeterminate":n?"checked":"")},index.h("label",{class:"checkbox-container"},index.h(componentNames.KolIconTag,{class:"icon",_icons:"codicon "+(o?"codicon-remove":n?"codicon-check":""),_label:""}),index.h("input",{ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:n&&!o,"aria-label":r,type:"checkbox",onInput:e=>{var t;const a=n?[]:this.state._data.map((e=>null==e?void 0:e[i]));events$1.tryToDispatchKoliBriEvent("selection-change",this.host,a),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[events.Events.onSelectionChange])&&this.state._on[events.Events.onSelectionChange](e,a)}})),index.h(componentNames.KolTooltipWcTag,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${s}-label`,_label:r})))}renderHeaderTdCell(){return index.h(index.Fragment,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&index.h("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(e,t,a,i){let l,n="codicon codicon-fold";if(e.sortDirection)switch(e.sortDirection){case"ASC":n="codicon codicon-chevron-up",l="ascending";break;case"DESC":n="codicon codicon-chevron-down",l="descending"}const o=i?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col";return index.h("th",{key:`${t}-${a}-${e.label}`,class:e.textAlign?`align-${e.textAlign}`:void 0,scope:o,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:e.width},"aria-sort":l,"data-sort":`sort-${e.sortDirection}`},e.sortDirection?index.h(componentNames.KolButtonWcTag,{class:"table-sort-button",exportparts:"icon",_icons:{right:n},_label:e.label,_on:{onClick:t=>{var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onSort)&&e.key&&e.sortDirection&&this.state._on.onSort(t,{key:e.key,currentSortDirection:e.sortDirection})}}}):e.label)}renderSpacer(e,t){var a,i;const l=(null===(a=this.state._headerCells.vertical)||void 0===a?void 0:a.length)||0,n=null===(i=null==t?void 0:t[0])||void 0===i?void 0:i.reduce(((e,t)=>e+(t.colSpan||1)),0),o=this.state._selection?1:0;return index.h("tr",{"aria-hidden":"true",class:`${e}-spacer`},index.h("td",{colSpan:l+n+o}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const e=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return index.h("tfoot",null,[this.renderSpacer("foot",e),e.map(((e,t)=>this.renderTableRow(e,t,!0)))])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],index.h(index.Host,{key:"b6a8e112f267d1daa6aad5cad3f0db28768ca0ac",class:"kol-table-stateless-wc"},index.h("div",{key:"a8e8b26858f09d4fbe70ee77c5e1408f93637fea",ref:e=>this.tableDivElement=e,class:"table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},index.h("table",{key:"c5f495df67d1b5746a6840ecc030b45db07f6624",style:{minWidth:this.state._minWidth}},index.h("div",{key:"4f320cd3a58b7f8ee66c2b61f341608cbc3cb771",class:"focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),index.h("caption",{key:"f7eb102966c9d0a1c45ef438ece503136f1b3fe9",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&index.h("thead",{key:"7fadcf80acaf5c6e0e6e22e7439b9c99f0da05bc"},[this.state._headerCells.horizontal.map(((e,t)=>index.h("tr",{key:`thead-${t}`},this.state._selection&&this.renderHeadingSelectionCell(),0===t&&this.renderHeaderTdCell(),Array.isArray(e)&&e.map(((e,a)=>!0===e.asTd?index.h("td",{key:`thead-${t}-${a}-${e.label}`,class:{[e.textAlign]:"string"==typeof e.textAlign&&e.textAlign.length>0},colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:""):this.renderHeadingCell(e,t,a,!1)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),index.h("tbody",{key:"3d10c361ebcf490c662b33b12a8c274d18304c83"},e.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot())))}get host(){return index.getElement(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};exports.kol_table_stateless_wc=KolTableStateless;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-907ce00e.js"),componentNames=require("./component-names-7808fb62.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  .focus-element {\n    font-size: 0;\n  }\n  .focus-element:focus {\n    outline: 0 !important;\n  }\n  .table:has(.focus-element:focus) {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .table-sort-button .kol-button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .kol-button__text,\n  th.align-left .table-sort-button .kol-button__text {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .kol-button__text {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .kol-button__text {\n    justify-items: end;\n  }\n  tr.foot-spacer,\n  tr.head-spacer {\n    display: none;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .input label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .input .icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .input input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .input input:before {\n    content: \"\";\n  }\n  .input input[type=checkbox] {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .input input[type=radio] {\n    display: flex;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .input input[type=radio]:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .input input[type=radio]:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .input input[type=radio]:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",KolTableStatelessDefaultStyle0=defaultStyleCss,KolTableStateless=class{constructor(n){index.registerInstance(this,n),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return index.h(index.Host,{key:"366a0fa7594af0080e834abf971334d4bf3c8dd7",class:"kol-table-stateless"},index.h(componentNames.KolTableStatelessWcTag,{key:"e89610ae8cef7d8459435a0c13e14a4f5c2cd305",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection}))}};KolTableStateless.style={default:KolTableStatelessDefaultStyle0},exports.kol_table_stateless=KolTableStateless;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c048b81b.js"),componentNames=require("./component-names-7808fb62.js"),defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host,\n  .kol-table-stateless-wc {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .table {\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  table {\n    width: 100%;\n  }\n  caption {\n    text-align: start;\n  }\n  .focus-element {\n    font-size: 0;\n  }\n  .focus-element:focus {\n    outline: 0 !important;\n  }\n  .table:has(.focus-element:focus) {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n    outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .table-sort-button .kol-button {\n    color: inherit;\n  }\n  tbody th,\n  th.align-left {\n    text-align: left;\n  }\n  tbody th .table-sort-button .kol-button__text,\n  th.align-left .table-sort-button .kol-button__text {\n    justify-items: start;\n  }\n  th.align-center {\n    text-align: center;\n  }\n  th.align-center .table-sort-button .kol-button__text {\n    justify-items: center;\n  }\n  th.align-right {\n    text-align: right;\n  }\n  th.align-right .table-sort-button .kol-button__text {\n    justify-items: end;\n  }\n  tr.foot-spacer,\n  tr.head-spacer {\n    display: none;\n  }\n  .selection-header-cell {\n    width: 0;\n  }\n  .selection-cell {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .input label {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .input .icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .input input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\n  }\n  .input input:before {\n    content: \"\";\n  }\n  .input input[type=checkbox] {\n    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .input input[type=radio] {\n    display: flex;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .input input[type=radio]:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\n  }\n  .input input[type=radio]:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .input input[type=radio]:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",KolTableStatelessDefaultStyle0=defaultStyleCss,KolTableStateless=class{constructor(n){index.registerInstance(this,n),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return index.h(index.Host,{key:"b62e412718a8160669343ee431d390e7ae424212",class:"kol-table-stateless"},index.h(componentNames.KolTableStatelessWcTag,{key:"b281a0b303d32d92188961011a0ece6d15f1f913",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection}))}};KolTableStateless.style={default:KolTableStatelessDefaultStyle0},exports.kol_table_stateless=KolTableStateless;

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

@@ -1 +1 @@
-{"file":"kol-table-stateless.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,igRAAigR,CAAC;AAC1hR,uCAAe,eAAe;;MCmBjB,iBAAiB;;;;;;;;;;;IAoCtB,MAAM;QACZ,QACCA,QAACC,UAAI,qDAAC,KAAK,EAAC,qBAAqB,IAChCD,QAACE,qCAAsB,qDACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,UAAU,EAAE,IAAI,CAAC,UAAU,GAC1B,CACI,EACN;KACF;;;;;;;;","names":["h","Host","KolTableStatelessWcTag"],"sources":["src/components/table-stateless/style.scss?tag=kol-table-stateless&mode=default&encapsulation=shadow","src/components/table-stateless/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../@shared/kol-table-stateless-mixin';\n@import '../host-display-block';\n\n@include kol-table-stateless-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport { KolTableStatelessWcTag } from '../../core/component-names';\nimport type {\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableStatelessProps,\n\tTableCallbacksPropType,\n\tTableSelectionPropType,\n} from '../../schema';\n\n@Component({\n\ttag: 'kol-table-stateless',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateless implements TableStatelessProps {\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: TableDataPropType;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: TableDataFootPropType;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headerCells!: TableHeaderCellsPropType;\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!: string;\n\n\t/**\n\t * Defines the table min-width.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableCallbacksPropType;\n\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateless\">\n\t\t\t\t<KolTableStatelessWcTag\n\t\t\t\t\t_data={this._data}\n\t\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t\t_headerCells={this._headerCells}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_selection={this._selection}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-table-stateless.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,eAAe,GAAG,2+QAA2+Q,CAAC;AACpgR,uCAAe,eAAe;;MCmBjB,iBAAiB;;;;;;;;;;;IAoCtB,MAAM;QACZ,QACCA,QAACC,UAAI,qDAAC,KAAK,EAAC,qBAAqB,IAChCD,QAACE,qCAAsB,qDACtB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,UAAU,EAAE,IAAI,CAAC,UAAU,GAC1B,CACI,EACN;KACF;;;;;;;;","names":["h","Host","KolTableStatelessWcTag"],"sources":["src/components/table-stateless/style.scss?tag=kol-table-stateless&mode=default&encapsulation=shadow","src/components/table-stateless/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../@shared/kol-table-stateless-mixin';\n@import '../host-display-block';\n\n@include kol-table-stateless-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop } from '@stencil/core';\n\nimport { KolTableStatelessWcTag } from '../../core/component-names';\nimport type {\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableStatelessProps,\n\tTableCallbacksPropType,\n\tTableSelectionPropType,\n} from '../../schema';\n\n@Component({\n\ttag: 'kol-table-stateless',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateless implements TableStatelessProps {\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: TableDataPropType;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: TableDataFootPropType;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headerCells!: TableHeaderCellsPropType;\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!: string;\n\n\t/**\n\t * Defines the table min-width.\n\t */\n\t@Prop() public _minWidth?: string;\n\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableCallbacksPropType;\n\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-table-stateless\">\n\t\t\t\t<KolTableStatelessWcTag\n\t\t\t\t\t_data={this._data}\n\t\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t\t_headerCells={this._headerCells}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_selection={this._selection}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-907ce00e.js"),componentNames=require("./component-names-7808fb62.js"),KolTable=class{constructor(t){index.registerInstance(this,t),this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0}render(){return index.h(componentNames.KolTableStatefulTag,{key:"3aacf9146f821f2daaec1e89fe471ff350191879",_allowMultiSort:this._allowMultiSort,_data:this._data,_dataFoot:this._dataFoot,_headers:this._headers,_label:this._label,_minWidth:this._minWidth,_pagination:this._pagination,_paginationPosition:this._paginationPosition,_selection:this._selection,_on:this._on})}};exports.kol_table=KolTable;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c048b81b.js"),componentNames=require("./component-names-7808fb62.js"),KolTable=class{constructor(t){index.registerInstance(this,t),this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0}render(){return index.h(componentNames.KolTableStatefulTag,{key:"034d0e2ae40ccb7b841795cac53ba1fed894fa8d",_allowMultiSort:this._allowMultiSort,_data:this._data,_dataFoot:this._dataFoot,_headers:this._headers,_label:this._label,_minWidth:this._minWidth,_pagination:this._pagination,_paginationPosition:this._paginationPosition,_selection:this._selection,_on:this._on})}};exports.kol_table=KolTable;

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-907ce00e.js"),i18n=require("./i18n-1d085d07.js"),componentNames=require("./component-names-7808fb62.js"),prop_validators=require("./prop.validators-37d21dea.js"),align=require("./align-f4f3dfb6.js"),label=require("./label-d84e4f92.js"),dev_utils=require("./dev.utils-58fde089.js");require("./i18n-737701e2.js"),require("./reuse-8cfefa9b.js"),require("./index-bf4a6924.js");const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(t,e)=>{prop_validators.watchValidator(t,"_behavior",(t=>"string"==typeof t&&tabBehaviorPropTypeOptions.includes(t)),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),e)};var KeyboardKey;!function(t){t.ArrowDown="ArrowDown",t.ArrowLeft="ArrowLeft",t.ArrowRight="ArrowRight",t.ArrowUp="ArrowUp",t.Enter="Enter",t.Space=" "}(KeyboardKey||(KeyboardKey={}));const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n  }\n  .tabs-content {\n    overflow: auto;\n  }\n  .tabs-button-group {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .tabs-button-group button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  div.grid,\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .tabs-button-group {\n    flex-direction: column;\n    order: 2;\n  }\n  :host > .tabs-align-right .tabs-button-group .kol-button-wc {\n    width: 100%;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .tabs-button-group {\n    flex-direction: column;\n    order: 0;\n  }\n  :host > .tabs-align-left .tabs-button-group .kol-button-wc {\n    width: 100%;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .tabs-button-group {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .tabs-button-group > div {\n    display: flex;\n    margin: 0 1em;\n  }\n  :host > .tabs-align-bottom .tabs-button-group > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .tabs-button-group {\n    order: 0;\n  }\n  :host > .tabs-align-top .tabs-button-group > div {\n    display: flex;\n  }\n  :host > .tabs-align-top .tabs-button-group > div > div {\n    margin: 0 1em;\n  }\n  :host > .tabs-align-top .tabs-button-group > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n}",KolTabsDefaultStyle0=defaultStyleCss,KolTabs=class{constructor(t){index.registerInstance(this,t),this.onCreateLabel=`${i18n.translate("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n=1)=>{const a=e+n;return a<t.length?t[a]._disabled?this.nextPossibleTabIndex(t,e,n+1):a:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const a=e-n;return a>=0?t[a]._disabled?this.prevPossibleTabIndex(t,e,n+1):a:e},this.onKeyDown=t=>{switch(t.key){case KeyboardKey.ArrowRight:this.goToNextTab(t);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(t);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,a)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,a||t);t=a||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,a||t);prop_validators.devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,a)=>{let o,i;o="_selected"===a?t:this.state._selected,i="_tabs"===a?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,i))},this.handleTabPanels=()=>{var t,e,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let a=this.tabPanelHost.children.length;a<this.state._tabs.length;a++){const o=document.createElement("div");o.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${a}`),o.setAttribute("id",`tabpanel-${a}`),o.setAttribute("role","tabpanel"),o.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${a}`),o.appendChild(i),this.tabPanelHost.appendChild(o),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[a])&&(null===(n=this.host)||void 0===n||n.children[a].setAttribute("slot",`tabpanel-slot-${a}`))}},this.onCreate=t=>{var e,n;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(t))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var a,o;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(o=null===(a=this.state._tabs[e]._on)||void 0===a?void 0:a.onSelect)||void 0===o||o.call(a,t,e),this.onSelect(t,e)}}renderButtonGroup(){return index.h("div",{"aria-label":this.state._label,class:"tabs-button-group kol-button-group-wc",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((t,e)=>index.h(componentNames.KolButtonWcTag,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_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&&index.h(componentNames.KolButtonWcTag,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return index.h(index.Host,{key:"fe001ba163daa992ac9062cfd422960c6b2c46e0",class:"kol-tabs"},index.h("div",{key:"c9ad7feee0211b8847e6fedd8cf1e0a84af1aeaa",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),index.h("div",{key:"889a4c8fb229099df57ab143e6692273e26e698f",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){align.validateAlign(this,t)}validateBehavior(t){validateTabBehavior(this,t)}validateLabel(t){label.validateLabel(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){prop_validators.featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:dev_utils.Log.debug("[KolTabs] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:dev_utils.Log.debug("[KolTabs] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),prop_validators.setState(this,"_on",e)}}validateSelected(t){prop_validators.watchNumber(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){prop_validators.watchJsonArrayString(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),prop_validators.uiUxHintMillerscheZahl("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior)}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")}focusTabById(t){if(this.tabPanelsElement){const e=prop_validators.koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,a;null===(a=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===a||a.call(n,t,e),this.focusTabById(e)}get host(){return index.getElement(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};KolTabs.style={default:KolTabsDefaultStyle0},exports.kol_tabs=KolTabs;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c048b81b.js"),i18n=require("./i18n-1d085d07.js"),componentNames=require("./component-names-7808fb62.js"),prop_validators=require("./prop.validators-37d21dea.js"),align=require("./align-f4f3dfb6.js"),label=require("./label-d84e4f92.js"),dev_utils=require("./dev.utils-58fde089.js");require("./i18n-737701e2.js"),require("./reuse-8cfefa9b.js"),require("./index-bf4a6924.js");const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(t,e)=>{prop_validators.watchValidator(t,"_behavior",(t=>"string"==typeof t&&tabBehaviorPropTypeOptions.includes(t)),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),e)};var KeyboardKey;!function(t){t.ArrowDown="ArrowDown",t.ArrowLeft="ArrowLeft",t.ArrowRight="ArrowRight",t.ArrowUp="ArrowUp",t.Enter="Enter",t.Space=" "}(KeyboardKey||(KeyboardKey={}));const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n  }\n  .tabs-content {\n    overflow: auto;\n  }\n  .tabs-button-group {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  .tabs-button-group button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  div.grid,\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .tabs-button-group {\n    flex-direction: column;\n    order: 2;\n  }\n  :host > .tabs-align-right .tabs-button-group .kol-button-wc {\n    width: 100%;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .tabs-button-group {\n    flex-direction: column;\n    order: 0;\n  }\n  :host > .tabs-align-left .tabs-button-group .kol-button-wc {\n    width: 100%;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .tabs-button-group {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .tabs-button-group > div {\n    display: flex;\n    margin: 0 1em;\n  }\n  :host > .tabs-align-bottom .tabs-button-group > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .tabs-button-group {\n    order: 0;\n  }\n  :host > .tabs-align-top .tabs-button-group > div {\n    display: flex;\n  }\n  :host > .tabs-align-top .tabs-button-group > div > div {\n    margin: 0 1em;\n  }\n  :host > .tabs-align-top .tabs-button-group > div > div:first-child {\n    margin: 0 1em 0 0;\n  }\n}",KolTabsDefaultStyle0=defaultStyleCss,KolTabs=class{constructor(t){index.registerInstance(this,t),this.onCreateLabel=`${i18n.translate("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n=1)=>{const o=e+n;return o<t.length?t[o]._disabled?this.nextPossibleTabIndex(t,e,n+1):o:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const o=e-n;return o>=0?t[o]._disabled?this.prevPossibleTabIndex(t,e,n+1):o:e},this.onKeyDown=t=>{switch(t.key){case KeyboardKey.ArrowRight:this.goToNextTab(t);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(t);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);prop_validators.devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,o)=>{let a,i;a="_selected"===o?t:this.state._selected,i="_tabs"===o?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,i))},this.handleTabPanels=()=>{var t,e,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let o=this.tabPanelHost.children.length;o<this.state._tabs.length;o++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),a.setAttribute("id",`tabpanel-${o}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),a.appendChild(i),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[o])&&(null===(n=this.host)||void 0===n||n.children[o].setAttribute("slot",`tabpanel-slot-${o}`))}},this.onCreate=t=>{var e,n;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(t))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var o,a;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(a=null===(o=this.state._tabs[e]._on)||void 0===o?void 0:o.onSelect)||void 0===a||a.call(o,t,e),this.onSelect(t,e)}}renderButtonGroup(){return index.h("div",{"aria-label":this.state._label,class:"tabs-button-group kol-button-group-wc",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((t,e)=>index.h(componentNames.KolButtonWcTag,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_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&&index.h(componentNames.KolButtonWcTag,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return index.h(index.Host,{key:"05e341b7efd5d94dfa2fa0786d078c326b5c8640",class:"kol-tabs"},index.h("div",{key:"ca2924183169250379353c56cb8b63fc7e1fedc1",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),index.h("div",{key:"cc9c77706531826192849a0c07a864781cc99081",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){align.validateAlign(this,t)}validateBehavior(t){validateTabBehavior(this,t)}validateLabel(t){label.validateLabel(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){prop_validators.featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:dev_utils.Log.debug("[KolTabs] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:dev_utils.Log.debug("[KolTabs] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),prop_validators.setState(this,"_on",e)}}validateSelected(t){prop_validators.watchNumber(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){prop_validators.watchJsonArrayString(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),prop_validators.uiUxHintMillerscheZahl("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior)}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")}focusTabById(t){if(this.tabPanelsElement){const e=prop_validators.koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,t,e),this.focusTabById(e)}get host(){return index.getElement(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};KolTabs.style={default:KolTabsDefaultStyle0},exports.kol_tabs=KolTabs;

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

@@ -1 +1 @@
-{"file":"kol-tabs.entry.cjs.js","mappings":"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","names":["watchValidator","translate","devHint","h","index","KolButtonWcTag","Host","validateAlign","validateLabel","featureHint","Log","setState","watchNumber","watchJsonArrayString","uiUxHintMillerscheZahl","koliBriQuerySelector"],"sources":["src/schema/props/tab-behavior.ts","src/schema/enums/keyboard.ts","src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst tabBehaviorPropTypeOptions = ['select-automatic', 'select-manual'] as const;\nexport type TabBehaviorPropType = (typeof tabBehaviorPropTypeOptions)[number];\n\n/**\n * Defines which behavior is active.\n */\nexport type PropTabBehavior = {\n\tbehavior: TabBehaviorPropType;\n};\n\n/* validator */\nexport const validateTabBehavior = (component: Generic.Element.Component, value?: TabBehaviorPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_behavior`,\n\t\t(value) => typeof value === 'string' && tabBehaviorPropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","export enum KeyboardKey {\n\tArrowDown = 'ArrowDown',\n\tArrowLeft = 'ArrowLeft',\n\tArrowRight = 'ArrowRight',\n\tArrowUp = 'ArrowUp',\n\tEnter = 'Enter',\n\tSpace = ' ',\n}\n","@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t}\n\n\t.tabs-content {\n\t\toverflow: auto;\n\t}\n\n\t.tabs-button-group {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\n\t\tbutton {\n\t\t\tborder-bottom-color: transparent;\n\t\t\tborder-bottom-style: solid;\n\t\t\tdisplay: block;\n\t\t}\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t:host > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\n\t\t.tabs-button-group {\n\t\t\tflex-direction: column;\n\t\t\torder: 2;\n\n\t\t\t.kol-button-wc {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\n\t\t.tabs-button-group {\n\t\t\tflex-direction: column;\n\t\t\torder: 0;\n\n\t\t\t.kol-button-wc {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\n\t\t.tabs-button-group {\n\t\t\torder: 2;\n\n\t\t\t& > div {\n\t\t\t\tdisplay: flex;\n\n\t\t\t\t& > div {\n\t\t\t\t\t&:first-child {\n\t\t\t\t\t\tmargin: 0 1em 0 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tmargin: 0 1em;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\n\t\t.tabs-button-group {\n\t\t\torder: 0;\n\n\t\t\t& > div {\n\t\t\t\tdisplay: flex;\n\n\t\t\t\t& > div {\n\t\t\t\t\t&:first-child {\n\t\t\t\t\t\tmargin: 0 1em 0 0;\n\t\t\t\t\t}\n\n\t\t\t\t\tmargin: 0 1em;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\n\tTabBehaviorPropType,\n\tTabButtonProps,\n\tTabsAPI,\n\tTabsStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\tfeatureHint,\n\tkoliBriQuerySelector,\n\tLog,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\tvalidateTabBehavior,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '../../schema';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KeyboardKey } from '../../schema/enums';\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements TabsAPI {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate currentFocusIndex: number | undefined;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset + step;\n\n\t\tif (nextOffset < tabs.length) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate prevPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset - step;\n\n\t\tif (nextOffset >= 0) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.prevPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tswitch (event.key as KeyboardKey) {\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tthis.goToNextTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tthis.goToPreviousTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.Space:\n\t\t\tcase KeyboardKey.Enter:\n\t\t\t\tthis.activateFocusedTab(event);\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tprivate getCurrentFocusIndex(): number {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\treturn this.currentFocusIndex;\n\t\t}\n\n\t\treturn this.state._selected;\n\t}\n\n\tprivate getKeyboardTabChangeMode(): 'selectFocusOnly' | 'activateCompletely' {\n\t\tif (this._behavior === 'select-manual') {\n\t\t\treturn 'selectFocusOnly';\n\t\t}\n\n\t\treturn 'activateCompletely';\n\t}\n\n\tprivate goToNextTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.nextPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate goToPreviousTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.prevPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate activateFocusedTab(event: KeyboardEvent) {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\tthis.onSelect(event, this.currentFocusIndex);\n\t\t}\n\t}\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.selectNextTabEvent(event, index);\n\t};\n\n\tprivate selectNextTabEvent(\n\t\tevent: KeyboardEvent | MouseEvent,\n\t\tnextTabIndex: number,\n\t\tchangeMode: 'selectFocusOnly' | 'activateCompletely' = 'activateCompletely',\n\t): void {\n\t\tthis.currentFocusIndex = nextTabIndex;\n\n\t\tthis.focusTabById(nextTabIndex);\n\n\t\tif (changeMode === 'activateCompletely') {\n\t\t\tthis._selected = nextTabIndex;\n\n\t\t\tconst tab = this.state._tabs[nextTabIndex];\n\t\t\ttab._on?.onSelect?.(event, nextTabIndex);\n\n\t\t\tthis.onSelect(event, nextTabIndex);\n\t\t}\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// Rule is disabled, because KolButtonWc is focusable.\n\t\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus\n\t\t\t<div aria-label={this.state._label} class=\"tabs-button-group kol-button-group-wc\" role=\"tablist\" onKeyDown={this.onKeyDown} onBlur={this.onBlur}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\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 class=\"kol-tabs\">\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 class=\"tabs-content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t\t</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 * Defines which behavior is active.\n\t */\n\t@Prop() public _behavior?: TabBehaviorPropType;\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 * 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@State() public state: TabsStates = {\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] All tabs are disabled, and therefore no tab can be displayed.`);\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@Watch('_behavior')\n\tpublic validateBehavior(value?: TabBehaviorPropType) {\n\t\tvalidateTabBehavior(this, value);\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('_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] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly.`,\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] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.`,\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\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateBehavior(this._behavior);\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 focusTabById(index: number): void {\n\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._on?.onSelect?.(event, index);\n\n\t\tthis.focusTabById(index);\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\tprivate onBlur = () => {\n\t\tthis.currentFocusIndex = undefined;\n\t};\n}\n"],"version":3}
+{"file":"kol-tabs.entry.cjs.js","mappings":"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","names":["watchValidator","translate","devHint","h","index","KolButtonWcTag","Host","validateAlign","validateLabel","featureHint","Log","setState","watchNumber","watchJsonArrayString","uiUxHintMillerscheZahl","koliBriQuerySelector"],"sources":["src/schema/props/tab-behavior.ts","src/schema/enums/keyboard.ts","src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst tabBehaviorPropTypeOptions = ['select-automatic', 'select-manual'] as const;\nexport type TabBehaviorPropType = (typeof tabBehaviorPropTypeOptions)[number];\n\n/**\n * Defines which behavior is active.\n */\nexport type PropTabBehavior = {\n\tbehavior: TabBehaviorPropType;\n};\n\n/* validator */\nexport const validateTabBehavior = (component: Generic.Element.Component, value?: TabBehaviorPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_behavior`,\n\t\t(value) => typeof value === 'string' && tabBehaviorPropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","export enum KeyboardKey {\n\tArrowDown = 'ArrowDown',\n\tArrowLeft = 'ArrowLeft',\n\tArrowRight = 'ArrowRight',\n\tArrowUp = 'ArrowUp',\n\tEnter = 'Enter',\n\tSpace = ' ',\n}\n","@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t:host > div {\n\t\tdisplay: grid;\n\t}\n\n\t.tabs-content {\n\t\toverflow: auto;\n\t}\n\n\t.tabs-button-group {\n\t\tdisplay: flex;\n\t\tflex-wrap: wrap;\n\n\t\tbutton {\n\t\t\tborder-bottom-color: transparent;\n\t\t\tborder-bottom-style: solid;\n\t\t\tdisplay: block;\n\t\t}\n\t}\n\n\tdiv.grid,\n\tdiv[role='tabpanel'] {\n\t\theight: 100%;\n\t}\n\n\t:host > .tabs-align-right {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: 1fr auto;\n\n\t\t.tabs-button-group {\n\t\t\tflex-direction: column;\n\t\t\torder: 2;\n\n\t\t\t.kol-button-wc {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host > .tabs-align-left {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: auto 1fr;\n\n\t\t.tabs-button-group {\n\t\t\tflex-direction: column;\n\t\t\torder: 0;\n\n\t\t\t.kol-button-wc {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host > .tabs-align-bottom {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: 1fr auto;\n\n\t\t.tabs-button-group {\n\t\t\torder: 2;\n\n\t\t\t& > div {\n\t\t\t\tdisplay: flex;\n\n\t\t\t\t& > div {\n\t\t\t\t\t&:first-child {\n\t\t\t\t\t\tmargin: 0 1em 0 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tmargin: 0 1em;\n\t\t\t}\n\t\t}\n\t}\n\n\t:host > .tabs-align-top {\n\t\tdisplay: grid;\n\t\tgrid-template-rows: auto 1fr;\n\n\t\t.tabs-button-group {\n\t\t\torder: 0;\n\n\t\t\t& > div {\n\t\t\t\tdisplay: flex;\n\n\t\t\t\t& > div {\n\t\t\t\t\t&:first-child {\n\t\t\t\t\t\tmargin: 0 1em 0 0;\n\t\t\t\t\t}\n\n\t\t\t\t\tmargin: 0 1em;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\n\tTabBehaviorPropType,\n\tTabButtonProps,\n\tTabsAPI,\n\tTabsStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\tfeatureHint,\n\tkoliBriQuerySelector,\n\tLog,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\tvalidateTabBehavior,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '../../schema';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\n\nimport type { JSX } from '@stencil/core';\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KeyboardKey } from '../../schema/enums';\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements TabsAPI {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate showCreateTab = false;\n\tprivate currentFocusIndex: number | undefined;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset + step;\n\n\t\tif (nextOffset < tabs.length) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate prevPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset - step;\n\n\t\tif (nextOffset >= 0) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.prevPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tswitch (event.key as KeyboardKey) {\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tthis.goToNextTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tthis.goToPreviousTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.Space:\n\t\t\tcase KeyboardKey.Enter:\n\t\t\t\tthis.activateFocusedTab(event);\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tprivate getCurrentFocusIndex(): number {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\treturn this.currentFocusIndex;\n\t\t}\n\n\t\treturn this.state._selected;\n\t}\n\n\tprivate getKeyboardTabChangeMode(): 'selectFocusOnly' | 'activateCompletely' {\n\t\tif (this._behavior === 'select-manual') {\n\t\t\treturn 'selectFocusOnly';\n\t\t}\n\n\t\treturn 'activateCompletely';\n\t}\n\n\tprivate goToNextTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.nextPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate goToPreviousTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.prevPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate activateFocusedTab(event: KeyboardEvent) {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\tthis.onSelect(event, this.currentFocusIndex);\n\t\t}\n\t}\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.selectNextTabEvent(event, index);\n\t};\n\n\tprivate selectNextTabEvent(\n\t\tevent: KeyboardEvent | MouseEvent,\n\t\tnextTabIndex: number,\n\t\tchangeMode: 'selectFocusOnly' | 'activateCompletely' = 'activateCompletely',\n\t): void {\n\t\tthis.currentFocusIndex = nextTabIndex;\n\n\t\tthis.focusTabById(nextTabIndex);\n\n\t\tif (changeMode === 'activateCompletely') {\n\t\t\tthis._selected = nextTabIndex;\n\n\t\t\tconst tab = this.state._tabs[nextTabIndex];\n\t\t\ttab._on?.onSelect?.(event, nextTabIndex);\n\n\t\t\tthis.onSelect(event, nextTabIndex);\n\t\t}\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// Rule is disabled, because KolButtonWc is focusable.\n\t\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus\n\t\t\t<div aria-label={this.state._label} class=\"tabs-button-group kol-button-group-wc\" role=\"tablist\" onKeyDown={this.onKeyDown} onBlur={this.onBlur}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_variant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.showCreateTab && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"create-button\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\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 class=\"kol-tabs\">\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 class=\"tabs-content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t\t</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 * Defines which behavior is active.\n\t */\n\t@Prop() public _behavior?: TabBehaviorPropType;\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 * 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@State() public state: TabsStates = {\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] All tabs are disabled, and therefore no tab can be displayed.`);\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@Watch('_behavior')\n\tpublic validateBehavior(value?: TabBehaviorPropType) {\n\t\tvalidateTabBehavior(this, value);\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('_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] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly.`,\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] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.`,\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\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateBehavior(this._behavior);\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 focusTabById(index: number): void {\n\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._on?.onSelect?.(event, index);\n\n\t\tthis.focusTabById(index);\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\tprivate onBlur = () => {\n\t\tthis.currentFocusIndex = undefined;\n\t};\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-907ce00e.js"),dev_utils=require("./dev.utils-2bfc459d.js"),controller=require("./controller-c08f0c47.js"),controllerIcon=require("./controller-icon-0a07b9d4.js"),hasCounter=require("./has-counter-576de43f.js"),prop_validators=require("./prop.validators-37d21dea.js"),rows=require("./rows-fd18fa20.js"),spellCheck=require("./spell-check-2c944775.js"),componentNames=require("./component-names-7808fb62.js"),InternalUnderlinedBadgeText=require("./InternalUnderlinedBadgeText-1eab6f37.js"),reuse=require("./reuse-8cfefa9b.js");require("./dev.utils-58fde089.js"),require("./events-221fcb43.js"),require("./associated.controller-e7a1e9af.js"),require("./access-and-short-key-4b185f62.js"),require("./tooltip-align-70093437.js"),require("./align-f4f3dfb6.js"),require("./hide-label-1783d2a4.js"),require("./common-1ab929ac.js"),require("./label-d84e4f92.js"),require("./icons-3917f9e0.js"),require("./index-bf4a6924.js");const cssResizeOptions=["vertical","none"];class TextareaController extends controllerIcon.InputIconController{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){hasCounter.validateHasCounter(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){prop_validators.watchNumber(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){prop_validators.watchString(this.component,"_placeholder",e)}validateReadOnly(e){prop_validators.watchBoolean(this.component,"_readOnly",e)}validateResize(e){prop_validators.watchValidator(this.component,"_resize",(e=>"string"==typeof e&&cssResizeOptions.includes(e)),new Set(`String {${cssResizeOptions.join(", ")}`),e,{defaultValue:"vertical"})}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateRows(e){rows.validateRows(this.component,e)}validateSpellCheck(e){spellCheck.validateSpellCheck(this.component,e)}validateValue(e){prop_validators.watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolTextareaDefaultStyle0=defaultStyleCss,increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/n);return e.rows=t,i},KolTextarea=class{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async focus(){await this.kolFocus()}async kolFocus(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}render(){const{ariaDescribedBy:e}=controller.getRenderStates(this.state),t=reuse.showExpertSlot(this.state._label);return index.h(index.Host,{key:"b74d45df2d6078700596a5a77f83f39c4a079381",class:{"kol-textarea":!0,"has-value":this.state._hasValue}},index.h(componentNames.KolInputTag,{key:"21ffcf9fd0f267c62c9cbb5fdca033836acd4671",class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_disabled:this.state._disabled,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},role:"presentation"},index.h("span",{key:"55727861c9c6444d08c0cd6ebe8b94a78d0ea063",slot:"label"},t?index.h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?index.h(index.Fragment,null,index.h(InternalUnderlinedBadgeText.InternalUnderlinedBadgeText,{badgeText:reuse.buildBadgeTextString(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",index.h("span",{class:"access-key-hint","aria-hidden":"true"},reuse.buildBadgeTextString(this.state._accessKey||this.state._shortKey))):index.h("span",null,this.state._label)),index.h("div",{key:"8eeffa9d0d546a4d7b08b9f687882a5062eb8905",slot:"input"},index.h("textarea",Object.assign({key:"a298328060f25991258ab8fd85d8c6e1e5c8d374",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.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:this.state._spellCheck},this.controller.onFacade,{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},style:{resize:this.state._resize},value:this.state._value})))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.textareaRef=e},this.onInput=e=>{this.textareaRef instanceof HTMLTextAreaElement&&(prop_validators.setState(this,"_currentLength",this.textareaRef.value.length),this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.textareaRef)),this.controller.onFacade.onInput(e))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=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._shortKey=void 0,this._spellCheck=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-${dev_utils.nonce()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.controller=new TextareaController(this,"textarea",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout((()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>increaseTextareaHeight(this.textareaRef)?this.state._rows:increaseTextareaHeight(this.textareaRef):this._rows||(this._rows=1)}),0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolTextarea.style={default:KolTextareaDefaultStyle0},exports.kol_textarea=KolTextarea;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-c048b81b.js"),dev_utils=require("./dev.utils-dd5eab59.js"),controller=require("./controller-c08f0c47.js"),controllerIcon=require("./controller-icon-0a07b9d4.js"),hasCounter=require("./has-counter-576de43f.js"),prop_validators=require("./prop.validators-37d21dea.js"),rows=require("./rows-fd18fa20.js"),spellCheck=require("./spell-check-2c944775.js"),componentNames=require("./component-names-7808fb62.js"),InternalUnderlinedBadgeText=require("./InternalUnderlinedBadgeText-6a5d3caa.js"),reuse=require("./reuse-8cfefa9b.js");require("./dev.utils-58fde089.js"),require("./events-221fcb43.js"),require("./associated.controller-e7a1e9af.js"),require("./access-and-short-key-4b185f62.js"),require("./tooltip-align-70093437.js"),require("./align-f4f3dfb6.js"),require("./hide-label-1783d2a4.js"),require("./common-1ab929ac.js"),require("./label-d84e4f92.js"),require("./icons-3917f9e0.js"),require("./index-bf4a6924.js");const cssResizeOptions=["vertical","none"];class TextareaController extends controllerIcon.InputIconController{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){hasCounter.validateHasCounter(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){prop_validators.watchNumber(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){prop_validators.watchString(this.component,"_placeholder",e)}validateReadOnly(e){prop_validators.watchBoolean(this.component,"_readOnly",e)}validateResize(e){prop_validators.watchValidator(this.component,"_resize",(e=>"string"==typeof e&&cssResizeOptions.includes(e)),new Set(`String {${cssResizeOptions.join(", ")}`),e,{defaultValue:"vertical"})}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateRows(e){rows.validateRows(this.component,e)}validateSpellCheck(e){spellCheck.validateSpellCheck(this.component,e)}validateValue(e){prop_validators.watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .kol-span__label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolTextareaDefaultStyle0=defaultStyleCss,increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/n);return e.rows=t,i},KolTextarea=class{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async focus(){await this.kolFocus()}async kolFocus(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}render(){const{ariaDescribedBy:e}=controller.getRenderStates(this.state),t=reuse.showExpertSlot(this.state._label);return index.h(index.Host,{key:"4f12758951bae68039475202310f4ef48ce8a455",class:{"kol-textarea":!0,"has-value":this.state._hasValue}},index.h(componentNames.KolInputTag,{key:"1615fb8c5cebb82bf0029160b898e09d0611b676",class:{textarea:!0,"hide-label":!!this.state._hideLabel,"has-counter":!!this.state._hasCounter},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_currentLength:this.state._currentLength,_disabled:this.state._disabled,_hideError:this.state._hideError,_hasCounter:this.state._hasCounter,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_maxLength:this.state._maxLength,_msg:this.state._msg,_readOnly:this.state._readOnly,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},role:"presentation"},index.h("span",{key:"ce5b4ccf898a4bce1a06b08754c808b3347c893f",slot:"label"},t?index.h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?index.h(index.Fragment,null,index.h(InternalUnderlinedBadgeText.InternalUnderlinedBadgeText,{badgeText:reuse.buildBadgeTextString(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",index.h("span",{class:"access-key-hint","aria-hidden":"true"},reuse.buildBadgeTextString(this.state._accessKey||this.state._shortKey))):index.h("span",null,this.state._label)),index.h("div",{key:"322d1d1a4feca8f06d0b6c9c8da50e596e59361e",slot:"input"},index.h("textarea",Object.assign({key:"425c50e400eb2b3c94056c3ce153123436244f9c",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.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:this.state._spellCheck},this.controller.onFacade,{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},style:{resize:this.state._resize},value:this.state._value})))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.textareaRef=e},this.onInput=e=>{this.textareaRef instanceof HTMLTextAreaElement&&(prop_validators.setState(this,"_currentLength",this.textareaRef.value.length),this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.textareaRef)),this.controller.onFacade.onInput(e))},this._accessKey=void 0,this._adjustHeight=!1,this._alert=void 0,this._disabled=!1,this._error=void 0,this._hasCounter=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=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._shortKey=void 0,this._spellCheck=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-${dev_utils.nonce()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.controller=new TextareaController(this,"textarea",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout((()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>increaseTextareaHeight(this.textareaRef)?this.state._rows:increaseTextareaHeight(this.textareaRef):this._rows||(this._rows=1)}),0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}static get delegatesFocus(){return!0}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hasCounter:["validateHasCounter"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolTextarea.style={default:KolTextareaDefaultStyle0},exports.kol_textarea=KolTextarea;