@public-ui/components 4.1.2-rc.1 → 4.1.2-rc.3

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,F as Fragment,g as getElement}from"./index-Cgf1FZ14.js";import{_ as __rest}from"./tslib.es6-CxX45GIN.js";import{c as KolButtonWcTag,d as KolLinkWcTag,a as KolTooltipWcTag,v as KolTableSettingsWcTag}from"./component-names-BQrMLr68.js";import{t as translate}from"./i18n-DvMeCREp.js";import{I as IconFC}from"./component-BssZbWQw.js";import{P as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,b as watchValidator,s as setState}from"./common-BIkdAxr0.js";import{c as validateHasSettingsMenu,v as validateTableData,a as validateTableDataFoot,b as validateFixedCols,f as validateTableCallbacks,d as validateTableSelection}from"./table-selection-DAMWzd6x.js";import{v as validateLabel}from"./label-C18ud7Yt.js";import{C as Callback}from"./keyboard-DNd73LVa.js";import{c as clsx}from"./clsx-COFh-Vc8.js";import{n as nonce}from"./dev.utils-9aA-dFCs.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-DHTi_wtD.js";import{M as MapCache,e as eq,U as Uint8Array,d as getAllKeys,a as getTag,c as isBuffer,S as Stack,f as isTypedArray}from"./_Uint8Array-UP73qmmG.js";import{S as Symbol,a as isArray,i as isObjectLike}from"./isArray-CcrBs4JM.js";import"./i18n-B0tfVPMa.js";import"./bem-registry-ClssJ_nC.js";import"./isObject-BJgq02Md.js";const validateTableHeaderCells=(e,t)=>{emptyStringByArrayHandler(t,()=>{objectObjectHandler(t,()=>{try{t=parseJson(t)}catch(e){}watchValidator(e,"_headerCells",e=>{var t,a;return"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find(e=>!Array.isArray(e)))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find(e=>!Array.isArray(e)))&&[...null!==(t=e.horizontal)&&void 0!==t?t:[],...null!==(a=e.vertical)&&void 0!==a?a:[]].flat().every(e=>void 0===e.width||"number"==typeof e.width)&&!0},new Set(["TableHeaderCellsPropType"]),t)})})};var HASH_UNDEFINED="__lodash_hash_undefined__";function setCacheAdd(e){return this.__data__.set(e,HASH_UNDEFINED),this}function setCacheHas(e){return this.__data__.has(e)}function SetCache(e){var t=-1,a=null==e?0:e.length;for(this.__data__=new MapCache;++t<a;)this.add(e[t])}function arraySome(e,t){for(var a=-1,l=null==e?0:e.length;++a<l;)if(t(e[a],a,e))return!0;return!1}function cacheHas(e,t){return e.has(t)}SetCache.prototype.add=SetCache.prototype.push=setCacheAdd,SetCache.prototype.has=setCacheHas;var COMPARE_PARTIAL_FLAG$3=1,COMPARE_UNORDERED_FLAG$1=2;function equalArrays(e,t,a,l,i,s){var o=a&COMPARE_PARTIAL_FLAG$3,r=e.length,n=t.length;if(r!=n&&!(o&&n>r))return!1;var c=s.get(e),d=s.get(t);if(c&&d)return c==t&&d==e;var h=-1,b=!0,u=a&COMPARE_UNORDERED_FLAG$1?new SetCache:void 0;for(s.set(e,t),s.set(t,e);++h<r;){var v=e[h],f=t[h];if(l)var _=o?l(f,v,h,t,e,s):l(v,f,h,e,t,s);if(void 0!==_){if(_)continue;b=!1;break}if(u){if(!arraySome(t,function(e,t){if(!cacheHas(u,t)&&(v===e||i(v,e,a,l,s)))return u.push(t)})){b=!1;break}}else if(v!==f&&!i(v,f,a,l,s)){b=!1;break}}return s.delete(e),s.delete(t),b}function mapToArray(e){var t=-1,a=Array(e.size);return e.forEach(function(e,l){a[++t]=[l,e]}),a}function setToArray(e){var t=-1,a=Array(e.size);return e.forEach(function(e){a[++t]=e}),a}var COMPARE_PARTIAL_FLAG$2=1,COMPARE_UNORDERED_FLAG=2,boolTag="[object Boolean]",dateTag="[object Date]",errorTag="[object Error]",mapTag="[object Map]",numberTag="[object Number]",regexpTag="[object RegExp]",setTag="[object Set]",stringTag="[object String]",symbolTag="[object Symbol]",arrayBufferTag="[object ArrayBuffer]",dataViewTag="[object DataView]",symbolProto=Symbol?Symbol.prototype:void 0,symbolValueOf=symbolProto?symbolProto.valueOf:void 0;function equalByTag(e,t,a,l,i,s,o){switch(a){case dataViewTag:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case arrayBufferTag:return!(e.byteLength!=t.byteLength||!s(new Uint8Array(e),new Uint8Array(t)));case boolTag:case dateTag:case numberTag:return eq(+e,+t);case errorTag:return e.name==t.name&&e.message==t.message;case regexpTag:case stringTag:return e==t+"";case mapTag:var r=mapToArray;case setTag:var n=l&COMPARE_PARTIAL_FLAG$2;if(r||(r=setToArray),e.size!=t.size&&!n)return!1;var c=o.get(e);if(c)return c==t;l|=COMPARE_UNORDERED_FLAG,o.set(e,t);var d=equalArrays(r(e),r(t),l,i,s,o);return o.delete(e),d;case symbolTag:if(symbolValueOf)return symbolValueOf.call(e)==symbolValueOf.call(t)}return!1}var COMPARE_PARTIAL_FLAG$1=1,objectProto$1=Object.prototype,hasOwnProperty$1=objectProto$1.hasOwnProperty;function equalObjects(e,t,a,l,i,s){var o=a&COMPARE_PARTIAL_FLAG$1,r=getAllKeys(e),n=r.length;if(n!=getAllKeys(t).length&&!o)return!1;for(var c=n;c--;){var d=r[c];if(!(o?d in t:hasOwnProperty$1.call(t,d)))return!1}var h=s.get(e),b=s.get(t);if(h&&b)return h==t&&b==e;var u=!0;s.set(e,t),s.set(t,e);for(var v=o;++c<n;){var f=e[d=r[c]],_=t[d];if(l)var y=o?l(_,f,d,t,e,s):l(f,_,d,e,t,s);if(!(void 0===y?f===_||i(f,_,a,l,s):y)){u=!1;break}v||(v="constructor"==d)}if(u&&!v){var g=e.constructor,p=t.constructor;g==p||!("constructor"in e)||!("constructor"in t)||"function"==typeof g&&g instanceof g&&"function"==typeof p&&p instanceof p||(u=!1)}return s.delete(e),s.delete(t),u}var COMPARE_PARTIAL_FLAG=1,argsTag="[object Arguments]",arrayTag="[object Array]",objectTag="[object Object]",objectProto=Object.prototype,hasOwnProperty=objectProto.hasOwnProperty;function baseIsEqualDeep(e,t,a,l,i,s){var o=isArray(e),r=isArray(t),n=o?arrayTag:getTag(e),c=r?arrayTag:getTag(t),d=(n=n==argsTag?objectTag:n)==objectTag,h=(c=c==argsTag?objectTag:c)==objectTag,b=n==c;if(b&&isBuffer(e)){if(!isBuffer(t))return!1;o=!0,d=!1}if(b&&!d)return s||(s=new Stack),o||isTypedArray(e)?equalArrays(e,t,a,l,i,s):equalByTag(e,t,n,a,l,i,s);if(!(a&COMPARE_PARTIAL_FLAG)){var u=d&&hasOwnProperty.call(e,"__wrapped__"),v=h&&hasOwnProperty.call(t,"__wrapped__");if(u||v){var f=u?e.value():e,_=v?t.value():t;return s||(s=new Stack),i(f,_,a,l,s)}}return!!b&&(s||(s=new Stack),equalObjects(e,t,a,l,i,s))}function baseIsEqual(e,t,a,l,i){return e===t||(null==e||null==t||!isObjectLike(e)&&!isObjectLike(t)?e!=e&&t!=t:baseIsEqualDeep(e,t,a,l,baseIsEqual,i))}function isEqual(e,t){return baseIsEqual(e,t)}const RESIZE_DEBOUNCE_DELAY=150,KolTableStateless=class{constructor(e){registerInstance(this,e),this.translateNoEntries=translate("kol-no-entries"),this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_hasSettingsMenu:!1},this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.translateSort=translate("kol-sort"),this.translateSortOrder=translate("kol-table-sort-order"),this.maxCols=0,this.fixedOffsets=[],this.tableDivElementHasScrollbar=!1,this.stickyColsDisabled=!1,this.renderTableRow=(e,t,a,l=!1)=>{var i,s;let o=String(t);return this.horizontal&&(null===(i=e[0])||void 0===i?void 0:i.data)&&(o=null!==(s=this.getDataKey(e[0].data))&&void 0!==s?s:o),h("tr",{class:clsx("kol-table__row",{"kol-table__row--body":!l,"kol-table__row--footer":l}),key:`row-${o}`},this.renderSelectionCell(e,t),e.map((e,l)=>this.renderTableCell(e,t,l,a)))},this.renderTableCell=(e,t,a,l)=>{if(!1===e.visible)return"";let i=`${t}-${a}-${e.label}`;if(e.data){const l=this.getDataKey(e.data);i=l?`${l}-${this.horizontal?a:t}`:i}if(e.headerCell)return this.renderHeadingCell(e,t,a,l);{const t="function"!=typeof e.render&&e.label===this.translateNoEntries,l=this.getActionColumnHeader(a),s=Boolean(l&&e.data),o=this.isFixedCol(a),r="left"===o?this.getOffsetString(e.colIndex,!0):void 0,n="right"===o?this.getOffsetString(e.colIndex):void 0;return h("td",{key:`cell-${i}`,class:clsx("kol-table__cell kol-table__cell--body",e.textAlign&&`kol-table__cell--align-${e.textAlign}`,s&&"kol-table__cell--actions",o&&`kol-table__cell--sticky-${o}`),"aria-atomic":t?"false":void 0,"aria-live":t?"polite":void 0,"aria-relevant":t?"text":void 0,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,left:r,right:n},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},s&&l&&e.data?this.renderActionItems(l,e.data,i):"function"!=typeof e.render?e.label:"")}},this.renderActionItems=(e,t,a)=>{const l=e.actions(t);return h("div",{class:"kol-table__cell-actions"},l.map((e,t)=>{if("button"===e.type){const l=__rest(e,[]);return h(KolButtonWcTag,Object.assign({key:`action-${a}-${t}`},l,{_variant:l._variant}))}if("link"===e.type){const l=__rest(e,[]);return h(KolLinkWcTag,Object.assign({key:`action-${a}-${t}`},l))}return null}))}}validateHasSettingsMenu(e){validateHasSettingsMenu(this,e)}validateData(e){validateTableData(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){validateTableDataFoot(this,e)}validateFixedCols(e){validateFixedCols(this,e),this.checkAndUpdateStickyState()}validateHeaderCells(e){validateTableHeaderCells(this,e),isEqual(this.previousHeaderCells,this.state._headerCells)||this.initializeHeaderCellSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){validateLabel(this,e,{required:!0})}validateOn(e){validateTableCallbacks(this,e)}validateSelection(e){validateTableSelection(this,e),this.checkAndUpdateStickyState()}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 l=this.checkboxRefs.indexOf(a);l>-1&&(e.preventDefault(),"ArrowDown"===e.key?(l=(l+1)%this.checkboxRefs.length,this.checkboxRefs[l].focus()):"ArrowUp"===e.key&&(e.preventDefault(),l=(l+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[l].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.handleResize.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement)),this.checkAndUpdateStickyState()}handleSettingsChange(e){var t;const a=Object.assign(Object.assign({},this.state._headerCells),{horizontal:e.detail});setState(this,"_headerCells",a),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[Callback.onChangeHeaderCells])&&this.state._on[Callback.onChangeHeaderCells](e,a)}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect(),clearTimeout(this.resizeDebounceTimeout)}handleResize(){this.checkDivElementScrollbar(),clearTimeout(this.resizeDebounceTimeout),this.resizeDebounceTimeout=setTimeout(()=>{this.checkAndUpdateStickyState()},150)}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}calculateFixedColsWidth(){var e,t,a,l,i,s;if(!this._fixedCols)return 0;const o=this.getPrimaryHeaders(this.state._headerCells);let r=0;for(let a=0;a<this._fixedCols[0]&&a<o.length;a++)r+=null!==(t=null===(e=o[a])||void 0===e?void 0:e.width)&&void 0!==t?t:0;for(let e=this.maxCols-this._fixedCols[1];e<this.maxCols&&e<o.length;e++)r+=null!==(l=null===(a=o[e])||void 0===a?void 0:a.width)&&void 0!==l?l:0;if(this.state._selection){const e=null===(i=this.tableDivElement)||void 0===i?void 0:i.querySelector(".kol-table__cell--selection");r+=null!==(s=null==e?void 0:e.offsetWidth)&&void 0!==s?s:0}return r}checkAndUpdateStickyState(){if(!this.tableDivElement||!this._fixedCols)return void(this.stickyColsDisabled=!1);const e=this.tableDivElement.clientWidth,t=this.calculateFixedColsWidth();this.stickyColsDisabled=t>0&&t>=e}updateDataToKeyMap(e){e.forEach(e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,nonce())}),this.dataToKeyMap.forEach((t,a)=>{e.includes(a)||this.dataToKeyMap.delete(a)})}getDataKey(e){return this.dataToKeyMap.get(e)}getActionColumnHeader(e){const t=this.horizontal?this.state._headerCells.horizontal:this.state._headerCells.vertical;if(!t||0===t.length)return;const a=this.getPrimaryHeaders(this.state._headerCells)[e];return a&&"action"===a.type?a:void 0}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;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 l=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var a;t+=null!==(a=e.rowSpan)&&void 0!==a?a:1}),l<t&&(l=t)}),0===l?l=t.length:l-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,l}getThePrimaryHeadersWithKeyOrRenderFunction(e){const t=[];return e.forEach(e=>{e.forEach(e=>{"string"!=typeof e.key&&"function"!=typeof e.render||t.push(e)})}),t}getPrimaryHeaders(e){var t,a;let l=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===l.length&&(l=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(a=e.vertical)&&void 0!==a?a:[]),l.length>0&&(this.horizontal=!1)),l}createDataField(e,t,a){var l,i,s,o,r,n,c;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[],this.maxCols=this.getNumberOfCols(t.horizontal,e);const d=this.getPrimaryHeaders(t);let h=this.getNumberOfRows(t.vertical,e),b=0;a&&(b=h,h+=(null===(l=this.state._dataFoot)||void 0===l?void 0:l.length)||0);const u=[],v=[],f=[];t.vertical.forEach((e,t)=>{v[t]=0,f[t]=[]});const _=d;for(let l=b;l<h;l++){const d=[];t.vertical.forEach((e,t)=>{let a=0;if(f[t].forEach(e=>a+=e),a<=l){const i=e[l-a+v[t]];if("object"==typeof i){d.push(Object.assign(Object.assign({},i),{headerCell:!0,data:{}}));let e=1;if("number"==typeof i.rowSpan&&i.rowSpan>1&&(e=i.rowSpan),f[t].push(e),"number"==typeof i.colSpan&&i.colSpan>1)for(let a=1;a<i.colSpan;a++)f[t+a].push(e);v[t]++}}});for(let t=0;t<this.maxCols;t++){let h=this.isFixedCol(t);if("left"===h&&void 0===this.getFixedOffset(t)){let e=null!==(i=this.fixedOffsets[t-1])&&void 0!==i?i:0;e+=null!==(o=null===(s=_[t-1])||void 0===s?void 0:s.width)&&void 0!==o?o:0,this.fixedOffsets[t]=e}if("right"===h&&void 0===this.getFixedOffset(t)){let e=null!==(r=this.fixedOffsets[t+1])&&void 0!==r?r:0;e+=null!==(c=null===(n=_[t+1])||void 0===n?void 0:n.width)&&void 0!==c?c:0,this.fixedOffsets[t]=e}if(!0===this.horizontal){const i=a&&this.state._dataFoot?this.state._dataFoot[l-b]:e[l];if("object"==typeof _[t]&&null!==_[t]&&"object"==typeof i&&null!==i&&("string"==typeof _[t].key||"function"==typeof _[t].render)){const e=i[_[t].key];d.push(Object.assign(Object.assign({},_[t]),{colIndex:t,colSpan:void 0,rowSpan:void 0,data:i,label:e}))}}else if("object"==typeof _[l]&&null!==_[l]&&"object"==typeof e[t]&&null!==e[t]&&("string"==typeof _[l].key||"function"==typeof _[l].render)){const a=_[l].key,i=e[t][a];d.push(Object.assign(Object.assign({},_[l]),{colIndex:t,colSpan:void 0,rowSpan:void 0,data:e[t],label:i}))}}u.push(d)}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 l={colSpan:e,label:this.translateNoEntries,render:void 0,rowSpan:Math.max(a,1)};0===u.length?u.push([l]):u[0].push(l)}return u}isFixedCol(e){if(this._fixedCols&&void 0!==e&&!this.stickyColsDisabled)return e<this._fixedCols[0]?"left":e>=this.maxCols-this._fixedCols[1]?"right":void 0}getFixedOffset(e){if(this.tableDivElement&&void 0!==e)return void 0!==this.fixedOffsets[e]?this.fixedOffsets[e]:void 0}getOffsetString(e,t){return t&&this._selection?"calc( var(--kol-table-selection-col-width) + "+this.getFixedOffset(e)+"px)":this.getFixedOffset(e)+"px"}handleSelectionChangeCallbackAndEvent(e,t){var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](e,t),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,t)}initializeHeaderCellSettings(){if(this.state._headerCells&&this.state._headerCells.horizontal&&this.state._headerCells.horizontal.length>0){const e=Object.assign(Object.assign({},this.state._headerCells),{horizontal:this.state._headerCells.horizontal.map(e=>e.map(e=>Object.assign(Object.assign({},e),{visible:"boolean"!=typeof e.visible||e.visible,hidable:"boolean"!=typeof e.hidable||e.hidable})))});setState(this,"_headerCells",e)}}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelection(this._selection),this.validateHasSettingsMenu(this._hasSettingsMenu)}renderSelectionCell(e,t){var a;const l=this.state._selection;if(!l)return"";const i=this.getSelectionKeyPropertyName(),s=null===(a=e[0])||void 0===a?void 0:a.data;if(!s)return"";const o=s[i],r=l.multiple||void 0===l.multiple,n=(()=>{const e=null==l?void 0:l.selectedKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(o))})(),c=(()=>{const e=null==l?void 0:l.disabledKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(o))})(),d=l.label(s),b={name:"selection",checked:n,disabled:c,id:String(o),"aria-label":d};return h("td",{key:`tbody-${t}-selection`,class:"kol-table__cell kol-table__cell--selection"},h("div",{class:clsx("kol-table__selection",{"kol-table__selection--checked":n})},r?h("label",{class:clsx("kol-table__selection-label",{"kol-table__selection-label--disabled":c})},h(IconFC,{class:"kol-table__selection-icon",icons:"kolicon "+(n?"kolicon-check":""),label:""}),h("input",Object.assign({class:clsx("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},b,{type:"checkbox",onInput:e=>{const t=(()=>{const e=null==l?void 0:l.selectedKeys;return void 0===e?[]:Array.isArray(e)?e:[e]})(),a=n?t.filter(e=>String(e)!==String(o)):[...t,o];this.handleSelectionChangeCallbackAndEvent(e,null!=a?a:[])}}))):h("label",{class:"kol-table__selection-label"},h("input",Object.assign({class:clsx("kol-table__selection-input kol-table__selection-input--radio")},b,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,[o])}}))),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${o}-label`,_label:d})))}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter(t=>{var a;const l=null===(a=this.state._selection)||void 0===a?void 0:a.disabledKeys;return!(void 0===l?[]:Array.isArray(l)?l:[l]).some(a=>String(a)===String(t[e]))})}getSelectedKeysWithoutDisabledKeys(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>!t.some(t=>String(t)===String(e)))}getSelectedKeysWithDisabledKeysOnly(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>t.some(t=>String(t)===String(e)))}getRevertedSelection(e){var t;const a=this.getSelectionKeyPropertyName(),l=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&l.push(...this.getDataWithSelectionEnabled().map(e=>null==e?void 0:e[a])),l}getTableMinWidth(){var e,t;const a=null!==(e=this.state._headerCells.horizontal)&&void 0!==e?e:[],l=[];a.forEach(e=>{e.forEach(e=>{!1!==e.visible&&void 0!==e.width&&e.width>0&&l.push(e.width)})});const i=null!==(t=this.state._headerCells.vertical)&&void 0!==t?t:[],s=[];i.forEach(e=>{e.forEach(e=>{void 0!==e.width&&e.width>0&&s.push(e.width)})});const o=[...s,...l];return 0===o.length?"0px":1===o.length?`${o[0]}px`:`calc(${o.map(e=>`${e}px`).join(" + ")})`}renderHeadingSelectionCell(){var e,t;const a=this.state._selection;if(!a)return h("td",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});if(!1===a.multiple)return h("td",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"});const l=null!==(t=null===(e=this.getSelectedKeysWithoutDisabledKeys())||void 0===e?void 0:e.length)&&void 0!==t?t:0,i=l===this.getDataWithSelectionEnabled().length,s=0!==l&&!i;let o="kol-table-selection-indeterminate";i&&!s&&(o="kol-table-selection-none"),0===l&&(o="kol-table-selection-all");const r=translate(o);return h("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},h("div",{class:clsx("kol-table__selection",{"kol-table__selection--indeterminate":s,"kol-table__selection--checked":i})},h("label",{class:"kol-table__selection-label"},h(IconFC,{class:"kol-table__selection-icon",icons:"kolicon "+(s?"kolicon-minus":i?"kolicon-check":""),label:""}),h("input",{class:clsx("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:i&&!s,indeterminate:s,"aria-label":r,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!i))}})),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${o}-label`,_label:r})))}renderHeaderTdCell(){const e=this.state._headerCells.horizontal,t=this.state._headerCells.vertical;if(!Array.isArray(e)||0===e.length||!Array.isArray(t)||0===t.length)return h(Fragment,null);const a=t.reduce((e,t)=>{var a;const l=null==t?void 0:t[0];return e+(null!==(a=null==l?void 0:l.width)&&void 0!==a?a:0)},0);return h("td",{"aria-hidden":"true",colSpan:t.length,rowSpan:e.length,style:a>0?{width:`${a}px`}:void 0})}formatSortOrderDescription(e){return this.translateSortOrder.replace("{{order}}",`${e}`)}getSortAriaDescription(e){return"number"==typeof e&&e>0?`${this.translateSort} – ${this.formatSortOrderDescription(e)}`:this.translateSort}renderHeadingCell(e,t,a,l){if(!1===e.visible)return"";const i=!1!==(null==e?void 0:e.sortable),s="string"==typeof e.sortDirection,o=i&&s;let r="none",n="kolicon-sort-neutral";if(o&&e.sortDirection)switch(e.sortDirection){case"ASC":n="kolicon-sort-asc",r="ascending";break;case"DESC":n="kolicon-sort-desc",r="descending";break;default:r="none"}const c=l?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col",d="number"==typeof e.sortOrder&&e.sortOrder>0?e.sortOrder:void 0,b=this.getSortAriaDescription(d),u=void 0!==e.width?`${e.width}px`:void 0,v=this.isFixedCol(a),f="left"===v?this.getOffsetString(a,!0):void 0,_="right"===v?this.getOffsetString(a):void 0;return h("th",{key:`${t}-${a}-${e.label}`,class:clsx("kol-table__cell kol-table__cell--header",`kol-table__cell--${r}`,e.textAlign&&`kol-table__cell--align-${e.textAlign}`,v&&`kol-table__cell--sticky-${v}`),scope:c,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:u,left:f,right:_},"aria-sort":r,"data-sort":o&&e.sortDirection?`sort-${e.sortDirection}`:void 0},o&&e.sortDirection?h("span",{class:"kol-table__sort"},h(KolButtonWcTag,{class:"kol-table__sort-button",_icons:{right:n},_label:e.label,_ariaDescription:b,_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}),this.host&&dispatchDomEvent(this.host,KolEvent.sort,{key:e.key,currentSortDirection:e.sortDirection})}}}),d&&h("span",{"aria-hidden":"true",class:"kol-table__sort-order"},d)):e.label)}renderSpacer(e,t){var a,l;const i=(null===(a=this.state._headerCells.vertical)||void 0===a?void 0:a.length)||0,s=null===(l=null==t?void 0:t[0])||void 0===l?void 0:l.reduce((e,t)=>e+(t.colSpan||1),0),o=this.state._selection?1:0;return h("tr",{"aria-hidden":"true",class:clsx("kol-table__spacer",`kol-table__spacer--${e}`)},h("td",{class:clsx(`kol-table__spacer-line kol-table__spacer-line--${e}`),colSpan:i+s+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 h("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",e),e.map((e,t)=>this.renderTableRow(e,t,!0,!0))])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const t=this.state._headerCells.horizontal;return h("div",{key:"7498fb1fcab0cde7d87073c2a30b307845886a3b",class:"kol-table"},this.state._hasSettingsMenu&&h(KolTableSettingsWcTag,{key:"ddc7eedad2de6fdff8c8d25b75a901124de308b9",_horizontalHeaderCells:null!=t?t:[]}),h("div",{key:"92f2114a09ba2b9ae9d699cde8ebc14095901170",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},h("table",{key:"bb9df3b7d179826ea4405c45aa1a06c11e629fef",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},h("caption",{key:"2fd9de95e825e595076779a8e0ee7d6a8d6687b4",class:"kol-table__focus-element kol-table__caption",id:"caption",tabindex:this.tableDivElementHasScrollbar?"0":void 0},this.state._label),Array.isArray(t)&&h("thead",{key:"9f372551f89c3345f66935062be5a00f5c160e4b",class:"kol-table__head"},[t.map((e,t)=>h("tr",{class:"kol-table__head-row",key:`thead-${t}`},this.state._selection&&this.renderHeadingSelectionCell(),0===t&&this.renderHeaderTdCell(),Array.isArray(e)&&e.map((e,a)=>this.renderHeadingCell(e,t,a,!1)))),this.renderSpacer("head",t)]),h("tbody",{key:"496f87dc4f5cbe6e26825cf1f30824d81391b2f0",class:"kol-table__body"},e.map((e,t)=>this.renderTableRow(e,t,!0))),this.renderFoot())))}get host(){return getElement(this)}static get watchers(){return{_hasSettingsMenu:["validateHasSettingsMenu"],_data:["validateData"],_dataFoot:["validateDataFoot"],_fixedCols:["validateFixedCols"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_on:["validateOn"],_selection:["validateSelection"]}}};export{KolTableStateless as kol_table_stateless_wc};
+import{r as registerInstance,h,F as Fragment,g as getElement}from"./index-B8-Psqw5.js";import{_ as __rest}from"./tslib.es6-CxX45GIN.js";import{c as KolButtonWcTag,d as KolLinkWcTag,a as KolTooltipWcTag,u as KolTableSettingsWcTag}from"./component-names-C64MXeC1.js";import{t as translate}from"./i18n-DvMeCREp.js";import{I as IconFC}from"./component-DARFRgRf.js";import{P as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,b as watchValidator,s as setState}from"./common-BIkdAxr0.js";import{c as validateHasSettingsMenu,v as validateTableData,a as validateTableDataFoot,b as validateFixedCols,f as validateTableCallbacks,d as validateTableSelection}from"./table-selection-DAMWzd6x.js";import{v as validateLabel}from"./label-C18ud7Yt.js";import{C as Callback}from"./keyboard-DNd73LVa.js";import{c as clsx}from"./clsx-COFh-Vc8.js";import{n as nonce}from"./dev.utils-CDB3zpcq.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-DHTi_wtD.js";import{M as MapCache,e as eq,U as Uint8Array,d as getAllKeys,a as getTag,c as isBuffer,S as Stack,f as isTypedArray}from"./_Uint8Array-UP73qmmG.js";import{S as Symbol,a as isArray,i as isObjectLike}from"./isArray-CcrBs4JM.js";import"./i18n-B0tfVPMa.js";import"./bem-registry-ClssJ_nC.js";import"./isObject-BJgq02Md.js";const validateTableHeaderCells=(e,t)=>{emptyStringByArrayHandler(t,()=>{objectObjectHandler(t,()=>{try{t=parseJson(t)}catch(e){}watchValidator(e,"_headerCells",e=>{var t,a;return"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find(e=>!Array.isArray(e)))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find(e=>!Array.isArray(e)))&&[...null!==(t=e.horizontal)&&void 0!==t?t:[],...null!==(a=e.vertical)&&void 0!==a?a:[]].flat().every(e=>void 0===e.width||"number"==typeof e.width)&&!0},new Set(["TableHeaderCellsPropType"]),t)})})};var HASH_UNDEFINED="__lodash_hash_undefined__";function setCacheAdd(e){return this.__data__.set(e,HASH_UNDEFINED),this}function setCacheHas(e){return this.__data__.has(e)}function SetCache(e){var t=-1,a=null==e?0:e.length;for(this.__data__=new MapCache;++t<a;)this.add(e[t])}function arraySome(e,t){for(var a=-1,l=null==e?0:e.length;++a<l;)if(t(e[a],a,e))return!0;return!1}function cacheHas(e,t){return e.has(t)}SetCache.prototype.add=SetCache.prototype.push=setCacheAdd,SetCache.prototype.has=setCacheHas;var COMPARE_PARTIAL_FLAG$3=1,COMPARE_UNORDERED_FLAG$1=2;function equalArrays(e,t,a,l,i,s){var o=a&COMPARE_PARTIAL_FLAG$3,r=e.length,n=t.length;if(r!=n&&!(o&&n>r))return!1;var c=s.get(e),d=s.get(t);if(c&&d)return c==t&&d==e;var h=-1,b=!0,u=a&COMPARE_UNORDERED_FLAG$1?new SetCache:void 0;for(s.set(e,t),s.set(t,e);++h<r;){var f=e[h],v=t[h];if(l)var _=o?l(v,f,h,t,e,s):l(f,v,h,e,t,s);if(void 0!==_){if(_)continue;b=!1;break}if(u){if(!arraySome(t,function(e,t){if(!cacheHas(u,t)&&(f===e||i(f,e,a,l,s)))return u.push(t)})){b=!1;break}}else if(f!==v&&!i(f,v,a,l,s)){b=!1;break}}return s.delete(e),s.delete(t),b}function mapToArray(e){var t=-1,a=Array(e.size);return e.forEach(function(e,l){a[++t]=[l,e]}),a}function setToArray(e){var t=-1,a=Array(e.size);return e.forEach(function(e){a[++t]=e}),a}var COMPARE_PARTIAL_FLAG$2=1,COMPARE_UNORDERED_FLAG=2,boolTag="[object Boolean]",dateTag="[object Date]",errorTag="[object Error]",mapTag="[object Map]",numberTag="[object Number]",regexpTag="[object RegExp]",setTag="[object Set]",stringTag="[object String]",symbolTag="[object Symbol]",arrayBufferTag="[object ArrayBuffer]",dataViewTag="[object DataView]",symbolProto=Symbol?Symbol.prototype:void 0,symbolValueOf=symbolProto?symbolProto.valueOf:void 0;function equalByTag(e,t,a,l,i,s,o){switch(a){case dataViewTag:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case arrayBufferTag:return!(e.byteLength!=t.byteLength||!s(new Uint8Array(e),new Uint8Array(t)));case boolTag:case dateTag:case numberTag:return eq(+e,+t);case errorTag:return e.name==t.name&&e.message==t.message;case regexpTag:case stringTag:return e==t+"";case mapTag:var r=mapToArray;case setTag:var n=l&COMPARE_PARTIAL_FLAG$2;if(r||(r=setToArray),e.size!=t.size&&!n)return!1;var c=o.get(e);if(c)return c==t;l|=COMPARE_UNORDERED_FLAG,o.set(e,t);var d=equalArrays(r(e),r(t),l,i,s,o);return o.delete(e),d;case symbolTag:if(symbolValueOf)return symbolValueOf.call(e)==symbolValueOf.call(t)}return!1}var COMPARE_PARTIAL_FLAG$1=1,objectProto$1=Object.prototype,hasOwnProperty$1=objectProto$1.hasOwnProperty;function equalObjects(e,t,a,l,i,s){var o=a&COMPARE_PARTIAL_FLAG$1,r=getAllKeys(e),n=r.length;if(n!=getAllKeys(t).length&&!o)return!1;for(var c=n;c--;){var d=r[c];if(!(o?d in t:hasOwnProperty$1.call(t,d)))return!1}var h=s.get(e),b=s.get(t);if(h&&b)return h==t&&b==e;var u=!0;s.set(e,t),s.set(t,e);for(var f=o;++c<n;){var v=e[d=r[c]],_=t[d];if(l)var y=o?l(_,v,d,t,e,s):l(v,_,d,e,t,s);if(!(void 0===y?v===_||i(v,_,a,l,s):y)){u=!1;break}f||(f="constructor"==d)}if(u&&!f){var g=e.constructor,p=t.constructor;g==p||!("constructor"in e)||!("constructor"in t)||"function"==typeof g&&g instanceof g&&"function"==typeof p&&p instanceof p||(u=!1)}return s.delete(e),s.delete(t),u}var COMPARE_PARTIAL_FLAG=1,argsTag="[object Arguments]",arrayTag="[object Array]",objectTag="[object Object]",objectProto=Object.prototype,hasOwnProperty=objectProto.hasOwnProperty;function baseIsEqualDeep(e,t,a,l,i,s){var o=isArray(e),r=isArray(t),n=o?arrayTag:getTag(e),c=r?arrayTag:getTag(t),d=(n=n==argsTag?objectTag:n)==objectTag,h=(c=c==argsTag?objectTag:c)==objectTag,b=n==c;if(b&&isBuffer(e)){if(!isBuffer(t))return!1;o=!0,d=!1}if(b&&!d)return s||(s=new Stack),o||isTypedArray(e)?equalArrays(e,t,a,l,i,s):equalByTag(e,t,n,a,l,i,s);if(!(a&COMPARE_PARTIAL_FLAG)){var u=d&&hasOwnProperty.call(e,"__wrapped__"),f=h&&hasOwnProperty.call(t,"__wrapped__");if(u||f){var v=u?e.value():e,_=f?t.value():t;return s||(s=new Stack),i(v,_,a,l,s)}}return!!b&&(s||(s=new Stack),equalObjects(e,t,a,l,i,s))}function baseIsEqual(e,t,a,l,i){return e===t||(null==e||null==t||!isObjectLike(e)&&!isObjectLike(t)?e!=e&&t!=t:baseIsEqualDeep(e,t,a,l,baseIsEqual,i))}function isEqual(e,t){return baseIsEqual(e,t)}const RESIZE_DEBOUNCE_DELAY=150,KolTableStateless=class{constructor(e){registerInstance(this,e),this.translateNoEntries=translate("kol-no-entries"),this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_hasSettingsMenu:!1},this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.translateSort=translate("kol-sort"),this.translateSortOrder=translate("kol-table-sort-order"),this.maxCols=0,this.fixedOffsets=[],this.tableDivElementHasScrollbar=!1,this.stickyColsDisabled=!1,this.renderTableRow=(e,t,a,l=!1)=>{var i,s;let o=String(t);return this.horizontal&&(null===(i=e[0])||void 0===i?void 0:i.data)&&(o=null!==(s=this.getDataKey(e[0].data))&&void 0!==s?s:o),h("tr",{class:clsx("kol-table__row",{"kol-table__row--body":!l,"kol-table__row--footer":l}),key:`row-${o}`},this.renderSelectionCell(e,t),e.map((e,l)=>this.renderTableCell(e,t,l,a)))},this.renderTableCell=(e,t,a,l)=>{if(!1===e.visible)return"";let i=`${t}-${a}-${e.label}`;if(e.data){const l=this.getDataKey(e.data);i=l?`${l}-${this.horizontal?a:t}`:i}if(e.headerCell)return this.renderHeadingCell(e,t,a,l);{const t="function"!=typeof e.render&&e.label===this.translateNoEntries,l=this.getActionColumnHeader(a),s=Boolean(l&&e.data),o=this.isFixedCol(a),r="left"===o?this.getOffsetString(e.colIndex,!0):void 0,n="right"===o?this.getOffsetString(e.colIndex):void 0;return h("td",{key:`cell-${i}`,class:clsx("kol-table__cell kol-table__cell--body",e.textAlign&&`kol-table__cell--align-${e.textAlign}`,s&&"kol-table__cell--actions",o&&`kol-table__cell--sticky-${o}`),"aria-atomic":t?"false":void 0,"aria-live":t?"polite":void 0,"aria-relevant":t?"text":void 0,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,left:r,right:n},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},s&&l&&e.data?this.renderActionItems(l,e.data,i):"function"!=typeof e.render?e.label:"")}},this.renderActionItems=(e,t,a)=>{const l=e.actions(t);return h("div",{class:"kol-table__cell-actions"},l.map((e,t)=>{if("button"===e.type){const l=__rest(e,[]);return h(KolButtonWcTag,Object.assign({key:`action-${a}-${t}`},l,{_variant:l._variant}))}if("link"===e.type){const l=__rest(e,[]);return h(KolLinkWcTag,Object.assign({key:`action-${a}-${t}`},l))}return null}))}}validateHasSettingsMenu(e){validateHasSettingsMenu(this,e)}validateData(e){validateTableData(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){validateTableDataFoot(this,e)}validateFixedCols(e){validateFixedCols(this,e),this.checkAndUpdateStickyState()}validateHeaderCells(e){validateTableHeaderCells(this,e),isEqual(this.previousHeaderCells,this.state._headerCells)||this.initializeHeaderCellSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){validateLabel(this,e,{required:!0})}validateOn(e){validateTableCallbacks(this,e)}validateSelection(e){validateTableSelection(this,e),this.checkAndUpdateStickyState()}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 l=this.checkboxRefs.indexOf(a);l>-1&&(e.preventDefault(),"ArrowDown"===e.key?(l=(l+1)%this.checkboxRefs.length,this.checkboxRefs[l].focus()):"ArrowUp"===e.key&&(e.preventDefault(),l=(l+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[l].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.handleResize.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement)),this.checkAndUpdateStickyState()}handleSettingsChange(e){var t;const a=Object.assign(Object.assign({},this.state._headerCells),{horizontal:e.detail});setState(this,"_headerCells",a),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[Callback.onChangeHeaderCells])&&this.state._on[Callback.onChangeHeaderCells](e,a)}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect(),clearTimeout(this.resizeDebounceTimeout)}handleResize(){this.checkDivElementScrollbar(),clearTimeout(this.resizeDebounceTimeout),this.resizeDebounceTimeout=setTimeout(()=>{this.checkAndUpdateStickyState()},150)}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}calculateFixedColsWidth(){var e,t,a,l,i,s;if(!this._fixedCols)return 0;const o=this.getPrimaryHeaders(this.state._headerCells);let r=0;for(let a=0;a<this._fixedCols[0]&&a<o.length;a++)r+=null!==(t=null===(e=o[a])||void 0===e?void 0:e.width)&&void 0!==t?t:0;for(let e=this.maxCols-this._fixedCols[1];e<this.maxCols&&e<o.length;e++)r+=null!==(l=null===(a=o[e])||void 0===a?void 0:a.width)&&void 0!==l?l:0;if(this.state._selection){const e=null===(i=this.tableDivElement)||void 0===i?void 0:i.querySelector(".kol-table__cell--selection");r+=null!==(s=null==e?void 0:e.offsetWidth)&&void 0!==s?s:0}return r}checkAndUpdateStickyState(){if(!this.tableDivElement||!this._fixedCols)return void(this.stickyColsDisabled=!1);const e=this.tableDivElement.clientWidth,t=this.calculateFixedColsWidth();this.stickyColsDisabled=t>0&&t>=e}updateDataToKeyMap(e){e.forEach(e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,nonce())}),this.dataToKeyMap.forEach((t,a)=>{e.includes(a)||this.dataToKeyMap.delete(a)})}getDataKey(e){return this.dataToKeyMap.get(e)}getActionColumnHeader(e){const t=this.horizontal?this.state._headerCells.horizontal:this.state._headerCells.vertical;if(!t||0===t.length)return;const a=this.getPrimaryHeaders(this.state._headerCells)[e];return a&&"action"===a.type?a:void 0}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;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 l=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var a;t+=null!==(a=e.rowSpan)&&void 0!==a?a:1}),l<t&&(l=t)}),0===l?l=t.length:l-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,l}getThePrimaryHeadersWithKeyOrRenderFunction(e){const t=[];return e.forEach(e=>{e.forEach(e=>{"string"!=typeof e.key&&"function"!=typeof e.render||t.push(e)})}),t}getPrimaryHeaders(e){var t,a;let l=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===l.length&&(l=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(a=e.vertical)&&void 0!==a?a:[]),l.length>0&&(this.horizontal=!1)),l}createDataField(e,t,a){var l,i,s,o,r,n,c;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[],this.maxCols=this.getNumberOfCols(t.horizontal,e);const d=this.getPrimaryHeaders(t);let h=this.getNumberOfRows(t.vertical,e),b=0;a&&(b=h,h+=(null===(l=this.state._dataFoot)||void 0===l?void 0:l.length)||0);const u=[],f=[],v=[];t.vertical.forEach((e,t)=>{f[t]=0,v[t]=[]});const _=d;for(let l=b;l<h;l++){const d=[];t.vertical.forEach((e,t)=>{let a=0;if(v[t].forEach(e=>a+=e),a<=l){const i=e[l-a+f[t]];if("object"==typeof i){d.push(Object.assign(Object.assign({},i),{headerCell:!0,data:{}}));let e=1;if("number"==typeof i.rowSpan&&i.rowSpan>1&&(e=i.rowSpan),v[t].push(e),"number"==typeof i.colSpan&&i.colSpan>1)for(let a=1;a<i.colSpan;a++)v[t+a].push(e);f[t]++}}});for(let t=0;t<this.maxCols;t++){let h=this.isFixedCol(t);if("left"===h&&void 0===this.getFixedOffset(t)){let e=null!==(i=this.fixedOffsets[t-1])&&void 0!==i?i:0;e+=null!==(o=null===(s=_[t-1])||void 0===s?void 0:s.width)&&void 0!==o?o:0,this.fixedOffsets[t]=e}if("right"===h&&void 0===this.getFixedOffset(t)){let e=null!==(r=this.fixedOffsets[t+1])&&void 0!==r?r:0;e+=null!==(c=null===(n=_[t+1])||void 0===n?void 0:n.width)&&void 0!==c?c:0,this.fixedOffsets[t]=e}if(!0===this.horizontal){const i=a&&this.state._dataFoot?this.state._dataFoot[l-b]:e[l];if("object"==typeof _[t]&&null!==_[t]&&"object"==typeof i&&null!==i&&("string"==typeof _[t].key||"function"==typeof _[t].render)){const e=i[_[t].key];d.push(Object.assign(Object.assign({},_[t]),{colIndex:t,colSpan:void 0,rowSpan:void 0,data:i,label:e}))}}else if("object"==typeof _[l]&&null!==_[l]&&"object"==typeof e[t]&&null!==e[t]&&("string"==typeof _[l].key||"function"==typeof _[l].render)){const a=_[l].key,i=e[t][a];d.push(Object.assign(Object.assign({},_[l]),{colIndex:t,colSpan:void 0,rowSpan:void 0,data:e[t],label:i}))}}u.push(d)}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 l={colSpan:e,label:this.translateNoEntries,render:void 0,rowSpan:Math.max(a,1)};0===u.length?u.push([l]):u[0].push(l)}return u}isFixedCol(e){if(this._fixedCols&&void 0!==e&&!this.stickyColsDisabled)return e<this._fixedCols[0]?"left":e>=this.maxCols-this._fixedCols[1]?"right":void 0}getFixedOffset(e){if(this.tableDivElement&&void 0!==e)return void 0!==this.fixedOffsets[e]?this.fixedOffsets[e]:void 0}getOffsetString(e,t){return t&&this._selection?"calc( var(--kol-table-selection-col-width) + "+this.getFixedOffset(e)+"px)":this.getFixedOffset(e)+"px"}handleSelectionChangeCallbackAndEvent(e,t){var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](e,t),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,t)}initializeHeaderCellSettings(){if(this.state._headerCells&&this.state._headerCells.horizontal&&this.state._headerCells.horizontal.length>0){const e=Object.assign(Object.assign({},this.state._headerCells),{horizontal:this.state._headerCells.horizontal.map(e=>e.map(e=>Object.assign(Object.assign({},e),{visible:"boolean"!=typeof e.visible||e.visible,hidable:"boolean"!=typeof e.hidable||e.hidable})))});setState(this,"_headerCells",e)}}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelection(this._selection),this.validateHasSettingsMenu(this._hasSettingsMenu)}renderSelectionCell(e,t){var a;const l=this.state._selection;if(!l)return"";const i=this.getSelectionKeyPropertyName(),s=null===(a=e[0])||void 0===a?void 0:a.data;if(!s)return"";const o=s[i],r=l.multiple||void 0===l.multiple,n=(()=>{const e=null==l?void 0:l.selectedKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(o))})(),c=(()=>{const e=null==l?void 0:l.disabledKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(o))})(),d=l.label(s),b={name:"selection",checked:n,disabled:c,id:String(o),"aria-label":d};return h("td",{key:`tbody-${t}-selection`,class:"kol-table__cell kol-table__cell--selection"},h("div",{class:clsx("kol-table__selection",{"kol-table__selection--checked":n})},r?h("label",{class:clsx("kol-table__selection-label",{"kol-table__selection-label--disabled":c})},h(IconFC,{class:"kol-table__selection-icon",icons:"kolicon "+(n?"kolicon-check":""),label:""}),h("input",Object.assign({class:clsx("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},b,{type:"checkbox",onInput:e=>{const t=(()=>{const e=null==l?void 0:l.selectedKeys;return void 0===e?[]:Array.isArray(e)?e:[e]})(),a=n?t.filter(e=>String(e)!==String(o)):[...t,o];this.handleSelectionChangeCallbackAndEvent(e,null!=a?a:[])}}))):h("label",{class:"kol-table__selection-label"},h("input",Object.assign({class:clsx("kol-table__selection-input kol-table__selection-input--radio")},b,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,[o])}}))),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${o}-label`,_label:d})))}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter(t=>{var a;const l=null===(a=this.state._selection)||void 0===a?void 0:a.disabledKeys;return!(void 0===l?[]:Array.isArray(l)?l:[l]).some(a=>String(a)===String(t[e]))})}getSelectedKeysWithoutDisabledKeys(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>!t.some(t=>String(t)===String(e)))}getSelectedKeysWithDisabledKeysOnly(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>t.some(t=>String(t)===String(e)))}getRevertedSelection(e){var t;const a=this.getSelectionKeyPropertyName(),l=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&l.push(...this.getDataWithSelectionEnabled().map(e=>null==e?void 0:e[a])),l}getTableMinWidth(){var e,t;const a=null!==(e=this.state._headerCells.horizontal)&&void 0!==e?e:[],l=[];a.forEach(e=>{e.forEach(e=>{!1!==e.visible&&void 0!==e.width&&e.width>0&&l.push(e.width)})});const i=null!==(t=this.state._headerCells.vertical)&&void 0!==t?t:[],s=[];i.forEach(e=>{e.forEach(e=>{void 0!==e.width&&e.width>0&&s.push(e.width)})});const o=[...s,...l];return 0===o.length?"0px":1===o.length?`${o[0]}px`:`calc(${o.map(e=>`${e}px`).join(" + ")})`}renderHeadingSelectionCell(){var e,t;const a=this.state._selection;if(!a)return h("td",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});if(!1===a.multiple)return h("td",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"});const l=null!==(t=null===(e=this.getSelectedKeysWithoutDisabledKeys())||void 0===e?void 0:e.length)&&void 0!==t?t:0,i=l===this.getDataWithSelectionEnabled().length,s=0!==l&&!i;let o="kol-table-selection-indeterminate";i&&!s&&(o="kol-table-selection-none"),0===l&&(o="kol-table-selection-all");const r=translate(o);return h("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},h("div",{class:clsx("kol-table__selection",{"kol-table__selection--indeterminate":s,"kol-table__selection--checked":i})},h("label",{class:"kol-table__selection-label"},h(IconFC,{class:"kol-table__selection-icon",icons:"kolicon "+(s?"kolicon-minus":i?"kolicon-check":""),label:""}),h("input",{class:clsx("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:i&&!s,indeterminate:s,"aria-label":r,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!i))}})),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${o}-label`,_label:r})))}renderHeaderTdCell(){const e=this.state._headerCells.horizontal,t=this.state._headerCells.vertical;if(!Array.isArray(e)||0===e.length||!Array.isArray(t)||0===t.length)return h(Fragment,null);const a=t.reduce((e,t)=>{var a;const l=null==t?void 0:t[0];return e+(null!==(a=null==l?void 0:l.width)&&void 0!==a?a:0)},0);return h("td",{"aria-hidden":"true",colSpan:t.length,rowSpan:e.length,style:a>0?{width:`${a}px`}:void 0})}formatSortOrderDescription(e){return this.translateSortOrder.replace("{{order}}",`${e}`)}getSortAriaDescription(e){return"number"==typeof e&&e>0?`${this.translateSort} – ${this.formatSortOrderDescription(e)}`:this.translateSort}renderHeadingCell(e,t,a,l){if(!1===e.visible)return"";const i=!1!==(null==e?void 0:e.sortable),s="string"==typeof e.sortDirection,o=i&&s;let r="none",n="kolicon-sort-neutral";if(o&&e.sortDirection)switch(e.sortDirection){case"ASC":n="kolicon-sort-asc",r="ascending";break;case"DESC":n="kolicon-sort-desc",r="descending";break;default:r="none"}const c=l?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col",d="number"==typeof e.sortOrder&&e.sortOrder>0?e.sortOrder:void 0,b=this.getSortAriaDescription(d),u=void 0!==e.width?`${e.width}px`:void 0,f=this.isFixedCol(a),v="left"===f?this.getOffsetString(a,!0):void 0,_="right"===f?this.getOffsetString(a):void 0;return h("th",{key:`${t}-${a}-${e.label}`,class:clsx("kol-table__cell kol-table__cell--header",`kol-table__cell--${r}`,e.textAlign&&`kol-table__cell--align-${e.textAlign}`,f&&`kol-table__cell--sticky-${f}`),scope:c,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:u,left:v,right:_},"aria-sort":r,"data-sort":o&&e.sortDirection?`sort-${e.sortDirection}`:void 0},o&&e.sortDirection?h("span",{class:"kol-table__sort"},h(KolButtonWcTag,{class:"kol-table__sort-button",_icons:{right:n},_label:e.label,_ariaDescription:b,_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}),this.host&&dispatchDomEvent(this.host,KolEvent.sort,{key:e.key,currentSortDirection:e.sortDirection})}}}),d&&h("span",{"aria-hidden":"true",class:"kol-table__sort-order"},d)):e.label)}renderSpacer(e,t){var a,l;const i=(null===(a=this.state._headerCells.vertical)||void 0===a?void 0:a.length)||0,s=null===(l=null==t?void 0:t[0])||void 0===l?void 0:l.reduce((e,t)=>e+(t.colSpan||1),0),o=this.state._selection?1:0;return h("tr",{"aria-hidden":"true",class:clsx("kol-table__spacer",`kol-table__spacer--${e}`)},h("td",{class:clsx(`kol-table__spacer-line kol-table__spacer-line--${e}`),colSpan:i+s+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 h("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",e),e.map((e,t)=>this.renderTableRow(e,t,!0,!0))])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const t=this.state._headerCells.horizontal;return h("div",{key:"c8da0f836fcec4775d4b4343f3188c10d6d4fc18",class:"kol-table"},this.state._hasSettingsMenu&&h(KolTableSettingsWcTag,{key:"45b224ddc0eb580526e7bff85f251ecdd63448c6",_horizontalHeaderCells:null!=t?t:[]}),h("div",{key:"6cce803d3bfe750add0be9ce4ee7aa1ec94c8f7f",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},h("table",{key:"2d7a6bf3f93fff2d3fc442b5d6415d0b01cab0be",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},h("caption",{key:"3b81b2d13f97f23f27740cd55671a2db142be535",class:"kol-table__focus-element kol-table__caption",id:"caption",tabindex:this.tableDivElementHasScrollbar?"0":void 0},this.state._label),Array.isArray(t)&&h("thead",{key:"c6bf5c2b6dbf452f0526dcdd0e8d1de1d6def089",class:"kol-table__head"},[t.map((e,t)=>h("tr",{class:"kol-table__head-row",key:`thead-${t}`},this.state._selection&&this.renderHeadingSelectionCell(),0===t&&this.renderHeaderTdCell(),Array.isArray(e)&&e.map((e,a)=>this.renderHeadingCell(e,t,a,!1)))),this.renderSpacer("head",t)]),h("tbody",{key:"23cb699f7eb6bd00e494f39d9a72a08bf73c9875",class:"kol-table__body"},e.map((e,t)=>this.renderTableRow(e,t,!0))),this.renderFoot())))}get host(){return getElement(this)}static get watchers(){return{_hasSettingsMenu:["validateHasSettingsMenu"],_data:["validateData"],_dataFoot:["validateDataFoot"],_fixedCols:["validateFixedCols"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_on:["validateOn"],_selection:["validateSelection"]}}};export{KolTableStateless as kol_table_stateless_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h}from"./index-Cgf1FZ14.js";import{m as KolTableStatelessWcTag}from"./component-names-BQrMLr68.js";import"./common-BIkdAxr0.js";const defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1773232431126"); /* IE9*/\n  src: url("kolicons.eot?t=1773232431126#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1773232431126") format("woff2"), url("kolicons.woff?t=1773232431126") format("woff"), url("kolicons.ttf?t=1773232431126") format("truetype"), url("kolicons.svg?t=1773232431126#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-house::before {\n  content: "\\ea10";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea11";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea12";\n}\n\n.kolicon-link::before {\n  content: "\\ea13";\n}\n\n.kolicon-minus::before {\n  content: "\\ea14";\n}\n\n.kolicon-plus::before {\n  content: "\\ea15";\n}\n\n.kolicon-settings::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea18";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea19";\n}\n\n.kolicon-up::before {\n  content: "\\ea1a";\n}\n\n.kolicon-version::before {\n  content: "\\ea1b";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table {\n    --kol-table-selection-col-width: var(--a11y-min-size);\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    background-color: white;\n    position: sticky !important;\n    left: 0;\n    z-index: 2;\n    width: var(--kol-table-selection-col-width, auto);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions {\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n    background-color: white;\n    position: sticky !important;\n    z-index: 1;\n  }\n  .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n    border-right: 2px solid black;\n  }\n  .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n    border-left: 2px solid black;\n  }\n  .kol-table__cell-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection {\n    position: relative;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: "";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}',KolTableStateless=class{constructor(n){registerInstance(this,n)}render(){return h(KolTableStatelessWcTag,{key:"02264e35916f8c8f68c730d3be9044444cd02955",_data:this._data,_dataFoot:this._dataFoot,_fixedCols:this._fixedCols,_headerCells:this._headerCells,_label:this._label,_on:this._on,_selection:this._selection,_hasSettingsMenu:this._hasSettingsMenu})}};KolTableStateless.style={default:defaultStyleCss};export{KolTableStateless as kol_table_stateless};
+import{r as registerInstance,h}from"./index-B8-Psqw5.js";import{l as KolTableStatelessWcTag}from"./component-names-C64MXeC1.js";import"./common-BIkdAxr0.js";const defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774433546045"); /* IE9*/\n  src: url("kolicons.eot?t=1774433546045#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774433546045") format("woff2"), url("kolicons.woff?t=1774433546045") format("woff"), url("kolicons.ttf?t=1774433546045") format("truetype"), url("kolicons.svg?t=1774433546045#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-house::before {\n  content: "\\ea10";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea11";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea12";\n}\n\n.kolicon-link::before {\n  content: "\\ea13";\n}\n\n.kolicon-minus::before {\n  content: "\\ea14";\n}\n\n.kolicon-plus::before {\n  content: "\\ea15";\n}\n\n.kolicon-settings::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea18";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea19";\n}\n\n.kolicon-up::before {\n  content: "\\ea1a";\n}\n\n.kolicon-version::before {\n  content: "\\ea1b";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-popover {\n    opacity: 0;\n    transition: 0.2s ease-out opacity;\n  }\n  .kol-popover-button--open + .kol-popover {\n    opacity: 1;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table {\n    --kol-table-selection-col-width: var(--a11y-min-size);\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    background-color: white;\n    position: sticky !important;\n    left: 0;\n    z-index: 2;\n    width: var(--kol-table-selection-col-width, auto);\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions {\n    white-space: nowrap;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--sticky-left, .kol-table__cell--sticky-right {\n    background-color: white;\n    position: sticky !important;\n    z-index: 1;\n  }\n  .kol-table__cell--sticky-left:nth-last-child(1 of .kol-table__cell--sticky-left) {\n    border-right: 2px solid black;\n  }\n  .kol-table__cell--sticky-right:nth-child(1 of .kol-table__cell--sticky-left) {\n    border-left: 2px solid black;\n  }\n  .kol-table__cell-actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection {\n    position: relative;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: "";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}',KolTableStateless=class{constructor(n){registerInstance(this,n)}render(){return h(KolTableStatelessWcTag,{key:"c4704e32586768b290987004a05da52508677e34",_data:this._data,_dataFoot:this._dataFoot,_fixedCols:this._fixedCols,_headerCells:this._headerCells,_label:this._label,_on:this._on,_selection:this._selection,_hasSettingsMenu:this._hasSettingsMenu})}};KolTableStateless.style={default:defaultStyleCss};export{KolTableStateless as kol_table_stateless};

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

@@ -1 +1 @@
-{"version":3,"file":"kol-table-stateless.entry.js","sources":["src/components/table-stateless/style.scss?tag=kol-table-stateless&mode=default&encapsulation=shadow","src/components/table-stateless/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../@shared/kol-table-stateless-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../host-display-block' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n\t@include kol-table-stateless-styles;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\nimport { KolTableStatelessWcTag } from '../../core/component-names';\nimport type {\n\tFixedColsPropType,\n\tHasSettingsMenuPropType,\n\tTableCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableSelectionPropType,\n\tTableStatelessProps,\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 fixed number of columns from start and end of the table\n\t */\n\t@Prop() public _fixedCols?: FixedColsPropType;\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 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\t/**\n\t * Enables the settings menu if true (default: false).\n\t */\n\t@Prop() public _hasSettingsMenu?: HasSettingsMenuPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatelessWcTag\n\t\t\t\t_data={this._data}\n\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t_fixedCols={this._fixedCols}\n\t\t\t\t_headerCells={this._headerCells}\n\t\t\t\t_label={this._label}\n\t\t\t\t_on={this._on}\n\t\t\t\t_selection={this._selection}\n\t\t\t\t_hasSettingsMenu={this._hasSettingsMenu}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,8kkBAA8kkB;;MCqBzlkB,iBAAiB,GAAA,MAAA;;;;IAyCtB,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,sBAAsB,EACtB,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACtC,CAAA;;;;;;;;;"}
+{"version":3,"file":"kol-table-stateless.entry.js","sources":["src/components/table-stateless/style.scss?tag=kol-table-stateless&mode=default&encapsulation=shadow","src/components/table-stateless/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/alert.mixin' as *;\n@use '../@shared/button.mixin' as *;\n@use '../@shared/popover-button.mixin' as *;\n@use '../@shared/table-stateless.mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../host-display-block' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n\t@include kol-table-stateless-styles;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\nimport { KolTableStatelessWcTag } from '../../core/component-names';\nimport type {\n\tFixedColsPropType,\n\tHasSettingsMenuPropType,\n\tTableCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableSelectionPropType,\n\tTableStatelessProps,\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 fixed number of columns from start and end of the table\n\t */\n\t@Prop() public _fixedCols?: FixedColsPropType;\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 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\t/**\n\t * Enables the settings menu if true (default: false).\n\t */\n\t@Prop() public _hasSettingsMenu?: HasSettingsMenuPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatelessWcTag\n\t\t\t\t_data={this._data}\n\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t_fixedCols={this._fixedCols}\n\t\t\t\t_headerCells={this._headerCells}\n\t\t\t\t_label={this._label}\n\t\t\t\t_on={this._on}\n\t\t\t\t_selection={this._selection}\n\t\t\t\t_hasSettingsMenu={this._hasSettingsMenu}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,kukBAAkukB;;MCqB7ukB,iBAAiB,GAAA,MAAA;;;;IAyCtB,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,sBAAsB,EACtB,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACtC,CAAA;;;;;;;;;"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,g as getElement}from"./index-Cgf1FZ14.js";import{b as watchValidator,e as watchBoolean,k as devHint,s as setState,N as watchNumber,G as watchJsonArrayString,H as uiUxHintMillerscheZahl,Q as koliBriQuerySelector}from"./common-BIkdAxr0.js";import{v as validateAlign}from"./align-DDUsWnWP.js";import{v as validateLabel}from"./label-C18ud7Yt.js";import{c as KolButtonWcTag}from"./component-names-BQrMLr68.js";import{t as translate}from"./i18n-DvMeCREp.js";import{K as KeyboardKey}from"./keyboard-DNd73LVa.js";import{c as clsx}from"./clsx-COFh-Vc8.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-DHTi_wtD.js";import"./i18n-B0tfVPMa.js";const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(e,t)=>{watchValidator(e,"_behavior",e=>"string"==typeof e&&tabBehaviorPropTypeOptions.includes(e),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),t)},validateHasCreateButton=(e,t)=>{watchBoolean(e,"_hasCreateButton",t)},defaultStyleCss='/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1773232431126"); /* IE9*/\n  src: url("kolicons.eot?t=1773232431126#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1773232431126") format("woff2"), url("kolicons.woff?t=1773232431126") format("woff"), url("kolicons.ttf?t=1773232431126") format("truetype"), url("kolicons.svg?t=1773232431126#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-house::before {\n  content: "\\ea10";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea11";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea12";\n}\n\n.kolicon-link::before {\n  content: "\\ea13";\n}\n\n.kolicon-minus::before {\n  content: "\\ea14";\n}\n\n.kolicon-plus::before {\n  content: "\\ea15";\n}\n\n.kolicon-settings::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea18";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea19";\n}\n\n.kolicon-up::before {\n  content: "\\ea1a";\n}\n\n.kolicon-version::before {\n  content: "\\ea1b";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tabs {\n    display: var(--display);\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    order: var(--button-group-order);\n    flex-direction: var(--button-group-flex-direction);\n    flex-wrap: wrap;\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    display: block;\n    border-bottom-style: solid;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}',KolTabs=class{constructor(e){registerInstance(this,e),this.onCreateLabel=`${translate("kol-new")} …`,this.nextPossibleTabIndex=(e,t,n=1)=>{const o=t+n;return o<e.length?e[o]._disabled?this.nextPossibleTabIndex(e,t,n+1):o:t},this.prevPossibleTabIndex=(e,t,n=1)=>{const o=t-n;return o>=0?e[o]._disabled?this.prevPossibleTabIndex(e,t,n+1):o:t},this.onKeyDown=e=>{switch(e.key){case KeyboardKey.ArrowRight:this.goToNextTab(e);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(e);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(e)}},this.onClickSelect=(e,t)=>{this.selectNextTabEvent(e,t)},this.onMouseDown=e=>{e.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=e=>{this.tabPanelHost=e},this._align="top",this._hasCreateButton=!1,this._selected=0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]},this.selectNextNotDisabledTab=(e,t,n=!0,o)=>{if(e>t.length-1&&(e=t.length-1),e<0&&(e=0),Array.isArray(t)&&t[e]&&t[e]._disabled){if(!0===n){if(e<t.length-1)return this.selectNextNotDisabledTab(e+1,t,!0,o||e);e=o||e,n=!1}if(!1===n){if(e>0)return this.selectNextNotDisabledTab(e-1,t,!1,o||e);devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return e},this.syncSelectedAndTabs=(e,t,n,o)=>{let i,a;i="_selected"===o?e:this.state._selected,a="_tabs"===o?e:this.state._tabs,a.length>0&&t.set("_selected",this.selectNextNotDisabledTab(i,a))},this.refreshTabPanels=()=>{var e,t,n,o;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let i=0;i<(null===(e=this.state._tabs)||void 0===e?void 0:e.length);i++){const e=document.createElement("div");e.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),e.setAttribute("id",`tabpanel-${i}`),e.setAttribute("role","tabpanel"),e.setAttribute("hidden",""),e.setAttribute("tabindex","0");const a=document.createElement("slot");a.setAttribute("name",`tabpanel-slot-${i}`),e.appendChild(a),null===(t=this.tabPanelHost)||void 0===t||t.appendChild(e),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(o=this.host)||void 0===o?void 0:o.children[i])&&this.host.children[i].setAttribute("slot",`tabpanel-slot-${i}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach((e,t)=>{t===this.state._selected?e.removeAttribute("hidden"):e.setAttribute("hidden","")})},this.onCreate=e=>{var t,n;e.preventDefault(),null===(n=null===(t=this.state._on)||void 0===t?void 0:t.onCreate)||void 0===n||n.call(t,e),this.host&&dispatchDomEvent(this.host,KolEvent.create)},this.onBlur=()=>{this.currentFocusIndex=void 0}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(e){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}goToPreviousTab(e){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}activateFocusedTab(e){"number"==typeof this.currentFocusIndex&&this.onSelect(e,this.currentFocusIndex)}selectNextTabEvent(e,t,n="activateCompletely"){var o,i;if(this.currentFocusIndex=t,this.focusTabById(t),"activateCompletely"===n){this._selected=t;null===(i=null===(o=this.state._tabs[t]._on)||void 0===o?void 0:o.onSelect)||void 0===i||i.call(o,e,t),this.onSelect(e,t)}}renderButtonGroup(){return h("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map((e,t)=>h(KolButtonWcTag,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===t?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===t?"custom":void 0,_customClass:this.state._selected===t?"selected":"",_ariaControls:`tabpanel-${t}`,_ariaSelected:this.state._selected===t,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${t}`,_role:"tab",_value:t})),this.state._hasCreateButton&&h(KolButtonWcTag,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"kolicon-plus","data-testid":"tabs-create-button"}))}render(){return h("div",{key:"4e58f1f69a3ba972d4a98a25fa4b2a65c78a79ff",ref:e=>{this.tabPanelsElement=e},class:clsx("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),h("div",{key:"b16bba05b5dad4d0144231086488f0f1d7e1daf3",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(e){validateAlign(this,e)}validateBehavior(e){validateTabBehavior(this,e)}validateHasCreateButton(e){validateHasCreateButton(this,e)}validateLabel(e){validateLabel(this,e,{required:!0})}validateOn(e){if("object"==typeof e&&null!==e){const t={};"function"==typeof e.onCreate&&(t.onCreate=e.onCreate),"function"==typeof e.onSelect&&(t.onSelect=e.onSelect),setState(this,"_on",t)}}validateSelected(e){watchNumber(this,"_selected",e,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(e){watchJsonArrayString(this,"_tabs",e=>"object"==typeof e&&null!==e&&"string"==typeof e._label&&e._label.length>0,e,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),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),this.validateHasCreateButton(this._hasCreateButton)}componentDidRender(){this.refreshTabPanels()}focusTabById(e){if(this.tabPanelsElement){const t=koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}onSelect(e,t){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,e,t),this.host&&dispatchDomEvent(this.host,KolEvent.select,t),this.focusTabById(t)}get host(){return getElement(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};KolTabs.style={default:defaultStyleCss};export{KolTabs as kol_tabs};
+import{r as registerInstance,h,g as getElement}from"./index-B8-Psqw5.js";import{b as watchValidator,e as watchBoolean,k as devHint,s as setState,N as watchNumber,G as watchJsonArrayString,H as uiUxHintMillerscheZahl,Q as koliBriQuerySelector}from"./common-BIkdAxr0.js";import{v as validateAlign}from"./align-DDUsWnWP.js";import{v as validateLabel}from"./label-C18ud7Yt.js";import{c as KolButtonWcTag}from"./component-names-C64MXeC1.js";import{t as translate}from"./i18n-DvMeCREp.js";import{K as KeyboardKey}from"./keyboard-DNd73LVa.js";import{c as clsx}from"./clsx-COFh-Vc8.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-DHTi_wtD.js";import"./i18n-B0tfVPMa.js";const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(e,t)=>{watchValidator(e,"_behavior",e=>"string"==typeof e&&tabBehaviorPropTypeOptions.includes(e),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),t)},validateHasCreateButton=(e,t)=>{watchBoolean(e,"_hasCreateButton",t)},defaultStyleCss='/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\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: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-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    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1774433546045"); /* IE9*/\n  src: url("kolicons.eot?t=1774433546045#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1774433546045") format("woff2"), url("kolicons.woff?t=1774433546045") format("woff"), url("kolicons.ttf?t=1774433546045") format("truetype"), url("kolicons.svg?t=1774433546045#kolicons") format("svg"); /* iOS 4.1- */\n}\n[class^=kolicon-], [class*=" kolicon-"] {\n  font-family: "kolicons";\n  font-style: normal;\n  font-weight: 400;\n  line-height: 1em;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.kolicon-alert-error::before {\n  content: "\\ea01";\n}\n\n.kolicon-alert-info::before {\n  content: "\\ea02";\n}\n\n.kolicon-alert-success::before {\n  content: "\\ea03";\n}\n\n.kolicon-alert-warning::before {\n  content: "\\ea04";\n}\n\n.kolicon-check::before {\n  content: "\\ea05";\n}\n\n.kolicon-chevron-double-left::before {\n  content: "\\ea06";\n}\n\n.kolicon-chevron-double-right::before {\n  content: "\\ea07";\n}\n\n.kolicon-chevron-down::before {\n  content: "\\ea08";\n}\n\n.kolicon-chevron-left::before {\n  content: "\\ea09";\n}\n\n.kolicon-chevron-right::before {\n  content: "\\ea0a";\n}\n\n.kolicon-chevron-up::before {\n  content: "\\ea0b";\n}\n\n.kolicon-cogwheel::before {\n  content: "\\ea0c";\n}\n\n.kolicon-cross::before {\n  content: "\\ea0d";\n}\n\n.kolicon-eye-closed::before {\n  content: "\\ea0e";\n}\n\n.kolicon-eye::before {\n  content: "\\ea0f";\n}\n\n.kolicon-house::before {\n  content: "\\ea10";\n}\n\n.kolicon-kolibri::before {\n  content: "\\ea11";\n}\n\n.kolicon-link-external::before {\n  content: "\\ea12";\n}\n\n.kolicon-link::before {\n  content: "\\ea13";\n}\n\n.kolicon-minus::before {\n  content: "\\ea14";\n}\n\n.kolicon-plus::before {\n  content: "\\ea15";\n}\n\n.kolicon-settings::before {\n  content: "\\ea16";\n}\n\n.kolicon-sort-asc::before {\n  content: "\\ea17";\n}\n\n.kolicon-sort-desc::before {\n  content: "\\ea18";\n}\n\n.kolicon-sort-neutral::before {\n  content: "\\ea19";\n}\n\n.kolicon-up::before {\n  content: "\\ea1a";\n}\n\n.kolicon-version::before {\n  content: "\\ea1b";\n}\n\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tabs {\n    display: var(--display);\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    order: var(--button-group-order);\n    flex-direction: var(--button-group-flex-direction);\n    flex-wrap: wrap;\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    display: block;\n    border-bottom-style: solid;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}',KolTabs=class{constructor(e){registerInstance(this,e),this.onCreateLabel=`${translate("kol-new")} …`,this.nextPossibleTabIndex=(e,t,n=1)=>{const o=t+n;return o<e.length?e[o]._disabled?this.nextPossibleTabIndex(e,t,n+1):o:t},this.prevPossibleTabIndex=(e,t,n=1)=>{const o=t-n;return o>=0?e[o]._disabled?this.prevPossibleTabIndex(e,t,n+1):o:t},this.onKeyDown=e=>{switch(e.key){case KeyboardKey.ArrowRight:this.goToNextTab(e);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(e);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(e)}},this.onClickSelect=(e,t)=>{this.selectNextTabEvent(e,t)},this.onMouseDown=e=>{e.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=e=>{this.tabPanelHost=e},this._align="top",this._hasCreateButton=!1,this._selected=0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]},this.selectNextNotDisabledTab=(e,t,n=!0,o)=>{if(e>t.length-1&&(e=t.length-1),e<0&&(e=0),Array.isArray(t)&&t[e]&&t[e]._disabled){if(!0===n){if(e<t.length-1)return this.selectNextNotDisabledTab(e+1,t,!0,o||e);e=o||e,n=!1}if(!1===n){if(e>0)return this.selectNextNotDisabledTab(e-1,t,!1,o||e);devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return e},this.syncSelectedAndTabs=(e,t,n,o)=>{let i,a;i="_selected"===o?e:this.state._selected,a="_tabs"===o?e:this.state._tabs,a.length>0&&t.set("_selected",this.selectNextNotDisabledTab(i,a))},this.refreshTabPanels=()=>{var e,t,n,o;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let i=0;i<(null===(e=this.state._tabs)||void 0===e?void 0:e.length);i++){const e=document.createElement("div");e.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),e.setAttribute("id",`tabpanel-${i}`),e.setAttribute("role","tabpanel"),e.setAttribute("hidden",""),e.setAttribute("tabindex","0");const a=document.createElement("slot");a.setAttribute("name",`tabpanel-slot-${i}`),e.appendChild(a),null===(t=this.tabPanelHost)||void 0===t||t.appendChild(e),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(o=this.host)||void 0===o?void 0:o.children[i])&&this.host.children[i].setAttribute("slot",`tabpanel-slot-${i}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach((e,t)=>{t===this.state._selected?e.removeAttribute("hidden"):e.setAttribute("hidden","")})},this.onCreate=e=>{var t,n;e.preventDefault(),null===(n=null===(t=this.state._on)||void 0===t?void 0:t.onCreate)||void 0===n||n.call(t,e),this.host&&dispatchDomEvent(this.host,KolEvent.create)},this.onBlur=()=>{this.currentFocusIndex=void 0}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(e){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}goToPreviousTab(e){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}activateFocusedTab(e){"number"==typeof this.currentFocusIndex&&this.onSelect(e,this.currentFocusIndex)}selectNextTabEvent(e,t,n="activateCompletely"){var o,i;if(this.currentFocusIndex=t,this.focusTabById(t),"activateCompletely"===n){this._selected=t;null===(i=null===(o=this.state._tabs[t]._on)||void 0===o?void 0:o.onSelect)||void 0===i||i.call(o,e,t),this.onSelect(e,t)}}renderButtonGroup(){return h("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map((e,t)=>h(KolButtonWcTag,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===t?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===t?"custom":void 0,_customClass:this.state._selected===t?"selected":"",_ariaControls:`tabpanel-${t}`,_ariaSelected:this.state._selected===t,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${t}`,_role:"tab",_value:t})),this.state._hasCreateButton&&h(KolButtonWcTag,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"kolicon-plus","data-testid":"tabs-create-button"}))}render(){return h("div",{key:"de2ee63277567781632c01205803f1b2af7466bb",ref:e=>{this.tabPanelsElement=e},class:clsx("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),h("div",{key:"b522ec136bde8ce9bb80364a7783713859ce57f9",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(e){validateAlign(this,e)}validateBehavior(e){validateTabBehavior(this,e)}validateHasCreateButton(e){validateHasCreateButton(this,e)}validateLabel(e){validateLabel(this,e,{required:!0})}validateOn(e){if("object"==typeof e&&null!==e){const t={};"function"==typeof e.onCreate&&(t.onCreate=e.onCreate),"function"==typeof e.onSelect&&(t.onSelect=e.onSelect),setState(this,"_on",t)}}validateSelected(e){watchNumber(this,"_selected",e,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(e){watchJsonArrayString(this,"_tabs",e=>"object"==typeof e&&null!==e&&"string"==typeof e._label&&e._label.length>0,e,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),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),this.validateHasCreateButton(this._hasCreateButton)}componentDidRender(){this.refreshTabPanels()}focusTabById(e){if(this.tabPanelsElement){const t=koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}onSelect(e,t){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,e,t),this.host&&dispatchDomEvent(this.host,KolEvent.select,t),this.focusTabById(t)}get host(){return getElement(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};KolTabs.style={default:defaultStyleCss};export{KolTabs as kol_tabs};

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

@@ -1 +1 @@
-{"version":3,"file":"kol-tabs.entry.js","sources":["src/schema/props/tab-behavior.ts","src/schema/props/has-create-button.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","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasCreateButtonPropType = boolean;\n\n/**\n * Defines whether the element has a create button.\n */\nexport type PropHasCreateButton = {\n\thasCreateButton: HasCreateButtonPropType;\n};\n\n/* validator */\nexport const validateHasCreateButton = (component: Generic.Element.Component, value?: HasCreateButtonPropType): void => {\n\twatchBoolean(component, '_hasCreateButton', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/kol-icon-mixin' as *;\n\n@layer kol-component {\n\t@include kol-icon-styles();\n\t.kol-tabs {\n\t\tdisplay: var(--display);\n\t\tgrid-template-columns: var(--grid-template-columns);\n\t\tgrid-template-rows: var(--grid-template-rows);\n\n\t\t&--align-right {\n\t\t\t--display: grid;\n\t\t\t--grid-template-columns: 1fr auto;\n\n\t\t\t--button-group-flex-direction: column;\n\t\t\t--button-group-order: 2;\n\t\t}\n\n\t\t&--align-left {\n\t\t\t--display: grid;\n\t\t\t--grid-template-columns: auto 1fr;\n\n\t\t\t--button-group-flex-direction: column;\n\t\t\t--button-group-order: 0;\n\t\t}\n\n\t\t&--align-bottom {\n\t\t\t--display: grid;\n\t\t\t--grid-template-rows: 1fr auto;\n\n\t\t\t--button-group-order: 2;\n\t\t}\n\n\t\t&__tabs-align-top {\n\t\t\t--display: grid;\n\t\t\t--grid-template-rows: auto 1fr;\n\n\t\t\t--button-group-order: 0;\n\t\t}\n\n\t\t&__button-group {\n\t\t\tdisplay: flex;\n\t\t\torder: var(--button-group-order);\n\n\t\t\tflex-direction: var(--button-group-flex-direction);\n\t\t\tflex-wrap: wrap;\n\n\t\t\t.kol-button {\n\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\tdisplay: block;\n\t\t\t\tborder-bottom-style: solid;\n\t\t\t}\n\t\t}\n\n\t\t&__panel {\n\t\t\theight: 100%;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport 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\tkoliBriQuerySelector,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\tvalidateTabBehavior,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '../../schema';\n\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport { KeyboardKey } from '../../schema/enums';\nimport type { HasCreateButtonPropType } from '../../schema/props/has-create-button';\nimport { validateHasCreateButton } from '../../schema/props/has-create-button';\nimport clsx from '../../utils/clsx';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\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 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\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\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=\"kol-tabs__button-group\" 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' : ''}\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.state._hasCreateButton && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-tabs__button-create\"\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\t_icons=\"kolicon-plus\"\n\t\t\t\t\t\tdata-testid=\"tabs-create-button\"\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<div\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t}}\n\t\t\t\tclass={clsx('kol-tabs', `kol-tabs--align-${this.state._align}`)}\n\t\t\t>\n\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t<div class=\"kol-tabs__content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visual orientation of the component.\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 whether the element has a create button.\n\t */\n\t@Prop() public _hasCreateButton?: HasCreateButtonPropType = false;\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('_hasCreateButton')\n\tpublic validateHasCreateButton(value?: HasCreateButtonPropType) {\n\t\tvalidateHasCreateButton(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\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function') {\n\t\t\t\tcallbacks.onCreate = value.onCreate;\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\tafterPatch: this.refreshTabPanels,\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\tthis.validateHasCreateButton(this._hasCreateButton);\n\t}\n\n\tprivate refreshTabPanels = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\t// Clear existing panels\n\t\twhile (this.tabPanelHost.firstChild) {\n\t\t\tthis.tabPanelHost.removeChild(this.tabPanelHost.firstChild);\n\t\t}\n\t\tfor (let i = 0; i < this.state._tabs?.length; i++) {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\tdiv.setAttribute('hidden', '');\n\t\t\tdiv.setAttribute('tabindex', '0');\n\t\t\tconst slot = document.createElement('slot');\n\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\tdiv.appendChild(slot);\n\t\t\tthis.tabPanelHost?.appendChild(div);\n\n\t\t\tif (typeof HTMLCollection !== 'undefined' && this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t}\n\t\t}\n\t\tthis.updateVisiblePanel();\n\t};\n\n\tprivate updateVisiblePanel = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\tArray.from(this.tabPanelHost.children).forEach((child, i) => {\n\t\t\tif (i === this.state._selected) {\n\t\t\t\tchild.removeAttribute('hidden');\n\t\t\t} else {\n\t\t\t\tchild.setAttribute('hidden', '');\n\t\t\t}\n\t\t});\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.refreshTabPanels();\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\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.select, index);\n\t\t}\n\n\t\tthis.focusTabById(index);\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tthis.state._on?.onCreate?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.create);\n\t\t}\n\t};\n\n\tprivate onBlur = () => {\n\t\tthis.currentFocusIndex = undefined;\n\t};\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-tabs.entry.js","sources":["src/schema/props/tab-behavior.ts","src/schema/props/has-create-button.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","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasCreateButtonPropType = boolean;\n\n/**\n * Defines whether the element has a create button.\n */\nexport type PropHasCreateButton = {\n\thasCreateButton: HasCreateButtonPropType;\n};\n\n/* validator */\nexport const validateHasCreateButton = (component: Generic.Element.Component, value?: HasCreateButtonPropType): void => {\n\twatchBoolean(component, '_hasCreateButton', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../@shared/global' as *;\n@use '../host-display-block' as *;\n@use '../tooltip/style.scss' as *;\n@use '../@shared/icon.mixin' as *;\n\n@layer kol-component {\n\t@include kol-icon-styles();\n\t.kol-tabs {\n\t\tdisplay: var(--display);\n\t\tgrid-template-columns: var(--grid-template-columns);\n\t\tgrid-template-rows: var(--grid-template-rows);\n\n\t\t&--align-right {\n\t\t\t--display: grid;\n\t\t\t--grid-template-columns: 1fr auto;\n\n\t\t\t--button-group-flex-direction: column;\n\t\t\t--button-group-order: 2;\n\t\t}\n\n\t\t&--align-left {\n\t\t\t--display: grid;\n\t\t\t--grid-template-columns: auto 1fr;\n\n\t\t\t--button-group-flex-direction: column;\n\t\t\t--button-group-order: 0;\n\t\t}\n\n\t\t&--align-bottom {\n\t\t\t--display: grid;\n\t\t\t--grid-template-rows: 1fr auto;\n\n\t\t\t--button-group-order: 2;\n\t\t}\n\n\t\t&__tabs-align-top {\n\t\t\t--display: grid;\n\t\t\t--grid-template-rows: auto 1fr;\n\n\t\t\t--button-group-order: 0;\n\t\t}\n\n\t\t&__button-group {\n\t\t\tdisplay: flex;\n\t\t\torder: var(--button-group-order);\n\n\t\t\tflex-direction: var(--button-group-flex-direction);\n\t\t\tflex-wrap: wrap;\n\n\t\t\t.kol-button {\n\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\tdisplay: block;\n\t\t\t\tborder-bottom-style: solid;\n\t\t\t}\n\t\t}\n\n\t\t&__panel {\n\t\t\theight: 100%;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport 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\tkoliBriQuerySelector,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\tvalidateTabBehavior,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '../../schema';\n\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport { KeyboardKey } from '../../schema/enums';\nimport type { HasCreateButtonPropType } from '../../schema/props/has-create-button';\nimport { validateHasCreateButton } from '../../schema/props/has-create-button';\nimport clsx from '../../utils/clsx';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n/**\n * The **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users.\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 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\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\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=\"kol-tabs__button-group\" 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' : ''}\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.state._hasCreateButton && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-tabs__button-create\"\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\t_icons=\"kolicon-plus\"\n\t\t\t\t\t\tdata-testid=\"tabs-create-button\"\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<div\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t}}\n\t\t\t\tclass={clsx('kol-tabs', `kol-tabs--align-${this.state._align}`)}\n\t\t\t>\n\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t<div class=\"kol-tabs__content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visual orientation of the component.\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 whether the element has a create button.\n\t */\n\t@Prop() public _hasCreateButton?: HasCreateButtonPropType = false;\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('_hasCreateButton')\n\tpublic validateHasCreateButton(value?: HasCreateButtonPropType) {\n\t\tvalidateHasCreateButton(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\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function') {\n\t\t\t\tcallbacks.onCreate = value.onCreate;\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\tafterPatch: this.refreshTabPanels,\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\tthis.validateHasCreateButton(this._hasCreateButton);\n\t}\n\n\tprivate refreshTabPanels = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\t// Clear existing panels\n\t\twhile (this.tabPanelHost.firstChild) {\n\t\t\tthis.tabPanelHost.removeChild(this.tabPanelHost.firstChild);\n\t\t}\n\t\tfor (let i = 0; i < this.state._tabs?.length; i++) {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\tdiv.setAttribute('hidden', '');\n\t\t\tdiv.setAttribute('tabindex', '0');\n\t\t\tconst slot = document.createElement('slot');\n\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\tdiv.appendChild(slot);\n\t\t\tthis.tabPanelHost?.appendChild(div);\n\n\t\t\tif (typeof HTMLCollection !== 'undefined' && this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t}\n\t\t}\n\t\tthis.updateVisiblePanel();\n\t};\n\n\tprivate updateVisiblePanel = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\tArray.from(this.tabPanelHost.children).forEach((child, i) => {\n\t\t\tif (i === this.state._selected) {\n\t\t\t\tchild.removeAttribute('hidden');\n\t\t\t} else {\n\t\t\t\tchild.setAttribute('hidden', '');\n\t\t\t}\n\t\t});\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.refreshTabPanels();\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\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.select, index);\n\t\t}\n\n\t\tthis.focusTabById(index);\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tthis.state._on?.onCreate?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.create);\n\t\t}\n\t};\n\n\tprivate onBlur = () => {\n\t\tthis.currentFocusIndex = undefined;\n\t};\n}\n"],"names":[],"mappings":"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"}