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

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,F as n,g as r}from"./index-CJixoXML.js";import{_ as i}from"./tslib.es6-CxX45GIN.js";import{d as o,f as a,e as s,a as l,x as c}from"./component-names-B_kYyA8u.js";import{t as u}from"./i18n-0_cE4ov3.js";import{O as f,o as d,p as h,w as v,s as b}from"./common-B-m-0Sa1.js";import{b as _,v as p,a as y,e as k,c as j}from"./table-selection-DjfWF12k.js";import{v as m}from"./label-BqL4x8lJ.js";import{C as g}from"./keyboard-DNd73LVa.js";import{c as w}from"./clsx-D6cJXTZC.js";import{n as S}from"./dev.utils-ClbGw5Q5.js";import{d as A,K as O}from"./events-DHTi_wtD.js";import{i as $,c as x,r as D,a as C,f as M,b as F,S as H}from"./isObject-DvSELytj.js";import"./i18n-B0tfVPMa.js";const E=(e,t)=>{f(t,()=>{d(t,()=>{try{t=h(t)}catch(e){}v(e,"_headerCells",e=>{var t,r;return"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find(e=>!Array.isArray(e)))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find(e=>!Array.isArray(e)))&&[...null!==(t=e.horizontal)&&void 0!==t?t:[],...null!==(r=e.vertical)&&void 0!==r?r:[]].flat().every(e=>void 0===e.width||"number"==typeof e.width)&&!0},new Set(["TableHeaderCellsPropType"]),t)})})};var W="[object AsyncFunction]",B="[object Function]",K="[object GeneratorFunction]",P="[object Proxy]";function R(e){if(!$(e))return!1;var t=x(e);return t==B||t==K||t==W||t==P}var T=D["__core-js_shared__"],L=function(){var e=/[^.]+$/.exec(T&&T.keys&&T.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();function z(e){return!!L&&L in e}var I=Function.prototype,N=I.toString;function V(e){if(null!=e){try{return N.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var U=/[\\^$.*+?()[\]{}|]/g,G=/^\[object .+?Constructor\]$/,J=Function.prototype,X=Object.prototype,q=J.toString,Q=X.hasOwnProperty,Y=RegExp("^"+q.call(Q).replace(U,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function Z(e){return!(!$(e)||z(e))&&(R(e)?Y:G).test(V(e))}function tt(e,t){return null==e?void 0:e[t]}function et(e,t){var r=tt(e,t);return Z(r)?r:void 0}var nt=et(D,"WeakMap"),rt=9007199254740991,it=/^(?:0|[1-9]\d*)$/;function ot(e,t){var r=typeof e;return!!(t=null==t?rt:t)&&("number"==r||"symbol"!=r&&it.test(e))&&e>-1&&e%1==0&&e<t}function at(e,t){return e===t||e!=e&&t!=t}var st=9007199254740991;function lt(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=st}function ct(e){return null!=e&&lt(e.length)&&!R(e)}var ut=Object.prototype;function ft(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||ut)}function dt(e,t){for(var r=-1,n=Array(e);++r<e;)n[r]=t(r);return n}var ht="[object Arguments]";function vt(e){return C(e)&&x(e)==ht}var bt=Object.prototype,_t=bt.hasOwnProperty,pt=bt.propertyIsEnumerable,yt=vt(function(){return arguments}())?vt:function(e){return C(e)&&_t.call(e,"callee")&&!pt.call(e,"callee")};function kt(){return!1}var jt="object"==typeof exports&&exports&&!exports.nodeType&&exports,mt=jt&&"object"==typeof module&&module&&!module.nodeType&&module,gt=mt&&mt.exports===jt,wt=gt?D.Buffer:void 0,St=wt?wt.isBuffer:void 0,At=St||kt,Ot="[object Arguments]",$t="[object Array]",xt="[object Boolean]",Dt="[object Date]",Ct="[object Error]",Mt="[object Function]",Ft="[object Map]",Ht="[object Number]",Et="[object Object]",Wt="[object RegExp]",Bt="[object Set]",Kt="[object String]",Pt="[object WeakMap]",Rt="[object ArrayBuffer]",Tt="[object DataView]",Lt="[object Float32Array]",zt="[object Float64Array]",It="[object Int8Array]",Nt="[object Int16Array]",Vt="[object Int32Array]",Ut="[object Uint8Array]",Gt="[object Uint8ClampedArray]",Jt="[object Uint16Array]",Xt="[object Uint32Array]",qt={};function Qt(e){return C(e)&&lt(e.length)&&!!qt[x(e)]}function Yt(e){return function(t){return e(t)}}qt[Lt]=qt[zt]=qt[It]=qt[Nt]=qt[Vt]=qt[Ut]=qt[Gt]=qt[Jt]=qt[Xt]=!0,qt[Ot]=qt[$t]=qt[Rt]=qt[xt]=qt[Tt]=qt[Dt]=qt[Ct]=qt[Mt]=qt[Ft]=qt[Ht]=qt[Et]=qt[Wt]=qt[Bt]=qt[Kt]=qt[Pt]=!1;var Zt="object"==typeof exports&&exports&&!exports.nodeType&&exports,te=Zt&&"object"==typeof module&&module&&!module.nodeType&&module,ee=te&&te.exports===Zt,ne=ee&&M.process,re=function(){try{var e=te&&te.require&&te.require("util").types;return e||ne&&ne.binding&&ne.binding("util")}catch(e){}}(),ie=re&&re.isTypedArray,oe=ie?Yt(ie):Qt,ae=Object.prototype,se=ae.hasOwnProperty;function le(e,t){var r=F(e),n=!r&&yt(e),a=!r&&!n&&At(e),o=!r&&!n&&!a&&oe(e),i=r||n||a||o,l=i?dt(e.length,String):[],s=l.length;for(var c in e)!se.call(e,c)||i&&("length"==c||a&&("offset"==c||"parent"==c)||o&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||ot(c,s))||l.push(c);return l}function ce(e,t){return function(r){return e(t(r))}}var ue=ce(Object.keys,Object),fe=Object.prototype,de=fe.hasOwnProperty;function he(e){if(!ft(e))return ue(e);var t=[];for(var r in Object(e))de.call(e,r)&&"constructor"!=r&&t.push(r);return t}function ve(e){return ct(e)?le(e):he(e)}var be=et(Object,"create");function _e(){this.__data__=be?be(null):{},this.size=0}function pe(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}var ye="__lodash_hash_undefined__",ke=Object.prototype,je=ke.hasOwnProperty;function me(e){var t=this.__data__;if(be){var r=t[e];return r===ye?void 0:r}return je.call(t,e)?t[e]:void 0}var ge=Object.prototype,we=ge.hasOwnProperty;function Se(e){var t=this.__data__;return be?void 0!==t[e]:we.call(t,e)}var Ae="__lodash_hash_undefined__";function Oe(e,t){var r=this.__data__;return this.size+=this.has(e)?0:1,r[e]=be&&void 0===t?Ae:t,this}function $e(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function xe(){this.__data__=[],this.size=0}function De(e,t){for(var r=e.length;r--;)if(at(e[r][0],t))return r;return-1}$e.prototype.clear=_e,$e.prototype.delete=pe,$e.prototype.get=me,$e.prototype.has=Se,$e.prototype.set=Oe;var Ce=Array.prototype,Me=Ce.splice;function Fe(e){var t=this.__data__,r=De(t,e);return!(r<0)&&(r==t.length-1?t.pop():Me.call(t,r,1),--this.size,!0)}function He(e){var t=this.__data__,r=De(t,e);return r<0?void 0:t[r][1]}function Ee(e){return De(this.__data__,e)>-1}function We(e,t){var r=this.__data__,n=De(r,e);return n<0?(++this.size,r.push([e,t])):r[n][1]=t,this}function Be(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}Be.prototype.clear=xe,Be.prototype.delete=Fe,Be.prototype.get=He,Be.prototype.has=Ee,Be.prototype.set=We;var Ke=et(D,"Map");function Pe(){this.size=0,this.__data__={hash:new $e,map:new(Ke||Be),string:new $e}}function Re(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}function Te(e,t){var r=e.__data__;return Re(t)?r["string"==typeof t?"string":"hash"]:r.map}function Le(e){var t=Te(this,e).delete(e);return this.size-=t?1:0,t}function ze(e){return Te(this,e).get(e)}function Ie(e){return Te(this,e).has(e)}function Ne(e,t){var r=Te(this,e),n=r.size;return r.set(e,t),this.size+=r.size==n?0:1,this}function Ve(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function Ue(e,t){for(var r=-1,n=t.length,a=e.length;++r<n;)e[a+r]=t[r];return e}function Ge(){this.__data__=new Be,this.size=0}function Je(e){var t=this.__data__,r=t.delete(e);return this.size=t.size,r}function Xe(e){return this.__data__.get(e)}function qe(e){return this.__data__.has(e)}Ve.prototype.clear=Pe,Ve.prototype.delete=Le,Ve.prototype.get=ze,Ve.prototype.has=Ie,Ve.prototype.set=Ne;var Qe=200;function Ye(e,t){var r=this.__data__;if(r instanceof Be){var n=r.__data__;if(!Ke||n.length<Qe-1)return n.push([e,t]),this.size=++r.size,this;r=this.__data__=new Ve(n)}return r.set(e,t),this.size=r.size,this}function Ze(e){var t=this.__data__=new Be(e);this.size=t.size}function tn(e,t){for(var r=-1,n=null==e?0:e.length,a=0,o=[];++r<n;){var i=e[r];t(i,r,e)&&(o[a++]=i)}return o}function en(){return[]}Ze.prototype.clear=Ge,Ze.prototype.delete=Je,Ze.prototype.get=Xe,Ze.prototype.has=qe,Ze.prototype.set=Ye;var nn=Object.prototype,rn=nn.propertyIsEnumerable,on=Object.getOwnPropertySymbols,an=on?function(e){return null==e?[]:(e=Object(e),tn(on(e),function(t){return rn.call(e,t)}))}:en;function sn(e,t,r){var n=t(e);return F(e)?n:Ue(n,r(e))}function ln(e){return sn(e,ve,an)}var cn=et(D,"DataView"),un=et(D,"Promise"),fn=et(D,"Set"),dn="[object Map]",hn="[object Object]",vn="[object Promise]",bn="[object Set]",_n="[object WeakMap]",pn="[object DataView]",yn=V(cn),kn=V(Ke),jn=V(un),mn=V(fn),gn=V(nt),wn=x;(cn&&wn(new cn(new ArrayBuffer(1)))!=pn||Ke&&wn(new Ke)!=dn||un&&wn(un.resolve())!=vn||fn&&wn(new fn)!=bn||nt&&wn(new nt)!=_n)&&(wn=function(e){var t=x(e),r=t==hn?e.constructor:void 0,n=r?V(r):"";if(n)switch(n){case yn:return pn;case kn:return dn;case jn:return vn;case mn:return bn;case gn:return _n}return t});var Sn=D.Uint8Array,An="__lodash_hash_undefined__";function On(e){return this.__data__.set(e,An),this}function $n(e){return this.__data__.has(e)}function xn(e){var t=-1,r=null==e?0:e.length;for(this.__data__=new Ve;++t<r;)this.add(e[t])}function Dn(e,t){for(var r=-1,n=null==e?0:e.length;++r<n;)if(t(e[r],r,e))return!0;return!1}function Cn(e,t){return e.has(t)}xn.prototype.add=xn.prototype.push=On,xn.prototype.has=$n;var Mn=1,Fn=2;function Hn(e,t,r,n,a,o){var i=r&Mn,l=e.length,s=t.length;if(l!=s&&!(i&&s>l))return!1;var c=o.get(e),h=o.get(t);if(c&&h)return c==t&&h==e;var d=-1,u=!0,b=r&Fn?new xn:void 0;for(o.set(e,t),o.set(t,e);++d<l;){var _=e[d],f=t[d];if(n)var p=i?n(f,_,d,t,e,o):n(_,f,d,e,t,o);if(void 0!==p){if(p)continue;u=!1;break}if(b){if(!Dn(t,function(e,t){if(!Cn(b,t)&&(_===e||a(_,e,r,n,o)))return b.push(t)})){u=!1;break}}else if(_!==f&&!a(_,f,r,n,o)){u=!1;break}}return o.delete(e),o.delete(t),u}function En(e){var t=-1,r=Array(e.size);return e.forEach(function(e,n){r[++t]=[n,e]}),r}function Wn(e){var t=-1,r=Array(e.size);return e.forEach(function(e){r[++t]=e}),r}var Bn=1,Kn=2,Pn="[object Boolean]",Rn="[object Date]",Tn="[object Error]",Ln="[object Map]",zn="[object Number]",In="[object RegExp]",Nn="[object Set]",Vn="[object String]",Un="[object Symbol]",Gn="[object ArrayBuffer]",Jn="[object DataView]",Xn=H?H.prototype:void 0,qn=Xn?Xn.valueOf:void 0;function Qn(e,t,r,n,a,o,i){switch(r){case Jn:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case Gn:return!(e.byteLength!=t.byteLength||!o(new Sn(e),new Sn(t)));case Pn:case Rn:case zn:return at(+e,+t);case Tn:return e.name==t.name&&e.message==t.message;case In:case Vn:return e==t+"";case Ln:var l=En;case Nn:var s=n&Bn;if(l||(l=Wn),e.size!=t.size&&!s)return!1;var c=i.get(e);if(c)return c==t;n|=Kn,i.set(e,t);var h=Hn(l(e),l(t),n,a,o,i);return i.delete(e),h;case Un:if(qn)return qn.call(e)==qn.call(t)}return!1}var Yn=1,Zn=Object.prototype,tr=Zn.hasOwnProperty;function er(e,t,r,n,a,o){var i=r&Yn,l=ln(e),s=l.length;if(s!=ln(t).length&&!i)return!1;for(var c=s;c--;){var h=l[c];if(!(i?h in t:tr.call(t,h)))return!1}var d=o.get(e),u=o.get(t);if(d&&u)return d==t&&u==e;var b=!0;o.set(e,t),o.set(t,e);for(var _=i;++c<s;){var f=e[h=l[c]],p=t[h];if(n)var v=i?n(p,f,h,t,e,o):n(f,p,h,e,t,o);if(!(void 0===v?f===p||a(f,p,r,n,o):v)){b=!1;break}_||(_="constructor"==h)}if(b&&!_){var y=e.constructor,g=t.constructor;y==g||!("constructor"in e)||!("constructor"in t)||"function"==typeof y&&y instanceof y&&"function"==typeof g&&g instanceof g||(b=!1)}return o.delete(e),o.delete(t),b}var nr=1,rr="[object Arguments]",ir="[object Array]",or="[object Object]",ar=Object.prototype,sr=ar.hasOwnProperty;function lr(e,t,r,n,a,o){var i=F(e),l=F(t),s=i?ir:wn(e),c=l?ir:wn(t),h=(s=s==rr?or:s)==or,d=(c=c==rr?or:c)==or,u=s==c;if(u&&At(e)){if(!At(t))return!1;i=!0,h=!1}if(u&&!h)return o||(o=new Ze),i||oe(e)?Hn(e,t,r,n,a,o):Qn(e,t,s,r,n,a,o);if(!(r&nr)){var b=h&&sr.call(e,"__wrapped__"),_=d&&sr.call(t,"__wrapped__");if(b||_){var f=b?e.value():e,p=_?t.value():t;return o||(o=new Ze),a(f,p,r,n,o)}}return!!u&&(o||(o=new Ze),er(e,t,r,n,a,o))}function cr(e,t,r,n,a){return e===t||(null==e||null==t||!C(e)&&!C(t)?e!=e&&t!=t:lr(e,t,r,n,cr,a))}function ur(e,t){return cr(e,t)}const fr=class{constructor(r){t(this,r),this.translateNoEntries=u("kol-no-entries"),this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_hasSettingsMenu:!1},this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.translateSort=u("kol-sort"),this.translateSortOrder=u("kol-table-sort-order"),this.tableDivElementHasScrollbar=!1,this.renderTableRow=(t,r,n,a=!1)=>{var o,i;let l=String(r);return this.horizontal&&(null===(o=t[0])||void 0===o?void 0:o.data)&&(l=null!==(i=this.getDataKey(t[0].data))&&void 0!==i?i:l),e("tr",{class:w("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${l}`},this.renderSelectionCell(t,r),t.map((e,t)=>this.renderTableCell(e,r,t,n)))},this.renderTableCell=(t,r,n,a)=>{if(!1===t.visible)return"";let o=`${r}-${n}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);o=e?`${e}-${this.horizontal?n:r}`:o}if(t.headerCell)return this.renderHeadingCell(t,r,n,a);{const r="function"!=typeof t.render&&t.label===this.translateNoEntries,a=this.getActionColumnHeader(n),i=Boolean(a&&t.data);return e("td",{key:`cell-${o}`,class:w("kol-table__cell kol-table__cell--body",t.textAlign&&`kol-table__cell--align-${t.textAlign}`,i&&"kol-table__cell--actions"),"aria-atomic":r?"false":void 0,"aria-live":r?"polite":void 0,"aria-relevant":r?"text":void 0,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},i&&a&&t.data?this.renderActionItems(a,t.data,o):"function"!=typeof t.render?t.label:"")}},this.renderActionItems=(t,r,n)=>{const l=t.actions(r);return e("div",{class:"kol-table__cell-actions"},l.map((t,r)=>{if("button"===t.type){const a=i(t,[]);return e(o,Object.assign({key:`action-${n}-${r}`},a,{_buttonVariant:a._variant}))}if("link"===t.type){const o=i(t,[]);return e(a,Object.assign({key:`action-${n}-${r}`},o))}return null}))}}validateHasSettingsMenu(e){_(this,e)}validateData(e){p(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){y(this,e)}validateHeaderCells(e){E(this,e),ur(this.previousHeaderCells,this.state._headerCells)||this.initializeHeaderCellSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){m(this,e,{required:!0})}validateOn(e){k(this,e)}validateSelection(e){j(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const r=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let n=this.checkboxRefs.indexOf(r);n>-1&&(e.preventDefault(),"ArrowDown"===e.key?(n=(n+1)%this.checkboxRefs.length,this.checkboxRefs[n].focus()):"ArrowUp"===e.key&&(e.preventDefault(),n=(n+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[n].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}handleSettingsChange(e){var t;const r=Object.assign(Object.assign({},this.state._headerCells),{horizontal:e.detail});b(this,"_headerCells",r),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[g.onChangeHeaderCells])&&this.state._on[g.onChangeHeaderCells](e,r)}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach(e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,S())}),this.dataToKeyMap.forEach((t,r)=>{e.includes(r)||this.dataToKeyMap.delete(r)})}getDataKey(e){return this.dataToKeyMap.get(e)}getActionColumnHeader(e){const t=this.horizontal?this.state._headerCells.horizontal:this.state._headerCells.vertical;if(!t||0===t.length)return;const r=this.getPrimaryHeaders(this.state._headerCells)[e];return r&&"action"===r.type?r:void 0}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout(()=>{if("function"==typeof e.render){const r=e.render(t,e,e.data,this.state._data);"string"==typeof r&&(t.textContent=r)}})))}getNumberOfCols(e,t){let r=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var r;return t+=null!==(r=e.colSpan)&&void 0!==r?r:1}),r<t&&(r=t)}),0===r&&(r=t.length),r}getNumberOfRows(e,t){var r;let n=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var r;return t+=null!==(r=e.rowSpan)&&void 0!==r?r:1}),n<t&&(n=t)}),0===n?n=t.length:n-=(null===(r=this.state._dataFoot)||void 0===r?void 0:r.length)||0,n}getThePrimaryHeadersWithKeyOrRenderFunction(e){const t=[];return e.forEach(e=>{e.forEach(e=>{"string"!=typeof e.key&&"function"!=typeof e.render||t.push(e)})}),t}getPrimaryHeaders(e){var t,r;let n=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===n.length&&(n=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(r=e.vertical)&&void 0!==r?r:[]),n.length>0&&(this.horizontal=!1)),n}createDataField(e,t,r){var n;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const a=this.getPrimaryHeaders(t),o=this.getNumberOfCols(t.horizontal,e);let i=this.getNumberOfRows(t.vertical,e),l=0;r&&(l=i,i+=(null===(n=this.state._dataFoot)||void 0===n?void 0:n.length)||0);const s=[],c=[],h=[];t.vertical.forEach((e,t)=>{c[t]=0,h[t]=[]});const d=a;for(let n=l;n<i;n++){const a=[];t.vertical.forEach((e,t)=>{let r=0;if(h[t].forEach(e=>r+=e),r<=n){const o=e[n-r+c[t]];if("object"==typeof o){a.push(Object.assign(Object.assign({},o),{headerCell:!0,data:{}}));let e=1;if("number"==typeof o.rowSpan&&o.rowSpan>1&&(e=o.rowSpan),h[t].push(e),"number"==typeof o.colSpan&&o.colSpan>1)for(let r=1;r<o.colSpan;r++)h[t+r].push(e);c[t]++}}});for(let t=0;t<o;t++)if(!0===this.horizontal){const o=r&&this.state._dataFoot?this.state._dataFoot[n-l]:e[n];if("object"==typeof d[t]&&null!==d[t]&&"object"==typeof o&&null!==o&&("string"==typeof d[t].key||"function"==typeof d[t].render)){const e=o[d[t].key];a.push(Object.assign(Object.assign({},d[t]),{colSpan:void 0,rowSpan:void 0,data:o,label:e}))}}else if("object"==typeof d[n]&&null!==d[n]&&"object"==typeof e[t]&&null!==e[t]&&("string"==typeof d[n].key||"function"==typeof d[n].render)){const r=d[n].key,o=e[t][r];a.push(Object.assign(Object.assign({},d[n]),{colSpan:void 0,rowSpan:void 0,data:e[t],label:o}))}s.push(a)}if(0===e.length){let e=0,r=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach(t=>{e+=t.colSpan||1}),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach(e=>{r+=e.rowSpan||1}));const n={colSpan:e,label:this.translateNoEntries,render:void 0,rowSpan:Math.max(r,1)};0===s.length?s.push([n]):s[0].push(n)}return s}handleSelectionChangeCallbackAndEvent(e,t){var r;"function"==typeof(null===(r=this.state._on)||void 0===r?void 0:r[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,t),this.host&&A(this.host,O.selectionChange,t)}initializeHeaderCellSettings(){if(this.state._headerCells&&this.state._headerCells.horizontal&&this.state._headerCells.horizontal.length>0){const e=Object.assign(Object.assign({},this.state._headerCells),{horizontal:this.state._headerCells.horizontal.map(e=>e.map(e=>Object.assign(Object.assign({},e),{visible:"boolean"!=typeof e.visible||e.visible,hidable:"boolean"!=typeof e.hidable||e.hidable})))});b(this,"_headerCells",e)}}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelection(this._selection),this.validateHasSettingsMenu(this._hasSettingsMenu)}renderSelectionCell(t,r){var n;const a=this.state._selection;if(!a)return"";const o=this.getSelectionKeyPropertyName(),i=null===(n=t[0])||void 0===n?void 0:n.data;if(!i)return"";const c=i[o],h=a.multiple||void 0===a.multiple,d=(()=>{const e=null==a?void 0:a.selectedKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(c))})(),u=(()=>{const e=null==a?void 0:a.disabledKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(c))})(),b=a.label(i),_={name:"selection",checked:d,disabled:u,id:String(c),"aria-label":b};return e("td",{key:`tbody-${r}-selection`,class:"kol-table__cell kol-table__cell--selection"},e("div",{class:w("kol-table__selection",{"kol-table__selection--checked":d})},h?e("label",{class:w("kol-table__selection-label",{"kol-table__selection-label--disabled":u})},e(s,{class:"kol-table__selection-icon",_icons:"kolicon "+(d?"kolicon-check":""),_label:""}),e("input",Object.assign({class:w("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},_,{type:"checkbox",onInput:e=>{const t=(()=>{const e=null==a?void 0:a.selectedKeys;return void 0===e?[]:Array.isArray(e)?e:[e]})(),r=d?t.filter(e=>String(e)!==String(c)):[...t,c];this.handleSelectionChangeCallbackAndEvent(e,null!=r?r:[])}}))):e("label",{class:"kol-table__selection-label"},e("input",Object.assign({class:w("kol-table__selection-input kol-table__selection-input--radio")},_,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,[c])}}))),e(l,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${c}-label`,_label:b})))}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter(t=>{var r;const n=null===(r=this.state._selection)||void 0===r?void 0:r.disabledKeys;return!(void 0===n?[]:Array.isArray(n)?n:[n]).some(r=>String(r)===String(t[e]))})}getSelectedKeysWithoutDisabledKeys(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>!t.some(t=>String(t)===String(e)))}getSelectedKeysWithDisabledKeysOnly(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>t.some(t=>String(t)===String(e)))}getRevertedSelection(e){var t;const r=this.getSelectionKeyPropertyName(),n=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&n.push(...this.getDataWithSelectionEnabled().map(e=>null==e?void 0:e[r])),n}getTableMinWidth(){var e,t;const r=null!==(e=this.state._headerCells.horizontal)&&void 0!==e?e:[],n=[];r.forEach(e=>{e.forEach(e=>{!1!==e.visible&&void 0!==e.width&&e.width>0&&n.push(e.width)})});const a=null!==(t=this.state._headerCells.vertical)&&void 0!==t?t:[],o=[];a.forEach(e=>{e.forEach(e=>{void 0!==e.width&&e.width>0&&o.push(e.width)})});const i=[...o,...n];return 0===i.length?"0px":1===i.length?`${i[0]}px`:`calc(${i.map(e=>`${e}px`).join(" + ")})`}renderHeadingSelectionCell(){var t,r;const n=this.state._selection;if(!n)return e("td",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});if(!1===n.multiple)return e("td",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"});const a=null!==(r=null===(t=this.getSelectedKeysWithoutDisabledKeys())||void 0===t?void 0:t.length)&&void 0!==r?r:0,o=a===this.getDataWithSelectionEnabled().length,i=0!==a&&!o;let c="kol-table-selection-indeterminate";o&&!i&&(c="kol-table-selection-none"),0===a&&(c="kol-table-selection-all");const h=u(c);return e("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},e("div",{class:w("kol-table__selection",{"kol-table__selection--indeterminate":i,"kol-table__selection--checked":o})},e("label",{class:"kol-table__selection-label"},e(s,{class:"kol-table__selection-icon",_icons:"kolicon "+(i?"kolicon-minus":o?"kolicon-check":""),_label:""}),e("input",{class:w("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:o&&!i,indeterminate:i,"aria-label":h,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!o))}})),e(l,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${c}-label`,_label:h})))}renderHeaderTdCell(){const t=this.state._headerCells.horizontal,r=this.state._headerCells.vertical;if(!Array.isArray(t)||0===t.length||!Array.isArray(r)||0===r.length)return e(n,null);const a=r.reduce((e,t)=>{var r;const n=null==t?void 0:t[0];return e+(null!==(r=null==n?void 0:n.width)&&void 0!==r?r:0)},0);return e("td",{"aria-hidden":"true",colSpan:r.length,rowSpan:t.length,style:a>0?{width:`${a}px`}:void 0})}formatSortOrderDescription(e){return this.translateSortOrder.replace("{{order}}",`${e}`)}getSortAriaDescription(e){return"number"==typeof e&&e>0?`${this.translateSort} – ${this.formatSortOrderDescription(e)}`:this.translateSort}renderHeadingCell(t,r,n,a){if(!1===t.visible)return"";const i=!1!==(null==t?void 0:t.sortable),l="string"==typeof t.sortDirection,s=i&&l;let c="none",h="kolicon-sort-neutral";if(s&&t.sortDirection)switch(t.sortDirection){case"ASC":h="kolicon-sort-asc",c="ascending";break;case"DESC":h="kolicon-sort-desc",c="descending";break;default:c="none"}const d=a?"row":"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",u="number"==typeof t.sortOrder&&t.sortOrder>0?t.sortOrder:void 0,b=this.getSortAriaDescription(u);return e("th",{key:`${r}-${n}-${t.label}`,class:w("kol-table__cell kol-table__cell--header",t.textAlign&&`kol-table__cell--align-${t.textAlign}`,`kol-table__cell--${c}`),scope:d,colSpan:t.colSpan,rowSpan:t.rowSpan,style:void 0!==t.width?{width:`${t.width}px`}:void 0,"aria-sort":c,"data-sort":s&&t.sortDirection?`sort-${t.sortDirection}`:void 0},s&&t.sortDirection?e("span",{class:"kol-table__sort"},e(o,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:h},_label:t.label,_ariaDescription:b,_on:{onClick:e=>{var r;"function"==typeof(null===(r=this.state._on)||void 0===r?void 0:r.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection}),this.host&&A(this.host,O.sort,{key:t.key,currentSortDirection:t.sortDirection})}}}),u&&e("span",{"aria-hidden":"true",class:"kol-table__sort-order"},u)):t.label)}renderSpacer(t,r){var n,a;const o=(null===(n=this.state._headerCells.vertical)||void 0===n?void 0:n.length)||0,i=null===(a=null==r?void 0:r[0])||void 0===a?void 0:a.reduce((e,t)=>e+(t.colSpan||1),0),l=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:w("kol-table__spacer",`kol-table__spacer--${t}`)},e("td",{class:w(`kol-table__spacer-line kol-table__spacer-line--${t}`),colSpan:o+i+l}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",t),t.map((e,t)=>this.renderTableRow(e,t,!0,!0))])}render(){const t=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const r=this.state._headerCells.horizontal;return e("div",{key:"0ec51c746386e3a56f7d8a893190183983bcca2e",class:"kol-table"},this.state._hasSettingsMenu&&e(c,{key:"15749ad310b03311bcb609c9abbae8dec024d3db",_horizontalHeaderCells:null!=r?r:[]}),e("div",{key:"77e8de395578823fc8ebb8688730f58ad2feed9e",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"e4e55f8d144f2bb329dc18c7c61cb4717fe1a748",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},e("caption",{key:"a24a9f314a61f9b7cc07381cb9dffd12dc87fbb1",class:"kol-table__focus-element kol-table__caption",id:"caption",tabindex:this.tableDivElementHasScrollbar?"0":void 0},this.state._label),Array.isArray(r)&&e("thead",{key:"341a0a06076d12529f6eb8a20c04f5f47e3079d1",class:"kol-table__head"},[r.map((t,r)=>e("tr",{class:"kol-table__head-row",key:`thead-${r}`},this.state._selection&&this.renderHeadingSelectionCell(),0===r&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map((e,t)=>this.renderHeadingCell(e,r,t,!1)))),this.renderSpacer("head",r)]),e("tbody",{key:"3a28a3622e76b7304980a14f5cbdee1a879e840c",class:"kol-table__body"},t.map((e,t)=>this.renderTableRow(e,t,!0))),this.renderFoot())))}get host(){return r(this)}static get watchers(){return{_hasSettingsMenu:["validateHasSettingsMenu"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_on:["validateOn"],_selection:["validateSelection"]}}};export{fr as kol_table_stateless_wc};
+import{r as t,h as e,F as n,g as r}from"./index-D9b7CYaw.js";import{_ as i}from"./tslib.es6-CxX45GIN.js";import{d as o,f as a,e as s,a as l,x as c}from"./component-names-B_kYyA8u.js";import{t as u}from"./i18n-0_cE4ov3.js";import{O as f,o as d,p as h,w as v,s as b}from"./common-B-m-0Sa1.js";import{b as _,v as p,a as y,e as k,c as j}from"./table-selection-DjfWF12k.js";import{v as m}from"./label-BqL4x8lJ.js";import{C as g}from"./keyboard-DNd73LVa.js";import{c as w}from"./clsx-D6cJXTZC.js";import{n as S}from"./dev.utils-DJQvDSo0.js";import{d as A,K as O}from"./events-DHTi_wtD.js";import{i as $,c as D,r as x,a as C,f as M,b as F,S as H}from"./isObject-DvSELytj.js";import"./i18n-B0tfVPMa.js";const E=(e,t)=>{f(t,()=>{d(t,()=>{try{t=h(t)}catch(e){}v(e,"_headerCells",e=>{var t,r;return"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find(e=>!Array.isArray(e)))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find(e=>!Array.isArray(e)))&&[...null!==(t=e.horizontal)&&void 0!==t?t:[],...null!==(r=e.vertical)&&void 0!==r?r:[]].flat().every(e=>void 0===e.width||"number"==typeof e.width)&&!0},new Set(["TableHeaderCellsPropType"]),t)})})};var W="[object AsyncFunction]",B="[object Function]",K="[object GeneratorFunction]",P="[object Proxy]";function R(e){if(!$(e))return!1;var t=D(e);return t==B||t==K||t==W||t==P}var T=x["__core-js_shared__"],L=function(){var e=/[^.]+$/.exec(T&&T.keys&&T.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();function z(e){return!!L&&L in e}var I=Function.prototype,N=I.toString;function V(e){if(null!=e){try{return N.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var U=/[\\^$.*+?()[\]{}|]/g,J=/^\[object .+?Constructor\]$/,q=Function.prototype,G=Object.prototype,X=q.toString,Y=G.hasOwnProperty,Q=RegExp("^"+X.call(Y).replace(U,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function Z(e){return!(!$(e)||z(e))&&(R(e)?Q:J).test(V(e))}function tt(e,t){return null==e?void 0:e[t]}function et(e,t){var r=tt(e,t);return Z(r)?r:void 0}var nt=et(x,"WeakMap"),rt=9007199254740991,it=/^(?:0|[1-9]\d*)$/;function ot(e,t){var r=typeof e;return!!(t=null==t?rt:t)&&("number"==r||"symbol"!=r&&it.test(e))&&e>-1&&e%1==0&&e<t}function at(e,t){return e===t||e!=e&&t!=t}var st=9007199254740991;function lt(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=st}function ct(e){return null!=e&&lt(e.length)&&!R(e)}var ut=Object.prototype;function ft(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||ut)}function dt(e,t){for(var r=-1,n=Array(e);++r<e;)n[r]=t(r);return n}var ht="[object Arguments]";function vt(e){return C(e)&&D(e)==ht}var bt=Object.prototype,_t=bt.hasOwnProperty,pt=bt.propertyIsEnumerable,yt=vt(function(){return arguments}())?vt:function(e){return C(e)&&_t.call(e,"callee")&&!pt.call(e,"callee")};function kt(){return!1}var jt="object"==typeof exports&&exports&&!exports.nodeType&&exports,mt=jt&&"object"==typeof module&&module&&!module.nodeType&&module,gt=mt&&mt.exports===jt,wt=gt?x.Buffer:void 0,St=wt?wt.isBuffer:void 0,At=St||kt,Ot="[object Arguments]",$t="[object Array]",Dt="[object Boolean]",xt="[object Date]",Ct="[object Error]",Mt="[object Function]",Ft="[object Map]",Ht="[object Number]",Et="[object Object]",Wt="[object RegExp]",Bt="[object Set]",Kt="[object String]",Pt="[object WeakMap]",Rt="[object ArrayBuffer]",Tt="[object DataView]",Lt="[object Float32Array]",zt="[object Float64Array]",It="[object Int8Array]",Nt="[object Int16Array]",Vt="[object Int32Array]",Ut="[object Uint8Array]",Jt="[object Uint8ClampedArray]",qt="[object Uint16Array]",Gt="[object Uint32Array]",Xt={};function Yt(e){return C(e)&&lt(e.length)&&!!Xt[D(e)]}function Qt(e){return function(t){return e(t)}}Xt[Lt]=Xt[zt]=Xt[It]=Xt[Nt]=Xt[Vt]=Xt[Ut]=Xt[Jt]=Xt[qt]=Xt[Gt]=!0,Xt[Ot]=Xt[$t]=Xt[Rt]=Xt[Dt]=Xt[Tt]=Xt[xt]=Xt[Ct]=Xt[Mt]=Xt[Ft]=Xt[Ht]=Xt[Et]=Xt[Wt]=Xt[Bt]=Xt[Kt]=Xt[Pt]=!1;var Zt="object"==typeof exports&&exports&&!exports.nodeType&&exports,te=Zt&&"object"==typeof module&&module&&!module.nodeType&&module,ee=te&&te.exports===Zt,ne=ee&&M.process,re=function(){try{var e=te&&te.require&&te.require("util").types;return e||ne&&ne.binding&&ne.binding("util")}catch(e){}}(),ie=re&&re.isTypedArray,oe=ie?Qt(ie):Yt,ae=Object.prototype,se=ae.hasOwnProperty;function le(e,t){var r=F(e),n=!r&&yt(e),a=!r&&!n&&At(e),o=!r&&!n&&!a&&oe(e),i=r||n||a||o,l=i?dt(e.length,String):[],s=l.length;for(var c in e)!se.call(e,c)||i&&("length"==c||a&&("offset"==c||"parent"==c)||o&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||ot(c,s))||l.push(c);return l}function ce(e,t){return function(r){return e(t(r))}}var ue=ce(Object.keys,Object),fe=Object.prototype,de=fe.hasOwnProperty;function he(e){if(!ft(e))return ue(e);var t=[];for(var r in Object(e))de.call(e,r)&&"constructor"!=r&&t.push(r);return t}function ve(e){return ct(e)?le(e):he(e)}var be=et(Object,"create");function _e(){this.__data__=be?be(null):{},this.size=0}function pe(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}var ye="__lodash_hash_undefined__",ke=Object.prototype,je=ke.hasOwnProperty;function me(e){var t=this.__data__;if(be){var r=t[e];return r===ye?void 0:r}return je.call(t,e)?t[e]:void 0}var ge=Object.prototype,we=ge.hasOwnProperty;function Se(e){var t=this.__data__;return be?void 0!==t[e]:we.call(t,e)}var Ae="__lodash_hash_undefined__";function Oe(e,t){var r=this.__data__;return this.size+=this.has(e)?0:1,r[e]=be&&void 0===t?Ae:t,this}function $e(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function De(){this.__data__=[],this.size=0}function xe(e,t){for(var r=e.length;r--;)if(at(e[r][0],t))return r;return-1}$e.prototype.clear=_e,$e.prototype.delete=pe,$e.prototype.get=me,$e.prototype.has=Se,$e.prototype.set=Oe;var Ce=Array.prototype,Me=Ce.splice;function Fe(e){var t=this.__data__,r=xe(t,e);return!(r<0)&&(r==t.length-1?t.pop():Me.call(t,r,1),--this.size,!0)}function He(e){var t=this.__data__,r=xe(t,e);return r<0?void 0:t[r][1]}function Ee(e){return xe(this.__data__,e)>-1}function We(e,t){var r=this.__data__,n=xe(r,e);return n<0?(++this.size,r.push([e,t])):r[n][1]=t,this}function Be(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}Be.prototype.clear=De,Be.prototype.delete=Fe,Be.prototype.get=He,Be.prototype.has=Ee,Be.prototype.set=We;var Ke=et(x,"Map");function Pe(){this.size=0,this.__data__={hash:new $e,map:new(Ke||Be),string:new $e}}function Re(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}function Te(e,t){var r=e.__data__;return Re(t)?r["string"==typeof t?"string":"hash"]:r.map}function Le(e){var t=Te(this,e).delete(e);return this.size-=t?1:0,t}function ze(e){return Te(this,e).get(e)}function Ie(e){return Te(this,e).has(e)}function Ne(e,t){var r=Te(this,e),n=r.size;return r.set(e,t),this.size+=r.size==n?0:1,this}function Ve(e){var t=-1,r=null==e?0:e.length;for(this.clear();++t<r;){var n=e[t];this.set(n[0],n[1])}}function Ue(e,t){for(var r=-1,n=t.length,a=e.length;++r<n;)e[a+r]=t[r];return e}function Je(){this.__data__=new Be,this.size=0}function qe(e){var t=this.__data__,r=t.delete(e);return this.size=t.size,r}function Ge(e){return this.__data__.get(e)}function Xe(e){return this.__data__.has(e)}Ve.prototype.clear=Pe,Ve.prototype.delete=Le,Ve.prototype.get=ze,Ve.prototype.has=Ie,Ve.prototype.set=Ne;var Ye=200;function Qe(e,t){var r=this.__data__;if(r instanceof Be){var n=r.__data__;if(!Ke||n.length<Ye-1)return n.push([e,t]),this.size=++r.size,this;r=this.__data__=new Ve(n)}return r.set(e,t),this.size=r.size,this}function Ze(e){var t=this.__data__=new Be(e);this.size=t.size}function tn(e,t){for(var r=-1,n=null==e?0:e.length,a=0,o=[];++r<n;){var i=e[r];t(i,r,e)&&(o[a++]=i)}return o}function en(){return[]}Ze.prototype.clear=Je,Ze.prototype.delete=qe,Ze.prototype.get=Ge,Ze.prototype.has=Xe,Ze.prototype.set=Qe;var nn=Object.prototype,rn=nn.propertyIsEnumerable,on=Object.getOwnPropertySymbols,an=on?function(e){return null==e?[]:(e=Object(e),tn(on(e),function(t){return rn.call(e,t)}))}:en;function sn(e,t,r){var n=t(e);return F(e)?n:Ue(n,r(e))}function ln(e){return sn(e,ve,an)}var cn=et(x,"DataView"),un=et(x,"Promise"),fn=et(x,"Set"),dn="[object Map]",hn="[object Object]",vn="[object Promise]",bn="[object Set]",_n="[object WeakMap]",pn="[object DataView]",yn=V(cn),kn=V(Ke),jn=V(un),mn=V(fn),gn=V(nt),wn=D;(cn&&wn(new cn(new ArrayBuffer(1)))!=pn||Ke&&wn(new Ke)!=dn||un&&wn(un.resolve())!=vn||fn&&wn(new fn)!=bn||nt&&wn(new nt)!=_n)&&(wn=function(e){var t=D(e),r=t==hn?e.constructor:void 0,n=r?V(r):"";if(n)switch(n){case yn:return pn;case kn:return dn;case jn:return vn;case mn:return bn;case gn:return _n}return t});var Sn=x.Uint8Array,An="__lodash_hash_undefined__";function On(e){return this.__data__.set(e,An),this}function $n(e){return this.__data__.has(e)}function Dn(e){var t=-1,r=null==e?0:e.length;for(this.__data__=new Ve;++t<r;)this.add(e[t])}function xn(e,t){for(var r=-1,n=null==e?0:e.length;++r<n;)if(t(e[r],r,e))return!0;return!1}function Cn(e,t){return e.has(t)}Dn.prototype.add=Dn.prototype.push=On,Dn.prototype.has=$n;var Mn=1,Fn=2;function Hn(e,t,r,n,a,o){var i=r&Mn,l=e.length,s=t.length;if(l!=s&&!(i&&s>l))return!1;var c=o.get(e),h=o.get(t);if(c&&h)return c==t&&h==e;var d=-1,u=!0,b=r&Fn?new Dn:void 0;for(o.set(e,t),o.set(t,e);++d<l;){var _=e[d],f=t[d];if(n)var p=i?n(f,_,d,t,e,o):n(_,f,d,e,t,o);if(void 0!==p){if(p)continue;u=!1;break}if(b){if(!xn(t,function(e,t){if(!Cn(b,t)&&(_===e||a(_,e,r,n,o)))return b.push(t)})){u=!1;break}}else if(_!==f&&!a(_,f,r,n,o)){u=!1;break}}return o.delete(e),o.delete(t),u}function En(e){var t=-1,r=Array(e.size);return e.forEach(function(e,n){r[++t]=[n,e]}),r}function Wn(e){var t=-1,r=Array(e.size);return e.forEach(function(e){r[++t]=e}),r}var Bn=1,Kn=2,Pn="[object Boolean]",Rn="[object Date]",Tn="[object Error]",Ln="[object Map]",zn="[object Number]",In="[object RegExp]",Nn="[object Set]",Vn="[object String]",Un="[object Symbol]",Jn="[object ArrayBuffer]",qn="[object DataView]",Gn=H?H.prototype:void 0,Xn=Gn?Gn.valueOf:void 0;function Yn(e,t,r,n,a,o,i){switch(r){case qn:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case Jn:return!(e.byteLength!=t.byteLength||!o(new Sn(e),new Sn(t)));case Pn:case Rn:case zn:return at(+e,+t);case Tn:return e.name==t.name&&e.message==t.message;case In:case Vn:return e==t+"";case Ln:var l=En;case Nn:var s=n&Bn;if(l||(l=Wn),e.size!=t.size&&!s)return!1;var c=i.get(e);if(c)return c==t;n|=Kn,i.set(e,t);var h=Hn(l(e),l(t),n,a,o,i);return i.delete(e),h;case Un:if(Xn)return Xn.call(e)==Xn.call(t)}return!1}var Qn=1,Zn=Object.prototype,tr=Zn.hasOwnProperty;function er(e,t,r,n,a,o){var i=r&Qn,l=ln(e),s=l.length;if(s!=ln(t).length&&!i)return!1;for(var c=s;c--;){var h=l[c];if(!(i?h in t:tr.call(t,h)))return!1}var d=o.get(e),u=o.get(t);if(d&&u)return d==t&&u==e;var b=!0;o.set(e,t),o.set(t,e);for(var _=i;++c<s;){var f=e[h=l[c]],p=t[h];if(n)var v=i?n(p,f,h,t,e,o):n(f,p,h,e,t,o);if(!(void 0===v?f===p||a(f,p,r,n,o):v)){b=!1;break}_||(_="constructor"==h)}if(b&&!_){var y=e.constructor,g=t.constructor;y==g||!("constructor"in e)||!("constructor"in t)||"function"==typeof y&&y instanceof y&&"function"==typeof g&&g instanceof g||(b=!1)}return o.delete(e),o.delete(t),b}var nr=1,rr="[object Arguments]",ir="[object Array]",or="[object Object]",ar=Object.prototype,sr=ar.hasOwnProperty;function lr(e,t,r,n,a,o){var i=F(e),l=F(t),s=i?ir:wn(e),c=l?ir:wn(t),h=(s=s==rr?or:s)==or,d=(c=c==rr?or:c)==or,u=s==c;if(u&&At(e)){if(!At(t))return!1;i=!0,h=!1}if(u&&!h)return o||(o=new Ze),i||oe(e)?Hn(e,t,r,n,a,o):Yn(e,t,s,r,n,a,o);if(!(r&nr)){var b=h&&sr.call(e,"__wrapped__"),_=d&&sr.call(t,"__wrapped__");if(b||_){var f=b?e.value():e,p=_?t.value():t;return o||(o=new Ze),a(f,p,r,n,o)}}return!!u&&(o||(o=new Ze),er(e,t,r,n,a,o))}function cr(e,t,r,n,a){return e===t||(null==e||null==t||!C(e)&&!C(t)?e!=e&&t!=t:lr(e,t,r,n,cr,a))}function ur(e,t){return cr(e,t)}const fr=class{constructor(r){t(this,r),this.translateNoEntries=u("kol-no-entries"),this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_hasSettingsMenu:!1},this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.translateSort=u("kol-sort"),this.translateSortOrder=u("kol-table-sort-order"),this.tableDivElementHasScrollbar=!1,this.renderTableRow=(t,r,n,a=!1)=>{var o,i;let l=String(r);return this.horizontal&&(null===(o=t[0])||void 0===o?void 0:o.data)&&(l=null!==(i=this.getDataKey(t[0].data))&&void 0!==i?i:l),e("tr",{class:w("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${l}`},this.renderSelectionCell(t,r),t.map((e,t)=>this.renderTableCell(e,r,t,n)))},this.renderTableCell=(t,r,n,a)=>{if(!1===t.visible)return"";let o=`${r}-${n}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);o=e?`${e}-${this.horizontal?n:r}`:o}if(t.headerCell)return this.renderHeadingCell(t,r,n,a);{const r="function"!=typeof t.render&&t.label===this.translateNoEntries,a=this.getActionColumnHeader(n),i=Boolean(a&&t.data);return e("td",{key:`cell-${o}`,class:w("kol-table__cell kol-table__cell--body",t.textAlign&&`kol-table__cell--align-${t.textAlign}`,i&&"kol-table__cell--actions"),"aria-atomic":r?"false":void 0,"aria-live":r?"polite":void 0,"aria-relevant":r?"text":void 0,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},i&&a&&t.data?this.renderActionItems(a,t.data,o):"function"!=typeof t.render?t.label:"")}},this.renderActionItems=(t,r,n)=>{const l=t.actions(r);return e("div",{class:"kol-table__cell-actions"},l.map((t,r)=>{if("button"===t.type){const a=i(t,[]);return e(o,Object.assign({key:`action-${n}-${r}`},a,{_buttonVariant:a._variant}))}if("link"===t.type){const o=i(t,[]);return e(a,Object.assign({key:`action-${n}-${r}`},o))}return null}))}}validateHasSettingsMenu(e){_(this,e)}validateData(e){p(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){y(this,e)}validateHeaderCells(e){E(this,e),ur(this.previousHeaderCells,this.state._headerCells)||this.initializeHeaderCellSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){m(this,e,{required:!0})}validateOn(e){k(this,e)}validateSelection(e){j(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const r=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let n=this.checkboxRefs.indexOf(r);n>-1&&(e.preventDefault(),"ArrowDown"===e.key?(n=(n+1)%this.checkboxRefs.length,this.checkboxRefs[n].focus()):"ArrowUp"===e.key&&(e.preventDefault(),n=(n+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[n].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}handleSettingsChange(e){var t;const r=Object.assign(Object.assign({},this.state._headerCells),{horizontal:e.detail});b(this,"_headerCells",r),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[g.onChangeHeaderCells])&&this.state._on[g.onChangeHeaderCells](e,r)}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach(e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,S())}),this.dataToKeyMap.forEach((t,r)=>{e.includes(r)||this.dataToKeyMap.delete(r)})}getDataKey(e){return this.dataToKeyMap.get(e)}getActionColumnHeader(e){const t=this.horizontal?this.state._headerCells.horizontal:this.state._headerCells.vertical;if(!t||0===t.length)return;const r=this.getPrimaryHeaders(this.state._headerCells)[e];return r&&"action"===r.type?r:void 0}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout(()=>{if("function"==typeof e.render){const r=e.render(t,e,e.data,this.state._data);"string"==typeof r&&(t.textContent=r)}})))}getNumberOfCols(e,t){let r=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var r;return t+=null!==(r=e.colSpan)&&void 0!==r?r:1}),r<t&&(r=t)}),0===r&&(r=t.length),r}getNumberOfRows(e,t){var r;let n=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var r;return t+=null!==(r=e.rowSpan)&&void 0!==r?r:1}),n<t&&(n=t)}),0===n?n=t.length:n-=(null===(r=this.state._dataFoot)||void 0===r?void 0:r.length)||0,n}getThePrimaryHeadersWithKeyOrRenderFunction(e){const t=[];return e.forEach(e=>{e.forEach(e=>{"string"!=typeof e.key&&"function"!=typeof e.render||t.push(e)})}),t}getPrimaryHeaders(e){var t,r;let n=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===n.length&&(n=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(r=e.vertical)&&void 0!==r?r:[]),n.length>0&&(this.horizontal=!1)),n}createDataField(e,t,r){var n;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const a=this.getPrimaryHeaders(t),o=this.getNumberOfCols(t.horizontal,e);let i=this.getNumberOfRows(t.vertical,e),l=0;r&&(l=i,i+=(null===(n=this.state._dataFoot)||void 0===n?void 0:n.length)||0);const s=[],c=[],h=[];t.vertical.forEach((e,t)=>{c[t]=0,h[t]=[]});const d=a;for(let n=l;n<i;n++){const a=[];t.vertical.forEach((e,t)=>{let r=0;if(h[t].forEach(e=>r+=e),r<=n){const o=e[n-r+c[t]];if("object"==typeof o){a.push(Object.assign(Object.assign({},o),{headerCell:!0,data:{}}));let e=1;if("number"==typeof o.rowSpan&&o.rowSpan>1&&(e=o.rowSpan),h[t].push(e),"number"==typeof o.colSpan&&o.colSpan>1)for(let r=1;r<o.colSpan;r++)h[t+r].push(e);c[t]++}}});for(let t=0;t<o;t++)if(!0===this.horizontal){const o=r&&this.state._dataFoot?this.state._dataFoot[n-l]:e[n];if("object"==typeof d[t]&&null!==d[t]&&"object"==typeof o&&null!==o&&("string"==typeof d[t].key||"function"==typeof d[t].render)){const e=o[d[t].key];a.push(Object.assign(Object.assign({},d[t]),{colSpan:void 0,rowSpan:void 0,data:o,label:e}))}}else if("object"==typeof d[n]&&null!==d[n]&&"object"==typeof e[t]&&null!==e[t]&&("string"==typeof d[n].key||"function"==typeof d[n].render)){const r=d[n].key,o=e[t][r];a.push(Object.assign(Object.assign({},d[n]),{colSpan:void 0,rowSpan:void 0,data:e[t],label:o}))}s.push(a)}if(0===e.length){let e=0,r=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach(t=>{e+=t.colSpan||1}),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach(e=>{r+=e.rowSpan||1}));const n={colSpan:e,label:this.translateNoEntries,render:void 0,rowSpan:Math.max(r,1)};0===s.length?s.push([n]):s[0].push(n)}return s}handleSelectionChangeCallbackAndEvent(e,t){var r;"function"==typeof(null===(r=this.state._on)||void 0===r?void 0:r[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,t),this.host&&A(this.host,O.selectionChange,t)}initializeHeaderCellSettings(){if(this.state._headerCells&&this.state._headerCells.horizontal&&this.state._headerCells.horizontal.length>0){const e=Object.assign(Object.assign({},this.state._headerCells),{horizontal:this.state._headerCells.horizontal.map(e=>e.map(e=>Object.assign(Object.assign({},e),{visible:"boolean"!=typeof e.visible||e.visible,hidable:"boolean"!=typeof e.hidable||e.hidable})))});b(this,"_headerCells",e)}}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelection(this._selection),this.validateHasSettingsMenu(this._hasSettingsMenu)}renderSelectionCell(t,r){var n;const a=this.state._selection;if(!a)return"";const o=this.getSelectionKeyPropertyName(),i=null===(n=t[0])||void 0===n?void 0:n.data;if(!i)return"";const c=i[o],h=a.multiple||void 0===a.multiple,d=(()=>{const e=null==a?void 0:a.selectedKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(c))})(),u=(()=>{const e=null==a?void 0:a.disabledKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(c))})(),b=a.label(i),_={name:"selection",checked:d,disabled:u,id:String(c),"aria-label":b};return e("td",{key:`tbody-${r}-selection`,class:"kol-table__cell kol-table__cell--selection"},e("div",{class:w("kol-table__selection",{"kol-table__selection--checked":d})},h?e("label",{class:w("kol-table__selection-label",{"kol-table__selection-label--disabled":u})},e(s,{class:"kol-table__selection-icon",_icons:"kolicon "+(d?"kolicon-check":""),_label:""}),e("input",Object.assign({class:w("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},_,{type:"checkbox",onInput:e=>{const t=(()=>{const e=null==a?void 0:a.selectedKeys;return void 0===e?[]:Array.isArray(e)?e:[e]})(),r=d?t.filter(e=>String(e)!==String(c)):[...t,c];this.handleSelectionChangeCallbackAndEvent(e,null!=r?r:[])}}))):e("label",{class:"kol-table__selection-label"},e("input",Object.assign({class:w("kol-table__selection-input kol-table__selection-input--radio")},_,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,[c])}}))),e(l,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${c}-label`,_label:b})))}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter(t=>{var r;const n=null===(r=this.state._selection)||void 0===r?void 0:r.disabledKeys;return!(void 0===n?[]:Array.isArray(n)?n:[n]).some(r=>String(r)===String(t[e]))})}getSelectedKeysWithoutDisabledKeys(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>!t.some(t=>String(t)===String(e)))}getSelectedKeysWithDisabledKeysOnly(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>t.some(t=>String(t)===String(e)))}getRevertedSelection(e){var t;const r=this.getSelectionKeyPropertyName(),n=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&n.push(...this.getDataWithSelectionEnabled().map(e=>null==e?void 0:e[r])),n}getTableMinWidth(){var e,t;const r=null!==(e=this.state._headerCells.horizontal)&&void 0!==e?e:[],n=[];r.forEach(e=>{e.forEach(e=>{!1!==e.visible&&void 0!==e.width&&e.width>0&&n.push(e.width)})});const a=null!==(t=this.state._headerCells.vertical)&&void 0!==t?t:[],o=[];a.forEach(e=>{e.forEach(e=>{void 0!==e.width&&e.width>0&&o.push(e.width)})});const i=[...o,...n];return 0===i.length?"0px":1===i.length?`${i[0]}px`:`calc(${i.map(e=>`${e}px`).join(" + ")})`}renderHeadingSelectionCell(){var t,r;const n=this.state._selection;if(!n)return e("td",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});if(!1===n.multiple)return e("td",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"});const a=null!==(r=null===(t=this.getSelectedKeysWithoutDisabledKeys())||void 0===t?void 0:t.length)&&void 0!==r?r:0,o=a===this.getDataWithSelectionEnabled().length,i=0!==a&&!o;let c="kol-table-selection-indeterminate";o&&!i&&(c="kol-table-selection-none"),0===a&&(c="kol-table-selection-all");const h=u(c);return e("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},e("div",{class:w("kol-table__selection",{"kol-table__selection--indeterminate":i,"kol-table__selection--checked":o})},e("label",{class:"kol-table__selection-label"},e(s,{class:"kol-table__selection-icon",_icons:"kolicon "+(i?"kolicon-minus":o?"kolicon-check":""),_label:""}),e("input",{class:w("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:o&&!i,indeterminate:i,"aria-label":h,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!o))}})),e(l,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${c}-label`,_label:h})))}renderHeaderTdCell(){const t=this.state._headerCells.horizontal,r=this.state._headerCells.vertical;if(!Array.isArray(t)||0===t.length||!Array.isArray(r)||0===r.length)return e(n,null);const a=r.reduce((e,t)=>{var r;const n=null==t?void 0:t[0];return e+(null!==(r=null==n?void 0:n.width)&&void 0!==r?r:0)},0);return e("td",{"aria-hidden":"true",colSpan:r.length,rowSpan:t.length,style:a>0?{width:`${a}px`}:void 0})}formatSortOrderDescription(e){return this.translateSortOrder.replace("{{order}}",`${e}`)}getSortAriaDescription(e){return"number"==typeof e&&e>0?`${this.translateSort} – ${this.formatSortOrderDescription(e)}`:this.translateSort}renderHeadingCell(t,r,n,a){if(!1===t.visible)return"";const i=!1!==(null==t?void 0:t.sortable),l="string"==typeof t.sortDirection,s=i&&l;let c="none",h="kolicon-sort-neutral";if(s&&t.sortDirection)switch(t.sortDirection){case"ASC":h="kolicon-sort-asc",c="ascending";break;case"DESC":h="kolicon-sort-desc",c="descending";break;default:c="none"}const d=a?"row":"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col",u="number"==typeof t.sortOrder&&t.sortOrder>0?t.sortOrder:void 0,b=this.getSortAriaDescription(u);return e("th",{key:`${r}-${n}-${t.label}`,class:w("kol-table__cell kol-table__cell--header",t.textAlign&&`kol-table__cell--align-${t.textAlign}`,`kol-table__cell--${c}`),scope:d,colSpan:t.colSpan,rowSpan:t.rowSpan,style:void 0!==t.width?{width:`${t.width}px`}:void 0,"aria-sort":c,"data-sort":s&&t.sortDirection?`sort-${t.sortDirection}`:void 0},s&&t.sortDirection?e("span",{class:"kol-table__sort"},e(o,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:h},_label:t.label,_ariaDescription:b,_on:{onClick:e=>{var r;"function"==typeof(null===(r=this.state._on)||void 0===r?void 0:r.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection}),this.host&&A(this.host,O.sort,{key:t.key,currentSortDirection:t.sortDirection})}}}),u&&e("span",{"aria-hidden":"true",class:"kol-table__sort-order"},u)):t.label)}renderSpacer(t,r){var n,a;const o=(null===(n=this.state._headerCells.vertical)||void 0===n?void 0:n.length)||0,i=null===(a=null==r?void 0:r[0])||void 0===a?void 0:a.reduce((e,t)=>e+(t.colSpan||1),0),l=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:w("kol-table__spacer",`kol-table__spacer--${t}`)},e("td",{class:w(`kol-table__spacer-line kol-table__spacer-line--${t}`),colSpan:o+i+l}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",t),t.map((e,t)=>this.renderTableRow(e,t,!0,!0))])}render(){const t=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const r=this.state._headerCells.horizontal;return e("div",{key:"0ec51c746386e3a56f7d8a893190183983bcca2e",class:"kol-table"},this.state._hasSettingsMenu&&e(c,{key:"15749ad310b03311bcb609c9abbae8dec024d3db",_horizontalHeaderCells:null!=r?r:[]}),e("div",{key:"77e8de395578823fc8ebb8688730f58ad2feed9e",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"e4e55f8d144f2bb329dc18c7c61cb4717fe1a748",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},e("caption",{key:"a24a9f314a61f9b7cc07381cb9dffd12dc87fbb1",class:"kol-table__focus-element kol-table__caption",id:"caption",tabindex:this.tableDivElementHasScrollbar?"0":void 0},this.state._label),Array.isArray(r)&&e("thead",{key:"341a0a06076d12529f6eb8a20c04f5f47e3079d1",class:"kol-table__head"},[r.map((t,r)=>e("tr",{class:"kol-table__head-row",key:`thead-${r}`},this.state._selection&&this.renderHeadingSelectionCell(),0===r&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map((e,t)=>this.renderHeadingCell(e,r,t,!1)))),this.renderSpacer("head",r)]),e("tbody",{key:"3a28a3622e76b7304980a14f5cbdee1a879e840c",class:"kol-table__body"},t.map((e,t)=>this.renderTableRow(e,t,!0))),this.renderFoot())))}get host(){return r(this)}static get watchers(){return{_hasSettingsMenu:["validateHasSettingsMenu"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_on:["validateOn"],_selection:["validateSelection"]}}};export{fr as kol_table_stateless_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-CJixoXML.js";import{o as t}from"./component-names-B_kYyA8u.js";import"./common-B-m-0Sa1.js";const o='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    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 :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell-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-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-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: "";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}',i=class{constructor(e){n(this,e)}render(){return e(t,{key:"4f2c23853dd8f38baeb961bf35cc5f651cd45605",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_on:this._on,_selection:this._selection,_hasSettingsMenu:this._hasSettingsMenu})}};i.style={default:o};export{i as kol_table_stateless};
+import{r as n,h as e}from"./index-D9b7CYaw.js";import{o as t}from"./component-names-B_kYyA8u.js";import"./common-B-m-0Sa1.js";const o='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(140 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    table-layout: fixed;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__sort {\n    display: inline-flex;\n    gap: 0.25rem;\n    align-items: center;\n  }\n  .kol-table__sort-order {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    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 :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-table__cell--actions .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-table__cell--actions :host {\n    display: inline-block;\n  }\n  .kol-table__cell--actions .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-table__cell--actions .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-table__cell--actions .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-table__cell--actions .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-table__cell--actions .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-table__cell--actions .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-table__cell--actions .kol-link__icon {\n    display: inline-flex;\n    margin-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell-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-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-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: "";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    min-width: calc(var(--a11y-min-size) / 2);\n    min-height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}',i=class{constructor(e){n(this,e)}render(){return e(t,{key:"4f2c23853dd8f38baeb961bf35cc5f651cd45605",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_on:this._on,_selection:this._selection,_hasSettingsMenu:this._hasSettingsMenu})}};i.style={default:o};export{i as kol_table_stateless};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as n,g as e}from"./index-CJixoXML.js";import{w as i,d as o,j as a,s,M as l,G as r,H as d,P as h}from"./common-B-m-0Sa1.js";import{v as c}from"./align-DUInjtnX.js";import{v as u}from"./label-BqL4x8lJ.js";import{d as p}from"./component-names-B_kYyA8u.js";import{t as b}from"./i18n-0_cE4ov3.js";import{K as f}from"./keyboard-DNd73LVa.js";import{c as m}from"./clsx-D6cJXTZC.js";import{d as g,K as y}from"./events-DHTi_wtD.js";import"./i18n-B0tfVPMa.js";const v=["select-automatic","select-manual"],k=(t,e)=>{i(t,"_behavior",t=>"string"==typeof t&&v.includes(t),new Set([`KoliBriTabBehavior {${v.join(", ")}`]),e)},_=(t,e)=>{o(t,"_hasCreateButton",e)},w="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tabs {\n    display: var(--display);\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    order: var(--button-group-order);\n    flex-direction: var(--button-group-flex-direction);\n    flex-wrap: wrap;\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    display: block;\n    border-bottom-style: solid;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",x=class{constructor(e){t(this,e),this.onCreateLabel=`${b("kol-new")} …`,this.nextPossibleTabIndex=(t,e,n=1)=>{const o=e+n;return o<t.length?t[o]._disabled?this.nextPossibleTabIndex(t,e,n+1):o:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const o=e-n;return o>=0?t[o]._disabled?this.prevPossibleTabIndex(t,e,n+1):o:e},this.onKeyDown=t=>{switch(t.key){case f.ArrowRight:this.goToNextTab(t);break;case f.ArrowLeft:this.goToPreviousTab(t);break;case f.Space:case f.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this._align="top",this._hasCreateButton=!1,this._selected=0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]},this.selectNextNotDisabledTab=(t,e,n=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);a("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,o)=>{let i,a;i="_selected"===o?t:this.state._selected,a="_tabs"===o?t:this.state._tabs,a.length>0&&e.set("_selected",this.selectNextNotDisabledTab(i,a))},this.refreshTabPanels=()=>{var t,e,n,o;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let i=0;i<(null===(t=this.state._tabs)||void 0===t?void 0:t.length);i++){const t=document.createElement("div");t.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),t.setAttribute("id",`tabpanel-${i}`),t.setAttribute("role","tabpanel"),t.setAttribute("hidden",""),t.setAttribute("tabindex","0");const a=document.createElement("slot");a.setAttribute("name",`tabpanel-slot-${i}`),t.appendChild(a),null===(e=this.tabPanelHost)||void 0===e||e.appendChild(t),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(o=this.host)||void 0===o?void 0:o.children[i])&&this.host.children[i].setAttribute("slot",`tabpanel-slot-${i}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach((t,e)=>{e===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")})},this.onCreate=t=>{var e,n;t.preventDefault(),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onCreate)||void 0===n||n.call(e,t),this.host&&g(this.host,y.create)},this.onBlur=()=>{this.currentFocusIndex=void 0}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var o,i;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(i=null===(o=this.state._tabs[e]._on)||void 0===o?void 0:o.onSelect)||void 0===i||i.call(o,t,e),this.onSelect(t,e)}}renderButtonGroup(){return n("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map((t,e)=>n(p,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_buttonVariant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e})),this.state._hasCreateButton&&n(p,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"kolicon-plus","data-testid":"tabs-create-button"}))}render(){return n("div",{key:"3e4cd675d5b90eed00806215686e2c4a091e7dad",ref:t=>{this.tabPanelsElement=t},class:m("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),n("div",{key:"a19da9e36071509aecc9d8b8fa449ebd59c2d790",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(t){c(this,t)}validateBehavior(t){k(this,t)}validateHasCreateButton(t){_(this,t)}validateLabel(t){u(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){const e={};"function"==typeof t.onCreate&&(e.onCreate=t.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),s(this,"_on",e)}}validateSelected(t){l(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){r(this,"_tabs",t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0,t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),d("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(t){if(this.tabPanelsElement){const e=h(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,t,e),this.host&&g(this.host,y.select,e),this.focusTabById(e)}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};x.style={default:w};export{x as kol_tabs};
+import{r as t,h as n,g as e}from"./index-D9b7CYaw.js";import{w as i,d as o,j as a,s,M as l,G as r,H as d,P as h}from"./common-B-m-0Sa1.js";import{v as c}from"./align-DUInjtnX.js";import{v as u}from"./label-BqL4x8lJ.js";import{d as p}from"./component-names-B_kYyA8u.js";import{t as b}from"./i18n-0_cE4ov3.js";import{K as f}from"./keyboard-DNd73LVa.js";import{c as m}from"./clsx-D6cJXTZC.js";import{d as g,K as y}from"./events-DHTi_wtD.js";import"./i18n-B0tfVPMa.js";const v=["select-automatic","select-manual"],k=(t,e)=>{i(t,"_behavior",t=>"string"==typeof t&&v.includes(t),new Set([`KoliBriTabBehavior {${v.join(", ")}`]),e)},_=(t,e)=>{o(t,"_hasCreateButton",e)},w="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tabs {\n    display: var(--display);\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    order: var(--button-group-order);\n    flex-direction: var(--button-group-flex-direction);\n    flex-wrap: wrap;\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    display: block;\n    border-bottom-style: solid;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",x=class{constructor(e){t(this,e),this.onCreateLabel=`${b("kol-new")} …`,this.nextPossibleTabIndex=(t,e,n=1)=>{const o=e+n;return o<t.length?t[o]._disabled?this.nextPossibleTabIndex(t,e,n+1):o:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const o=e-n;return o>=0?t[o]._disabled?this.prevPossibleTabIndex(t,e,n+1):o:e},this.onKeyDown=t=>{switch(t.key){case f.ArrowRight:this.goToNextTab(t);break;case f.ArrowLeft:this.goToPreviousTab(t);break;case f.Space:case f.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this._align="top",this._hasCreateButton=!1,this._selected=0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]},this.selectNextNotDisabledTab=(t,e,n=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);a("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,o)=>{let i,a;i="_selected"===o?t:this.state._selected,a="_tabs"===o?t:this.state._tabs,a.length>0&&e.set("_selected",this.selectNextNotDisabledTab(i,a))},this.refreshTabPanels=()=>{var t,e,n,o;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let i=0;i<(null===(t=this.state._tabs)||void 0===t?void 0:t.length);i++){const t=document.createElement("div");t.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),t.setAttribute("id",`tabpanel-${i}`),t.setAttribute("role","tabpanel"),t.setAttribute("hidden",""),t.setAttribute("tabindex","0");const a=document.createElement("slot");a.setAttribute("name",`tabpanel-slot-${i}`),t.appendChild(a),null===(e=this.tabPanelHost)||void 0===e||e.appendChild(t),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(o=this.host)||void 0===o?void 0:o.children[i])&&this.host.children[i].setAttribute("slot",`tabpanel-slot-${i}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach((t,e)=>{e===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")})},this.onCreate=t=>{var e,n;t.preventDefault(),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onCreate)||void 0===n||n.call(e,t),this.host&&g(this.host,y.create)},this.onBlur=()=>{this.currentFocusIndex=void 0}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var o,i;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(i=null===(o=this.state._tabs[e]._on)||void 0===o?void 0:o.onSelect)||void 0===i||i.call(o,t,e),this.onSelect(t,e)}}renderButtonGroup(){return n("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map((t,e)=>n(p,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_buttonVariant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e})),this.state._hasCreateButton&&n(p,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"kolicon-plus","data-testid":"tabs-create-button"}))}render(){return n("div",{key:"3e4cd675d5b90eed00806215686e2c4a091e7dad",ref:t=>{this.tabPanelsElement=t},class:m("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),n("div",{key:"a19da9e36071509aecc9d8b8fa449ebd59c2d790",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(t){c(this,t)}validateBehavior(t){k(this,t)}validateHasCreateButton(t){_(this,t)}validateLabel(t){u(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){const e={};"function"==typeof t.onCreate&&(e.onCreate=t.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),s(this,"_on",e)}}validateSelected(t){l(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){r(this,"_tabs",t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0,t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),d("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(t){if(this.tabPanelsElement){const e=h(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,t,e),this.host&&g(this.host,y.select,e),this.focusTabById(e)}get host(){return e(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};x.style={default:w};export{x as kol_tabs};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,r as t,g as n}from"./index-CJixoXML.js";import{c as i}from"./clsx-D6cJXTZC.js";import{i as o,d as a,g as s,a as l,F as r}from"./FormFieldStateWrapper-BuBXucJg.js";import{I as d,a as h}from"./controller-icon-Bv5rghvz.js";import{_ as c}from"./tslib.es6-CxX45GIN.js";import{w as m,e as p}from"./common-B-m-0Sa1.js";import{n as u}from"./dev.utils-ClbGw5Q5.js";import{a as f,v as b,b as v}from"./max-length-behavior-BhW8_k_T.js";import{v as y}from"./placeholder-DhhN6Rra.js";import{v as k}from"./read-only-joz0PLP_.js";import{v as g}from"./required-DJbvNLly.js";import{v as _}from"./rows-BAjzKE6S.js";import{v as x}from"./spell-check-S60TjBC_.js";import"./access-and-short-key-OLoWTcqR.js";import"./disabled-BiVzb-WY.js";import"./hide-label-WZ5WNz3h.js";import"./label-BqL4x8lJ.js";import"./tooltip-align-1XGYSZmF.js";import"./align-DUInjtnX.js";import"./events-DHTi_wtD.js";import"./associated.controller-BZSp_RI6.js";import"./bootstrap-BhCzUA0r.js";import"./component-names-B_kYyA8u.js";import"./i18n-B0tfVPMa.js";import"./isObject-DvSELytj.js";import"./reuse-CX4AQDkS.js";import"./i18n-0_cE4ov3.js";import"./InternalUnderlinedBadgeText-gZHJvp1Z.js";import"./Alert-ClpsVuF2.js";import"./bem-yGcgGOmY.js";import"./browser-CU41g6rf.js";import"./Heading-DpnGwI1P.js";import"./Icon-3kqoqI7a.js";import"./icons-C3vHAMd1.js";const w=["vertical","none"],j=e=>"string"==typeof e&&w.includes(e),z=(e,t)=>{m(e,"_resize",j,new Set(w),t,{defaultValue:"vertical"})},B=t=>{const{class:n,msg:l,touched:r,readonly:d,disabled:h,required:m,ariaDescribedBy:p,hideLabel:u,label:f}=t,v=c(t,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),b={"kol-textarea--disabled":Boolean(h),"kol-textarea--required":Boolean(m),"kol-textarea--touched":Boolean(r),"kol-textarea--readonly":Boolean(d),[`kol-textarea--${s(l)}`]:o(l,r)},_=Object.assign(Object.assign({class:i("kol-textarea",b,n),required:m,disabled:h,readonly:d},a({ariaDescribedBy:p,hideLabel:u,label:f})),v);return e("textarea",Object.assign({},_))};function L(e,t){var n;const i=[...l(e).ariaDescribedBy,...null!==(n=t.ariaDescribedBy)&&void 0!==n?n:[]],a=Object.assign(Object.assign({id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,touched:e._touched,msg:e._msg},t),{ariaDescribedBy:i});return"_maxLength"in e&&"_maxLengthBehavior"in e&&"hard"===e._maxLengthBehavior&&(a.maxLength=e._maxLength),"_shortKey"in e&&(a["aria-keyshortcuts"]=e._shortKey),a}const S=t=>{var{state:n}=t,i=c(t,["state"]);return e(B,Object.assign({},L(n,i)))};class T extends d{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=e}validateHasCounter(e){f(this.component,e)}validateMaxLengthBehavior(e){b(this.component,e)}validateMaxLength(e){v(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePlaceholder(e){y(this.component,e)}validateReadOnly(e){k(this.component,e)}validateResize(e){z(this.component,e)}validateRequired(e){g(this.component,e)}validateRows(e){_(this.component,e)}validateSpellCheck(e){x(this.component,e)}validateValue(e){p(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateResize(this.component._resize),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const C='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}',q=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/n);return e.rows=t,i},A=class{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async focus(){var e;return Promise.resolve(null===(e=this.textareaRef)||void 0===e?void 0:e.focus())}getFormFieldProps(){return{state:this.state,class:i("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getTextAreaProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize},ariaDescribedBy:e},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(r,Object.assign({key:"ba389a3e0bd692d39ee646d750591f52c6d04868"},this.getFormFieldProps()),e(h,{key:"70769a4d59102818d1297b94bca7be878d756930",state:this.state},e(S,Object.assign({key:"de2e78d5dd2410b1e9244d879fc55e3c58030972"},this.getTextAreaProps()))))}constructor(e){t(this,e),this.catchRef=e=>{this.textareaRef=e},this._adjustHeight=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hasCounter=!1,this._maxLengthBehavior="hard",this._readOnly=!1,this._resize="vertical",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_adjustHeight:!1,_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${u()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.onInput=e=>{this.textareaRef instanceof HTMLTextAreaElement&&(this._value=this.textareaRef.value,this.state._adjustHeight&&(this._rows=q(this.textareaRef)),this.controller.onFacade.onInput(e))},this.controller=new T(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout(()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>q(this.textareaRef)?this.state._rows:q(this.textareaRef):this._rows||(this._rows=1)})}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return n(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_maxLengthBehavior:["validateMaxLengthBehavior"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};A.style={default:C};export{A as kol_textarea};
+import{h as e,r as t,g as n}from"./index-D9b7CYaw.js";import{c as i}from"./clsx-D6cJXTZC.js";import{i as a,d as o,g as s,a as l,F as r}from"./FormFieldStateWrapper-C4oGoEUE.js";import{I as d,a as h}from"./controller-icon-DXjCzUzB.js";import{_ as c}from"./tslib.es6-CxX45GIN.js";import{w as m,e as p}from"./common-B-m-0Sa1.js";import{n as f}from"./dev.utils-DJQvDSo0.js";import{a as u,v as b,b as v}from"./max-length-behavior-BhW8_k_T.js";import{v as y}from"./placeholder-DhhN6Rra.js";import{v as k}from"./read-only-joz0PLP_.js";import{v as g}from"./required-DJbvNLly.js";import{v as _}from"./rows-BAjzKE6S.js";import{v as x}from"./spell-check-S60TjBC_.js";import"./access-and-short-key-OLoWTcqR.js";import"./disabled-BiVzb-WY.js";import"./hide-label-WZ5WNz3h.js";import"./label-BqL4x8lJ.js";import"./tooltip-align-1XGYSZmF.js";import"./align-DUInjtnX.js";import"./events-DHTi_wtD.js";import"./associated.controller-BZSp_RI6.js";import"./bootstrap-BhCzUA0r.js";import"./component-names-B_kYyA8u.js";import"./i18n-B0tfVPMa.js";import"./isObject-DvSELytj.js";import"./reuse-CX4AQDkS.js";import"./i18n-0_cE4ov3.js";import"./InternalUnderlinedBadgeText-DaBRMGwx.js";import"./Alert-CyaNDUUA.js";import"./bem-yGcgGOmY.js";import"./browser-CU41g6rf.js";import"./Heading-Bmbvpwy_.js";import"./Icon-Dw-mNrMc.js";import"./icons-C3vHAMd1.js";const w=["vertical","none"],j=e=>"string"==typeof e&&w.includes(e),z=(e,t)=>{m(e,"_resize",j,new Set(w),t,{defaultValue:"vertical"})},B=t=>{const{class:n,msg:l,touched:r,readonly:d,disabled:h,required:m,ariaDescribedBy:p,hideLabel:u,label:f}=t,v=c(t,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),b={"kol-textarea--disabled":Boolean(h),"kol-textarea--required":Boolean(m),"kol-textarea--touched":Boolean(r),"kol-textarea--readonly":Boolean(d),[`kol-textarea--${s(l)}`]:a(l,r)},_=Object.assign(Object.assign({class:i("kol-textarea",b,n),required:m,disabled:h,readonly:d},o({ariaDescribedBy:p,hideLabel:u,label:f})),v);return e("textarea",Object.assign({},_))};function L(e,t){var n;const a=[...l(e).ariaDescribedBy,...null!==(n=t.ariaDescribedBy)&&void 0!==n?n:[]],i=Object.assign(Object.assign({id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,touched:e._touched,msg:e._msg},t),{ariaDescribedBy:a});return"_maxLength"in e&&"_maxLengthBehavior"in e&&"hard"===e._maxLengthBehavior&&(i.maxLength=e._maxLength),"_shortKey"in e&&(i["aria-keyshortcuts"]=e._shortKey),i}const S=t=>{var{state:n}=t,a=c(t,["state"]);return e(B,Object.assign({},L(n,a)))};class T extends d{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=e}validateHasCounter(e){u(this.component,e)}validateMaxLengthBehavior(e){b(this.component,e)}validateMaxLength(e){v(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePlaceholder(e){y(this.component,e)}validateReadOnly(e){k(this.component,e)}validateResize(e){z(this.component,e)}validateRequired(e){g(this.component,e)}validateRows(e){_(this.component,e)}validateSpellCheck(e){x(this.component,e)}validateValue(e){p(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateResize(this.component._resize),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const D='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text:not(:has(> [name]))::after,\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start:not(:empty)):has(> .kol-input-container__adornment--end:not(:empty)) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    min-height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}',C=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const a=Math.round(e.scrollHeight/n);return e.rows=t,a},A=class{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async focus(){var e;return Promise.resolve(null===(e=this.textareaRef)||void 0===e?void 0:e.focus())}getFormFieldProps(){return{state:this.state,class:i("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getTextAreaProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize},ariaDescribedBy:e},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(r,Object.assign({key:"ba389a3e0bd692d39ee646d750591f52c6d04868"},this.getFormFieldProps()),e(h,{key:"70769a4d59102818d1297b94bca7be878d756930",state:this.state},e(S,Object.assign({key:"de2e78d5dd2410b1e9244d879fc55e3c58030972"},this.getTextAreaProps()))))}constructor(e){t(this,e),this.catchRef=e=>{this.textareaRef=e},this._adjustHeight=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hasCounter=!1,this._maxLengthBehavior="hard",this._readOnly=!1,this._resize="vertical",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_adjustHeight:!1,_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${f()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.onInput=e=>{this.textareaRef instanceof HTMLTextAreaElement&&(this._value=this.textareaRef.value,this.state._adjustHeight&&(this._rows=C(this.textareaRef)),this.controller.onFacade.onInput(e))},this.controller=new T(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout(()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>C(this.textareaRef)?this.state._rows:C(this.textareaRef):this._rows||(this._rows=1)})}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return n(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_maxLengthBehavior:["validateMaxLengthBehavior"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};A.style={default:D};export{A as kol_textarea};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as n,r as t,H as e}from"./index-CJixoXML.js";import{t as o}from"./i18n-0_cE4ov3.js";import{n as i}from"./dev.utils-ClbGw5Q5.js";import{p as a}from"./component-names-B_kYyA8u.js";import{K as s}from"./Alert-ClpsVuF2.js";import"./common-B-m-0Sa1.js";import"./markdown-OkxVnUil.js";import{_ as l}from"./tslib.es6-CxX45GIN.js";import{c as r}from"./clsx-D6cJXTZC.js";import"./i18n-B0tfVPMa.js";import"./bem-yGcgGOmY.js";import"./browser-CU41g6rf.js";import"./Heading-DpnGwI1P.js";const c=t=>{var{status:e,toast:o,onClose:i}=t,a=l(t,["status","toast","onClose"]);const{type:d,label:c,description:h,variant:m}=o;return n("div",{class:r("kol-toast-item",`kol-toast-item--${e}`)},n(s,{class:"kol-toast-item__alert",alert:!0,label:c,level:0,hasCloser:!0,type:d,variant:m||"card",onCloserClick:i},n("div",Object.assign({},a),h)))},d="@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    max-width: 90vw;\n    flex-direction: column;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}",h=300,m=class{constructor(n){t(this,n),this.state={_toastStates:[]},this.translateToastCloseAll=o("kol-toast-close-all"),this.knownRenderFunctions=new Set}async enqueue(t){const n={toast:Object.assign(Object.assign({},t),{variant:"card"}),status:"adding",id:`toast-${i()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[n,...this.state._toastStates]}),setTimeout(()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map(t=>t.id===n.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t)})},h),()=>{this.handleClose(n)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map(n=>(n.id===t.id&&(n.status="removing"),n))}),setTimeout(()=>{var n,e;this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter(n=>n.id!==t.id)}),null===(e=(n=t.toast).onClose)||void 0===e||e.call(n)},h)}async closeAll(t=!1){if(t)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const t=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:t.map(t=>Object.assign(Object.assign({},t),{status:"removing"}))}),setTimeout(()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter(n=>t.every(t=>t.id!==n.id))}),t.forEach(t=>{var n,e;null===(e=(n=t.toast).onClose)||void 0===e||e.call(n)})},h)}}handleToastRef(t,n){n&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(n,{close:()=>this.handleClose(t)}))}render(){return n(e,{key:"40e9e249cceebf6d433444192d5199a2d7864f34",class:"kol-toast-container"},this.state._toastStates.length>1&&n(a,{key:"68a998df0fe18affd0db5e06fdfb92c9aee4abd8",_label:this.translateToastCloseAll,class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map(t=>n(c,{key:t.id,onClose:()=>this.handleClose(t),ref:n=>this.handleToastRef(t,n),toast:t.toast,status:t.status})))}};m.style={default:d};export{m as kol_toast_container};
+import{h as n,r as t,H as e}from"./index-D9b7CYaw.js";import{t as o}from"./i18n-0_cE4ov3.js";import{n as i}from"./dev.utils-DJQvDSo0.js";import{p as a}from"./component-names-B_kYyA8u.js";import{K as s}from"./Alert-CyaNDUUA.js";import"./common-B-m-0Sa1.js";import"./markdown-OkxVnUil.js";import{_ as l}from"./tslib.es6-CxX45GIN.js";import{c as r}from"./clsx-D6cJXTZC.js";import"./i18n-B0tfVPMa.js";import"./bem-yGcgGOmY.js";import"./browser-CU41g6rf.js";import"./Heading-Bmbvpwy_.js";const c=t=>{var{status:e,toast:o,onClose:i}=t,a=l(t,["status","toast","onClose"]);const{type:d,label:c,description:h,variant:m}=o;return n("div",{class:r("kol-toast-item",`kol-toast-item--${e}`)},n(s,{class:"kol-toast-item__alert",alert:!0,label:c,level:0,hasCloser:!0,type:d,variant:m||"card",onCloserClick:i},n("div",Object.assign({},a),h)))},d="@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    max-width: 90vw;\n    flex-direction: column;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}",h=300,m=class{constructor(n){t(this,n),this.state={_toastStates:[]},this.translateToastCloseAll=o("kol-toast-close-all"),this.knownRenderFunctions=new Set}async enqueue(t){const n={toast:Object.assign(Object.assign({},t),{variant:"card"}),status:"adding",id:`toast-${i()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[n,...this.state._toastStates]}),setTimeout(()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map(t=>t.id===n.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t)})},h),()=>{this.handleClose(n)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map(n=>(n.id===t.id&&(n.status="removing"),n))}),setTimeout(()=>{var n,e;this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter(n=>n.id!==t.id)}),null===(e=(n=t.toast).onClose)||void 0===e||e.call(n)},h)}async closeAll(t=!1){if(t)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const t=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:t.map(t=>Object.assign(Object.assign({},t),{status:"removing"}))}),setTimeout(()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter(n=>t.every(t=>t.id!==n.id))}),t.forEach(t=>{var n,e;null===(e=(n=t.toast).onClose)||void 0===e||e.call(n)})},h)}}handleToastRef(t,n){n&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(n,{close:()=>this.handleClose(t)}))}render(){return n(e,{key:"40e9e249cceebf6d433444192d5199a2d7864f34",class:"kol-toast-container"},this.state._toastStates.length>1&&n(a,{key:"68a998df0fe18affd0db5e06fdfb92c9aee4abd8",_label:this.translateToastCloseAll,class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map(t=>n(c,{key:t.id,onClose:()=>this.handleClose(t),ref:n=>this.handleToastRef(t,n),toast:t.toast,status:t.status})))}};m.style={default:d};export{m as kol_toast_container};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as t,g as e}from"./index-CJixoXML.js";import{_ as o}from"./tslib.es6-CxX45GIN.js";import{f as i,d as l}from"./component-names-B_kYyA8u.js";import{O as a,o as s,p as r,s as d}from"./common-B-m-0Sa1.js";import{v as h}from"./label-BqL4x8lJ.js";import{K as c}from"./keyboard-DNd73LVa.js";import{v as m}from"./orientation-DR4gvMev.js";const f=(n,e)=>{a(e,()=>{s(e,()=>{void 0===e&&(e=[]);try{e=r(e)}catch(n){}Array.isArray(e)&&e.every(n=>"object"==typeof n&&null!==n)&&d(n,"_items",e)})})},p="@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    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    flex: 1 0 100%;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .kol-toolbar--orientation-vertical {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .kol-toolbar--orientation-vertical .kol-span {\n    align-items: flex-start;\n  }\n  .kol-toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",b=class{constructor(e){n(this,e),this.state={_label:"",_items:[]},this.currentIndex=0,this.indexToElement=new Map,this.renderItem=(n,e)=>{const o=this.normalizeItem(n),a=e!==this.currentIndex||(null==o?void 0:o._disabled)?-1:0,r={key:e,class:"button normal kol-toolbar__item",_tabIndex:a},s=n=>{n&&this.indexToElement.set(e,n)};return"link"===o.type?t(i,Object.assign({},o,r,{ref:s})):t(l,Object.assign({},o,r,{ref:s}))}}normalizeItem(n){const{_icons:e,_disabled:t}=n,i=o(n,["_icons","_disabled"]);return Object.assign(Object.assign({},i),{_icons:e,_disabled:t})}render(){return t("div",{key:"b8bf5d060d2390c8c4bbf3345d731074ff297541",class:`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`,role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem))}validateLabel(n){h(this,n)}validateItems(n){f(this,n),this.indexToElement.clear(),this.setFirstEnabledItemIndex()}validateOrientation(n){m(this,n)}getCurrentToolbarItem(n){return"number"==typeof n?this.indexToElement.get(n):void 0}setFirstEnabledItemIndex(){var n;this.currentIndex=null===(n=this.state._items)||void 0===n?void 0:n.findIndex(n=>!n._disabled)}handleKeyDown(n){var e,t,o,i,a;const l=n.code;if(![c.ArrowUp,c.ArrowDown,c.ArrowRight,c.ArrowLeft].includes(l))return;n.preventDefault();const r=(null!==(t=null===(e=this._items)||void 0===e?void 0:e.length)&&void 0!==t?t:0)-1;if(r<0)return;const s=this.currentIndex;let d=s;switch(l){case c.ArrowUp:case c.ArrowLeft:d=s>0?s-1:r;break;case c.ArrowDown:case c.ArrowRight:d=s<r?s+1:0}s!==d&&((null===(i=null===(o=this.state._items)||void 0===o?void 0:o[d])||void 0===i?void 0:i._disabled)||(this.currentIndex=d,null===(a=this.getCurrentToolbarItem(d))||void 0===a||a.focus()))}handleBlur(n){n.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.validateOrientation(this._orientation),this.setFirstEnabledItemIndex()}get host(){return e(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"],_orientation:["validateOrientation"]}}};b.style={default:p};export{b as kol_toolbar};
+import{r as n,h as t,g as e}from"./index-D9b7CYaw.js";import{_ as o}from"./tslib.es6-CxX45GIN.js";import{f as i,d as a}from"./component-names-B_kYyA8u.js";import{O as l,o as s,p as r,s as d}from"./common-B-m-0Sa1.js";import{v as h}from"./label-BqL4x8lJ.js";import{K as c}from"./keyboard-DNd73LVa.js";import{v as m}from"./orientation-DR4gvMev.js";const f=(n,e)=>{l(e,()=>{s(e,()=>{void 0===e&&(e=[]);try{e=r(e)}catch(n){}Array.isArray(e)&&e.every(n=>"object"==typeof n&&null!==n)&&d(n,"_items",e)})})},p="@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    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-link::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-link__text {\n    flex: 1 0 100%;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-toolbar {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n  }\n  .kol-toolbar--orientation-vertical {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .kol-toolbar--orientation-vertical .kol-span {\n    align-items: flex-start;\n  }\n  .kol-toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",b=class{constructor(e){n(this,e),this.state={_label:"",_items:[]},this.currentIndex=0,this.indexToElement=new Map,this.renderItem=(n,e)=>{const o=this.normalizeItem(n),l=e!==this.currentIndex||(null==o?void 0:o._disabled)?-1:0,r={key:e,class:"button normal kol-toolbar__item",_tabIndex:l},s=n=>{n&&this.indexToElement.set(e,n)};return"link"===o.type?t(i,Object.assign({},o,r,{ref:s})):t(a,Object.assign({},o,r,{ref:s}))}}normalizeItem(n){const{_icons:e,_disabled:t}=n,i=o(n,["_icons","_disabled"]);return Object.assign(Object.assign({},i),{_icons:e,_disabled:t})}render(){return t("div",{key:"b8bf5d060d2390c8c4bbf3345d731074ff297541",class:`kol-toolbar kol-toolbar--orientation-${this.state._orientation}`,role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem))}validateLabel(n){h(this,n)}validateItems(n){f(this,n),this.indexToElement.clear(),this.setFirstEnabledItemIndex()}validateOrientation(n){m(this,n)}getCurrentToolbarItem(n){return"number"==typeof n?this.indexToElement.get(n):void 0}setFirstEnabledItemIndex(){var n;this.currentIndex=null===(n=this.state._items)||void 0===n?void 0:n.findIndex(n=>!n._disabled)}handleKeyDown(n){var e,t,o,i,a;const l=n.code;if(![c.ArrowUp,c.ArrowDown,c.ArrowRight,c.ArrowLeft].includes(l))return;n.preventDefault();const r=(null!==(t=null===(e=this._items)||void 0===e?void 0:e.length)&&void 0!==t?t:0)-1;if(r<0)return;const s=this.currentIndex;let d=s;switch(l){case c.ArrowUp:case c.ArrowLeft:d=s>0?s-1:r;break;case c.ArrowDown:case c.ArrowRight:d=s<r?s+1:0}s!==d&&((null===(i=null===(o=this.state._items)||void 0===o?void 0:o[d])||void 0===i?void 0:i._disabled)||(this.currentIndex=d,null===(a=this.getCurrentToolbarItem(d))||void 0===a||a.focus()))}handleBlur(n){n.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.validateOrientation(this._orientation),this.setFirstEnabledItemIndex()}get host(){return e(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"],_orientation:["validateOrientation"]}}};b.style={default:p};export{b as kol_toolbar};

package/dist/kolibri/kol-tooltip-wc.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t,H as s,g as e}from"./index-CJixoXML.js";import{b as h,a as o}from"./align-floating-elements-Iw9vSPIz.js";import{e as a,r as l}from"./common-B-m-0Sa1.js";import{v as n}from"./align-DUInjtnX.js";import{v as r}from"./label-BqL4x8lJ.js";import"./Alert-ClpsVuF2.js";import"./i18n-0_cE4ov3.js";import{K as d}from"./Span-D_wayad6.js";import{t as f,a as c}from"./tooltip-open-tracking-rBbBgPWP.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-D6cJXTZC.js";import"./component-names-B_kYyA8u.js";import"./bem-yGcgGOmY.js";import"./browser-CU41g6rf.js";import"./Heading-DpnGwI1P.js";import"./i18n-B0tfVPMa.js";import"./Icon-3kqoqI7a.js";import"./reuse-CX4AQDkS.js";import"./markdown-OkxVnUil.js";import"./InternalUnderlinedBadgeText-gZHJvp1Z.js";import"./isObject-DvSELytj.js";const m=(t,i)=>{a(t,"_badgeText",i)},u=(t,i)=>{a(t,"_id",i)},p=new Set;function v(t){p.forEach(t=>{t.style.setProperty("z-index","999")}),p.add(t),t.style.setProperty("z-index","1000")}function g(t){if(p.delete(t),p.size>0){const t=Array.from(p).pop();t&&t.style.setProperty("z-index","1000")}}const b=class{constructor(t){i(this,t),this.hasFocusIn=!1,this.hasMouseIn=!1,this.isHiddenForCurrentVisit=!1,this.resetHideFlag=()=>{this.isNewVisit()&&(this.isHiddenForCurrentVisit=!1)},this.showTooltip=()=>{var t;if(!this.isHiddenForCurrentVisit&&this.previousSibling&&this.tooltipElement){v(this.tooltipElement),f(),this.tooltipElement.classList.remove("hide"),this.tooltipElement.classList.add("show"),this.tooltipElement.style.setProperty("display","block"),null===(t=this.parentElement)||void 0===t||t.classList.add("hastooltip"),l().addEventListener("keyup",this.hideTooltipByEscape,{once:!0});const i=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=h(i,e,()=>{this.alignTooltip()})}},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.handleMouseEnter=()=>{const t=this.isNewVisit();this.hasMouseIn=!0,t&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()},this.handleMouseleave=t=>{var i,e;this.hasMouseIn=null!==(e=null===(i=this.tooltipElement)||void 0===i?void 0:i.contains(t.relatedTarget))&&void 0!==e&&e,this.resetHideFlag(),this.showOrHideTooltip()},this.handleFocusIn=()=>{const t=this.isNewVisit();this.hasFocusIn=!0,t&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()},this.handleFocusout=()=>{this.hasFocusIn=!1,this.resetHideFlag(),this.showOrHideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter),t.addEventListener("mouseleave",this.handleMouseleave),t.addEventListener("focusin",this.handleFocusIn),t.addEventListener("focusout",this.handleFocusout)},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter),t.removeEventListener("mouseleave",this.handleMouseleave),t.removeEventListener("focusin",this.handleFocusIn),t.removeEventListener("focusout",this.handleFocusout)},this.resyncListeners=(t,i,e=!1)=>{t&&this.removeListeners(t),i&&(e&&(this.previousSibling=i),this.addListeners(i))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this.state={_align:"top",_label:""},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout(()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()},300)}}isNewVisit(){return!this.hasMouseIn&&!this.hasFocusIn}async alignTooltip(){this.tooltipElement&&this.previousSibling&&await o({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}async hideTooltip(){var t;this.isHiddenForCurrentVisit=!0,this.tooltipElement&&(g(this.tooltipElement),c(),this.tooltipElement.classList.remove("show"),this.tooltipElement.classList.add("hide"),null===(t=this.parentElement)||void 0===t||t.classList.remove("hastooltip"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),l().removeEventListener("keyup",this.hideTooltipByEscape)}render(){return t(s,{key:"4bd19a74f184c57fe959e92e5e8744855114752e",class:"kol-tooltip"},""!==this.state._label&&t("div",{key:"ffe80a9d03284082125e44b20239862497e8cd71",class:"kol-tooltip__floating",ref:this.catchTooltipElement},t("div",{key:"ee7520f7d8a807406dee4f6165053ff8fd8a282e",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),t(d,{key:"1504cf6ee46a254b7430fce41b07bf20db232672",class:"kol-tooltip__content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(t){m(this,t)}validateAlign(t){n(this,t)}validateId(t){u(this,t)}validateLabel(t){r(this,t,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t,i;const e=null!==(i=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling)&&void 0!==i?i:null;this.resyncListeners(this.previousSibling,e,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t,i,e,s;this.previousSibling=null!==(i=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling)&&void 0!==i?i:null,this.parentElement=null!==(s=null===(e=this.host)||void 0===e?void 0:e.parentElement)&&void 0!==s?s:null}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return e(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};export{b as kol_tooltip_wc};
+import{r as i,h as t,H as s,g as e}from"./index-D9b7CYaw.js";import{b as h,a as o}from"./align-floating-elements-Iw9vSPIz.js";import{e as a,r as l}from"./common-B-m-0Sa1.js";import{v as n}from"./align-DUInjtnX.js";import{v as r}from"./label-BqL4x8lJ.js";import"./Alert-CyaNDUUA.js";import"./i18n-0_cE4ov3.js";import{K as d}from"./Span-JvwLyB9q.js";import{t as f,a as c}from"./tooltip-open-tracking-rBbBgPWP.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-D6cJXTZC.js";import"./component-names-B_kYyA8u.js";import"./bem-yGcgGOmY.js";import"./browser-CU41g6rf.js";import"./Heading-Bmbvpwy_.js";import"./i18n-B0tfVPMa.js";import"./Icon-Dw-mNrMc.js";import"./reuse-CX4AQDkS.js";import"./markdown-OkxVnUil.js";import"./InternalUnderlinedBadgeText-DaBRMGwx.js";import"./isObject-DvSELytj.js";const m=(t,i)=>{a(t,"_badgeText",i)},u=(t,i)=>{a(t,"_id",i)},p=new Set;function v(t){p.forEach(t=>{t.style.setProperty("z-index","999")}),p.add(t),t.style.setProperty("z-index","1000")}function b(t){if(p.delete(t),p.size>0){const t=Array.from(p).pop();t&&t.style.setProperty("z-index","1000")}}const g=class{constructor(t){i(this,t),this.hasFocusIn=!1,this.hasMouseIn=!1,this.isHiddenForCurrentVisit=!1,this.resetHideFlag=()=>{this.isNewVisit()&&(this.isHiddenForCurrentVisit=!1)},this.showTooltip=()=>{var t;if(!this.isHiddenForCurrentVisit&&this.previousSibling&&this.tooltipElement){v(this.tooltipElement),f(),this.tooltipElement.classList.remove("hide"),this.tooltipElement.classList.add("show"),this.tooltipElement.style.setProperty("display","block"),null===(t=this.parentElement)||void 0===t||t.classList.add("hastooltip"),l().addEventListener("keyup",this.hideTooltipByEscape,{once:!0});const i=this.previousSibling,e=this.tooltipElement;this.cleanupAutoPositioning=h(i,e,()=>{this.alignTooltip()})}},this.hideTooltipByEscape=t=>{"Escape"===t.key&&this.hideTooltip()},this.handleMouseEnter=()=>{const t=this.isNewVisit();this.hasMouseIn=!0,t&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()},this.handleMouseleave=t=>{var i,e;this.hasMouseIn=null!==(e=null===(i=this.tooltipElement)||void 0===i?void 0:i.contains(t.relatedTarget))&&void 0!==e&&e,this.resetHideFlag(),this.showOrHideTooltip()},this.handleFocusIn=()=>{const t=this.isNewVisit();this.hasFocusIn=!0,t&&(this.isHiddenForCurrentVisit=!1),this.showOrHideTooltip()},this.handleFocusout=()=>{this.hasFocusIn=!1,this.resetHideFlag(),this.showOrHideTooltip()},this.addListeners=t=>{t.addEventListener("mouseenter",this.handleMouseEnter),t.addEventListener("mouseleave",this.handleMouseleave),t.addEventListener("focusin",this.handleFocusIn),t.addEventListener("focusout",this.handleFocusout)},this.removeListeners=t=>{t.removeEventListener("mouseenter",this.handleMouseEnter),t.removeEventListener("mouseleave",this.handleMouseleave),t.removeEventListener("focusin",this.handleFocusIn),t.removeEventListener("focusout",this.handleFocusout)},this.resyncListeners=(t,i,e=!1)=>{t&&this.removeListeners(t),i&&(e&&(this.previousSibling=i),this.addListeners(i))},this.catchTooltipElement=t=>{this.tooltipElement=t},this.catchArrowElement=t=>{this.arrowElement=t},this._align="top",this.state={_align:"top",_label:""},this.showOrHideTooltip=()=>{clearTimeout(this.overFocusTimeout),this.overFocusTimeout=setTimeout(()=>{this.hasMouseIn||this.hasFocusIn?this.showTooltip():this.hideTooltip()},300)}}isNewVisit(){return!this.hasMouseIn&&!this.hasFocusIn}async alignTooltip(){this.tooltipElement&&this.previousSibling&&await o({align:this._align,referenceElement:this.previousSibling,arrowElement:this.arrowElement,floatingElement:this.tooltipElement})}async hideTooltip(){var t;this.isHiddenForCurrentVisit=!0,this.tooltipElement&&(b(this.tooltipElement),c(),this.tooltipElement.classList.remove("show"),this.tooltipElement.classList.add("hide"),null===(t=this.parentElement)||void 0===t||t.classList.remove("hastooltip"),this.cleanupAutoPositioning&&(this.cleanupAutoPositioning(),this.cleanupAutoPositioning=void 0)),l().removeEventListener("keyup",this.hideTooltipByEscape)}render(){return t(s,{key:"4bd19a74f184c57fe959e92e5e8744855114752e",class:"kol-tooltip"},""!==this.state._label&&t("div",{key:"ffe80a9d03284082125e44b20239862497e8cd71",class:"kol-tooltip__floating",ref:this.catchTooltipElement},t("div",{key:"ee7520f7d8a807406dee4f6165053ff8fd8a282e",class:"kol-tooltip__arrow",ref:this.catchArrowElement}),t(d,{key:"1504cf6ee46a254b7430fce41b07bf20db232672",class:"kol-tooltip__content",id:this.state._id,badgeText:this._badgeText,label:this.state._label})))}validateBadgeText(t){m(this,t)}validateAlign(t){n(this,t)}validateId(t){u(this,t)}validateLabel(t){r(this,t,{required:!0})}componentWillLoad(){this.validateBadgeText(this._badgeText),this.validateAlign(this._align),this.validateId(this._id),this.validateLabel(this._label)}handleEventListeners(){var t,i;const e=null!==(i=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling)&&void 0!==i?i:null;this.resyncListeners(this.previousSibling,e,!0),this.resyncListeners(this.tooltipElement,this.tooltipElement)}connectedCallback(){var t,i,e,s;this.previousSibling=null!==(i=null===(t=this.host)||void 0===t?void 0:t.previousElementSibling)&&void 0!==i?i:null,this.parentElement=null!==(s=null===(e=this.host)||void 0===e?void 0:e.parentElement)&&void 0!==s?s:null}componentDidRender(){this.handleEventListeners()}disconnectedCallback(){this.previousSibling&&(this.removeListeners(this.previousSibling),this.previousSibling=void 0),this.tooltipElement&&this.removeListeners(this.tooltipElement),this.cleanupAutoPositioning&&this.cleanupAutoPositioning()}get host(){return e(this)}static get watchers(){return{_badgeText:["validateBadgeText"],_align:["validateAlign"],_id:["validateId"],_label:["validateLabel"]}}};export{g as kol_tooltip_wc};