@public-ui/components 4.3.0-rc.6 → 4.3.0-rc.7

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

@@ -1,5 +1,5 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,F as i,g as l}from"./index-C5dCp7IP.js";import{a as s}from"./tslib.es6-QNbPBOk5.js";import{b as n,c as o,t as a}from"./component-names-Dy77vq43.js";import{t as r}from"./i18n-BsXYYo8j.js";import{I as c}from"./component-CCQEFb4H.js";import{T as d}from"./component-8mzKPFWl.js";import{P as h,o as f,p as u,b,L as v,s as _}from"./common-D5l8QiaY.js";import{c as p,v as k,a as y,b as m,f as g,d as S}from"./table-selection-BNnfuo03.js";import{v as j}from"./label-Ftw1VCQG.js";import{v as w,c as C}from"./variant-class-name-DFWOlDkF.js";import{C as $}from"./keyboard-DNd73LVa.js";import{c as O}from"./clsx-COFh-Vc8.js";import{n as x}from"./dev.utils-BXf9h7MR.js";import{d as A,K as D}from"./events-BhfZTW2e.js";import{M as F,e as H,U as T,f as L,b as M,d as E,S as K,h as z}from"./_Uint8Array-kJHDjtoP.js";import{S as B,a as W,i as P}from"./isArray-CcrBs4JM.js";import"./i18n-CoO4-0na.js";import"./bem-registry-Coj2Hlbo.js";import"./component-BG44r5Mq.js";var R="__lodash_hash_undefined__";function N(t){this.__data__.set(t,R);return this}function I(t){return this.__data__.has(t)}function V(t){var e=-1,i=t==null?0:t.length;this.__data__=new F;while(++e<i){this.add(t[e])}}V.prototype.add=V.prototype.push=N;V.prototype.has=I;function U(t,e){var i=-1,l=t==null?0:t.length;while(++i<l){if(e(t[i],i,t)){return true}}return false}function Q(t,e){return t.has(e)}var q=1,Y=2;function G(t,e,i,l,s,n){var o=i&q,a=t.length,r=e.length;if(a!=r&&!(o&&r>a)){return false}var c=n.get(t);var d=n.get(e);if(c&&d){return c==e&&d==t}var h=-1,f=true,u=i&Y?new V:undefined;n.set(t,e);n.set(e,t);while(++h<a){var b=t[h],v=e[h];if(l){var _=o?l(v,b,h,e,t,n):l(b,v,h,t,e,n)}if(_!==undefined){if(_){continue}f=false;break}if(u){if(!U(e,(function(t,e){if(!Q(u,e)&&(b===t||s(b,t,i,l,n))){return u.push(e)}}))){f=false;break}}else if(!(b===v||s(b,v,i,l,n))){f=false;break}}n["delete"](t);n["delete"](e);return f}function J(t){var e=-1,i=Array(t.size);t.forEach((function(t,l){i[++e]=[l,t]}));return i}function X(t){var e=-1,i=Array(t.size);t.forEach((function(t){i[++e]=t}));return i}var Z=1,tt=2;var et="[object Boolean]",it="[object Date]",lt="[object Error]",st="[object Map]",nt="[object Number]",ot="[object RegExp]",at="[object Set]",rt="[object String]",ct="[object Symbol]";var dt="[object ArrayBuffer]",ht="[object DataView]";var ft=B?B.prototype:undefined,ut=ft?ft.valueOf:undefined;function bt(t,e,i,l,s,n,o){switch(i){case ht:if(t.byteLength!=e.byteLength||t.byteOffset!=e.byteOffset){return false}t=t.buffer;e=e.buffer;case dt:if(t.byteLength!=e.byteLength||!n(new T(t),new T(e))){return false}return true;case et:case it:case nt:return H(+t,+e);case lt:return t.name==e.name&&t.message==e.message;case ot:case rt:return t==e+"";case st:var a=J;case at:var r=l&Z;a||(a=X);if(t.size!=e.size&&!r){return false}var c=o.get(t);if(c){return c==e}l|=tt;o.set(t,e);var d=G(a(t),a(e),l,s,n,o);o["delete"](t);return d;case ct:if(ut){return ut.call(t)==ut.call(e)}}return false}var vt=1;var _t=Object.prototype;var pt=_t.hasOwnProperty;function kt(t,e,i,l,s,n){var o=i&vt,a=L(t),r=a.length,c=L(e),d=c.length;if(r!=d&&!o){return false}var h=r;while(h--){var f=a[h];if(!(o?f in e:pt.call(e,f))){return false}}var u=n.get(t);var b=n.get(e);if(u&&b){return u==e&&b==t}var v=true;n.set(t,e);n.set(e,t);var _=o;while(++h<r){f=a[h];var p=t[f],k=e[f];if(l){var y=o?l(k,p,f,e,t,n):l(p,k,f,t,e,n)}if(!(y===undefined?p===k||s(p,k,i,l,n):y)){v=false;break}_||(_=f=="constructor")}if(v&&!_){var m=t.constructor,g=e.constructor;if(m!=g&&("constructor"in t&&"constructor"in e)&&!(typeof m=="function"&&m instanceof m&&typeof g=="function"&&g instanceof g)){v=false}}n["delete"](t);n["delete"](e);return v}var yt=1;var mt="[object Arguments]",gt="[object Array]",St="[object Object]";var jt=Object.prototype;var wt=jt.hasOwnProperty;function Ct(t,e,i,l,s,n){var o=W(t),a=W(e),r=o?gt:M(t),c=a?gt:M(e);r=r==mt?St:r;c=c==mt?St:c;var d=r==St,h=c==St,f=r==c;if(f&&E(t)){if(!E(e)){return false}o=true;d=false}if(f&&!d){n||(n=new K);return o||z(t)?G(t,e,i,l,s,n):bt(t,e,r,i,l,s,n)}if(!(i&yt)){var u=d&&wt.call(t,"__wrapped__"),b=h&&wt.call(e,"__wrapped__");if(u||b){var v=u?t.value():t,_=b?e.value():e;n||(n=new K);return s(v,_,i,l,n)}}if(!f){return false}n||(n=new K);return kt(t,e,i,l,s,n)}function $t(t,e,i,l,s){if(t===e){return true}if(t==null||e==null||!P(t)&&!P(e)){return t!==t&&e!==e}return Ct(t,e,i,l,$t,s)}function Ot(t,e){return $t(t,e)}const xt=t=>Array.isArray(t)&&t.every((t=>Array.isArray(t)));const At=(t,e)=>{h(e,(()=>{f(e,(()=>{try{e=u(e)}catch(t){}b(t,"_headerCells",(t=>{if(typeof t!=="object"||t===null)return false;const e=t.horizontal;const i=t.vertical;if(e!==undefined&&!xt(e)||i!==undefined&&!xt(i)){return false}const l=[];for(const t of e!==null&&e!==void 0?e:[]){l.push(...t)}for(const t of i!==null&&i!==void 0?i:[]){l.push(...t)}return l.every((t=>t.width===undefined||typeof t.width==="number"))}),new Set(["TableHeaderCellsPropType"]),e)}))}))};const Dt=150;const Ft=class{constructor(i){t(this,i);this.translateNoEntries=r("kol-no-entries");this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_hasSettingsMenu:false};this.horizontal=true;this.cellsToRenderTimeouts=new Map;this.dataToKeyMap=new Map;this.selectedKeysStringSet=new Set;this.disabledKeysStringSet=new Set;this.checkboxRefs=[];this.translateSort=r("kol-sort");this.translateSortOrder=r("kol-table-sort-order");this.maxCols=0;this.fixedOffsets=[];this.settingsChangedCounter=0;this.tableDivElementHasScrollbar=false;this.stickyColsDisabled=false;this.renderTableRow=(t,i,l,s=false)=>{var n,o;let a=String(i);if(this.horizontal&&((n=t[0])===null||n===void 0?void 0:n.data)){a=(o=this.getDataKey(t[0].data))!==null&&o!==void 0?o:a}return e("tr",{class:O("kol-table__row",{"kol-table__row--body":!s,"kol-table__row--footer":s}),key:`row-${a}`},this.renderSelectionCell(t,i),t.map(((t,e)=>this.renderTableCell(t,i,e,l))))};this.renderTableCell=(t,i,l,s)=>{if(t.visible===false){return""}let n=`${i}-${l}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);n=e?`${e}-${this.horizontal?l:i}`:n}if(t.headerCell){return this.renderHeadingCell(t,i,l,s)}else{const i=typeof t.render!=="function"&&t.label===this.translateNoEntries;const s=this.getActionColumnHeader(l);const o=Boolean(s&&t.data);const a=this.isFixedCol(l);const r=a==="left"?this.getOffsetString(t.colIndex,true):undefined;const c=a==="right"?this.getOffsetString(t.colIndex):undefined;const d=typeof t.render==="function";return e("td",{key:`cell-${n}-${this.settingsChangedCounter}`,class:O("kol-table__cell kol-table__cell--body",t.textAlign&&`kol-table__cell--align-${t.textAlign}`,o&&"kol-table__cell--actions",a&&`kol-table__cell--sticky-${a}`),"aria-atomic":i?"false":undefined,"aria-live":i?"polite":undefined,"aria-relevant":i?"text":undefined,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,left:r,right:c},ref:d?e=>{this.cellRender(t,e)}:undefined},o&&s&&t.data?this.renderActionItems(s,t.data,n):!d?t.label:"")}};this.renderActionItems=(t,i,l)=>{const a=t.actions(i);return e("div",{class:"kol-table__cell-actions"},a.map(((t,i)=>{if(t.type==="button"){const o=s(t,[]);return e(n,Object.assign({key:`action-${l}-${i}`},o,{_variant:o._variant}))}else if(t.type==="link"){const n=s(t,[]);return e(o,Object.assign({key:`action-${l}-${i}`},n))}return null})))}}onExternalLabelElementsChange(t){this.syncTableLabel(t)}validateAriaLabelledby(){}syncTableLabel(t){if(!this.tableRef)return;if("ariaLabelledByElements"in this.tableRef){if(t===null||t===void 0?void 0:t.length){this.tableRef.ariaLabelledByElements=t}v.debug([this.tableRef,!!(t===null||t===void 0?void 0:t.length),t,this.tableRef.ariaLabelledByElements])}}validateHasSettingsMenu(t){p(this,t)}validateData(t){k(this,t,{beforePatch:t=>{this.updateDataToKeyMap(t)}})}validateDataFoot(t){y(this,t)}validateFixedCols(t){m(this,t);this.checkAndUpdateStickyState()}validateHeaderCells(t){At(this,t);if(!Ot(this.previousHeaderCells,this.state._headerCells)){this.initializeHeaderCellSettings()}this.previousHeaderCells=this.state._headerCells}validateLabel(t){j(this,t,{required:true})}validateOn(t){g(this,t)}validateSelection(t){S(this,t);this.checkAndUpdateStickyState()}validateVariantClassName(t){w(this,t)}handleKeyDown(t){var e;if(t.key==="ArrowUp"||t.key==="ArrowDown"){const i=(e=this.tableDivElement)===null||e===void 0?void 0:e.querySelector(":focus");let l=this.checkboxRefs.indexOf(i);if(l>-1){t.preventDefault();if(t.key==="ArrowDown"){l=(l+1)%this.checkboxRefs.length;this.checkboxRefs[l].focus()}else if(t.key==="ArrowUp"){t.preventDefault();l=(l+this.checkboxRefs.length-1)%this.checkboxRefs.length;this.checkboxRefs[l].focus()}}}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){if(this.tableDivElement&&ResizeObserver){this.tableDivElementResizeObserver=new ResizeObserver(this.handleResize.bind(this));this.tableDivElementResizeObserver.observe(this.tableDivElement)}this.checkAndUpdateStickyState()}handleSettingsChange(t){var e;const i=Object.assign(Object.assign({},this.state._headerCells),{horizontal:t.detail});_(this,"_headerCells",i);this.settingsChangedCounter++;if(typeof((e=this.state._on)===null||e===void 0?void 0:e[$.onChangeHeaderCells])==="function"){this.state._on[$.onChangeHeaderCells](t,i)}}disconnectedCallback(){var t;(t=this.tableDivElementResizeObserver)===null||t===void 0?void 0:t.disconnect();clearTimeout(this.resizeDebounceTimeout)}handleResize(){this.checkDivElementScrollbar();clearTimeout(this.resizeDebounceTimeout);this.resizeDebounceTimeout=setTimeout((()=>{this.checkAndUpdateStickyState()}),Dt)}checkDivElementScrollbar(){if(this.tableDivElement){this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth}}calculateFixedColsWidth(){var t,e,i,l,s,n;if(!this._fixedCols)return 0;const o=this.getPrimaryHeaders(this.state._headerCells);let a=0;for(let i=0;i<this._fixedCols[0]&&i<o.length;i++){a+=(e=(t=o[i])===null||t===void 0?void 0:t.width)!==null&&e!==void 0?e:0}const r=this.maxCols-this._fixedCols[1];for(let t=r;t<this.maxCols&&t<o.length;t++){a+=(l=(i=o[t])===null||i===void 0?void 0:i.width)!==null&&l!==void 0?l:0}if(this.state._selection){const t=(s=this.tableDivElement)===null||s===void 0?void 0:s.querySelector(".kol-table__cell--selection");a+=(n=t===null||t===void 0?void 0:t.offsetWidth)!==null&&n!==void 0?n:0}return a}checkAndUpdateStickyState(){if(!this.tableDivElement||!this._fixedCols){this.stickyColsDisabled=false;return}const t=this.tableDivElement.clientWidth;const e=this.calculateFixedColsWidth();this.stickyColsDisabled=e>0&&e>=t}updateDataToKeyMap(t){const e=new Set(t);t.forEach((t=>{if(!this.dataToKeyMap.has(t)){this.dataToKeyMap.set(t,x())}}));this.dataToKeyMap.forEach(((t,i)=>{if(!e.has(i)){this.dataToKeyMap.delete(i)}}))}getDataKey(t){return this.dataToKeyMap.get(t)}getActionColumnHeader(t){const e=this.horizontal?this.state._headerCells.horizontal:this.state._headerCells.vertical;if(!e||e.length===0)return undefined;const i=this.getPrimaryHeaders(this.state._headerCells);const l=i[t];if(l&&l.type==="action"){return l}return undefined}cellRender(t,e){if(e){clearTimeout(this.cellsToRenderTimeouts.get(e));this.cellsToRenderTimeouts.set(e,setTimeout((()=>{if(typeof t.render==="function"){const i=t.render(e,t,t.data,this.state._data);if(typeof i==="string"){e.textContent=i}}})))}}getNumberOfCols(t,e){let i=0;t.forEach((t=>{let e=0;if(Array.isArray(t)){t.forEach((t=>{var i;e+=(i=t.colSpan)!==null&&i!==void 0?i:1}))}if(i<e){i=e}}));if(i===0){i=e.length}return i}getNumberOfRows(t,e){var i;let l=0;t.forEach((t=>{let e=0;if(Array.isArray(t)){t.forEach((t=>{var i;e+=(i=t.rowSpan)!==null&&i!==void 0?i:1}))}if(l<e){l=e}}));if(l===0){l=e.length}else{l-=((i=this.state._dataFoot)===null||i===void 0?void 0:i.length)||0}return l}getThePrimaryHeadersWithKeyOrRenderFunction(t){const e=[];t.forEach((t=>{t.forEach((t=>{if(typeof t.key==="string"||typeof t.render==="function"){e.push(t)}}))}));return e}getPrimaryHeaders(t){var e,i,l;if(((e=this.primaryHeadersCache)===null||e===void 0?void 0:e.headers)===t){this.horizontal=this.primaryHeadersCache.horizontal;return this.primaryHeadersCache.result}let s=this.getThePrimaryHeadersWithKeyOrRenderFunction((i=t.horizontal)!==null&&i!==void 0?i:[]);this.horizontal=true;if(s.length===0){s=this.getThePrimaryHeadersWithKeyOrRenderFunction((l=t.vertical)!==null&&l!==void 0?l:[]);if(s.length>0){this.horizontal=false}}this.primaryHeadersCache={headers:t,result:s,horizontal:this.horizontal};return s}createDataField(t,e,i){var l,s,n,o,a,r,c,d;e.horizontal=Array.isArray(e===null||e===void 0?void 0:e.horizontal)?e.horizontal:[];e.vertical=Array.isArray(e===null||e===void 0?void 0:e.vertical)?e.vertical:[];this.maxCols=this.getNumberOfCols(e.horizontal,t);const h=this.getPrimaryHeaders(e);let f=this.getNumberOfRows(e.vertical,t);let u=0;if(i){u=f;f+=((l=this.state._dataFoot)===null||l===void 0?void 0:l.length)||0}const b=[];const v=[];const _=[];e.vertical.forEach(((t,e)=>{v[e]=0;_[e]=[]}));const p=h;for(let l=u;l<f;l++){const d=[];e.vertical.forEach(((t,e)=>{let i=0;_[e].forEach((t=>i+=t));if(i<=l){const s=t[l-i+v[e]];if(typeof s==="object"){d.push(Object.assign(Object.assign({},s),{headerCell:true,data:{}}));let t=1;if(typeof s.rowSpan==="number"&&s.rowSpan>1){t=s.rowSpan}_[e].push(t);if(typeof s.colSpan==="number"&&s.colSpan>1){for(let i=1;i<s.colSpan;i++){_[e+i].push(t)}}v[e]++}}}));for(let e=0;e<this.maxCols;e++){let h=this.isFixedCol(e);if(h==="left"){if(this.getFixedOffset(e)===undefined){let t=(s=this.fixedOffsets[e-1])!==null&&s!==void 0?s:0;t+=(o=(n=p[e-1])===null||n===void 0?void 0:n.width)!==null&&o!==void 0?o:0;this.fixedOffsets[e]=t}}if(h==="right"){if(this.getFixedOffset(e)===undefined){let t=(a=this.fixedOffsets[e+1])!==null&&a!==void 0?a:0;t+=(c=(r=p[e+1])===null||r===void 0?void 0:r.width)!==null&&c!==void 0?c:0;this.fixedOffsets[e]=t}}if(this.horizontal===true){const s=i&&this.state._dataFoot?this.state._dataFoot[l-u]:t[l];if(typeof p[e]==="object"&&p[e]!==null&&typeof s==="object"&&s!==null&&(typeof p[e].key==="string"||typeof p[e].render==="function")){const t=p[e].key;const i=s[t];d.push(Object.assign(Object.assign({},p[e]),{colIndex:e,colSpan:undefined,rowSpan:undefined,data:s,label:i}))}}else{if(typeof p[l]==="object"&&p[l]!==null&&typeof t[e]==="object"&&t[e]!==null&&(typeof p[l].key==="string"||typeof p[l].render==="function")){const i=p[l].key;const s=t[e][i];d.push(Object.assign(Object.assign({},p[l]),{colIndex:e,colSpan:undefined,rowSpan:undefined,data:t[e],label:s}))}}}b.push(d)}if(t.length===0){let t=this.getVisibleColSpan((d=e.horizontal)===null||d===void 0?void 0:d[0]);let i=0;if(Array.isArray(e.vertical)&&e.vertical.length>0){t-=e.vertical.length;e.vertical[0].forEach((t=>{i+=t.rowSpan||1}))}const l={colSpan:t,label:this.translateNoEntries,render:undefined,rowSpan:Math.max(i,1)};if(b.length===0){b.push([l])}else{b[0].push(l)}}return b}getVisibleColSpan(t){var e;return(e=t===null||t===void 0?void 0:t.reduce(((t,e)=>{if("visible"in e&&e.visible===false){return t}return t+(e.colSpan||1)}),0))!==null&&e!==void 0?e:0}isFixedCol(t){if(!this._fixedCols||t===undefined||this.stickyColsDisabled){return undefined}if(t<this._fixedCols[0]){return"left"}if(t>=this.maxCols-this._fixedCols[1]){return"right"}}getFixedOffset(t){if(!this.tableDivElement||t===undefined){return undefined}if(this.fixedOffsets[t]!==undefined){return this.fixedOffsets[t]}return undefined}getOffsetString(t,e){if(e&&this._selection){return"calc( var(--kol-table-selection-col-width) + "+this.getFixedOffset(t)+"px)"}return this.getFixedOffset(t)+"px"}handleSelectionChangeCallbackAndEvent(t,e){var i;if(typeof((i=this.state._on)===null||i===void 0?void 0:i[$.onSelectionChange])==="function"){this.state._on[$.onSelectionChange](t,e)}if(this.host){A(this.host,D.selectionChange,e)}}initializeHeaderCellSettings(){if(this.state._headerCells&&this.state._headerCells.horizontal&&this.state._headerCells.horizontal.length>0){const t=Object.assign(Object.assign({},this.state._headerCells),{horizontal:this.state._headerCells.horizontal.map((t=>t.map((t=>Object.assign(Object.assign({},t),{visible:typeof t.visible==="boolean"?t.visible:true,hidable:typeof t.hidable==="boolean"?t.hidable:true})))))});_(this,"_headerCells",t)}}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);this.validateVariantClassName(this._variant)}renderSelectionCell(t,i){var l;const s=this.state._selection;if(!s)return"";const n=this.getSelectionKeyPropertyName();const o=(l=t[0])===null||l===void 0?void 0:l.data;if(!o)return"";const a=o[n];const r=s.multiple||s.multiple===undefined;const h=String(a);const f=this.selectedKeysStringSet.has(h);const u=this.disabledKeysStringSet.has(h);const b=s.label(o);const v={name:"selection",checked:f,disabled:u,id:String(a),["aria-label"]:b};return e("td",{key:`tbody-${i}-selection`,class:"kol-table__cell kol-table__cell--selection"},e("div",{class:O("kol-table__selection",{"kol-table__selection--checked":f})},r?e("label",{class:O("kol-table__selection-label",{"kol-table__selection-label--disabled":u})},e(c,{class:"kol-table__selection-icon",icons:`kolicon ${f?"kolicon-check":""}`,label:""}),e("input",Object.assign({class:O("kol-table__selection-input kol-table__selection-input--checkbox"),ref:t=>t&&this.checkboxRefs.push(t)},v,{type:"checkbox",onInput:t=>{const e=(()=>{const t=s===null||s===void 0?void 0:s.selectedKeys;return t===undefined?[]:Array.isArray(t)?t:[t]})();const i=!f?[...e,a]:e.filter((t=>String(t)!==String(a)));this.handleSelectionChangeCallbackAndEvent(t,i!==null&&i!==void 0?i:[])}}))):e("label",{class:"kol-table__selection-label"},e("input",Object.assign({class:O("kol-table__selection-input kol-table__selection-input--radio")},v,{type:"radio",onInput:t=>{this.handleSelectionChangeCallbackAndEvent(t,[a])}}))),e("div",{class:"kol-table__selection-input-tooltip"},e(d,{label:b,badgeText:"",id:`${a}-label`,refFloating:()=>{}}))))}getSelectionKeyPropertyName(){var t,e;return(e=(t=this.state._selection)===null||t===void 0?void 0:t.keyPropertyName)!==null&&e!==void 0?e:"id"}static normalizeKeys(t){return t===undefined?[]:Array.isArray(t)?t:[t]}updateSelectionKeySets(){var t,e;this.selectedKeysStringSet=new Set(Ft.normalizeKeys((t=this.state._selection)===null||t===void 0?void 0:t.selectedKeys).map(String));this.disabledKeysStringSet=new Set(Ft.normalizeKeys((e=this.state._selection)===null||e===void 0?void 0:e.disabledKeys).map(String))}getDataWithSelectionEnabled(){const t=this.getSelectionKeyPropertyName();return this.state._data.filter((e=>!this.disabledKeysStringSet.has(String(e[t]))))}getSelectedKeysWithoutDisabledKeys(){var t;return Ft.normalizeKeys((t=this.state._selection)===null||t===void 0?void 0:t.selectedKeys).filter((t=>!this.disabledKeysStringSet.has(String(t))))}getSelectedKeysWithDisabledKeysOnly(){var t;return Ft.normalizeKeys((t=this.state._selection)===null||t===void 0?void 0:t.selectedKeys).filter((t=>this.disabledKeysStringSet.has(String(t))))}getRevertedSelection(t){var e;const i=this.getSelectionKeyPropertyName();const l=(e=this.getSelectedKeysWithDisabledKeysOnly())!==null&&e!==void 0?e:[];if(t){l.push(...this.getDataWithSelectionEnabled().map((t=>t===null||t===void 0?void 0:t[i])))}return l}getTableMinWidth(){var t,e;const i=(t=this.state._headerCells.horizontal)!==null&&t!==void 0?t:[];const l=[];i.forEach((t=>{t.forEach((t=>{if(t.visible!==false&&t.width!==undefined&&t.width>0){l.push(t.width)}}))}));const s=(e=this.state._headerCells.vertical)!==null&&e!==void 0?e:[];const n=[];s.forEach((t=>{t.forEach((t=>{if(t.width!==undefined&&t.width>0){n.push(t.width)}}))}));const o=[...n,...l];if(o.length===0){return"0px"}if(o.length===1){return`${o[0]}px`}return`calc(${o.map((t=>`${t}px`)).join(" + ")})`}renderHeadingSelectionCell(){var t,i;const l=this.state._selection;if(!l){return e("td",{class:"kol-table__cell kol-table__cell--header",key:`thead-0`})}if(l.multiple===false){return e("th",{scope:"col",key:`thead-0-selection`,class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},e("span",{class:"visually-hidden"},r("kol-table-selection")))}const s=(i=(t=this.getSelectedKeysWithoutDisabledKeys())===null||t===void 0?void 0:t.length)!==null&&i!==void 0?i:0;const n=this.getDataWithSelectionEnabled().length;const o=s===n;const a=s!==0&&!o;let h="kol-table-selection-indeterminate";if(o&&!a){h="kol-table-selection-none"}if(s===0){h="kol-table-selection-all"}const f=r(h);return e("th",{scope:"col",key:`thead-0-selection`,class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},e("span",{class:"visually-hidden"},r("kol-table-selection")),e("div",{class:O("kol-table__selection",{"kol-table__selection--indeterminate":a,"kol-table__selection--checked":o})},e("label",{class:"kol-table__selection-label"},e(c,{class:"kol-table__selection-icon",icons:`kolicon ${a?"kolicon-minus":o?"kolicon-check":""}`,label:""}),e("input",{class:O("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:t=>t&&this.checkboxRefs.push(t),name:"selection",checked:o&&!a,indeterminate:a,"aria-label":f,type:"checkbox",onInput:t=>{this.handleSelectionChangeCallbackAndEvent(t,this.getRevertedSelection(!o))}})),e("div",{class:"kol-table__selection-input-tooltip"},e(d,{label:f,badgeText:"",id:`${h}-label`,refFloating:()=>{}}))))}renderHeaderTdCell(){const t=this.state._headerCells.horizontal;const l=this.state._headerCells.vertical;if(!Array.isArray(t)||t.length===0||!Array.isArray(l)||l.length===0){return e(i,null)}const s=l.reduce(((t,e)=>{var i;const l=e===null||e===void 0?void 0:e[0];return t+((i=l===null||l===void 0?void 0:l.width)!==null&&i!==void 0?i:0)}),0);return e("td",{"aria-hidden":"true",colSpan:l.length,rowSpan:t.length,style:s>0?{width:`${s}px`}:undefined})}formatSortOrderDescription(t){return this.translateSortOrder.replace("{{order}}",`${t}`)}getSortAriaDescription(t){if(typeof t==="number"&&t>0){return`${this.translateSort} – ${this.formatSortOrderDescription(t)}`}return this.translateSort}renderHeadingCell(t,i,l,s){if(t.visible===false){return""}const o=(t===null||t===void 0?void 0:t.sortable)!==false;const a=typeof t.sortDirection==="string";const r=o&&a;let c="none";let d="kolicon-sort-neutral";if(r&&t.sortDirection){switch(t.sortDirection){case"ASC":d="kolicon-sort-asc";c="ascending";break;case"DESC":d="kolicon-sort-desc";c="descending";break;default:c="none"}}const h=s?"row":typeof t.colSpan==="number"&&t.colSpan>1?"colgroup":"col";const f=typeof t.sortOrder==="number"&&t.sortOrder>0?t.sortOrder:undefined;const u=this.getSortAriaDescription(f);const b=t.width!==undefined?`${t.width}px`:undefined;const v=this.isFixedCol(l);const _=v==="left"?this.getOffsetString(l,true):undefined;const p=v==="right"?this.getOffsetString(l):undefined;return e("th",{key:`${i}-${l}-${t.label}`,class:O("kol-table__cell kol-table__cell--header",`kol-table__cell--${c}`,t.textAlign&&`kol-table__cell--align-${t.textAlign}`,v&&`kol-table__cell--sticky-${v}`),scope:h,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:b,left:_,right:p},"aria-sort":c,"data-sort":r&&t.sortDirection?`sort-${t.sortDirection}`:undefined},r&&t.sortDirection?e("span",{class:"kol-table__sort"},e(n,{class:"kol-table__sort-button",_icons:{right:d},_label:t.label,_ariaDescription:u,_on:{onClick:e=>{var i;if(typeof((i=this.state._on)===null||i===void 0?void 0:i.onSort)==="function"&&t.key&&t.sortDirection){this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection})}if(this.host){A(this.host,D.sort,{key:t.key,currentSortDirection:t.sortDirection})}}}}),f&&e("span",{"aria-hidden":"true",class:"kol-table__sort-order"},f)):t.label)}renderSpacer(t,i){var l;const s=((l=this.state._headerCells.vertical)===null||l===void 0?void 0:l.length)||0;const n=this.getVisibleColSpan(i===null||i===void 0?void 0:i[0]);const o=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:O("kol-table__spacer",`kol-table__spacer--${t}`)},e("td",{class:O(`kol-table__spacer-line kol-table__spacer-line--${t}`),colSpan:s+n+o}))}renderFoot(){if(!this.state._dataFoot||this.state._dataFoot.length===0){return null}const t=this.createDataField(this.state._dataFoot,this.state._headerCells,true);return e("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",t),t.map(((t,e)=>this.renderTableRow(t,e,true,true)))])}render(){var t;this.updateSelectionKeySets();const i=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const l=this.state._headerCells.horizontal;const s=!((t=this.externalLabelElements)===null||t===void 0?void 0:t.length);return e("div",{key:"5e695caed3d8fa3e0c02628ff4683a808ff90118",class:O("kol-table",{[C(this.state._variant,"table")]:this.state._variant!==undefined})},this.state._hasSettingsMenu&&e(a,{key:"b1ab207ce8d70eea77a1539b98602e3f1ae6d838",_horizontalHeaderCells:l!==null&&l!==void 0?l:[]}),e("div",{key:"c2e77bdb173e4c07b87e961122bedcdbdfcf500c",ref:t=>this.tableDivElement=t,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?s?"-1":"0":undefined},e("table",{key:"aa63facbff8823756c31be35fcffc86a5c452740",ref:t=>{this.tableRef=t;this.syncTableLabel(this.externalLabelElements)},"aria-labelledby":s?"caption":undefined,class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},s&&e("caption",{key:"7d84c6675e6807c7db1af0c32f41d24fb232cbd4",class:"kol-table__focus-element kol-table__caption",id:"caption",tabindex:this.tableDivElementHasScrollbar?"0":undefined},this.state._label),Array.isArray(l)&&e("thead",{key:"3d64cd804254f659ba3cf2473b77873dac3820a9",class:"kol-table__head"},[l.map(((t,i)=>e("tr",{class:"kol-table__head-row",key:`thead-${i}`},this.state._selection&&this.renderHeadingSelectionCell(),i===0&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map(((t,e)=>this.renderHeadingCell(t,i,e,false)))))),this.renderSpacer("head",l)]),e("tbody",{key:"0eac18af80cf7c63b1b7df70852bc554b731efca",class:"kol-table__body"},i.map(((t,e)=>this.renderTableRow(t,e,true)))),this.renderFoot())))}get host(){return l(this)}static get watchers(){return{externalLabelElements:["onExternalLabelElementsChange"],_ariaLabelledby:["validateAriaLabelledby"],_hasSettingsMenu:["validateHasSettingsMenu"],_data:["validateData"],_dataFoot:["validateDataFoot"],_fixedCols:["validateFixedCols"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_on:["validateOn"],_selection:["validateSelection"],_variant:["validateVariantClassName"]}}};export{Ft as kol_table_stateless_wc};
+import{r as t,h as e,F as i,g as l}from"./index-5bbrauFT.js";import{a as s}from"./tslib.es6-QNbPBOk5.js";import{b as n,c as o,t as a}from"./component-names-Dy77vq43.js";import{t as r}from"./i18n-BsXYYo8j.js";import{I as c}from"./component-B_R2QCjt.js";import{T as d}from"./component-CTb4Y6Mi.js";import{P as h,o as f,p as u,b,L as v,s as _}from"./common-D5l8QiaY.js";import{c as p,v as k,a as y,b as m,f as g,d as S}from"./table-selection-BNnfuo03.js";import{v as j}from"./label-Ftw1VCQG.js";import{v as w,c as C}from"./variant-class-name-DFWOlDkF.js";import{C as $}from"./keyboard-DNd73LVa.js";import{c as O}from"./clsx-COFh-Vc8.js";import{n as x}from"./dev.utils-CIi6OrYn.js";import{d as A,K as D}from"./events-BhfZTW2e.js";import{M as F,e as T,U as H,f as L,b as M,d as E,S as K,h as R}from"./_Uint8Array-kJHDjtoP.js";import{S as z,a as B,i as W}from"./isArray-CcrBs4JM.js";import"./i18n-CoO4-0na.js";import"./bem-registry-Coj2Hlbo.js";import"./component-cakhwjRD.js";var N="__lodash_hash_undefined__";function P(t){this.__data__.set(t,N);return this}function I(t){return this.__data__.has(t)}function V(t){var e=-1,i=t==null?0:t.length;this.__data__=new F;while(++e<i){this.add(t[e])}}V.prototype.add=V.prototype.push=P;V.prototype.has=I;function U(t,e){var i=-1,l=t==null?0:t.length;while(++i<l){if(e(t[i],i,t)){return true}}return false}function Y(t,e){return t.has(e)}var Q=1,q=2;function J(t,e,i,l,s,n){var o=i&Q,a=t.length,r=e.length;if(a!=r&&!(o&&r>a)){return false}var c=n.get(t);var d=n.get(e);if(c&&d){return c==e&&d==t}var h=-1,f=true,u=i&q?new V:undefined;n.set(t,e);n.set(e,t);while(++h<a){var b=t[h],v=e[h];if(l){var _=o?l(v,b,h,e,t,n):l(b,v,h,t,e,n)}if(_!==undefined){if(_){continue}f=false;break}if(u){if(!U(e,(function(t,e){if(!Y(u,e)&&(b===t||s(b,t,i,l,n))){return u.push(e)}}))){f=false;break}}else if(!(b===v||s(b,v,i,l,n))){f=false;break}}n["delete"](t);n["delete"](e);return f}function G(t){var e=-1,i=Array(t.size);t.forEach((function(t,l){i[++e]=[l,t]}));return i}function X(t){var e=-1,i=Array(t.size);t.forEach((function(t){i[++e]=t}));return i}var Z=1,tt=2;var et="[object Boolean]",it="[object Date]",lt="[object Error]",st="[object Map]",nt="[object Number]",ot="[object RegExp]",at="[object Set]",rt="[object String]",ct="[object Symbol]";var dt="[object ArrayBuffer]",ht="[object DataView]";var ft=z?z.prototype:undefined,ut=ft?ft.valueOf:undefined;function bt(t,e,i,l,s,n,o){switch(i){case ht:if(t.byteLength!=e.byteLength||t.byteOffset!=e.byteOffset){return false}t=t.buffer;e=e.buffer;case dt:if(t.byteLength!=e.byteLength||!n(new H(t),new H(e))){return false}return true;case et:case it:case nt:return T(+t,+e);case lt:return t.name==e.name&&t.message==e.message;case ot:case rt:return t==e+"";case st:var a=G;case at:var r=l&Z;a||(a=X);if(t.size!=e.size&&!r){return false}var c=o.get(t);if(c){return c==e}l|=tt;o.set(t,e);var d=J(a(t),a(e),l,s,n,o);o["delete"](t);return d;case ct:if(ut){return ut.call(t)==ut.call(e)}}return false}var vt=1;var _t=Object.prototype;var pt=_t.hasOwnProperty;function kt(t,e,i,l,s,n){var o=i&vt,a=L(t),r=a.length,c=L(e),d=c.length;if(r!=d&&!o){return false}var h=r;while(h--){var f=a[h];if(!(o?f in e:pt.call(e,f))){return false}}var u=n.get(t);var b=n.get(e);if(u&&b){return u==e&&b==t}var v=true;n.set(t,e);n.set(e,t);var _=o;while(++h<r){f=a[h];var p=t[f],k=e[f];if(l){var y=o?l(k,p,f,e,t,n):l(p,k,f,t,e,n)}if(!(y===undefined?p===k||s(p,k,i,l,n):y)){v=false;break}_||(_=f=="constructor")}if(v&&!_){var m=t.constructor,g=e.constructor;if(m!=g&&("constructor"in t&&"constructor"in e)&&!(typeof m=="function"&&m instanceof m&&typeof g=="function"&&g instanceof g)){v=false}}n["delete"](t);n["delete"](e);return v}var yt=1;var mt="[object Arguments]",gt="[object Array]",St="[object Object]";var jt=Object.prototype;var wt=jt.hasOwnProperty;function Ct(t,e,i,l,s,n){var o=B(t),a=B(e),r=o?gt:M(t),c=a?gt:M(e);r=r==mt?St:r;c=c==mt?St:c;var d=r==St,h=c==St,f=r==c;if(f&&E(t)){if(!E(e)){return false}o=true;d=false}if(f&&!d){n||(n=new K);return o||R(t)?J(t,e,i,l,s,n):bt(t,e,r,i,l,s,n)}if(!(i&yt)){var u=d&&wt.call(t,"__wrapped__"),b=h&&wt.call(e,"__wrapped__");if(u||b){var v=u?t.value():t,_=b?e.value():e;n||(n=new K);return s(v,_,i,l,n)}}if(!f){return false}n||(n=new K);return kt(t,e,i,l,s,n)}function $t(t,e,i,l,s){if(t===e){return true}if(t==null||e==null||!W(t)&&!W(e)){return t!==t&&e!==e}return Ct(t,e,i,l,$t,s)}function Ot(t,e){return $t(t,e)}const xt=t=>Array.isArray(t)&&t.every((t=>Array.isArray(t)));const At=(t,e)=>{h(e,(()=>{f(e,(()=>{try{e=u(e)}catch(t){}b(t,"_headerCells",(t=>{if(typeof t!=="object"||t===null)return false;const e=t.horizontal;const i=t.vertical;if(e!==undefined&&!xt(e)||i!==undefined&&!xt(i)){return false}const l=[];for(const t of e!==null&&e!==void 0?e:[]){l.push(...t)}for(const t of i!==null&&i!==void 0?i:[]){l.push(...t)}return l.every((t=>t.width===undefined||typeof t.width==="number"))}),new Set(["TableHeaderCellsPropType"]),e)}))}))};const Dt=150;const Ft=class{constructor(i){t(this,i);this.translateNoEntries=r("kol-no-entries");this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_hasSettingsMenu:false};this.horizontal=true;this.cellsToRenderTimeouts=new Map;this.dataToKeyMap=new Map;this.selectedKeysStringSet=new Set;this.disabledKeysStringSet=new Set;this.checkboxRefs=[];this.translateSort=r("kol-sort");this.translateSortOrder=r("kol-table-sort-order");this.maxCols=0;this.fixedOffsets=[];this.settingsChangedCounter=0;this.tableDivElementHasScrollbar=false;this.stickyColsDisabled=false;this.renderTableRow=(t,i,l,s=false)=>{var n,o;let a=String(i);if(this.horizontal&&((n=t[0])===null||n===void 0?void 0:n.data)){a=(o=this.getDataKey(t[0].data))!==null&&o!==void 0?o:a}return e("tr",{class:O("kol-table__row",{"kol-table__row--body":!s,"kol-table__row--footer":s}),key:`row-${a}`},this.renderSelectionCell(t,i),t.map(((t,e)=>this.renderTableCell(t,i,e,l))))};this.renderTableCell=(t,i,l,s)=>{if(t.visible===false){return""}let n=`${i}-${l}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);n=e?`${e}-${this.horizontal?l:i}`:n}if(t.headerCell){return this.renderHeadingCell(t,i,l,s)}else{const i=typeof t.render!=="function"&&t.label===this.translateNoEntries;const s=this.getActionColumnHeader(l);const o=Boolean(s&&t.data);const a=this.isFixedCol(l);const r=a==="left"?this.getOffsetString(t.colIndex,true):undefined;const c=a==="right"?this.getOffsetString(t.colIndex):undefined;const d=typeof t.render==="function";return e("td",{key:`cell-${n}-${this.settingsChangedCounter}`,class:O("kol-table__cell kol-table__cell--body",t.textAlign&&`kol-table__cell--align-${t.textAlign}`,o&&"kol-table__cell--actions",a&&`kol-table__cell--sticky-${a}`),"aria-atomic":i?"false":undefined,"aria-live":i?"polite":undefined,"aria-relevant":i?"text":undefined,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,left:r,right:c},ref:d?e=>{this.cellRender(t,e)}:undefined},o&&s&&t.data?this.renderActionItems(s,t.data,n):!d?t.label:"")}};this.renderActionItems=(t,i,l)=>{const a=t.actions(i);return e("div",{class:"kol-table__cell-actions"},a.map(((t,i)=>{if(t.type==="button"){const o=s(t,[]);return e(n,Object.assign({key:`action-${l}-${i}`},o,{_variant:o._variant}))}else if(t.type==="link"){const n=s(t,[]);return e(o,Object.assign({key:`action-${l}-${i}`},n))}return null})))}}onExternalLabelElementsChange(t){this.syncTableLabel(t)}validateAriaLabelledby(){}syncTableLabel(t){if(!this.tableRef)return;if("ariaLabelledByElements"in this.tableRef){if(t===null||t===void 0?void 0:t.length){this.tableRef.ariaLabelledByElements=t}v.debug([this.tableRef,!!(t===null||t===void 0?void 0:t.length),t,this.tableRef.ariaLabelledByElements])}}validateHasSettingsMenu(t){p(this,t)}validateData(t){k(this,t,{beforePatch:t=>{this.updateDataToKeyMap(t)}})}validateDataFoot(t){y(this,t)}validateFixedCols(t){m(this,t);this.checkAndUpdateStickyState()}validateHeaderCells(t){At(this,t);if(!Ot(this.previousHeaderCells,this.state._headerCells)){this.initializeHeaderCellSettings()}this.previousHeaderCells=this.state._headerCells}validateLabel(t){j(this,t,{required:true})}validateOn(t){g(this,t)}validateSelection(t){S(this,t);this.checkAndUpdateStickyState()}validateVariantClassName(t){w(this,t)}handleKeyDown(t){var e;if(t.key==="ArrowUp"||t.key==="ArrowDown"){const i=(e=this.tableDivElement)===null||e===void 0?void 0:e.querySelector(":focus");let l=this.checkboxRefs.indexOf(i);if(l>-1){t.preventDefault();if(t.key==="ArrowDown"){l=(l+1)%this.checkboxRefs.length;this.checkboxRefs[l].focus()}else if(t.key==="ArrowUp"){t.preventDefault();l=(l+this.checkboxRefs.length-1)%this.checkboxRefs.length;this.checkboxRefs[l].focus()}}}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){if(this.tableDivElement&&ResizeObserver){this.tableDivElementResizeObserver=new ResizeObserver(this.handleResize.bind(this));this.tableDivElementResizeObserver.observe(this.tableDivElement)}this.checkAndUpdateStickyState()}handleSettingsChange(t){var e;const i=Object.assign(Object.assign({},this.state._headerCells),{horizontal:t.detail});_(this,"_headerCells",i);this.settingsChangedCounter++;if(typeof((e=this.state._on)===null||e===void 0?void 0:e[$.onChangeHeaderCells])==="function"){this.state._on[$.onChangeHeaderCells](t,i)}}disconnectedCallback(){var t;(t=this.tableDivElementResizeObserver)===null||t===void 0?void 0:t.disconnect();clearTimeout(this.resizeDebounceTimeout)}handleResize(){this.checkDivElementScrollbar();clearTimeout(this.resizeDebounceTimeout);this.resizeDebounceTimeout=setTimeout((()=>{this.checkAndUpdateStickyState()}),Dt)}checkDivElementScrollbar(){if(this.tableDivElement){this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth}}calculateFixedColsWidth(){var t,e,i,l,s,n;if(!this._fixedCols)return 0;const o=this.getPrimaryHeaders(this.state._headerCells);let a=0;for(let i=0;i<this._fixedCols[0]&&i<o.length;i++){a+=(e=(t=o[i])===null||t===void 0?void 0:t.width)!==null&&e!==void 0?e:0}const r=this.maxCols-this._fixedCols[1];for(let t=r;t<this.maxCols&&t<o.length;t++){a+=(l=(i=o[t])===null||i===void 0?void 0:i.width)!==null&&l!==void 0?l:0}if(this.state._selection){const t=(s=this.tableDivElement)===null||s===void 0?void 0:s.querySelector(".kol-table__cell--selection");a+=(n=t===null||t===void 0?void 0:t.offsetWidth)!==null&&n!==void 0?n:0}return a}checkAndUpdateStickyState(){if(!this.tableDivElement||!this._fixedCols){this.stickyColsDisabled=false;return}const t=this.tableDivElement.clientWidth;const e=this.calculateFixedColsWidth();this.stickyColsDisabled=e>0&&e>=t}updateDataToKeyMap(t){const e=new Set(t);t.forEach((t=>{if(!this.dataToKeyMap.has(t)){this.dataToKeyMap.set(t,x())}}));this.dataToKeyMap.forEach(((t,i)=>{if(!e.has(i)){this.dataToKeyMap.delete(i)}}))}getDataKey(t){return this.dataToKeyMap.get(t)}getActionColumnHeader(t){const e=this.horizontal?this.state._headerCells.horizontal:this.state._headerCells.vertical;if(!e||e.length===0)return undefined;const i=this.getPrimaryHeaders(this.state._headerCells);const l=i[t];if(l&&l.type==="action"){return l}return undefined}cellRender(t,e){if(e){clearTimeout(this.cellsToRenderTimeouts.get(e));this.cellsToRenderTimeouts.set(e,setTimeout((()=>{if(typeof t.render==="function"){const i=t.render(e,t,t.data,this.state._data);if(typeof i==="string"){e.textContent=i}}})))}}getNumberOfCols(t,e){let i=0;t.forEach((t=>{let e=0;if(Array.isArray(t)){t.forEach((t=>{var i;e+=(i=t.colSpan)!==null&&i!==void 0?i:1}))}if(i<e){i=e}}));if(i===0){i=e.length}return i}getNumberOfRows(t,e){var i;let l=0;t.forEach((t=>{let e=0;if(Array.isArray(t)){t.forEach((t=>{var i;e+=(i=t.rowSpan)!==null&&i!==void 0?i:1}))}if(l<e){l=e}}));if(l===0){l=e.length}else{l-=((i=this.state._dataFoot)===null||i===void 0?void 0:i.length)||0}return l}getThePrimaryHeadersWithKeyOrRenderFunction(t){const e=[];t.forEach((t=>{t.forEach((t=>{if(typeof t.key==="string"||typeof t.render==="function"){e.push(t)}}))}));return e}getPrimaryHeaders(t){var e,i,l;if(((e=this.primaryHeadersCache)===null||e===void 0?void 0:e.headers)===t){this.horizontal=this.primaryHeadersCache.horizontal;return this.primaryHeadersCache.result}let s=this.getThePrimaryHeadersWithKeyOrRenderFunction((i=t.horizontal)!==null&&i!==void 0?i:[]);this.horizontal=true;if(s.length===0){s=this.getThePrimaryHeadersWithKeyOrRenderFunction((l=t.vertical)!==null&&l!==void 0?l:[]);if(s.length>0){this.horizontal=false}}this.primaryHeadersCache={headers:t,result:s,horizontal:this.horizontal};return s}createDataField(t,e,i){var l,s,n,o,a,r,c,d;e.horizontal=Array.isArray(e===null||e===void 0?void 0:e.horizontal)?e.horizontal:[];e.vertical=Array.isArray(e===null||e===void 0?void 0:e.vertical)?e.vertical:[];this.maxCols=this.getNumberOfCols(e.horizontal,t);const h=this.getPrimaryHeaders(e);let f=this.getNumberOfRows(e.vertical,t);let u=0;if(i){u=f;f+=((l=this.state._dataFoot)===null||l===void 0?void 0:l.length)||0}const b=[];const v=[];const _=[];e.vertical.forEach(((t,e)=>{v[e]=0;_[e]=[]}));const p=h;for(let l=u;l<f;l++){const d=[];e.vertical.forEach(((t,e)=>{let i=0;_[e].forEach((t=>i+=t));if(i<=l){const s=t[l-i+v[e]];if(typeof s==="object"){d.push(Object.assign(Object.assign({},s),{headerCell:true,data:{}}));let t=1;if(typeof s.rowSpan==="number"&&s.rowSpan>1){t=s.rowSpan}_[e].push(t);if(typeof s.colSpan==="number"&&s.colSpan>1){for(let i=1;i<s.colSpan;i++){_[e+i].push(t)}}v[e]++}}}));for(let e=0;e<this.maxCols;e++){let h=this.isFixedCol(e);if(h==="left"){if(this.getFixedOffset(e)===undefined){let t=(s=this.fixedOffsets[e-1])!==null&&s!==void 0?s:0;t+=(o=(n=p[e-1])===null||n===void 0?void 0:n.width)!==null&&o!==void 0?o:0;this.fixedOffsets[e]=t}}if(h==="right"){if(this.getFixedOffset(e)===undefined){let t=(a=this.fixedOffsets[e+1])!==null&&a!==void 0?a:0;t+=(c=(r=p[e+1])===null||r===void 0?void 0:r.width)!==null&&c!==void 0?c:0;this.fixedOffsets[e]=t}}if(this.horizontal===true){const s=i&&this.state._dataFoot?this.state._dataFoot[l-u]:t[l];if(typeof p[e]==="object"&&p[e]!==null&&typeof s==="object"&&s!==null&&(typeof p[e].key==="string"||typeof p[e].render==="function")){const t=p[e].key;const i=s[t];d.push(Object.assign(Object.assign({},p[e]),{colIndex:e,colSpan:undefined,rowSpan:undefined,data:s,label:i}))}}else{if(typeof p[l]==="object"&&p[l]!==null&&typeof t[e]==="object"&&t[e]!==null&&(typeof p[l].key==="string"||typeof p[l].render==="function")){const i=p[l].key;const s=t[e][i];d.push(Object.assign(Object.assign({},p[l]),{colIndex:e,colSpan:undefined,rowSpan:undefined,data:t[e],label:s}))}}}b.push(d)}if(t.length===0){let t=this.getVisibleColSpan((d=e.horizontal)===null||d===void 0?void 0:d[0]);let i=0;if(Array.isArray(e.vertical)&&e.vertical.length>0){t-=e.vertical.length;e.vertical[0].forEach((t=>{i+=t.rowSpan||1}))}const l={colSpan:t,label:this.translateNoEntries,render:undefined,rowSpan:Math.max(i,1)};if(b.length===0){b.push([l])}else{b[0].push(l)}}return b}getVisibleColSpan(t){var e;return(e=t===null||t===void 0?void 0:t.reduce(((t,e)=>{if("visible"in e&&e.visible===false){return t}return t+(e.colSpan||1)}),0))!==null&&e!==void 0?e:0}isFixedCol(t){if(!this._fixedCols||t===undefined||this.stickyColsDisabled){return undefined}if(t<this._fixedCols[0]){return"left"}if(t>=this.maxCols-this._fixedCols[1]){return"right"}}getFixedOffset(t){if(!this.tableDivElement||t===undefined){return undefined}if(this.fixedOffsets[t]!==undefined){return this.fixedOffsets[t]}return undefined}getOffsetString(t,e){if(e&&this._selection){return"calc( var(--kol-table-selection-col-width) + "+this.getFixedOffset(t)+"px)"}return this.getFixedOffset(t)+"px"}handleSelectionChangeCallbackAndEvent(t,e){var i;if(typeof((i=this.state._on)===null||i===void 0?void 0:i[$.onSelectionChange])==="function"){this.state._on[$.onSelectionChange](t,e)}if(this.host){A(this.host,D.selectionChange,e)}}initializeHeaderCellSettings(){if(this.state._headerCells&&this.state._headerCells.horizontal&&this.state._headerCells.horizontal.length>0){const t=Object.assign(Object.assign({},this.state._headerCells),{horizontal:this.state._headerCells.horizontal.map((t=>t.map((t=>Object.assign(Object.assign({},t),{visible:typeof t.visible==="boolean"?t.visible:true,hidable:typeof t.hidable==="boolean"?t.hidable:true})))))});_(this,"_headerCells",t)}}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);this.validateVariantClassName(this._variant)}renderSelectionCell(t,i){var l;const s=this.state._selection;if(!s)return"";const n=this.getSelectionKeyPropertyName();const o=(l=t[0])===null||l===void 0?void 0:l.data;if(!o)return"";const a=o[n];const r=s.multiple||s.multiple===undefined;const h=String(a);const f=this.selectedKeysStringSet.has(h);const u=this.disabledKeysStringSet.has(h);const b=s.label(o);const v={name:"selection",checked:f,disabled:u,id:String(a),["aria-label"]:b};return e("td",{key:`tbody-${i}-selection`,class:"kol-table__cell kol-table__cell--selection"},e("div",{class:O("kol-table__selection",{"kol-table__selection--checked":f})},r?e("label",{class:O("kol-table__selection-label",{"kol-table__selection-label--disabled":u})},e(c,{class:"kol-table__selection-icon",icons:`kolicon ${f?"kolicon-check":""}`,label:""}),e("input",Object.assign({class:O("kol-table__selection-input kol-table__selection-input--checkbox"),ref:t=>t&&this.checkboxRefs.push(t)},v,{type:"checkbox",onInput:t=>{const e=(()=>{const t=s===null||s===void 0?void 0:s.selectedKeys;return t===undefined?[]:Array.isArray(t)?t:[t]})();const i=!f?[...e,a]:e.filter((t=>String(t)!==String(a)));this.handleSelectionChangeCallbackAndEvent(t,i!==null&&i!==void 0?i:[])}}))):e("label",{class:"kol-table__selection-label"},e("input",Object.assign({class:O("kol-table__selection-input kol-table__selection-input--radio")},v,{type:"radio",onInput:t=>{this.handleSelectionChangeCallbackAndEvent(t,[a])}}))),e("div",{class:"kol-table__selection-input-tooltip"},e(d,{label:b,badgeText:"",id:`${a}-label`,refFloating:()=>{}}))))}getSelectionKeyPropertyName(){var t,e;return(e=(t=this.state._selection)===null||t===void 0?void 0:t.keyPropertyName)!==null&&e!==void 0?e:"id"}static normalizeKeys(t){return t===undefined?[]:Array.isArray(t)?t:[t]}updateSelectionKeySets(){var t,e;this.selectedKeysStringSet=new Set(Ft.normalizeKeys((t=this.state._selection)===null||t===void 0?void 0:t.selectedKeys).map(String));this.disabledKeysStringSet=new Set(Ft.normalizeKeys((e=this.state._selection)===null||e===void 0?void 0:e.disabledKeys).map(String))}getDataWithSelectionEnabled(){const t=this.getSelectionKeyPropertyName();return this.state._data.filter((e=>!this.disabledKeysStringSet.has(String(e[t]))))}getSelectedKeysWithoutDisabledKeys(){var t;return Ft.normalizeKeys((t=this.state._selection)===null||t===void 0?void 0:t.selectedKeys).filter((t=>!this.disabledKeysStringSet.has(String(t))))}getSelectedKeysWithDisabledKeysOnly(){var t;return Ft.normalizeKeys((t=this.state._selection)===null||t===void 0?void 0:t.selectedKeys).filter((t=>this.disabledKeysStringSet.has(String(t))))}getRevertedSelection(t){var e;const i=this.getSelectionKeyPropertyName();const l=(e=this.getSelectedKeysWithDisabledKeysOnly())!==null&&e!==void 0?e:[];if(t){l.push(...this.getDataWithSelectionEnabled().map((t=>t===null||t===void 0?void 0:t[i])))}return l}getTableMinWidth(){var t,e;const i=(t=this.state._headerCells.horizontal)!==null&&t!==void 0?t:[];const l=[];i.forEach((t=>{t.forEach((t=>{if(t.visible!==false&&t.width!==undefined&&t.width>0){l.push(t.width)}}))}));const s=(e=this.state._headerCells.vertical)!==null&&e!==void 0?e:[];const n=[];s.forEach((t=>{t.forEach((t=>{if(t.width!==undefined&&t.width>0){n.push(t.width)}}))}));const o=[...n,...l];if(o.length===0){return"0px"}if(o.length===1){return`${o[0]}px`}return`calc(${o.map((t=>`${t}px`)).join(" + ")})`}renderHeadingSelectionCell(){var t,i;const l=this.state._selection;if(!l){return e("td",{class:"kol-table__cell kol-table__cell--header",key:`thead-0`})}if(l.multiple===false){return e("th",{scope:"col",key:`thead-0-selection`,class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},e("span",{class:"visually-hidden"},r("kol-table-selection")))}const s=(i=(t=this.getSelectedKeysWithoutDisabledKeys())===null||t===void 0?void 0:t.length)!==null&&i!==void 0?i:0;const n=this.getDataWithSelectionEnabled().length;const o=s===n;const a=s!==0&&!o;let h="kol-table-selection-indeterminate";if(o&&!a){h="kol-table-selection-none"}if(s===0){h="kol-table-selection-all"}const f=r(h);return e("th",{scope:"col",key:`thead-0-selection`,class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},e("span",{class:"visually-hidden"},r("kol-table-selection")),e("div",{class:O("kol-table__selection",{"kol-table__selection--indeterminate":a,"kol-table__selection--checked":o})},e("label",{class:"kol-table__selection-label"},e(c,{class:"kol-table__selection-icon",icons:`kolicon ${a?"kolicon-minus":o?"kolicon-check":""}`,label:""}),e("input",{class:O("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:t=>t&&this.checkboxRefs.push(t),name:"selection",checked:o&&!a,indeterminate:a,"aria-label":f,type:"checkbox",onInput:t=>{this.handleSelectionChangeCallbackAndEvent(t,this.getRevertedSelection(!o))}})),e("div",{class:"kol-table__selection-input-tooltip"},e(d,{label:f,badgeText:"",id:`${h}-label`,refFloating:()=>{}}))))}renderHeaderTdCell(){const t=this.state._headerCells.horizontal;const l=this.state._headerCells.vertical;if(!Array.isArray(t)||t.length===0||!Array.isArray(l)||l.length===0){return e(i,null)}const s=l.reduce(((t,e)=>{var i;const l=e===null||e===void 0?void 0:e[0];return t+((i=l===null||l===void 0?void 0:l.width)!==null&&i!==void 0?i:0)}),0);return e("td",{"aria-hidden":"true",colSpan:l.length,rowSpan:t.length,style:s>0?{width:`${s}px`}:undefined})}formatSortOrderDescription(t){return this.translateSortOrder.replace("{{order}}",`${t}`)}getSortAriaDescription(t){if(typeof t==="number"&&t>0){return`${this.translateSort} – ${this.formatSortOrderDescription(t)}`}return this.translateSort}renderHeadingCell(t,i,l,s){if(t.visible===false){return""}const o=(t===null||t===void 0?void 0:t.sortable)!==false;const a=typeof t.sortDirection==="string";const r=o&&a;let c="none";let d="kolicon-sort-neutral";if(r&&t.sortDirection){switch(t.sortDirection){case"ASC":d="kolicon-sort-asc";c="ascending";break;case"DESC":d="kolicon-sort-desc";c="descending";break;default:c="none"}}const h=s?"row":typeof t.colSpan==="number"&&t.colSpan>1?"colgroup":"col";const f=typeof t.sortOrder==="number"&&t.sortOrder>0?t.sortOrder:undefined;const u=this.getSortAriaDescription(f);const b=t.width!==undefined?`${t.width}px`:undefined;const v=this.isFixedCol(l);const _=v==="left"?this.getOffsetString(l,true):undefined;const p=v==="right"?this.getOffsetString(l):undefined;return e("th",{key:`${i}-${l}-${t.label}`,class:O("kol-table__cell kol-table__cell--header",`kol-table__cell--${c}`,t.textAlign&&`kol-table__cell--align-${t.textAlign}`,v&&`kol-table__cell--sticky-${v}`),scope:h,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:b,left:_,right:p},"aria-sort":c,"data-sort":r&&t.sortDirection?`sort-${t.sortDirection}`:undefined},r&&t.sortDirection?e("span",{class:"kol-table__sort"},e(n,{class:"kol-table__sort-button",_icons:{right:d},_label:t.label,_ariaDescription:u,_on:{onClick:e=>{var i;if(typeof((i=this.state._on)===null||i===void 0?void 0:i.onSort)==="function"&&t.key&&t.sortDirection){this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection})}if(this.host){A(this.host,D.sort,{key:t.key,currentSortDirection:t.sortDirection})}}}}),f&&e("span",{"aria-hidden":"true",class:"kol-table__sort-order"},f)):t.label)}renderSpacer(t,i){var l;const s=((l=this.state._headerCells.vertical)===null||l===void 0?void 0:l.length)||0;const n=this.getVisibleColSpan(i===null||i===void 0?void 0:i[0]);const o=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:O("kol-table__spacer",`kol-table__spacer--${t}`)},e("td",{class:O(`kol-table__spacer-line kol-table__spacer-line--${t}`),colSpan:s+n+o}))}renderFoot(){if(!this.state._dataFoot||this.state._dataFoot.length===0){return null}const t=this.createDataField(this.state._dataFoot,this.state._headerCells,true);return e("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",t),t.map(((t,e)=>this.renderTableRow(t,e,true,true)))])}render(){var t;this.updateSelectionKeySets();const i=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const l=this.state._headerCells.horizontal;const s=!((t=this.externalLabelElements)===null||t===void 0?void 0:t.length);return e("div",{key:"5e695caed3d8fa3e0c02628ff4683a808ff90118",class:O("kol-table",{[C(this.state._variant,"table")]:this.state._variant!==undefined})},this.state._hasSettingsMenu&&e(a,{key:"b1ab207ce8d70eea77a1539b98602e3f1ae6d838",_horizontalHeaderCells:l!==null&&l!==void 0?l:[]}),e("div",{key:"c2e77bdb173e4c07b87e961122bedcdbdfcf500c",ref:t=>this.tableDivElement=t,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?s?"-1":"0":undefined},e("table",{key:"aa63facbff8823756c31be35fcffc86a5c452740",ref:t=>{this.tableRef=t;this.syncTableLabel(this.externalLabelElements)},"aria-labelledby":s?"caption":undefined,class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},s&&e("caption",{key:"7d84c6675e6807c7db1af0c32f41d24fb232cbd4",class:"kol-table__focus-element kol-table__caption",id:"caption",tabindex:this.tableDivElementHasScrollbar?"0":undefined},this.state._label),Array.isArray(l)&&e("thead",{key:"3d64cd804254f659ba3cf2473b77873dac3820a9",class:"kol-table__head"},[l.map(((t,i)=>e("tr",{class:"kol-table__head-row",key:`thead-${i}`},this.state._selection&&this.renderHeadingSelectionCell(),i===0&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map(((t,e)=>this.renderHeadingCell(t,i,e,false)))))),this.renderSpacer("head",l)]),e("tbody",{key:"0eac18af80cf7c63b1b7df70852bc554b731efca",class:"kol-table__body"},i.map(((t,e)=>this.renderTableRow(t,e,true)))),this.renderFoot())))}get host(){return l(this)}static get watchers(){return{externalLabelElements:["onExternalLabelElementsChange"],_ariaLabelledby:["validateAriaLabelledby"],_hasSettingsMenu:["validateHasSettingsMenu"],_data:["validateData"],_dataFoot:["validateDataFoot"],_fixedCols:["validateFixedCols"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_on:["validateOn"],_selection:["validateSelection"],_variant:["validateVariantClassName"]}}};export{Ft as kol_table_stateless_wc};
 //# sourceMappingURL=kol-table-stateless-wc.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"kol-table-stateless.entry.esm.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, Element, h, Prop, State, Watch } 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\tVariantClassNamePropType,\n} from '../../schema';\nimport { validateAriaLabelledby, type AriaLabelledbyPropType } from '../../schema/props/aria-labelledby';\nimport { attachInternals, type HostInternals } from '../../utils/aria-labelledby';\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@Element() private readonly host?: HTMLKolTableStatelessElement;\n\n\tprivate internals?: HostInternals;\n\n\t@State() private resolvedElements: HTMLElement[] = [];\n\n\t/**\n\t * References an external element by ID that serves as the accessible label for this table.\n\t * Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary.\n\t * Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\n\t * Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) — use `_label` instead.\n\t */\n\t@Prop() public _ariaLabelledby?: AriaLabelledbyPropType;\n\n\t@Watch('_ariaLabelledby')\n\tpublic validateAriaLabelledby(value?: AriaLabelledbyPropType): void {\n\t\tthis.syncExternalLabel(value);\n\t}\n\n\tprivate syncExternalLabel(value?: AriaLabelledbyPropType): void {\n\t\tthis.resolvedElements = validateAriaLabelledby(this, this.host, this.internals, value);\n\t}\n\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\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\tpublic componentWillLoad(): void {\n\t\tthis.internals = attachInternals(this.host);\n\t\t// Early resolution: if the external element is already in the DOM (common when the\n\t\t// label element is rendered before this component), the first render already uses\n\t\t// externalLabelElements so the AT sees the correct name from the start.\n\t\tthis.syncExternalLabel(this._ariaLabelledby);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\t// Re-resolve after mount to avoid depending on timer-based retries.\n\t\tif (!this.resolvedElements.length) {\n\t\t\tthis.syncExternalLabel(this._ariaLabelledby);\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatelessWcTag\n\t\t\t\texternalLabelElements={this.resolvedElements}\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\t_variant={this._variant}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,oklBAAoklB;;MCwB/klB,iBAAiB,GAAA,MAAA;AAP9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYkB,QAAA,IAAgB,CAAA,gBAAA,GAAkB,EAAE;AA+FrD;AApFO,IAAA,sBAAsB,CAAC,KAA8B,EAAA;AAC3D,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;;AAGtB,IAAA,iBAAiB,CAAC,KAA8B,EAAA;AACvD,QAAA,IAAI,CAAC,gBAAgB,GAAG,sBAAsB,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC;;IAgDhF,iBAAiB,GAAA;QACvB,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;AAI3C,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC;;IAGtC,gBAAgB,GAAA;AAEtB,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE;AAClC,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC;;;IAIvC,MAAM,GAAA;AACZ,QAAA,QACC,CAAA,CAAC,sBAAsB,EAAA,EAAA,GAAA,EAAA,0CAAA,EACtB,qBAAqB,EAAE,IAAI,CAAC,gBAAgB,EAC5C,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,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CACtB;;;;;;;;;;;;;"}
+{"version":3,"file":"kol-table-stateless.entry.esm.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, Element, h, Prop, State, Watch } 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\tVariantClassNamePropType,\n} from '../../schema';\nimport { validateAriaLabelledby, type AriaLabelledbyPropType } from '../../schema/props/aria-labelledby';\nimport { attachInternals, type HostInternals } from '../../utils/aria-labelledby';\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@Element() private readonly host?: HTMLKolTableStatelessElement;\n\n\tprivate internals?: HostInternals;\n\n\t@State() private resolvedElements: HTMLElement[] = [];\n\n\t/**\n\t * References an external element by ID that serves as the accessible label for this table.\n\t * Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary.\n\t * Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox).\n\t * Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) — use `_label` instead.\n\t */\n\t@Prop() public _ariaLabelledby?: AriaLabelledbyPropType;\n\n\t@Watch('_ariaLabelledby')\n\tpublic validateAriaLabelledby(value?: AriaLabelledbyPropType): void {\n\t\tthis.syncExternalLabel(value);\n\t}\n\n\tprivate syncExternalLabel(value?: AriaLabelledbyPropType): void {\n\t\tthis.resolvedElements = validateAriaLabelledby(this, this.host, this.internals, value);\n\t}\n\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\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: VariantClassNamePropType;\n\n\tpublic componentWillLoad(): void {\n\t\tthis.internals = attachInternals(this.host);\n\t\t// Early resolution: if the external element is already in the DOM (common when the\n\t\t// label element is rendered before this component), the first render already uses\n\t\t// externalLabelElements so the AT sees the correct name from the start.\n\t\tthis.syncExternalLabel(this._ariaLabelledby);\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\t// Re-resolve after mount to avoid depending on timer-based retries.\n\t\tif (!this.resolvedElements.length) {\n\t\t\tthis.syncExternalLabel(this._ariaLabelledby);\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatelessWcTag\n\t\t\t\texternalLabelElements={this.resolvedElements}\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\t_variant={this._variant}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,29lBAA29lB;;MCwBt+lB,iBAAiB,GAAA,MAAA;AAP9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAYkB,QAAA,IAAgB,CAAA,gBAAA,GAAkB,EAAE;AA+FrD;AApFO,IAAA,sBAAsB,CAAC,KAA8B,EAAA;AAC3D,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;;AAGtB,IAAA,iBAAiB,CAAC,KAA8B,EAAA;AACvD,QAAA,IAAI,CAAC,gBAAgB,GAAG,sBAAsB,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC;;IAgDhF,iBAAiB,GAAA;QACvB,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;AAI3C,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC;;IAGtC,gBAAgB,GAAA;AAEtB,QAAA,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE;AAClC,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC;;;IAIvC,MAAM,GAAA;AACZ,QAAA,QACC,CAAA,CAAC,sBAAsB,EAAA,EAAA,GAAA,EAAA,0CAAA,EACtB,qBAAqB,EAAE,IAAI,CAAC,gBAAgB,EAC5C,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,EACvC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,CACtB;;;;;;;;;;;;;"}

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

@@ -1,5 +1,5 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,g as t}from"./index-C5dCp7IP.js";import{k as o}from"./component-names-Dy77vq43.js";import{v as i}from"./aria-labelledby-bKQGdIef.js";import{a as l}from"./aria-labelledby-6-ki3akM.js";import"./common-D5l8QiaY.js";const a='@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     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser\'s\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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: white;\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    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=1785404144300"); /* IE9*/\n  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\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  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\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: black;\n    background-color: white;\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: black;\n    background-color: white;\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    height: 100%;\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    height: 100%;\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    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: white;\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 black;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\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: grid;\n    align-items: center;\n    grid-template-columns: subgrid;\n    grid-column: 1/6;\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    text-align: start;\n  }\n  kol-table-settings-wc:not(:has(~ .kol-table__scroll-container .kol-table__caption)) {\n    display: block;\n    min-height: var(--a11y-min-size);\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\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    height: 100%;\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  }\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: white;\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: black;\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}';const r=class{constructor(e){n(this,e);this.resolvedElements=[]}validateAriaLabelledby(n){this.syncExternalLabel(n)}syncExternalLabel(n){this.resolvedElements=i(this,this.host,this.internals,n)}componentWillLoad(){this.internals=l(this.host);this.syncExternalLabel(this._ariaLabelledby)}componentDidLoad(){if(!this.resolvedElements.length){this.syncExternalLabel(this._ariaLabelledby)}}render(){return e(o,{key:"7115f32bb9375fc5d4158bef05eded091fa77091",externalLabelElements:this.resolvedElements,_data:this._data,_dataFoot:this._dataFoot,_fixedCols:this._fixedCols,_headerCells:this._headerCells,_label:this._label,_on:this._on,_selection:this._selection,_hasSettingsMenu:this._hasSettingsMenu,_variant:this._variant})}get host(){return t(this)}static get watchers(){return{_ariaLabelledby:["validateAriaLabelledby"]}}};r.style={default:a};export{r as kol_table_stateless};
+import{r as n,h as e,g as t}from"./index-5bbrauFT.js";import{k as o}from"./component-names-Dy77vq43.js";import{v as i}from"./aria-labelledby-bKQGdIef.js";import{a as l}from"./aria-labelledby-6-ki3akM.js";import"./common-D5l8QiaY.js";const a='@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     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser\'s\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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    --kol-a11y-font-color: black;\n    --kol-a11y-background-color: white;\n    color: var(--kol-a11y-font-color);\n    background-color: var(--kol-a11y-background-color);\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    --kol-a11y-font-family: Verdana;\n    font-family: var(--kol-a11y-font-family);\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: white;\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    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=1785491886871"); /* IE9*/\n  src: url("kolicons.eot?t=1785491886871#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785491886871") format("woff2"), url("kolicons.woff?t=1785491886871") format("woff"), url("kolicons.ttf?t=1785491886871") format("truetype"), url("kolicons.svg?t=1785491886871#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\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  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\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: black;\n    background-color: white;\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: black;\n    background-color: white;\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    height: 100%;\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    grid-template-areas: "icon heading close" "icon content close";\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n  }\n  .kol-alert__icon {\n    grid-area: icon;\n  }\n  .kol-alert__heading {\n    grid-area: heading;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    grid-area: close;\n  }\n  .kol-alert__content {\n    grid-area: content;\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    height: 100%;\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    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: white;\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 black;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\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: grid;\n    align-items: center;\n    grid-template-columns: subgrid;\n    grid-column: 1/6;\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    text-align: start;\n  }\n  kol-table-settings-wc:not(:has(~ .kol-table__scroll-container .kol-table__caption)) {\n    display: block;\n    min-height: var(--a11y-min-size);\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\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    height: 100%;\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  }\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: white;\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: black;\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}';const r=class{constructor(e){n(this,e);this.resolvedElements=[]}validateAriaLabelledby(n){this.syncExternalLabel(n)}syncExternalLabel(n){this.resolvedElements=i(this,this.host,this.internals,n)}componentWillLoad(){this.internals=l(this.host);this.syncExternalLabel(this._ariaLabelledby)}componentDidLoad(){if(!this.resolvedElements.length){this.syncExternalLabel(this._ariaLabelledby)}}render(){return e(o,{key:"7115f32bb9375fc5d4158bef05eded091fa77091",externalLabelElements:this.resolvedElements,_data:this._data,_dataFoot:this._dataFoot,_fixedCols:this._fixedCols,_headerCells:this._headerCells,_label:this._label,_on:this._on,_selection:this._selection,_hasSettingsMenu:this._hasSettingsMenu,_variant:this._variant})}get host(){return t(this)}static get watchers(){return{_ariaLabelledby:["validateAriaLabelledby"]}}};r.style={default:a};export{r as kol_table_stateless};
 //# sourceMappingURL=kol-table-stateless.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","h","getElement","KolTableStatelessWcTag","validateAriaLabelledby","attachInternals","defaultStyleCss","KolTableStateless","constructor","hostRef","this","resolvedElements","value","syncExternalLabel","host","internals","componentWillLoad","_ariaLabelledby","componentDidLoad","length","render","key","externalLabelElements","_data","_dataFoot","_fixedCols","_headerCells","_label","_on","_selection","_hasSettingsMenu","_variant","watchers","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,OAAQC,MAAkB,kCAC5CC,MAA8B,4CAC9BC,MAA8B,4CAC9BC,MAAuB,sCAC9B,uBAEP,MAAMC,EAAkB,i/kBAExB,MAAMC,EAAoB,MACtB,WAAAC,CAAYC,GACRT,EAAiBU,KAAMD,GACvBC,KAAKC,iBAAmB,EAC5B,CACA,sBAAAP,CAAuBQ,GACnBF,KAAKG,kBAAkBD,EAC3B,CACA,iBAAAC,CAAkBD,GACdF,KAAKC,iBAAmBP,EAAuBM,KAAMA,KAAKI,KAAMJ,KAAKK,UAAWH,EACpF,CACA,iBAAAI,GACIN,KAAKK,UAAYV,EAAgBK,KAAKI,MACtCJ,KAAKG,kBAAkBH,KAAKO,gBAChC,CACA,gBAAAC,GACI,IAAKR,KAAKC,iBAAiBQ,OAAQ,CAC/BT,KAAKG,kBAAkBH,KAAKO,gBAChC,CACJ,CACA,MAAAG,GACI,OAAQnB,EAAEE,EAAwB,CAAEkB,IAAK,2CAA4CC,sBAAuBZ,KAAKC,iBAAkBY,MAAOb,KAAKa,MAAOC,UAAWd,KAAKc,UAAWC,WAAYf,KAAKe,WAAYC,aAAchB,KAAKgB,aAAcC,OAAQjB,KAAKiB,OAAQC,IAAKlB,KAAKkB,IAAKC,WAAYnB,KAAKmB,WAAYC,iBAAkBpB,KAAKoB,iBAAkBC,SAAUrB,KAAKqB,UAC5W,CACA,QAAIjB,GAAS,OAAOZ,EAAWQ,KAAO,CACtC,mBAAWsB,GAAa,MAAO,CAC3Bf,gBAAmB,CAAC,0BACrB,GAEPV,EAAkB0B,MAAQ,CACtBC,QAAS5B,UAGJC","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","getElement","KolTableStatelessWcTag","validateAriaLabelledby","attachInternals","defaultStyleCss","KolTableStateless","constructor","hostRef","this","resolvedElements","value","syncExternalLabel","host","internals","componentWillLoad","_ariaLabelledby","componentDidLoad","length","render","key","externalLabelElements","_data","_dataFoot","_fixedCols","_headerCells","_label","_on","_selection","_hasSettingsMenu","_variant","watchers","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,OAAQC,MAAkB,kCAC5CC,MAA8B,4CAC9BC,MAA8B,4CAC9BC,MAAuB,sCAC9B,uBAEP,MAAMC,EAAkB,o4lBAExB,MAAMC,EAAoB,MACtB,WAAAC,CAAYC,GACRT,EAAiBU,KAAMD,GACvBC,KAAKC,iBAAmB,EAC5B,CACA,sBAAAP,CAAuBQ,GACnBF,KAAKG,kBAAkBD,EAC3B,CACA,iBAAAC,CAAkBD,GACdF,KAAKC,iBAAmBP,EAAuBM,KAAMA,KAAKI,KAAMJ,KAAKK,UAAWH,EACpF,CACA,iBAAAI,GACIN,KAAKK,UAAYV,EAAgBK,KAAKI,MACtCJ,KAAKG,kBAAkBH,KAAKO,gBAChC,CACA,gBAAAC,GACI,IAAKR,KAAKC,iBAAiBQ,OAAQ,CAC/BT,KAAKG,kBAAkBH,KAAKO,gBAChC,CACJ,CACA,MAAAG,GACI,OAAQnB,EAAEE,EAAwB,CAAEkB,IAAK,2CAA4CC,sBAAuBZ,KAAKC,iBAAkBY,MAAOb,KAAKa,MAAOC,UAAWd,KAAKc,UAAWC,WAAYf,KAAKe,WAAYC,aAAchB,KAAKgB,aAAcC,OAAQjB,KAAKiB,OAAQC,IAAKlB,KAAKkB,IAAKC,WAAYnB,KAAKmB,WAAYC,iBAAkBpB,KAAKoB,iBAAkBC,SAAUrB,KAAKqB,UAC5W,CACA,QAAIjB,GAAS,OAAOZ,EAAWQ,KAAO,CACtC,mBAAWsB,GAAa,MAAO,CAC3Bf,gBAAmB,CAAC,0BACrB,GAEPV,EAAkB0B,MAAQ,CACtBC,QAAS5B,UAGJC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"kol-tabs.entry.esm.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\n\t\t\t\t@media (forced-colors: active) {\n\t\t\t\t\t&.selected {\n\t\t\t\t\t\toutline: 3px solid Highlight;\n\t\t\t\t\t\toutline-offset: -3px;\n\n\t\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\t\toutline-style: dashed;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\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, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tClickableElement,\n\tFocusableElement,\n\tKolFocusOptions,\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 { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\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 ClickableElement, FocusableElement, TabsAPI {\n\t@Element() protected readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate currentFocusIndex: number | undefined;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\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\t/**\n\t * Sets focus on the current tab button.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Triggers a click on the currently selected tab.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\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\tref={this.state._selected === index ? this.ctaRef : undefined}\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;\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\t// div.setAttribute('tabindex', '0'); Panel soll nicht tabbar sein; siehe https://github.com/public-ui/kolibri/issues/10082\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.esm.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\n\t\t\t\t@media (forced-colors: active) {\n\t\t\t\t\t&.selected {\n\t\t\t\t\t\toutline: 3px solid Highlight;\n\t\t\t\t\t\toutline-offset: -3px;\n\n\t\t\t\t\t\t&:focus-visible {\n\t\t\t\t\t\t\toutline-style: dashed;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\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, Method, Prop, State, Watch } from '@stencil/core';\nimport type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tClickableElement,\n\tFocusableElement,\n\tKolFocusOptions,\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 { createCtaRef, delegateClick, delegateFocus } from '../../utils/element-interaction';\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 ClickableElement, FocusableElement, TabsAPI {\n\t@Element() protected readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate currentFocusIndex: number | undefined;\n\tprotected readonly ctaRef = createCtaRef<HTMLKolButtonWcElement>();\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\t/**\n\t * Sets focus on the current tab button.\n\t */\n\t@Method()\n\t@delegateFocus('ctaRef')\n\t// @ts-expect-error: options parameter will be implemented by the decorator.\n\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\tpublic async focus(options?: KolFocusOptions): Promise<void> {}\n\n\t/**\n\t * Triggers a click on the currently selected tab.\n\t */\n\t@Method()\n\t@delegateClick('ctaRef')\n\tpublic async click(): Promise<void> {}\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\tref={this.state._selected === index ? this.ctaRef : undefined}\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;\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\t// div.setAttribute('tabindex', '0'); Panel soll nicht tabbar sein; siehe https://github.com/public-ui/kolibri/issues/10082\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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"}

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

@@ -1,5 +1,5 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,g as e}from"./index-C5dCp7IP.js";import{_ as o}from"./tslib.es6-QNbPBOk5.js";import{b as i,e as a,j as s,s as l,N as r,H as c,I as h,Q as d}from"./common-D5l8QiaY.js";import{v as f}from"./align-DpNc6EKs.js";import{v as u}from"./label-Ftw1VCQG.js";import{b}from"./component-names-Dy77vq43.js";import{t as p}from"./i18n-BsXYYo8j.js";import{K as m}from"./keyboard-DNd73LVa.js";import{c as k}from"./clsx-COFh-Vc8.js";import{d as g,a as y,c as v}from"./element-interaction-C5-6aPzz.js";import{d as w,K as _}from"./events-BhfZTW2e.js";import"./i18n-CoO4-0na.js";import"./element-focus-BQXzaLL9.js";const x=["select-automatic","select-manual"];const T=(n,t)=>{i(n,`_behavior`,(n=>typeof n==="string"&&x.includes(n)),new Set([`KoliBriTabBehavior {${x.join(", ")}`]),t)};const z=(n,t)=>{a(n,"_hasCreateButton",t)};const C='@charset "UTF-8";\n/* 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     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser\'s\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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: white;\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    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=1785404144300"); /* IE9*/\n  src: url("kolicons.eot?t=1785404144300#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785404144300") format("woff2"), url("kolicons.woff?t=1785404144300") format("woff"), url("kolicons.ttf?t=1785404144300") format("truetype"), url("kolicons.svg?t=1785404144300#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\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  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\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: black;\n    background-color: white;\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: black;\n    background-color: white;\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  @media (forced-colors: active) {\n    .kol-tabs__button-group .kol-button.selected {\n      outline: 3px solid Highlight;\n      outline-offset: -3px;\n    }\n    .kol-tabs__button-group .kol-button.selected:focus-visible {\n      outline-style: dashed;\n    }\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}';const j=class{constructor(t){n(this,t);this.onCreateLabel=`${p("kol-new")} …`;this.ctaRef=v();this.nextPossibleTabIndex=(n,t,e=1)=>{const o=t+e;if(o<n.length){if(n[o]._disabled){return this.nextPossibleTabIndex(n,t,e+1)}return o}return t};this.prevPossibleTabIndex=(n,t,e=1)=>{const o=t-e;if(o>=0){if(n[o]._disabled){return this.prevPossibleTabIndex(n,t,e+1)}return o}return t};this.onKeyDown=n=>{switch(n.key){case m.ArrowRight:this.goToNextTab(n);break;case m.ArrowLeft:this.goToPreviousTab(n);break;case m.Space:case m.Enter:this.activateFocusedTab(n);break}};this.onClickSelect=(n,t)=>{this.selectNextTabEvent(n,t)};this.onMouseDown=n=>{n.preventDefault()};this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown};this.catchTabPanelHost=n=>{this.tabPanelHost=n};this._align="top";this._hasCreateButton=false;this._selected=0;this.state={_align:"top",_label:"",_selected:0,_tabs:[]};this.selectNextNotDisabledTab=(n,t,e=true,o)=>{if(n>t.length-1){n=t.length-1}if(n<0){n=0}if(Array.isArray(t)&&t[n]){if(t[n]._disabled){if(e===true){if(n<t.length-1){return this.selectNextNotDisabledTab(n+1,t,true,o||n)}else{n=o||n;e=false}}if(e===false){if(n>0){return this.selectNextNotDisabledTab(n-1,t,false,o||n)}else{s(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`)}}}}return n};this.syncSelectedAndTabs=(n,t,e,o)=>{let i;if(o==="_selected"){i=n}else{i=this.state._selected}let a;if(o==="_tabs"){a=n}else{a=this.state._tabs}if(a.length>0){t.set("_selected",this.selectNextNotDisabledTab(i,a))}};this.refreshTabPanels=()=>{var n,t,e,o;if(!this.tabPanelHost)return;while(this.tabPanelHost.firstChild){this.tabPanelHost.removeChild(this.tabPanelHost.firstChild)}for(let i=0;i<((n=this.state._tabs)===null||n===void 0?void 0:n.length);i++){const n=document.createElement("div");n.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`);n.setAttribute("id",`tabpanel-${i}`);n.setAttribute("role","tabpanel");n.setAttribute("hidden","");const a=document.createElement("slot");a.setAttribute("name",`tabpanel-slot-${i}`);n.appendChild(a);(t=this.tabPanelHost)===null||t===void 0?void 0:t.appendChild(n);if(typeof HTMLCollection!=="undefined"&&((e=this.host)===null||e===void 0?void 0:e.children)instanceof HTMLCollection&&((o=this.host)===null||o===void 0?void 0:o.children[i])){this.host.children[i].setAttribute("slot",`tabpanel-slot-${i}`)}}this.updateVisiblePanel()};this.updateVisiblePanel=()=>{if(!this.tabPanelHost)return;Array.from(this.tabPanelHost.children).forEach(((n,t)=>{if(t===this.state._selected){n.removeAttribute("hidden")}else{n.setAttribute("hidden","")}}))};this.onCreate=n=>{var t,e;n.preventDefault();(e=(t=this.state._on)===null||t===void 0?void 0:t.onCreate)===null||e===void 0?void 0:e.call(t,n);if(this.host){w(this.host,_.create)}};this.onBlur=()=>{this.currentFocusIndex=undefined}}getCurrentFocusIndex(){if(typeof this.currentFocusIndex==="number"){return this.currentFocusIndex}return this.state._selected}getKeyboardTabChangeMode(){if(this._behavior==="select-manual"){return"selectFocusOnly"}return"activateCompletely"}goToNextTab(n){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(n,t,this.getKeyboardTabChangeMode())}goToPreviousTab(n){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(n,t,this.getKeyboardTabChangeMode())}activateFocusedTab(n){if(typeof this.currentFocusIndex==="number"){this.onSelect(n,this.currentFocusIndex)}}selectNextTabEvent(n,t,e="activateCompletely"){var o,i;this.currentFocusIndex=t;this.focusTabById(t);if(e==="activateCompletely"){this._selected=t;const e=this.state._tabs[t];(i=(o=e._on)===null||o===void 0?void 0:o.onSelect)===null||i===void 0?void 0:i.call(o,n,t);this.onSelect(n,t)}}async focus(n){}async click(){}renderButtonGroup(){return t("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((n,e)=>t(b,{ref:this.state._selected===e?this.ctaRef:undefined,_disabled:n._disabled,_icons:n._icons,_hideLabel:n._hideLabel,_label:n._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:n._tooltipAlign,_variant:this.state._selected===e?"custom":undefined,_customClass:this.state._selected===e?"selected":"",_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.state._hasCreateButton&&t(b,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"kolicon-plus","data-testid":"tabs-create-button"}))}render(){return t("div",{key:"b91b05099aae90e0b3fb222c47df077111650385",ref:n=>{this.tabPanelsElement=n},class:k("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),t("div",{key:"0002ef2aa171bf02b2684b4094166d961354360e",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(n){f(this,n)}validateBehavior(n){T(this,n)}validateHasCreateButton(n){z(this,n)}validateLabel(n){u(this,n,{required:true})}validateOn(n){if(typeof n==="object"&&n!==null){const t={};if(typeof n.onCreate==="function"){t.onCreate=n.onCreate}if(typeof n.onSelect==="function"){t.onSelect=n.onSelect}l(this,"_on",t)}}validateSelected(n){r(this,"_selected",n,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(n){c(this,"_tabs",(n=>typeof n==="object"&&n!==null&&typeof n._label==="string"&&n._label.length>0),n,undefined,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}});h("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(n){if(this.tabPanelsElement){const t=d(`button#${this.state._label.replace(/\s/g,"-")}-tab-${n}`,this.tabPanelsElement);t===null||t===void 0?void 0:t.focus()}}onSelect(n,t){var e,o;(o=(e=this._on)===null||e===void 0?void 0:e.onSelect)===null||o===void 0?void 0:o.call(e,n,t);if(this.host){w(this.host,_.select,t)}this.focusTabById(t)}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};o([g("ctaRef")],j.prototype,"focus",null);o([y("ctaRef")],j.prototype,"click",null);j.style={default:C};export{j as kol_tabs};
+import{r as n,h as t,g as e}from"./index-5bbrauFT.js";import{_ as o}from"./tslib.es6-QNbPBOk5.js";import{b as i,e as a,j as l,s,N as r,H as c,I as h,Q as d}from"./common-D5l8QiaY.js";import{v as f}from"./align-DpNc6EKs.js";import{v as u}from"./label-Ftw1VCQG.js";import{b}from"./component-names-Dy77vq43.js";import{t as p}from"./i18n-BsXYYo8j.js";import{K as m}from"./keyboard-DNd73LVa.js";import{c as k}from"./clsx-COFh-Vc8.js";import{d as g,a as y,c as v}from"./element-interaction-C5-6aPzz.js";import{d as w,K as _}from"./events-BhfZTW2e.js";import"./i18n-CoO4-0na.js";import"./element-focus-BQXzaLL9.js";const x=["select-automatic","select-manual"];const T=(n,t)=>{i(n,`_behavior`,(n=>typeof n==="string"&&x.includes(n)),new Set([`KoliBriTabBehavior {${x.join(", ")}`]),t)};const z=(n,t)=>{a(n,"_hasCreateButton",t)};const C='@charset "UTF-8";\n/* 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     * The `max(…, 44px)` floor guarantees the WCAG 2.5.5 (AAA) target size of 44px:\n     * `to-rem(44)` runs the value through a `calc()` rem round-trip which can lose\n     * sub-pixel precision and resolve to e.g. 43.99px depending on the browser\'s\n     * rounding, dropping just below the required minimum.\n     */\n    --a11y-min-size: max(calc(44 * 1rem / var(--kolibri-root-font-size, 16)), 44px);\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    --kol-a11y-font-color: black;\n    --kol-a11y-background-color: white;\n    color: var(--kol-a11y-font-color);\n    background-color: var(--kol-a11y-background-color);\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    --kol-a11y-font-family: Verdana;\n    font-family: var(--kol-a11y-font-family);\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: white;\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    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=1785491886871"); /* IE9*/\n  src: url("kolicons.eot?t=1785491886871#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1785491886871") format("woff2"), url("kolicons.woff?t=1785491886871") format("woff"), url("kolicons.ttf?t=1785491886871") format("truetype"), url("kolicons.svg?t=1785491886871#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\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  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\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: black;\n    background-color: white;\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: black;\n    background-color: white;\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  @media (forced-colors: active) {\n    .kol-tabs__button-group .kol-button.selected {\n      outline: 3px solid Highlight;\n      outline-offset: -3px;\n    }\n    .kol-tabs__button-group .kol-button.selected:focus-visible {\n      outline-style: dashed;\n    }\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}';const j=class{constructor(t){n(this,t);this.onCreateLabel=`${p("kol-new")} …`;this.ctaRef=v();this.nextPossibleTabIndex=(n,t,e=1)=>{const o=t+e;if(o<n.length){if(n[o]._disabled){return this.nextPossibleTabIndex(n,t,e+1)}return o}return t};this.prevPossibleTabIndex=(n,t,e=1)=>{const o=t-e;if(o>=0){if(n[o]._disabled){return this.prevPossibleTabIndex(n,t,e+1)}return o}return t};this.onKeyDown=n=>{switch(n.key){case m.ArrowRight:this.goToNextTab(n);break;case m.ArrowLeft:this.goToPreviousTab(n);break;case m.Space:case m.Enter:this.activateFocusedTab(n);break}};this.onClickSelect=(n,t)=>{this.selectNextTabEvent(n,t)};this.onMouseDown=n=>{n.preventDefault()};this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown};this.catchTabPanelHost=n=>{this.tabPanelHost=n};this._align="top";this._hasCreateButton=false;this._selected=0;this.state={_align:"top",_label:"",_selected:0,_tabs:[]};this.selectNextNotDisabledTab=(n,t,e=true,o)=>{if(n>t.length-1){n=t.length-1}if(n<0){n=0}if(Array.isArray(t)&&t[n]){if(t[n]._disabled){if(e===true){if(n<t.length-1){return this.selectNextNotDisabledTab(n+1,t,true,o||n)}else{n=o||n;e=false}}if(e===false){if(n>0){return this.selectNextNotDisabledTab(n-1,t,false,o||n)}else{l(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`)}}}}return n};this.syncSelectedAndTabs=(n,t,e,o)=>{let i;if(o==="_selected"){i=n}else{i=this.state._selected}let a;if(o==="_tabs"){a=n}else{a=this.state._tabs}if(a.length>0){t.set("_selected",this.selectNextNotDisabledTab(i,a))}};this.refreshTabPanels=()=>{var n,t,e,o;if(!this.tabPanelHost)return;while(this.tabPanelHost.firstChild){this.tabPanelHost.removeChild(this.tabPanelHost.firstChild)}for(let i=0;i<((n=this.state._tabs)===null||n===void 0?void 0:n.length);i++){const n=document.createElement("div");n.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`);n.setAttribute("id",`tabpanel-${i}`);n.setAttribute("role","tabpanel");n.setAttribute("hidden","");const a=document.createElement("slot");a.setAttribute("name",`tabpanel-slot-${i}`);n.appendChild(a);(t=this.tabPanelHost)===null||t===void 0?void 0:t.appendChild(n);if(typeof HTMLCollection!=="undefined"&&((e=this.host)===null||e===void 0?void 0:e.children)instanceof HTMLCollection&&((o=this.host)===null||o===void 0?void 0:o.children[i])){this.host.children[i].setAttribute("slot",`tabpanel-slot-${i}`)}}this.updateVisiblePanel()};this.updateVisiblePanel=()=>{if(!this.tabPanelHost)return;Array.from(this.tabPanelHost.children).forEach(((n,t)=>{if(t===this.state._selected){n.removeAttribute("hidden")}else{n.setAttribute("hidden","")}}))};this.onCreate=n=>{var t,e;n.preventDefault();(e=(t=this.state._on)===null||t===void 0?void 0:t.onCreate)===null||e===void 0?void 0:e.call(t,n);if(this.host){w(this.host,_.create)}};this.onBlur=()=>{this.currentFocusIndex=undefined}}getCurrentFocusIndex(){if(typeof this.currentFocusIndex==="number"){return this.currentFocusIndex}return this.state._selected}getKeyboardTabChangeMode(){if(this._behavior==="select-manual"){return"selectFocusOnly"}return"activateCompletely"}goToNextTab(n){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(n,t,this.getKeyboardTabChangeMode())}goToPreviousTab(n){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(n,t,this.getKeyboardTabChangeMode())}activateFocusedTab(n){if(typeof this.currentFocusIndex==="number"){this.onSelect(n,this.currentFocusIndex)}}selectNextTabEvent(n,t,e="activateCompletely"){var o,i;this.currentFocusIndex=t;this.focusTabById(t);if(e==="activateCompletely"){this._selected=t;const e=this.state._tabs[t];(i=(o=e._on)===null||o===void 0?void 0:o.onSelect)===null||i===void 0?void 0:i.call(o,n,t);this.onSelect(n,t)}}async focus(n){}async click(){}renderButtonGroup(){return t("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((n,e)=>t(b,{ref:this.state._selected===e?this.ctaRef:undefined,_disabled:n._disabled,_icons:n._icons,_hideLabel:n._hideLabel,_label:n._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:n._tooltipAlign,_variant:this.state._selected===e?"custom":undefined,_customClass:this.state._selected===e?"selected":"",_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.state._hasCreateButton&&t(b,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"kolicon-plus","data-testid":"tabs-create-button"}))}render(){return t("div",{key:"b91b05099aae90e0b3fb222c47df077111650385",ref:n=>{this.tabPanelsElement=n},class:k("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),t("div",{key:"0002ef2aa171bf02b2684b4094166d961354360e",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(n){f(this,n)}validateBehavior(n){T(this,n)}validateHasCreateButton(n){z(this,n)}validateLabel(n){u(this,n,{required:true})}validateOn(n){if(typeof n==="object"&&n!==null){const t={};if(typeof n.onCreate==="function"){t.onCreate=n.onCreate}if(typeof n.onSelect==="function"){t.onSelect=n.onSelect}s(this,"_on",t)}}validateSelected(n){r(this,"_selected",n,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(n){c(this,"_tabs",(n=>typeof n==="object"&&n!==null&&typeof n._label==="string"&&n._label.length>0),n,undefined,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}});h("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(n){if(this.tabPanelsElement){const t=d(`button#${this.state._label.replace(/\s/g,"-")}-tab-${n}`,this.tabPanelsElement);t===null||t===void 0?void 0:t.focus()}}onSelect(n,t){var e,o;(o=(e=this._on)===null||e===void 0?void 0:e.onSelect)===null||o===void 0?void 0:o.call(e,n,t);if(this.host){w(this.host,_.select,t)}this.focusTabById(t)}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};o([g("ctaRef")],j.prototype,"focus",null);o([y("ctaRef")],j.prototype,"click",null);j.style={default:C};export{j as kol_tabs};
 //# sourceMappingURL=kol-tabs.entry.js.map