wcs-core 7.0.0 → 7.1.0

package/dist/wcs/{p-97cbbcfc.entry.js → p-7d665a7e.entry.js}

@@ -1,2 +1,2 @@
-import{h as r,r as t,c as e,f as i,H as o,g as s}from"./p-32e583ea.js";import{G as n}from"./p-412b0021.js";import{k as a}from"./p-4d6d1d14.js";import{i as c,a as d,s as l}from"./p-a3aece7a.js";import{i as u,b as h,a as f,S as g,c as b,g as w,e as v,d as p,f as m,h as k,M as y,o as j,k as C,r as x,j as A,s as _,l as R,m as O,U as S,n as F,p as I,q as E,t as P,u as D,v as M,w as T}from"./p-ff826ebe.js";function W(r){switch(r){case"asc":return 1;case"desc":return-1}}var U;var G=new Uint8Array(16);function H(){if(!U){U=typeof crypto!=="undefined"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||typeof msCrypto!=="undefined"&&typeof msCrypto.getRandomValues==="function"&&msCrypto.getRandomValues.bind(msCrypto);if(!U){throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported")}}return U(G)}const N=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function z(r){return typeof r==="string"&&N.test(r)}var L=[];for(var B=0;B<256;++B){L.push((B+256).toString(16).substr(1))}function $(r){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var e=(L[r[t+0]]+L[r[t+1]]+L[r[t+2]]+L[r[t+3]]+"-"+L[r[t+4]]+L[r[t+5]]+"-"+L[r[t+6]]+L[r[t+7]]+"-"+L[r[t+8]]+L[r[t+9]]+"-"+L[r[t+10]]+L[r[t+11]]+L[r[t+12]]+L[r[t+13]]+L[r[t+14]]+L[r[t+15]]).toLowerCase();if(!z(e)){throw TypeError("Stringified UUID is invalid")}return e}function V(r,t,e){r=r||{};var i=r.random||(r.rng||H)();i[6]=i[6]&15|64;i[8]=i[8]&63|128;if(t){e=e||0;for(var o=0;o<16;++o){t[e+o]=i[o]}return t}return $(i)}var K="[object Symbol]";function q(r){return typeof r=="symbol"||u(r)&&h(r)==K}function J(r,t){var e=-1,i=r==null?0:r.length,o=Array(i);while(++e<i){o[e]=t(r[e],e,r)}return o}var Q=1/0;var X=g?g.prototype:undefined,Y=X?X.toString:undefined;function Z(r){if(typeof r=="string"){return r}if(f(r)){return J(r,Z)+""}if(q(r)){return Y?Y.call(r):""}var t=r+"";return t=="0"&&1/r==-Q?"-0":t}var rr=Object.create;var tr=function(){function r(){}return function(t){if(!b(t)){return{}}if(rr){return rr(t)}r.prototype=t;var e=new r;r.prototype=undefined;return e}}();const er=tr;function ir(r,t){var e=-1,i=r.length;t||(t=Array(i));while(++e<i){t[e]=r[e]}return t}var or=function(){try{var r=w(Object,"defineProperty");r({},"",{});return r}catch(r){}}();const sr=or;function nr(r,t){var e=-1,i=r==null?0:r.length;while(++e<i){if(t(r[e],e,r)===false){break}}return r}function ar(r,t,e){if(t=="__proto__"&&sr){sr(r,t,{configurable:true,enumerable:true,value:e,writable:true})}else{r[t]=e}}var cr=Object.prototype;var dr=cr.hasOwnProperty;function lr(r,t,e){var i=r[t];if(!(dr.call(r,t)&&v(i,e))||e===undefined&&!(t in r)){ar(r,t,e)}}function ur(r,t,e,i){var o=!e;e||(e={});var s=-1,n=t.length;while(++s<n){var a=t[s];var c=i?i(e[a],r[a],a,e,r):undefined;if(c===undefined){c=r[a]}if(o){ar(e,a,c)}else{lr(e,a,c)}}return e}function hr(r){var t=[];if(r!=null){for(var e in Object(r)){t.push(e)}}return t}var fr=Object.prototype;var gr=fr.hasOwnProperty;function br(r){if(!b(r)){return hr(r)}var t=p(r),e=[];for(var i in r){if(!(i=="constructor"&&(t||!gr.call(r,i)))){e.push(i)}}return e}function wr(r){return m(r)?k(r,true):br(r)}var vr=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,pr=/^\w*$/;function mr(r,t){if(f(r)){return false}var e=typeof r;if(e=="number"||e=="symbol"||e=="boolean"||r==null||q(r)){return true}return pr.test(r)||!vr.test(r)||t!=null&&r in Object(t)}var kr="Expected a function";function yr(r,t){if(typeof r!="function"||t!=null&&typeof t!="function"){throw new TypeError(kr)}var e=function(){var i=arguments,o=t?t.apply(this,i):i[0],s=e.cache;if(s.has(o)){return s.get(o)}var n=r.apply(this,i);e.cache=s.set(o,n)||s;return n};e.cache=new(yr.Cache||y);return e}yr.Cache=y;var jr=500;function Cr(r){var t=yr(r,(function(r){if(e.size===jr){e.clear()}return r}));var e=t.cache;return t}var xr=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;var Ar=/\\(\\)?/g;var _r=Cr((function(r){var t=[];if(r.charCodeAt(0)===46){t.push("")}r.replace(xr,(function(r,e,i,o){t.push(i?o.replace(Ar,"$1"):e||r)}));return t}));const Rr=_r;function Or(r){return r==null?"":Z(r)}function Sr(r,t){if(f(r)){return r}return mr(r,t)?[r]:Rr(Or(r))}var Fr=1/0;function Ir(r){if(typeof r=="string"||q(r)){return r}var t=r+"";return t=="0"&&1/r==-Fr?"-0":t}function Er(r,t){t=Sr(t,r);var e=0,i=t.length;while(r!=null&&e<i){r=r[Ir(t[e++])]}return e&&e==i?r:undefined}function Pr(r,t,e){var i=r==null?undefined:Er(r,t);return i===undefined?e:i}var Dr=j(Object.getPrototypeOf,Object);const Mr=Dr;function Tr(r,t){return r&&ur(t,C(t),r)}function Wr(r,t){return r&&ur(t,wr(t),r)}var Ur=typeof exports=="object"&&exports&&!exports.nodeType&&exports;var Gr=Ur&&typeof module=="object"&&module&&!module.nodeType&&module;var Hr=Gr&&Gr.exports===Ur;var Nr=Hr?x.Buffer:undefined,zr=Nr?Nr.allocUnsafe:undefined;function Lr(r,t){if(t){return r.slice()}var e=r.length,i=zr?zr(e):new r.constructor(e);r.copy(i);return i}function Br(r,t){return ur(r,A(r),t)}var $r=Object.getOwnPropertySymbols;var Vr=!$r?_:function(r){var t=[];while(r){R(t,A(r));r=Mr(r)}return t};const Kr=Vr;function qr(r,t){return ur(r,Kr(r),t)}function Jr(r){return O(r,wr,Kr)}var Qr=Object.prototype;var Xr=Qr.hasOwnProperty;function Yr(r){var t=r.length,e=new r.constructor(t);if(t&&typeof r[0]=="string"&&Xr.call(r,"index")){e.index=r.index;e.input=r.input}return e}function Zr(r){var t=new r.constructor(r.byteLength);new S(t).set(new S(r));return t}function rt(r,t){var e=t?Zr(r.buffer):r.buffer;return new r.constructor(e,r.byteOffset,r.byteLength)}var tt=/\w*$/;function et(r){var t=new r.constructor(r.source,tt.exec(r));t.lastIndex=r.lastIndex;return t}var it=g?g.prototype:undefined,ot=it?it.valueOf:undefined;function st(r){return ot?Object(ot.call(r)):{}}function nt(r,t){var e=t?Zr(r.buffer):r.buffer;return new r.constructor(e,r.byteOffset,r.length)}var at="[object Boolean]",ct="[object Date]",dt="[object Map]",lt="[object Number]",ut="[object RegExp]",ht="[object Set]",ft="[object String]",gt="[object Symbol]";var bt="[object ArrayBuffer]",wt="[object DataView]",vt="[object Float32Array]",pt="[object Float64Array]",mt="[object Int8Array]",kt="[object Int16Array]",yt="[object Int32Array]",jt="[object Uint8Array]",Ct="[object Uint8ClampedArray]",xt="[object Uint16Array]",At="[object Uint32Array]";function _t(r,t,e){var i=r.constructor;switch(t){case bt:return Zr(r);case at:case ct:return new i(+r);case wt:return rt(r,e);case vt:case pt:case mt:case kt:case yt:case jt:case Ct:case xt:case At:return nt(r,e);case dt:return new i;case lt:case ft:return new i(r);case ut:return et(r);case ht:return new i;case gt:return st(r)}}function Rt(r){return typeof r.constructor=="function"&&!p(r)?er(Mr(r)):{}}var Ot="[object Map]";function St(r){return u(r)&&F(r)==Ot}var Ft=E&&E.isMap;var It=Ft?I(Ft):St;const Et=It;var Pt="[object Set]";function Dt(r){return u(r)&&F(r)==Pt}var Mt=E&&E.isSet;var Tt=Mt?I(Mt):Dt;const Wt=Tt;var Ut=1,Gt=2,Ht=4;var Nt="[object Arguments]",zt="[object Array]",Lt="[object Boolean]",Bt="[object Date]",$t="[object Error]",Vt="[object Function]",Kt="[object GeneratorFunction]",qt="[object Map]",Jt="[object Number]",Qt="[object Object]",Xt="[object RegExp]",Yt="[object Set]",Zt="[object String]",re="[object Symbol]",te="[object WeakMap]";var ee="[object ArrayBuffer]",ie="[object DataView]",oe="[object Float32Array]",se="[object Float64Array]",ne="[object Int8Array]",ae="[object Int16Array]",ce="[object Int32Array]",de="[object Uint8Array]",le="[object Uint8ClampedArray]",ue="[object Uint16Array]",he="[object Uint32Array]";var fe={};fe[Nt]=fe[zt]=fe[ee]=fe[ie]=fe[Lt]=fe[Bt]=fe[oe]=fe[se]=fe[ne]=fe[ae]=fe[ce]=fe[qt]=fe[Jt]=fe[Qt]=fe[Xt]=fe[Yt]=fe[Zt]=fe[re]=fe[de]=fe[le]=fe[ue]=fe[he]=true;fe[$t]=fe[Vt]=fe[te]=false;function ge(r,t,e,i,o,s){var n,a=t&Ut,c=t&Gt,d=t&Ht;if(e){n=o?e(r,i,o,s):e(r)}if(n!==undefined){return n}if(!b(r)){return r}var l=f(r);if(l){n=Yr(r);if(!a){return ir(r,n)}}else{var u=F(r),h=u==Vt||u==Kt;if(P(r)){return Lr(r,a)}if(u==Qt||u==Nt||h&&!o){n=c||h?{}:Rt(r);if(!a){return c?qr(r,Wr(n,r)):Br(r,Tr(n,r))}}else{if(!fe[u]){return o?r:{}}n=_t(r,u,a)}}s||(s=new D);var g=s.get(r);if(g){return g}s.set(r,n);if(Wt(r)){r.forEach((function(i){n.add(ge(i,t,e,i,r,s))}))}else if(Et(r)){r.forEach((function(i,o){n.set(o,ge(i,t,e,o,r,s))}))}var w=d?c?Jr:M:c?wr:C;var v=l?undefined:w(r);nr(v||r,(function(i,o){if(v){o=i;i=r[o]}lr(n,o,ge(i,t,e,o,r,s))}));return n}var be=1,we=4;function ve(r){return ge(r,be|we)}function pe(r,t){const e=a(r);if(e==="UNKNOWN"){return[]}switch(e){case"UP_ARROW":return[{kind:"FocusCell",target:"up"}];case"DOWN_ARROW":return[{kind:"FocusCell",target:"down"}];case"LEFT_ARROW":return[{kind:"FocusCell",target:"left"}];case"RIGHT_ARROW":return[{kind:"FocusCell",target:"right"}];case"HOME":return[{kind:"FocusCell",target:"first_of_row"}];case"END":return[{kind:"FocusCell",target:"last_of_row"}];case"MAJ+SPACE":switch(t){case"grid_selection_single":case"grid_selection_multiple":return[{kind:"SelectRow",target:"one"}]}break;case"CTRL+A":switch(t){case"grid_selection_multiple":return[{kind:"SelectRow",target:"all"}]}break;case"CTRL+HOME":return[{kind:"FocusCell",target:"first_of_grid"}];case"CTRL+END":return[{kind:"FocusCell",target:"last_of_grid"}]}return[]}const me=({checked:t,row:e,rowIndex:i,totalRows:o,onClick:s})=>{let n;return r("div",{class:`grid-radio ${t?"checked":""}`,onClick:r=>n.click()},r("input",{type:"radio",name:"selection","aria-setsize":o,"aria-posinset":i,tabindex:"-1",checked:t,"aria-checked":`${t}`,ref:r=>n=r,onClick:r=>s(e)}))};const ke=":host{--wcs-grid-gap:0;--wcs-grid-vertical-align:middle;--wcs-grid-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-grid-cell-text-color:var(--wcs-semantic-color-text-secondary);--wcs-grid-cell-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-grid-cell-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-grid-cell-border-bottom:none;--wcs-grid-cell-separator-border:none;--wcs-grid-first-cell-border-radius:0;--wcs-grid-last-cell-border-radius:0;--wcs-grid-highlight-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-grid-row-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-grid-row-odd-background-color:var(--wcs-grid-row-background-color);--wcs-grid-row-even-background-color:var(--wcs-semantic-color-background-surface-accent-lightest);--wcs-grid-header-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-grid-header-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-grid-header-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-grid-header-text-color:var(--wcs-semantic-color-text-primary);--wcs-grid-header-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-grid-header-font-size:var(--wcs-semantic-font-size-label-1);--wcs-grid-header-line-height:var(--wcs-primitive-font-line-height-140);--wcs-grid-header-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-grid-header-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-grid-header-border-left:none;--wcs-grid-header-border-radius:0;--wcs-grid-header-border-bottom:solid var(--wcs-semantic-border-width-default) var(--wcs-semantic-color-border-secondary);--wcs-grid-header-transition-duration:var(--wcs-semantic-motion-duration-feedback-fast);--wcs-grid-first-header-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-grid-first-header-border-radius:0;--wcs-grid-last-header-border-radius:0;--wcs-grid-column-selection-width:calc(5 * var(--wcs-semantic-spacing-base));--wcs-grid-header-sort-arrow-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-grid-header-sort-arrow-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);display:block}:host th{border-radius:var(--wcs-grid-first-header-border-radius);background-color:var(--wcs-grid-first-header-background-color)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-header-border-left:none}:host :host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-component-grid-header-border-radius-first:0;--wcs-grid-header-border-left:var(--wcs-grid-header-border-left)}:host table{width:100%;border-collapse:collapse;border-spacing:var(--wcs-grid-gap)}:host table thead{border-bottom:var(--wcs-grid-header-border-bottom)}:host table tbody{vertical-align:var(--wcs-grid-vertical-align)}:host td{color:var(--wcs-grid-cell-text-color);margin:0;padding:var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal)}:host td:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}:host td:first-child{border-radius:var(--wcs-grid-first-cell-border-radius)}:host td:last-child{border-radius:var(--wcs-grid-last-cell-border-radius)}:host td:not(:first-child){border-left:var(--wcs-grid-cell-separator-border)}:host tr{background-color:var(--wcs-grid-row-background-color)}:host tr:nth-child(odd){background-color:var(--wcs-grid-row-odd-background-color, var(--wcs-grid-row-background-color))}:host tr:nth-child(even){background-color:var(--wcs-grid-row-even-background-color, var(--wcs-grid-row-background-color))}:host tr:not(:last-child) td{border-bottom:var(--wcs-grid-cell-border-bottom)}:host .wcs-grid-selection-column{padding:var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal);width:var(--wcs-grid-column-selection-width);text-align:start}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}";const ye=ke;const je='.grid-radio{--wcs-grid-radio-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-grid-radio-padding:calc(var(--wcs-semantic-size-base) / 4);--wcs-grid-radio-transition:var(--wcs-semantic-motion-duration-feedback-base);--wcs-grid-radio-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-grid-radio-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-grid-radio-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-grid-radio-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-grid-radio-background-color-default:transparent;--wcs-grid-radio-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-grid-radio-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-grid-radio-inner-border-color:white;width:fit-content;cursor:pointer;padding:var(--wcs-grid-radio-padding, 0.125rem);}.grid-radio:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(:has(input:focus-visible)){.grid-radio:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}.grid-radio input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.grid-radio::before{content:"";display:flex;border-radius:50%;border:2px solid var(--wcs-grid-radio-border-color-default);position:relative;width:1.125rem;height:1.125rem;box-sizing:border-box;background-color:var(--wcs-grid-radio-background-color-default);transition:var(--wcs-grid-radio-transition, 0.175s) ease-in-out}.grid-radio:hover::before{border-color:var(--wcs-grid-radio-border-color-hover)}.grid-radio.checked::before{border-color:var(--wcs-grid-radio-border-color-selected);background-color:var(--wcs-grid-radio-background-color-selected);outline:solid 2px var(--wcs-grid-radio-inner-border-color);outline-offset:-4px}';const Ce=je;const xe=["title"];const Ae=class{constructor(r){t(this,r);this.wcsGridSelectionChange=e(this,"wcsGridSelectionChange",7);this.wcsGridAllSelectionChange=e(this,"wcsGridAllSelectionChange",7);this.wcsFocus=e(this,"wcsFocus",7);this.wcsBlur=e(this,"wcsBlur",7);this.inheritedAttributes={};this.serverMode=false;this.data=undefined;this.loading=undefined;this.selectionConfig="none";this.selectedItems=[];this.wcsGridPaginationId=undefined;this.rowIdPath=undefined;this.rowCssPartsFn=r=>null;this.columns=undefined;this.paginationEl=undefined;this.rows=[];this.cursorPosition={col:0,row:1}}onCursorPositionChange(r){this.getGridColumnsFromTemplate().forEach((t=>t.cursorPosition=r))}onDataChange(r){this.updateGridRows(r);this.refreshSort(false)}onSelectedItemsPropertyChange(r){this.updateSelectionWithValues(r)}onFocus(r){var t;(t=this.getElementToFocusAtCursorPosition())===null||t===void 0?void 0:t.focus();this.wcsFocus.emit(r)}onBlur(r){this.wcsBlur.emit(r)}hasSelectionColumn(){return this.selectionConfig!=="none"}getElementToFocusAtCursorPosition(){var r,t;const e=(r=this.gridElementsWithCoordinates.find((r=>{var t,e;return r.col===((t=this.cursorPosition)===null||t===void 0?void 0:t.col)&&r.row===((e=this.cursorPosition)===null||e===void 0?void 0:e.row)})))===null||r===void 0?void 0:r.el;return this.hasSelectionColumn()?(t=e.querySelector('wcs-checkbox,input[type="radio"]'))!==null&&t!==void 0?t:e:e}moveCursorPosition(r,t){var e;this.cursorPosition={col:r==="first"?0:r==="last"?this.totalDisplayedColumnCount()-1:Math.min(Math.max(this.cursorPosition.col+r,0),this.totalDisplayedColumnCount()-1),row:t==="first"?0:t==="last"?this.getRowsForCurrentPage().length:Math.min(Math.max(this.cursorPosition.row+t,0),this.getRowsForCurrentPage().length)};this.handleCursorPositionOnEmptyTh();(e=this.getElementToFocusAtCursorPosition())===null||e===void 0?void 0:e.focus()}handleCursorPositionOnEmptyTh(){if(this.selectionConfig==="single"&&this.cursorPosition.col===0&&this.cursorPosition.row===0){this.cursorPosition={col:1,row:0}}}onHiddenColumnChange(){i(this);this.cursorPosition={col:0,row:1}}onKeyDown(r){var t;if(((t=document.activeElement)===null||t===void 0?void 0:t.tagName)==="WCS-GRID-PAGINATION"){return}let e;switch(this.selectionConfig){case"multiple":e="grid_selection_multiple";break;case"single":e="grid_selection_single";break;case"none":e="grid_no_selection";break}const i=pe(r,e);if(i.length!=0){r.preventDefault()}for(const t of i){this.doActionFromKeyboardEventAssociatedAction(t,r)}}doActionFromKeyboardEventAssociatedAction(r,t){switch(r.kind){case"FocusCell":switch(r.target){case"up":this.moveCursorPosition(0,-1);break;case"down":this.moveCursorPosition(0,1);break;case"left":this.moveCursorPosition(-1,0);break;case"right":this.moveCursorPosition(1,0);break;case"first_of_row":this.moveCursorPosition("first",0);break;case"last_of_row":this.moveCursorPosition("last",0);break;case"first_of_grid":this.moveCursorPosition("first","first");break;case"last_of_grid":this.moveCursorPosition("last","last");break}case"SelectRow":switch(r.target){case"one":t.preventDefault();if(this.cursorPosition.row>0){this.onRowSelection(this.rows[this.cursorPosition.row-1])}break;case"all":this.selectAllRows();break}break;default:throw new Error("Internal error")}}onClick(r){const t=r.composedPath().filter((r=>["TD","TH"].includes(r.nodeName)))[0];if(!t)return;const e=this.gridElementsWithCoordinates.find((r=>r.el===t));this.cursorPosition={col:e.col,row:e.row}}updateSelectionWithValues(r){if(this.selectionConfig==="single"){this.rows.map((r=>r.selected=false));for(const t of this.rows){if(T(t.data,r)){t.selected=true;break}}}else if(this.selectionConfig==="multiple"){this.rows.map((r=>r.selected=false));for(const t of this.rows){if(r.find((r=>T(r,t.data)))){t.selected=true}}}this.rows=ve(this.rows)}wcsGridRowToWcsGridRowData(r){return{selected:r.selected,page:r.page,data:r.data}}updateGridRows(r){const t=[];if(r&&this.columns){for(let e=0;e<r.length;e++){const i={uuid:V(),data:r[e],selected:false,cells:[]};let o=0;for(const t of this.columns){t.columnPosition=o+(this.hasSelectionColumn()?1:0);o++;i.cells.push({content:Pr(r[e],t.path),column:t,formatter:t.formatter})}t.push(i)}this.rows=t;this.updatePageIndex()}}componentDidLoad(){this.columns=this.getGridColumnsFromTemplate();this.paginationEl=this.wcsGridPaginationId?document.getElementById(this.wcsGridPaginationId):this.getGridPaginationsFromTemplate()[0];this.updateGridRows(this.data);if(this.selectedItems){this.updateSelectionWithValues(this.selectedItems)}this.refreshSort(true)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),d(this.el,xe))}async setAriaAttribute(r,t){l(this.nativeTable,r,t)}refreshSort(r){if(this.columns){const[t,...e]=this.columns.filter((r=>r.sortOrder!=="none"));if(t&&!this.serverMode){this.sortBy(t)}r&&this.disableSortOrderForColumns(e)}}disableSortOrderForColumns(r){r===null||r===void 0?void 0:r.forEach((r=>r.sortOrder="none"))}getGridColumnsFromTemplate(){const r=this.el.shadowRoot.querySelector('slot[name="grid-column"]');return r.assignedElements()}getGridPaginationsFromTemplate(){const r=this.el.shadowRoot.querySelector('slot[name="grid-pagination"]');return r.assignedElements()}get gridElementsWithCoordinates(){const r=[];if(this.selectionConfig==="multiple"){r.push({el:this.el.shadowRoot.querySelector("th"),row:0,col:0})}this.getGridColumnsFromTemplate().filter((r=>!r.hidden)).forEach(((t,e)=>{r.push({el:t.shadowRoot.querySelector("th"),row:0,col:e+(this.hasSelectionColumn()?1:0)})}));this.el.shadowRoot.querySelectorAll("td").forEach(((t,e)=>{r.push({el:t,row:1+Math.floor(e/this.totalDisplayedColumnCount()),col:e%this.totalDisplayedColumnCount()})}));return r}sortChangeEventHandler(r){if(r.detail.order==="none"||!this.columns)return;this.disableSortOrderForColumns(this.columns.filter((t=>t!==r.detail.column)));if(this.serverMode)return;this.sortBy(r.detail.column);this.updatePageIndex()}sortBy(r){if(r.sortFn){this.rows=ve(this.rows).sort(((t,e)=>r.sortFn(t.data,e.data,r)*W(r.sortOrder)))}else{this.rows=ve(this.rows).sort(((t,e)=>{const i=r.path;return(Pr(t.data,i)<Pr(e.data,i)?-1:Pr(t.data,i)>Pr(e.data,i)?1:0)*W(r.sortOrder)}))}}updatePageIndex(){if(!this.serverMode&&this.paginationEl){this.paginationEl.itemsCount=this.data.length;this.paginationEl.pageCount=Math.ceil(this.data.length/this.paginationEl.pageSize);if(this.paginationEl.pageCount<=1){this.paginationEl.currentPage=n.INDEX_FIRST_PAGE}else if(this.paginationEl.pageCount>0&&this.paginationEl.currentPage+1>this.paginationEl.pageCount){this.paginationEl.currentPage=this.paginationEl.pageCount-1}const r=ve(this.rows);r.forEach(((r,t)=>r.page=Math.floor(t/this.paginationEl.pageSize)));this.rows=[...r]}}paginationChangeEventHandler(){this.onPaginationChange()}paginationChangeEventHandlerOutside(r){if(this.wcsGridPaginationId&&this.wcsGridPaginationId===r.target.id){this.onPaginationChange()}}onPaginationChange(){if(this.serverMode)return;this.updatePageIndex()}onRowSelection(r){if(this.selectionConfig==="single"){this.rows.filter((t=>t.uuid!==r.uuid)).map((r=>r.selected=false))}r.selected=!r.selected;if(this.selectionConfig!=="single"||r.selected){this.wcsGridSelectionChange.emit({selectedRows:this.selectedRows.map((r=>this.wcsGridRowToWcsGridRowData(r))),changedRow:this.wcsGridRowToWcsGridRowData(r)})}this.rows=ve(this.rows)}get selectedRows(){return this.rows.filter((r=>r.selected))}selectAllRows(){const r=this.getRowsForCurrentPage();const t=!this.allRowsAreSelected();r.map((r=>r.selected=t));this.wcsGridAllSelectionChange.emit({rows:t?r.map((r=>this.wcsGridRowToWcsGridRowData(r))):[]});this.wcsGridSelectionChange.emit({selectedRows:this.selectedRows.map((r=>this.wcsGridRowToWcsGridRowData(r))),changedRow:"allCheckbox"});this.rows=ve(this.rows)}allRowsAreSelected(){const r=this.getRowsForCurrentPage();return r.length>0&&r.filter((r=>r.selected)).length===r.length}getRowsForCurrentPage(){if(!this.serverMode&&this.paginationEl){return this.rows.filter((r=>r.page===this.paginationEl.currentPage))}return this.rows}renderSelectionColumn(t,e){var i,o,s,n;switch(this.selectionConfig){case"none":return;case"single":return r("td",{"aria-colindex":this.atLeastOneColumnHidden()?1:null,tabIndex:((i=this.cursorPosition)===null||i===void 0?void 0:i.col)===0&&e+1===((o=this.cursorPosition)===null||o===void 0?void 0:o.row)?0:-1},r(me,{checked:t.selected,row:t,rowIndex:e+1,totalRows:this.rows.length,onClick:r=>{if(!r.selected){this.onRowSelection(r)}}}));case"multiple":return r("td",{"aria-colindex":this.atLeastOneColumnHidden()?1:null,tabIndex:((s=this.cursorPosition)===null||s===void 0?void 0:s.col)===0&&e+1===((n=this.cursorPosition)===null||n===void 0?void 0:n.row)?0:-1},r("wcs-checkbox",{tabIndex:-1,part:"row-checkbox",checked:t.selected,onWcsChange:this.onRowSelection.bind(this,t)}))}}getCellContent(t,e){if(e.formatter){return e.formatter(r,e.column,this.wcsGridRowToWcsGridRowData(t))}return e.content}totalColumnCount(){if(!this.columns){return 0}return this.columns.length+(this.hasSelectionColumn()?1:0)}totalDisplayedColumnCount(){var r,t;return(t=this.totalColumnCount()-((r=this.columns)===null||r===void 0?void 0:r.filter((r=>r.hidden)).length))!==null&&t!==void 0?t:0}atLeastOneColumnHidden(){return this.totalDisplayedColumnCount()!==this.totalColumnCount()}render(){var t,e,i,s;return r(o,{key:"2012464f20c249873192549e34ff7ac4c82e8526"},r("table",Object.assign({key:"a0a4a42e52bf623b34db145571045437ac6f4a60",role:"grid",ref:r=>this.nativeTable=r,"aria-rowcount":!this.loading&&((t=this.rows)===null||t===void 0?void 0:t.length),"aria-colcount":!this.loading&&this.totalDisplayedColumnCount()},this.inheritedAttributes),r("thead",{key:"3bf24c0462be2bd52754d44a3d9c5f84a7662bd6"},r("tr",{key:"4169baa4ce95078d40e328d0c76577b8a58e3489","aria-rowindex":"1"},this.selectionConfig==="none"?"":r("th",{class:"wcs-grid-selection-column"},this.selectionConfig==="single"?"":r("wcs-checkbox",{tabIndex:((e=this.cursorPosition)===null||e===void 0?void 0:e.col)===0&&((i=this.cursorPosition)===null||i===void 0?void 0:i.row)===0?0:-1,part:"all-rows-checkbox",checked:this.allRowsAreSelected(),onWcsChange:this.selectAllRows.bind(this)})),r("slot",{key:"743ee6266300d4ad05f70b7e2a42a159be7a1700",name:"grid-column"}))),r("tbody",{key:"c20964de1625e8fef9d98f9b7aa6f5c8cf2b186c"},this.loading?r("tr",{"aria-busy":"true"},r("td",{colSpan:this.totalColumnCount(),class:"loading"},r("wcs-spinner",null))):(s=this.rows)===null||s===void 0?void 0:s.filter((r=>this.serverMode||!this.paginationEl||r.page===this.paginationEl.currentPage)).map(((r,t)=>this.renderRow(r,t))))),r("slot",{key:"1cac800a642d68c9ae7e6f958c74d6b3069e75a1",name:"grid-pagination"}))}renderRow(t,e){var i,o;let s=0;return r("tr",{class:t.selected?"selected":"",part:(i=this.rowCssPartsWithoutEmptyList(t))===null||i===void 0?void 0:i.join(" "),"aria-selected":t.selected?"true":null,"aria-rowindex":e+2},this.renderSelectionColumn(t,e),(o=t.cells)===null||o===void 0?void 0:o.map(((i,o)=>{var n,a;if(i.column.hidden){s++;return}const c=o-s+1+(this.hasSelectionColumn()?1:0);const d=c-1===((n=this.cursorPosition)===null||n===void 0?void 0:n.col)&&e+1===((a=this.cursorPosition)===null||a===void 0?void 0:a.row);return i.column.customCells?r("td",{tabIndex:d?0:-1,"aria-colindex":this.atLeastOneColumnHidden()?c:null},r("slot",{name:i.column.id+"-"+Pr(t.data,this.rowIdPath)})):r("td",{tabIndex:d?0:-1,"aria-colindex":this.atLeastOneColumnHidden()?c:null,part:i.column.path+"-column"},this.getCellContent(t,i))})))}rowCssPartsWithoutEmptyList(r){const t=this.rowCssPartsFn(r);return(t===null||t===void 0?void 0:t.length)===0?null:t}get el(){return s(this)}static get watchers(){return{cursorPosition:["onCursorPositionChange"],data:["onDataChange"],selectedItems:["onSelectedItemsPropertyChange"]}}};Ae.style=ye+Ce;export{Ae as wcs_grid};
-//# sourceMappingURL=p-97cbbcfc.entry.js.map
+import{h as r,r as t,c as e,f as i,H as o,g as s}from"./p-32e583ea.js";import{G as n}from"./p-8fcceaf1.js";import{k as a}from"./p-89b8c724.js";import{i as c,a as d,s as l}from"./p-52d77e1f.js";import{i as u,b as h,a as f,S as g,c as b,g as w,e as v,d as p,f as m,h as k,M as y,o as j,k as C,r as x,j as A,s as _,l as R,m as O,U as S,n as F,p as I,q as E,t as P,u as D,v as M,w as T}from"./p-ff826ebe.js";function W(r){switch(r){case"asc":return 1;case"desc":return-1}}var U;var G=new Uint8Array(16);function H(){if(!U){U=typeof crypto!=="undefined"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||typeof msCrypto!=="undefined"&&typeof msCrypto.getRandomValues==="function"&&msCrypto.getRandomValues.bind(msCrypto);if(!U){throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported")}}return U(G)}const N=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;function z(r){return typeof r==="string"&&N.test(r)}var L=[];for(var B=0;B<256;++B){L.push((B+256).toString(16).substr(1))}function $(r){var t=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var e=(L[r[t+0]]+L[r[t+1]]+L[r[t+2]]+L[r[t+3]]+"-"+L[r[t+4]]+L[r[t+5]]+"-"+L[r[t+6]]+L[r[t+7]]+"-"+L[r[t+8]]+L[r[t+9]]+"-"+L[r[t+10]]+L[r[t+11]]+L[r[t+12]]+L[r[t+13]]+L[r[t+14]]+L[r[t+15]]).toLowerCase();if(!z(e)){throw TypeError("Stringified UUID is invalid")}return e}function V(r,t,e){r=r||{};var i=r.random||(r.rng||H)();i[6]=i[6]&15|64;i[8]=i[8]&63|128;if(t){e=e||0;for(var o=0;o<16;++o){t[e+o]=i[o]}return t}return $(i)}var K="[object Symbol]";function q(r){return typeof r=="symbol"||u(r)&&h(r)==K}function J(r,t){var e=-1,i=r==null?0:r.length,o=Array(i);while(++e<i){o[e]=t(r[e],e,r)}return o}var Q=1/0;var X=g?g.prototype:undefined,Y=X?X.toString:undefined;function Z(r){if(typeof r=="string"){return r}if(f(r)){return J(r,Z)+""}if(q(r)){return Y?Y.call(r):""}var t=r+"";return t=="0"&&1/r==-Q?"-0":t}var rr=Object.create;var tr=function(){function r(){}return function(t){if(!b(t)){return{}}if(rr){return rr(t)}r.prototype=t;var e=new r;r.prototype=undefined;return e}}();const er=tr;function ir(r,t){var e=-1,i=r.length;t||(t=Array(i));while(++e<i){t[e]=r[e]}return t}var or=function(){try{var r=w(Object,"defineProperty");r({},"",{});return r}catch(r){}}();const sr=or;function nr(r,t){var e=-1,i=r==null?0:r.length;while(++e<i){if(t(r[e],e,r)===false){break}}return r}function ar(r,t,e){if(t=="__proto__"&&sr){sr(r,t,{configurable:true,enumerable:true,value:e,writable:true})}else{r[t]=e}}var cr=Object.prototype;var dr=cr.hasOwnProperty;function lr(r,t,e){var i=r[t];if(!(dr.call(r,t)&&v(i,e))||e===undefined&&!(t in r)){ar(r,t,e)}}function ur(r,t,e,i){var o=!e;e||(e={});var s=-1,n=t.length;while(++s<n){var a=t[s];var c=i?i(e[a],r[a],a,e,r):undefined;if(c===undefined){c=r[a]}if(o){ar(e,a,c)}else{lr(e,a,c)}}return e}function hr(r){var t=[];if(r!=null){for(var e in Object(r)){t.push(e)}}return t}var fr=Object.prototype;var gr=fr.hasOwnProperty;function br(r){if(!b(r)){return hr(r)}var t=p(r),e=[];for(var i in r){if(!(i=="constructor"&&(t||!gr.call(r,i)))){e.push(i)}}return e}function wr(r){return m(r)?k(r,true):br(r)}var vr=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,pr=/^\w*$/;function mr(r,t){if(f(r)){return false}var e=typeof r;if(e=="number"||e=="symbol"||e=="boolean"||r==null||q(r)){return true}return pr.test(r)||!vr.test(r)||t!=null&&r in Object(t)}var kr="Expected a function";function yr(r,t){if(typeof r!="function"||t!=null&&typeof t!="function"){throw new TypeError(kr)}var e=function(){var i=arguments,o=t?t.apply(this,i):i[0],s=e.cache;if(s.has(o)){return s.get(o)}var n=r.apply(this,i);e.cache=s.set(o,n)||s;return n};e.cache=new(yr.Cache||y);return e}yr.Cache=y;var jr=500;function Cr(r){var t=yr(r,(function(r){if(e.size===jr){e.clear()}return r}));var e=t.cache;return t}var xr=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;var Ar=/\\(\\)?/g;var _r=Cr((function(r){var t=[];if(r.charCodeAt(0)===46){t.push("")}r.replace(xr,(function(r,e,i,o){t.push(i?o.replace(Ar,"$1"):e||r)}));return t}));const Rr=_r;function Or(r){return r==null?"":Z(r)}function Sr(r,t){if(f(r)){return r}return mr(r,t)?[r]:Rr(Or(r))}var Fr=1/0;function Ir(r){if(typeof r=="string"||q(r)){return r}var t=r+"";return t=="0"&&1/r==-Fr?"-0":t}function Er(r,t){t=Sr(t,r);var e=0,i=t.length;while(r!=null&&e<i){r=r[Ir(t[e++])]}return e&&e==i?r:undefined}function Pr(r,t,e){var i=r==null?undefined:Er(r,t);return i===undefined?e:i}var Dr=j(Object.getPrototypeOf,Object);const Mr=Dr;function Tr(r,t){return r&&ur(t,C(t),r)}function Wr(r,t){return r&&ur(t,wr(t),r)}var Ur=typeof exports=="object"&&exports&&!exports.nodeType&&exports;var Gr=Ur&&typeof module=="object"&&module&&!module.nodeType&&module;var Hr=Gr&&Gr.exports===Ur;var Nr=Hr?x.Buffer:undefined,zr=Nr?Nr.allocUnsafe:undefined;function Lr(r,t){if(t){return r.slice()}var e=r.length,i=zr?zr(e):new r.constructor(e);r.copy(i);return i}function Br(r,t){return ur(r,A(r),t)}var $r=Object.getOwnPropertySymbols;var Vr=!$r?_:function(r){var t=[];while(r){R(t,A(r));r=Mr(r)}return t};const Kr=Vr;function qr(r,t){return ur(r,Kr(r),t)}function Jr(r){return O(r,wr,Kr)}var Qr=Object.prototype;var Xr=Qr.hasOwnProperty;function Yr(r){var t=r.length,e=new r.constructor(t);if(t&&typeof r[0]=="string"&&Xr.call(r,"index")){e.index=r.index;e.input=r.input}return e}function Zr(r){var t=new r.constructor(r.byteLength);new S(t).set(new S(r));return t}function rt(r,t){var e=t?Zr(r.buffer):r.buffer;return new r.constructor(e,r.byteOffset,r.byteLength)}var tt=/\w*$/;function et(r){var t=new r.constructor(r.source,tt.exec(r));t.lastIndex=r.lastIndex;return t}var it=g?g.prototype:undefined,ot=it?it.valueOf:undefined;function st(r){return ot?Object(ot.call(r)):{}}function nt(r,t){var e=t?Zr(r.buffer):r.buffer;return new r.constructor(e,r.byteOffset,r.length)}var at="[object Boolean]",ct="[object Date]",dt="[object Map]",lt="[object Number]",ut="[object RegExp]",ht="[object Set]",ft="[object String]",gt="[object Symbol]";var bt="[object ArrayBuffer]",wt="[object DataView]",vt="[object Float32Array]",pt="[object Float64Array]",mt="[object Int8Array]",kt="[object Int16Array]",yt="[object Int32Array]",jt="[object Uint8Array]",Ct="[object Uint8ClampedArray]",xt="[object Uint16Array]",At="[object Uint32Array]";function _t(r,t,e){var i=r.constructor;switch(t){case bt:return Zr(r);case at:case ct:return new i(+r);case wt:return rt(r,e);case vt:case pt:case mt:case kt:case yt:case jt:case Ct:case xt:case At:return nt(r,e);case dt:return new i;case lt:case ft:return new i(r);case ut:return et(r);case ht:return new i;case gt:return st(r)}}function Rt(r){return typeof r.constructor=="function"&&!p(r)?er(Mr(r)):{}}var Ot="[object Map]";function St(r){return u(r)&&F(r)==Ot}var Ft=E&&E.isMap;var It=Ft?I(Ft):St;const Et=It;var Pt="[object Set]";function Dt(r){return u(r)&&F(r)==Pt}var Mt=E&&E.isSet;var Tt=Mt?I(Mt):Dt;const Wt=Tt;var Ut=1,Gt=2,Ht=4;var Nt="[object Arguments]",zt="[object Array]",Lt="[object Boolean]",Bt="[object Date]",$t="[object Error]",Vt="[object Function]",Kt="[object GeneratorFunction]",qt="[object Map]",Jt="[object Number]",Qt="[object Object]",Xt="[object RegExp]",Yt="[object Set]",Zt="[object String]",re="[object Symbol]",te="[object WeakMap]";var ee="[object ArrayBuffer]",ie="[object DataView]",oe="[object Float32Array]",se="[object Float64Array]",ne="[object Int8Array]",ae="[object Int16Array]",ce="[object Int32Array]",de="[object Uint8Array]",le="[object Uint8ClampedArray]",ue="[object Uint16Array]",he="[object Uint32Array]";var fe={};fe[Nt]=fe[zt]=fe[ee]=fe[ie]=fe[Lt]=fe[Bt]=fe[oe]=fe[se]=fe[ne]=fe[ae]=fe[ce]=fe[qt]=fe[Jt]=fe[Qt]=fe[Xt]=fe[Yt]=fe[Zt]=fe[re]=fe[de]=fe[le]=fe[ue]=fe[he]=true;fe[$t]=fe[Vt]=fe[te]=false;function ge(r,t,e,i,o,s){var n,a=t&Ut,c=t&Gt,d=t&Ht;if(e){n=o?e(r,i,o,s):e(r)}if(n!==undefined){return n}if(!b(r)){return r}var l=f(r);if(l){n=Yr(r);if(!a){return ir(r,n)}}else{var u=F(r),h=u==Vt||u==Kt;if(P(r)){return Lr(r,a)}if(u==Qt||u==Nt||h&&!o){n=c||h?{}:Rt(r);if(!a){return c?qr(r,Wr(n,r)):Br(r,Tr(n,r))}}else{if(!fe[u]){return o?r:{}}n=_t(r,u,a)}}s||(s=new D);var g=s.get(r);if(g){return g}s.set(r,n);if(Wt(r)){r.forEach((function(i){n.add(ge(i,t,e,i,r,s))}))}else if(Et(r)){r.forEach((function(i,o){n.set(o,ge(i,t,e,o,r,s))}))}var w=d?c?Jr:M:c?wr:C;var v=l?undefined:w(r);nr(v||r,(function(i,o){if(v){o=i;i=r[o]}lr(n,o,ge(i,t,e,o,r,s))}));return n}var be=1,we=4;function ve(r){return ge(r,be|we)}function pe(r,t){const e=a(r);if(e==="UNKNOWN"){return[]}switch(e){case"UP_ARROW":return[{kind:"FocusCell",target:"up"}];case"DOWN_ARROW":return[{kind:"FocusCell",target:"down"}];case"LEFT_ARROW":return[{kind:"FocusCell",target:"left"}];case"RIGHT_ARROW":return[{kind:"FocusCell",target:"right"}];case"HOME":return[{kind:"FocusCell",target:"first_of_row"}];case"END":return[{kind:"FocusCell",target:"last_of_row"}];case"MAJ+SPACE":switch(t){case"grid_selection_single":case"grid_selection_multiple":return[{kind:"SelectRow",target:"one"}]}break;case"CTRL+A":switch(t){case"grid_selection_multiple":return[{kind:"SelectRow",target:"all"}]}break;case"CTRL+HOME":return[{kind:"FocusCell",target:"first_of_grid"}];case"CTRL+END":return[{kind:"FocusCell",target:"last_of_grid"}]}return[]}const me=({checked:t,row:e,rowIndex:i,totalRows:o,onClick:s})=>{let n;return r("div",{class:`grid-radio ${t?"checked":""}`,onClick:r=>n.click()},r("input",{type:"radio",name:"selection","aria-setsize":o,"aria-posinset":i,tabindex:"-1",checked:t,"aria-checked":`${t}`,ref:r=>n=r,onClick:r=>s(e)}))};const ke=":host{--wcs-grid-gap:0;--wcs-grid-vertical-align:middle;--wcs-grid-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-grid-cell-text-color:var(--wcs-semantic-color-text-secondary);--wcs-grid-cell-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-grid-cell-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-grid-cell-border-bottom:none;--wcs-grid-cell-separator-border:none;--wcs-grid-first-cell-border-radius:0;--wcs-grid-last-cell-border-radius:0;--wcs-grid-highlight-color:var(--wcs-semantic-color-background-surface-accent-lighter);--wcs-grid-row-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-grid-row-odd-background-color:var(--wcs-grid-row-background-color);--wcs-grid-row-even-background-color:var(--wcs-semantic-color-background-surface-accent-lightest);--wcs-grid-header-background-color-default:var(--wcs-semantic-color-background-action-secondary-default);--wcs-grid-header-background-color-hover:var(--wcs-semantic-color-background-action-secondary-hover);--wcs-grid-header-background-color-press:var(--wcs-semantic-color-background-action-secondary-press);--wcs-grid-header-text-color:var(--wcs-semantic-color-text-primary);--wcs-grid-header-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-grid-header-font-size:var(--wcs-semantic-font-size-label-1);--wcs-grid-header-line-height:var(--wcs-primitive-font-line-height-140);--wcs-grid-header-padding-vertical:var(--wcs-semantic-spacing-base);--wcs-grid-header-padding-horizontal:var(--wcs-semantic-spacing-large);--wcs-grid-header-border-left:none;--wcs-grid-header-border-radius:0;--wcs-grid-header-border-bottom:solid var(--wcs-semantic-border-width-default) var(--wcs-semantic-color-border-secondary);--wcs-grid-header-transition-duration:var(--wcs-semantic-motion-duration-feedback-fast);--wcs-grid-first-header-background-color:var(--wcs-semantic-color-background-action-secondary-default);--wcs-grid-first-header-border-radius:0;--wcs-grid-last-header-border-radius:0;--wcs-grid-column-selection-width:calc(5 * var(--wcs-semantic-spacing-base));--wcs-grid-header-sort-arrow-color-default:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-grid-header-sort-arrow-color-hover:var(--wcs-semantic-color-foreground-action-neutral-hover);display:block}:host th{border-radius:var(--wcs-grid-first-header-border-radius);background-color:var(--wcs-grid-first-header-background-color)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-header-border-left:none}:host :host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-component-grid-header-border-radius-first:0;--wcs-grid-header-border-left:var(--wcs-grid-header-border-left)}:host table{width:100%;border-collapse:collapse;border-spacing:var(--wcs-grid-gap)}:host table thead{border-bottom:var(--wcs-grid-header-border-bottom)}:host table tbody{vertical-align:var(--wcs-grid-vertical-align)}:host td{color:var(--wcs-grid-cell-text-color);margin:0;padding:var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal)}:host td:focus-visible{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}:host td:first-child{border-radius:var(--wcs-grid-first-cell-border-radius)}:host td:last-child{border-radius:var(--wcs-grid-last-cell-border-radius)}:host td:not(:first-child){border-left:var(--wcs-grid-cell-separator-border)}:host tr{background-color:var(--wcs-grid-row-background-color)}:host tr:nth-child(odd){background-color:var(--wcs-grid-row-odd-background-color, var(--wcs-grid-row-background-color))}:host tr:nth-child(even){background-color:var(--wcs-grid-row-even-background-color, var(--wcs-grid-row-background-color))}:host tr:not(:last-child) td{border-bottom:var(--wcs-grid-cell-border-bottom)}:host .wcs-grid-selection-column{padding:var(--wcs-grid-cell-padding-vertical) var(--wcs-grid-cell-padding-horizontal);width:var(--wcs-grid-column-selection-width);text-align:start}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}";const ye=ke;const je='.grid-radio{--wcs-grid-radio-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-grid-radio-padding:calc(var(--wcs-semantic-size-base) / 4);--wcs-grid-radio-transition:var(--wcs-semantic-motion-duration-feedback-base);--wcs-grid-radio-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-grid-radio-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-grid-radio-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-grid-radio-border-color-disabled:var(--wcs-semantic-color-border-control-indicator-disabled);--wcs-grid-radio-background-color-default:transparent;--wcs-grid-radio-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-grid-radio-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-grid-radio-inner-border-color:white;width:fit-content;cursor:pointer;padding:var(--wcs-grid-radio-padding, 0.125rem);}.grid-radio:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(:has(input:focus-visible)){.grid-radio:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-radio-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}.grid-radio input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.grid-radio::before{content:"";display:flex;border-radius:50%;border:2px solid var(--wcs-grid-radio-border-color-default);position:relative;width:1.125rem;height:1.125rem;box-sizing:border-box;background-color:var(--wcs-grid-radio-background-color-default);transition:var(--wcs-grid-radio-transition, 0.175s) ease-in-out}.grid-radio:hover::before{border-color:var(--wcs-grid-radio-border-color-hover)}.grid-radio.checked::before{border-color:var(--wcs-grid-radio-border-color-selected);background-color:var(--wcs-grid-radio-background-color-selected);outline:solid 2px var(--wcs-grid-radio-inner-border-color);outline-offset:-4px}';const Ce=je;const xe=["title"];const Ae=class{constructor(r){t(this,r);this.wcsGridSelectionChange=e(this,"wcsGridSelectionChange",7);this.wcsGridAllSelectionChange=e(this,"wcsGridAllSelectionChange",7);this.wcsFocus=e(this,"wcsFocus",7);this.wcsBlur=e(this,"wcsBlur",7);this.inheritedAttributes={};this.serverMode=false;this.data=undefined;this.loading=undefined;this.selectionConfig="none";this.selectedItems=[];this.wcsGridPaginationId=undefined;this.rowIdPath=undefined;this.rowCssPartsFn=r=>null;this.columns=undefined;this.paginationEl=undefined;this.rows=[];this.cursorPosition={col:0,row:1}}onCursorPositionChange(r){this.getGridColumnsFromTemplate().forEach((t=>t.cursorPosition=r))}onDataChange(r){this.updateGridRows(r);this.refreshSort(false)}onSelectedItemsPropertyChange(r){this.updateSelectionWithValues(r)}onFocus(r){var t;(t=this.getElementToFocusAtCursorPosition())===null||t===void 0?void 0:t.focus();this.wcsFocus.emit(r)}onBlur(r){this.wcsBlur.emit(r)}hasSelectionColumn(){return this.selectionConfig!=="none"}getElementToFocusAtCursorPosition(){var r,t;const e=(r=this.gridElementsWithCoordinates.find((r=>{var t,e;return r.col===((t=this.cursorPosition)===null||t===void 0?void 0:t.col)&&r.row===((e=this.cursorPosition)===null||e===void 0?void 0:e.row)})))===null||r===void 0?void 0:r.el;return this.hasSelectionColumn()?(t=e.querySelector('wcs-checkbox,input[type="radio"]'))!==null&&t!==void 0?t:e:e}moveCursorPosition(r,t){var e;this.cursorPosition={col:r==="first"?0:r==="last"?this.totalDisplayedColumnCount()-1:Math.min(Math.max(this.cursorPosition.col+r,0),this.totalDisplayedColumnCount()-1),row:t==="first"?0:t==="last"?this.getRowsForCurrentPage().length:Math.min(Math.max(this.cursorPosition.row+t,0),this.getRowsForCurrentPage().length)};this.handleCursorPositionOnEmptyTh();(e=this.getElementToFocusAtCursorPosition())===null||e===void 0?void 0:e.focus()}handleCursorPositionOnEmptyTh(){if(this.selectionConfig==="single"&&this.cursorPosition.col===0&&this.cursorPosition.row===0){this.cursorPosition={col:1,row:0}}}onHiddenColumnChange(){i(this);this.cursorPosition={col:0,row:1}}onKeyDown(r){var t;if(((t=document.activeElement)===null||t===void 0?void 0:t.tagName)==="WCS-GRID-PAGINATION"){return}let e;switch(this.selectionConfig){case"multiple":e="grid_selection_multiple";break;case"single":e="grid_selection_single";break;case"none":e="grid_no_selection";break}const i=pe(r,e);if(i.length!=0){r.preventDefault()}for(const t of i){this.doActionFromKeyboardEventAssociatedAction(t,r)}}doActionFromKeyboardEventAssociatedAction(r,t){switch(r.kind){case"FocusCell":switch(r.target){case"up":this.moveCursorPosition(0,-1);break;case"down":this.moveCursorPosition(0,1);break;case"left":this.moveCursorPosition(-1,0);break;case"right":this.moveCursorPosition(1,0);break;case"first_of_row":this.moveCursorPosition("first",0);break;case"last_of_row":this.moveCursorPosition("last",0);break;case"first_of_grid":this.moveCursorPosition("first","first");break;case"last_of_grid":this.moveCursorPosition("last","last");break}case"SelectRow":switch(r.target){case"one":t.preventDefault();if(this.cursorPosition.row>0){this.onRowSelection(this.rows[this.cursorPosition.row-1])}break;case"all":this.selectAllRows();break}break;default:throw new Error("Internal error")}}onClick(r){const t=r.composedPath().filter((r=>["TD","TH"].includes(r.nodeName)))[0];if(!t)return;const e=this.gridElementsWithCoordinates.find((r=>r.el===t));this.cursorPosition={col:e.col,row:e.row}}updateSelectionWithValues(r){if(this.selectionConfig==="single"){this.rows.map((r=>r.selected=false));for(const t of this.rows){if(T(t.data,r)){t.selected=true;break}}}else if(this.selectionConfig==="multiple"){this.rows.map((r=>r.selected=false));for(const t of this.rows){if(r.find((r=>T(r,t.data)))){t.selected=true}}}this.rows=ve(this.rows)}wcsGridRowToWcsGridRowData(r){return{selected:r.selected,page:r.page,data:r.data}}updateGridRows(r){const t=[];if(r&&this.columns){for(let e=0;e<r.length;e++){const i={uuid:V(),data:r[e],selected:false,cells:[]};let o=0;for(const t of this.columns){t.columnPosition=o+(this.hasSelectionColumn()?1:0);o++;i.cells.push({content:Pr(r[e],t.path),column:t,formatter:t.formatter})}t.push(i)}this.rows=t;this.updatePageIndex()}}componentDidLoad(){this.columns=this.getGridColumnsFromTemplate();this.paginationEl=this.wcsGridPaginationId?document.getElementById(this.wcsGridPaginationId):this.getGridPaginationsFromTemplate()[0];this.updateGridRows(this.data);if(this.selectedItems){this.updateSelectionWithValues(this.selectedItems)}this.refreshSort(true)}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},c(this.el)),d(this.el,xe))}async setAriaAttribute(r,t){l(this.nativeTable,r,t)}refreshSort(r){if(this.columns){const[t,...e]=this.columns.filter((r=>r.sortOrder!=="none"));if(t&&!this.serverMode){this.sortBy(t)}r&&this.disableSortOrderForColumns(e)}}disableSortOrderForColumns(r){r===null||r===void 0?void 0:r.forEach((r=>r.sortOrder="none"))}getGridColumnsFromTemplate(){const r=this.el.shadowRoot.querySelector('slot[name="grid-column"]');return r.assignedElements()}getGridPaginationsFromTemplate(){const r=this.el.shadowRoot.querySelector('slot[name="grid-pagination"]');return r.assignedElements()}get gridElementsWithCoordinates(){const r=[];if(this.selectionConfig==="multiple"){r.push({el:this.el.shadowRoot.querySelector("th"),row:0,col:0})}this.getGridColumnsFromTemplate().filter((r=>!r.hidden)).forEach(((t,e)=>{r.push({el:t.shadowRoot.querySelector("th"),row:0,col:e+(this.hasSelectionColumn()?1:0)})}));this.el.shadowRoot.querySelectorAll("td").forEach(((t,e)=>{r.push({el:t,row:1+Math.floor(e/this.totalDisplayedColumnCount()),col:e%this.totalDisplayedColumnCount()})}));return r}sortChangeEventHandler(r){if(r.detail.order==="none"||!this.columns)return;this.disableSortOrderForColumns(this.columns.filter((t=>t!==r.detail.column)));if(this.serverMode)return;this.sortBy(r.detail.column);this.updatePageIndex()}sortBy(r){if(r.sortFn){this.rows=ve(this.rows).sort(((t,e)=>r.sortFn(t.data,e.data,r)*W(r.sortOrder)))}else{this.rows=ve(this.rows).sort(((t,e)=>{const i=r.path;return(Pr(t.data,i)<Pr(e.data,i)?-1:Pr(t.data,i)>Pr(e.data,i)?1:0)*W(r.sortOrder)}))}}updatePageIndex(){if(!this.serverMode&&this.paginationEl){this.paginationEl.itemsCount=this.data.length;this.paginationEl.pageCount=Math.ceil(this.data.length/this.paginationEl.pageSize);if(this.paginationEl.pageCount<=1){this.paginationEl.currentPage=n.INDEX_FIRST_PAGE}else if(this.paginationEl.pageCount>0&&this.paginationEl.currentPage+1>this.paginationEl.pageCount){this.paginationEl.currentPage=this.paginationEl.pageCount-1}const r=ve(this.rows);r.forEach(((r,t)=>r.page=Math.floor(t/this.paginationEl.pageSize)));this.rows=[...r]}}paginationChangeEventHandler(){this.onPaginationChange()}paginationChangeEventHandlerOutside(r){if(this.wcsGridPaginationId&&this.wcsGridPaginationId===r.target.id){this.onPaginationChange()}}onPaginationChange(){if(this.serverMode)return;this.updatePageIndex()}onRowSelection(r){if(this.selectionConfig==="single"){this.rows.filter((t=>t.uuid!==r.uuid)).map((r=>r.selected=false))}r.selected=!r.selected;if(this.selectionConfig!=="single"||r.selected){this.wcsGridSelectionChange.emit({selectedRows:this.selectedRows.map((r=>this.wcsGridRowToWcsGridRowData(r))),changedRow:this.wcsGridRowToWcsGridRowData(r)})}this.rows=ve(this.rows)}get selectedRows(){return this.rows.filter((r=>r.selected))}selectAllRows(){const r=this.getRowsForCurrentPage();const t=!this.allRowsAreSelected();r.map((r=>r.selected=t));this.wcsGridAllSelectionChange.emit({rows:t?r.map((r=>this.wcsGridRowToWcsGridRowData(r))):[]});this.wcsGridSelectionChange.emit({selectedRows:this.selectedRows.map((r=>this.wcsGridRowToWcsGridRowData(r))),changedRow:"allCheckbox"});this.rows=ve(this.rows)}allRowsAreSelected(){const r=this.getRowsForCurrentPage();return r.length>0&&r.filter((r=>r.selected)).length===r.length}getRowsForCurrentPage(){if(!this.serverMode&&this.paginationEl){return this.rows.filter((r=>r.page===this.paginationEl.currentPage))}return this.rows}renderSelectionColumn(t,e){var i,o,s,n;switch(this.selectionConfig){case"none":return;case"single":return r("td",{"aria-colindex":this.atLeastOneColumnHidden()?1:null,tabIndex:((i=this.cursorPosition)===null||i===void 0?void 0:i.col)===0&&e+1===((o=this.cursorPosition)===null||o===void 0?void 0:o.row)?0:-1},r(me,{checked:t.selected,row:t,rowIndex:e+1,totalRows:this.rows.length,onClick:r=>{if(!r.selected){this.onRowSelection(r)}}}));case"multiple":return r("td",{"aria-colindex":this.atLeastOneColumnHidden()?1:null,tabIndex:((s=this.cursorPosition)===null||s===void 0?void 0:s.col)===0&&e+1===((n=this.cursorPosition)===null||n===void 0?void 0:n.row)?0:-1},r("wcs-checkbox",{tabIndex:-1,part:"row-checkbox",checked:t.selected,onWcsChange:this.onRowSelection.bind(this,t)}))}}getCellContent(t,e){if(e.formatter){return e.formatter(r,e.column,this.wcsGridRowToWcsGridRowData(t))}return e.content}totalColumnCount(){if(!this.columns){return 0}return this.columns.length+(this.hasSelectionColumn()?1:0)}totalDisplayedColumnCount(){var r,t;return(t=this.totalColumnCount()-((r=this.columns)===null||r===void 0?void 0:r.filter((r=>r.hidden)).length))!==null&&t!==void 0?t:0}atLeastOneColumnHidden(){return this.totalDisplayedColumnCount()!==this.totalColumnCount()}render(){var t,e,i,s;return r(o,{key:"bdafd86216877fd703389c65665e75aa5ba21a90"},r("table",Object.assign({key:"a1e58206dcaa31084f031a6461f4aceabb90bd46",role:"grid",ref:r=>this.nativeTable=r,"aria-rowcount":!this.loading&&((t=this.rows)===null||t===void 0?void 0:t.length),"aria-colcount":!this.loading&&this.totalDisplayedColumnCount()},this.inheritedAttributes),r("thead",{key:"e22c92431c2f0e75cfb456688525015820aee43a"},r("tr",{key:"9f857089bc5b552964024039a2ed3b4ab241bc6d","aria-rowindex":"1"},this.selectionConfig==="none"?"":r("th",{class:"wcs-grid-selection-column"},this.selectionConfig==="single"?"":r("wcs-checkbox",{tabIndex:((e=this.cursorPosition)===null||e===void 0?void 0:e.col)===0&&((i=this.cursorPosition)===null||i===void 0?void 0:i.row)===0?0:-1,part:"all-rows-checkbox",checked:this.allRowsAreSelected(),onWcsChange:this.selectAllRows.bind(this)})),r("slot",{key:"51a565cc671f43bfb054bdf85370cd2035d4f43e",name:"grid-column"}))),r("tbody",{key:"30b62b585ba5d925b6abdfe83e0059c94f27b5e7"},this.loading?r("tr",{"aria-busy":"true"},r("td",{colSpan:this.totalColumnCount(),class:"loading"},r("wcs-spinner",null))):(s=this.rows)===null||s===void 0?void 0:s.filter((r=>this.serverMode||!this.paginationEl||r.page===this.paginationEl.currentPage)).map(((r,t)=>this.renderRow(r,t))))),r("slot",{key:"a6f76be638c7761f7f98acb837ff742f8ce08319",name:"grid-pagination"}))}renderRow(t,e){var i,o;let s=0;return r("tr",{class:t.selected?"selected":"",part:(i=this.rowCssPartsWithoutEmptyList(t))===null||i===void 0?void 0:i.join(" "),"aria-selected":t.selected?"true":null,"aria-rowindex":e+2},this.renderSelectionColumn(t,e),(o=t.cells)===null||o===void 0?void 0:o.map(((i,o)=>{var n,a;if(i.column.hidden){s++;return}const c=o-s+1+(this.hasSelectionColumn()?1:0);const d=c-1===((n=this.cursorPosition)===null||n===void 0?void 0:n.col)&&e+1===((a=this.cursorPosition)===null||a===void 0?void 0:a.row);return i.column.customCells?r("td",{tabIndex:d?0:-1,"aria-colindex":this.atLeastOneColumnHidden()?c:null},r("slot",{name:i.column.id+"-"+Pr(t.data,this.rowIdPath)})):r("td",{tabIndex:d?0:-1,"aria-colindex":this.atLeastOneColumnHidden()?c:null,part:i.column.path+"-column"},this.getCellContent(t,i))})))}rowCssPartsWithoutEmptyList(r){const t=this.rowCssPartsFn(r);return(t===null||t===void 0?void 0:t.length)===0?null:t}get el(){return s(this)}static get watchers(){return{cursorPosition:["onCursorPositionChange"],data:["onDataChange"],selectedItems:["onSelectedItemsPropertyChange"]}}};Ae.style=ye+Ce;export{Ae as wcs_grid};
+//# sourceMappingURL=p-7d665a7e.entry.js.map

package/dist/wcs/p-89b8c724.js

@@ -0,0 +1,2 @@
+import{h as e,j as r,l as s,m as t,d as n,c as A,n as u,b as i}from"./p-52d77e1f.js";function a(a){const{key:f}=a;if(a.shiftKey){switch(f){case" ":return"MAJ+SPACE";case"Tab":return"MAJ+TAB"}}else if(a.altKey){switch(f){case"ArrowDown":return"ALT+DOWN_ARROW";case"ArrowUp":return"ALT+UP_ARROW"}}else if(a.ctrlKey){if(e(a)){return"CTRL+HOME"}else if(r(a)){return"CTRL+END"}else if(f==="a"){return"CTRL+A"}}else{switch(f){case"ArrowDown":return"DOWN_ARROW";case"ArrowUp":return"UP_ARROW";case"ArrowLeft":return"LEFT_ARROW";case"ArrowRight":return"RIGHT_ARROW"}if(e(a)){return"HOME"}else if(r(a)){return"END"}else if(s(a)){return"PAGE_UP"}else if(t(a)){return"PAGE_DOWN"}else if(n(a)){return"ENTER"}else if(A(a)){return"SPACE"}else if(u(a)){return"TAB"}else if(i(a)){return"ESCAPE"}}return"UNKNOWN"}export{a as k};
+//# sourceMappingURL=p-89b8c724.js.map

package/dist/wcs/{p-412b0021.js → p-8fcceaf1.js}

@@ -1,2 +1,2 @@
-import{h as a,r as e,c as i,H as t,g as s}from"./p-32e583ea.js";import{i as n,a as r,s as c}from"./p-a3aece7a.js";const o=(a,e)=>{switch(a){case"next":return e?"Last page":"Next page";case"previous":default:return e?"First page":"Previous page"}};const g=({active:e,order:i,double:t=false})=>a("wcs-button",{mode:"clear",shape:"square",size:"s",disabled:!e,title:o(i,t)},a("svg",{style:{cursor:"pointer"},"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"20",viewBox:"0 0 24 20"},a("style",{type:"text/css"},`\n              .arrow-group {\n                  transform-origin: 50% 51%;\n                  transition: transform 175ms ease-in-out;\n              }\n              .arrow {\n                  transition: fill 175ms ease-in-out;\n                  fill: var(--wcs-grid-pagination-arrow-color-inactive, var(--wcs-button-color));\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-grid-pagination-arrow-color-active, var(--wcs-button-color));\n              }\n          `),a("g",{fill:"none",class:i+" arrow-group"},a("path",{class:(e?"active":"")+" arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),a("path",{d:"M0 0h24v24H0z",fill:"none"})),t?a("g",{fill:"none",class:i+" arrow-group"},a("path",{class:(e?"active":"")+" arrow second-arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),a("path",{d:"M0 0h24v24H0z",fill:"none"})):""));const d=":host{display:block;margin-top:var(--wcs-grid-pagination-margin-top);--wcs-grid-pagination-color:var(--wcs-semantic-color-text-primary);--wcs-grid-pagination-font-size:var(--wcs-semantic-font-size-label-2);--wcs-grid-pagination-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-grid-pagination-gap:var(--wcs-semantic-spacing-base);--wcs-grid-pagination-page-size-gap:var(--wcs-semantic-spacing-base);--wcs-grid-pagination-counter-gap:var(--wcs-semantic-spacing-small);--wcs-grid-pagination-margin-top:var(--wcs-semantic-spacing-large);--wcs-grid-pagination-arrow-color-inactive:unset;--wcs-grid-pagination-arrow-color-active:unset;}.container{display:grid;gap:var(--wcs-grid-pagination-gap);grid-template-columns:auto auto auto;justify-content:space-between;align-items:center;color:var(--wcs-grid-pagination-color);font-size:var(--wcs-grid-pagination-font-size);font-weight:var(--wcs-grid-pagination-font-weight)}.available-page-sizes{width:auto}.page-management,.page-size,.items-count{display:flex;align-items:center}.page-size{gap:var(--wcs-grid-pagination-page-size-gap)}.page-management{margin:0;padding:0;list-style-type:none}.pagination-arrow{display:flex}.pagination-counter{padding:0 var(--wcs-grid-pagination-counter-gap)}.pagination-counter span{white-space:nowrap}wcs-select.available-page-sizes{--wcs-select-control-height:var(--wcs-semantic-size-s)}";const l=d;const p=["tabindex","title"];const h=class{constructor(a){e(this,a);this.wcsGridPaginationChange=i(this,"wcsGridPaginationChange",7);this.inheritedAttributes={};this.availablePageSizes=[10,20,50];this.currentPage=h.INDEX_FIRST_PAGE;this.pageSize=this.availablePageSizes[0];this.itemsCount=0;this.pageCount=1}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,p))}async setAriaAttribute(a,e){c(this.nativeNav,a,e)}lastPage(){this.currentPage=this.pageCount-1;this.emitPaginationChange()}nextPage(){if(this.canGoToNextPage()){this.currentPage++;this.emitPaginationChange()}}canGoToNextPage(){return this.currentPage+1<this.pageCount}previousPage(){if(this.canGoToPreviousPage()){this.currentPage--;this.emitPaginationChange()}}canGoToPreviousPage(){return this.currentPage>0}firstPage(){this.currentPage=0;this.emitPaginationChange()}onChangePagesize(a){this.pageSize=a.detail.value;if(this.currentPage+1>this.pageSize){this.currentPage=0}this.emitPaginationChange()}emitPaginationChange(){this.wcsGridPaginationChange.emit({pagination:{currentPage:this.currentPage,pageSize:this.pageSize,itemsCount:this.itemsCount,pageCount:this.pageCount}})}render(){return a(t,{key:"aae9e2f569bc30af1d1fb0b5af5e1fec240ffb61",slot:"grid-pagination"},a("div",{key:"5da4f6b637ff0cad84663205cdac0e6818d91446",class:"container"},a("div",{key:"826dbec24c32fee903bcb3d51a31da34ee0fd92a",class:"page-size"},a("wcs-select",{key:"daa32021838797ed11454a521bb696fc17cb9693",placeholder:"Eléments par page",class:"available-page-sizes","aria-labelledby":"elements-per-page-number elements-per-page-text",value:this.pageSize,onWcsChange:this.onChangePagesize.bind(this)},this.availablePageSizes.map((e=>a("wcs-select-option",{value:e},e)))),a("span",{key:"78ddb987de3e677213ed11407f1f353c002ae68e",id:"elements-per-page-number",hidden:true},this.pageSize),a("span",{key:"e861da5d2465c7ab771b64761213ed35a9b7659c",id:"elements-per-page-text"},"éléments par page")),a("div",{key:"388de98e62ed3fda8fad6736edf39c1409809def",class:"items-count"},a("span",{key:"ebc8db0bc400172451dae7a1f63799d821b27fbf"},this.itemsCount," éléments")),a("nav",Object.assign({key:"272d2d0ddb5af7386affb29acbbc12a9fa8e18df","aria-label":"pagination",ref:a=>this.nativeNav=a},this.inheritedAttributes),a("ul",{key:"a39598920c1c503d4c7b3d77285cf6cc27fe9c86",class:"page-management"},a("li",{key:"3020e62d07516408b646cad84831614195e428c7",class:"pagination-arrow",onClick:this.firstPage.bind(this)},a(g,{key:"4e8d52cbd46cda3e701302e330962b516d63bca4",active:this.canGoToPreviousPage(),order:"previous",double:true})),a("li",{key:"3b964173cf0d767c53fe051679b561163b3d9b1f",class:"pagination-arrow",onClick:this.previousPage.bind(this)},a(g,{key:"364f5b1bb35b154d3318abd329876f9a168d390c",active:this.canGoToPreviousPage(),order:"previous"})),a("li",{key:"0fc5fabb19e98c0cb78a07b656e0b7b94dce438d",class:"pagination-counter"},a("span",{key:"fa47454131656639969ab74dba30e43342112b05","aria-label":`Page ${this.currentPage+1} sur ${this.pageCount}`,"aria-current":"page"},this.currentPage+1," / ",this.pageCount)),a("li",{key:"513c98597a712d21dbefa48b573e6b1373817472",class:"pagination-arrow",onClick:this.nextPage.bind(this)},a(g,{key:"91f56987949c2fc4e93467064566397358738def",active:this.canGoToNextPage(),order:"next"})),a("li",{key:"7001e78f44214239557b5f82e9630e28871d9308",class:"pagination-arrow",onClick:this.lastPage.bind(this)},a(g,{key:"ffb62cec6939f9d3ed37ccd5dca472bbff8fe9f7",active:this.canGoToNextPage(),order:"next",double:true}))))))}get el(){return s(this)}};h.INDEX_FIRST_PAGE=0;h.style=l;export{h as G};
-//# sourceMappingURL=p-412b0021.js.map
+import{h as a,r as e,c as i,H as t,g as s}from"./p-32e583ea.js";import{i as n,a as r,s as c}from"./p-52d77e1f.js";const o=(a,e)=>{switch(a){case"next":return e?"Last page":"Next page";case"previous":default:return e?"First page":"Previous page"}};const g=({active:e,order:i,double:t=false})=>a("wcs-button",{mode:"clear",shape:"square",size:"s",disabled:!e,title:o(i,t)},a("svg",{style:{cursor:"pointer"},"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"24",height:"20",viewBox:"0 0 24 20"},a("style",{type:"text/css"},`\n              .arrow-group {\n                  transform-origin: 50% 51%;\n                  transition: transform 175ms ease-in-out;\n              }\n              .arrow {\n                  transition: fill 175ms ease-in-out;\n                  fill: var(--wcs-grid-pagination-arrow-color-inactive, var(--wcs-button-color));\n              }\n              .second-arrow {\n                  transform: translateY(-8px);\n              }\n              .next {\n                  transform: rotate(90deg);\n              }\n              .previous {\n                  transform: rotate(-90deg);\n              }\n              .active {\n                  fill: var(--wcs-grid-pagination-arrow-color-active, var(--wcs-button-color));\n              }\n          `),a("g",{fill:"none",class:i+" arrow-group"},a("path",{class:(e?"active":"")+" arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),a("path",{d:"M0 0h24v24H0z",fill:"none"})),t?a("g",{fill:"none",class:i+" arrow-group"},a("path",{class:(e?"active":"")+" arrow second-arrow",d:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"}),a("path",{d:"M0 0h24v24H0z",fill:"none"})):""));const l=":host{display:block;margin-top:var(--wcs-grid-pagination-margin-top);--wcs-grid-pagination-color:var(--wcs-semantic-color-text-primary);--wcs-grid-pagination-font-size:var(--wcs-semantic-font-size-label-2);--wcs-grid-pagination-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-grid-pagination-gap:var(--wcs-semantic-spacing-base);--wcs-grid-pagination-page-size-gap:var(--wcs-semantic-spacing-base);--wcs-grid-pagination-counter-gap:var(--wcs-semantic-spacing-small);--wcs-grid-pagination-margin-top:var(--wcs-semantic-spacing-large);--wcs-grid-pagination-arrow-color-inactive:unset;--wcs-grid-pagination-arrow-color-active:unset;}.container{display:grid;gap:var(--wcs-grid-pagination-gap);grid-template-columns:auto auto auto;justify-content:space-between;align-items:center;color:var(--wcs-grid-pagination-color);font-size:var(--wcs-grid-pagination-font-size);font-weight:var(--wcs-grid-pagination-font-weight)}.available-page-sizes{width:auto}.page-management,.page-size,.items-count{display:flex;align-items:center}.page-size{gap:var(--wcs-grid-pagination-page-size-gap)}.page-management{margin:0;padding:0;list-style-type:none}.pagination-arrow{display:flex}.pagination-counter{padding:0 var(--wcs-grid-pagination-counter-gap)}.pagination-counter span{white-space:nowrap}wcs-select.available-page-sizes{--wcs-select-control-height:var(--wcs-semantic-size-s)}";const p=l;const d=["tabindex","title"];const h=class{constructor(a){e(this,a);this.wcsGridPaginationChange=i(this,"wcsGridPaginationChange",7);this.inheritedAttributes={};this.availablePageSizes=[10,20,50];this.currentPage=h.INDEX_FIRST_PAGE;this.pageSize=this.availablePageSizes[0];this.itemsCount=0;this.pageCount=1}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},n(this.el)),r(this.el,d))}async setAriaAttribute(a,e){c(this.nativeNav,a,e)}lastPage(){this.currentPage=this.pageCount-1;this.emitPaginationChange()}nextPage(){if(this.canGoToNextPage()){this.currentPage++;this.emitPaginationChange()}}canGoToNextPage(){return this.currentPage+1<this.pageCount}previousPage(){if(this.canGoToPreviousPage()){this.currentPage--;this.emitPaginationChange()}}canGoToPreviousPage(){return this.currentPage>0}firstPage(){this.currentPage=0;this.emitPaginationChange()}onChangePagesize(a){this.pageSize=a.detail.value;if(this.currentPage+1>this.pageSize){this.currentPage=0}this.emitPaginationChange()}emitPaginationChange(){this.wcsGridPaginationChange.emit({pagination:{currentPage:this.currentPage,pageSize:this.pageSize,itemsCount:this.itemsCount,pageCount:this.pageCount}})}render(){return a(t,{key:"bee1c9832792c3385d522f9382de8636139d6161",slot:"grid-pagination"},a("div",{key:"24a7aec2ad62883a7818b59f32f2965de3988f3e",class:"container"},a("div",{key:"3abc3e73332eb167448133ad28a65a41c5e93e18",class:"page-size"},a("wcs-select",{key:"8ed583efa8d183dff2ddeb776e650019a759f038",placeholder:"Eléments par page",class:"available-page-sizes","aria-labelledby":"elements-per-page-number elements-per-page-text",value:this.pageSize,onWcsChange:this.onChangePagesize.bind(this)},this.availablePageSizes.map((e=>a("wcs-select-option",{value:e},e)))),a("span",{key:"ef0447a2215071dac316f9d037c34b408734c0ef",id:"elements-per-page-number",hidden:true},this.pageSize),a("span",{key:"6420b20cd2edde465e28933b803c5dbbb3c44047",id:"elements-per-page-text"},"éléments par page")),a("div",{key:"fbc0b228a34659ebdc91d31def44854fc99d1fc8",class:"items-count"},a("span",{key:"5ab2756b28332b2a1851d3da15796b12306d5413"},this.itemsCount," éléments")),a("nav",Object.assign({key:"cd05b9352046ba7dc430e9bbd0e79032ce0ce6c3","aria-label":"pagination",ref:a=>this.nativeNav=a},this.inheritedAttributes),a("ul",{key:"f9277ef66a0e6a3a25509acb9eb8e57e40952586",class:"page-management"},a("li",{key:"eb412a9c0f1bac4a448aa544d83eefb64be3823b",class:"pagination-arrow",onClick:this.firstPage.bind(this)},a(g,{key:"97efc725465d7bb97a228c653473726391bd250f",active:this.canGoToPreviousPage(),order:"previous",double:true})),a("li",{key:"d615cf6062d352803448a1a5195c6186e143dc6b",class:"pagination-arrow",onClick:this.previousPage.bind(this)},a(g,{key:"1da29a9f802f71f0c699d9a438cf4a38c15d93c0",active:this.canGoToPreviousPage(),order:"previous"})),a("li",{key:"433186a63982aa5273ce804131383ef889dca97a",class:"pagination-counter"},a("span",{key:"591352b4f4b95d56c3a20536ada90d42f67065f9","aria-label":`Page ${this.currentPage+1} sur ${this.pageCount}`,"aria-current":"page"},this.currentPage+1," / ",this.pageCount)),a("li",{key:"e318556a6c650763afe8c005cfa751443a8da05d",class:"pagination-arrow",onClick:this.nextPage.bind(this)},a(g,{key:"0598f1a9ace662c6aab71c2e3756c9b972145521",active:this.canGoToNextPage(),order:"next"})),a("li",{key:"a8caa45cc06ea000283e3acf3762bbfd2b8a41f4",class:"pagination-arrow",onClick:this.lastPage.bind(this)},a(g,{key:"5c030a25a38832669d6c353b994a3269aee38ad9",active:this.canGoToNextPage(),order:"next",double:true}))))))}get el(){return s(this)}};h.INDEX_FIRST_PAGE=0;h.style=p;export{h as G};
+//# sourceMappingURL=p-8fcceaf1.js.map

package/dist/wcs/p-9243a323.entry.js

@@ -0,0 +1,2 @@
+import{r as c,c as e,h as o,H as r,g as t}from"./p-32e583ea.js";import{i as s,a,s as i}from"./p-52d77e1f.js";import{g as n}from"./p-a7468a3a.js";const d=':host{--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-default);--wcs-checkbox-border-color-default:var(--wcs-semantic-color-border-control-indicator-default);--wcs-checkbox-border-color-hover:var(--wcs-semantic-color-border-control-indicator-hover);--wcs-checkbox-border-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-border-color-selected:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-color-indeterminate:var(--wcs-semantic-color-border-control-indicator-selected);--wcs-checkbox-border-radius:calc(0.5 * var(--wcs-semantic-size-base));--wcs-checkbox-border-width:var(--wcs-semantic-border-width-large);--wcs-checkbox-size:calc(2 * var(--wcs-semantic-size-base));--wcs-checkbox-text-color-default:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-disabled:var(--wcs-semantic-color-text-tertiary);--wcs-checkbox-text-color-hover:var(--wcs-semantic-color-text-secondary);--wcs-checkbox-text-color-selected:var(--wcs-semantic-color-text-primary);--wcs-checkbox-text-font-size:var(--wcs-semantic-font-size-label-1);--wcs-checkbox-text-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-checkbox-background-color-default:transparent;--wcs-checkbox-background-color-hover:var(--wcs-semantic-color-background-control-indicator-hover);--wcs-checkbox-background-color-disabled:var(--wcs-semantic-color-background-control-indicator-disabled);--wcs-checkbox-background-color-selected:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-background-color-indeterminate:var(--wcs-semantic-color-background-control-indicator-selected);--wcs-checkbox-outline-radius-focus:var(--wcs-semantic-border-radius-base);--wcs-checkbox-outline-color-focus:var(--wcs-semantic-color-border-focus-base);--wcs-checkbox-gap:var(--wcs-semantic-spacing-base);--wcs-checkmark-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkmark-height:0.5rem;--wcs-checkmark-width:0.1875rem;--wcs-checkmark-border-width:0.125rem;--wcs-indeterminate-bar-width:0.625rem;--wcs-indeterminate-bar-height:0.125rem;--wcs-indeterminate-bar-border-radius:0.0625rem;--wcs-indeterminate-bar-background-color:var(--wcs-semantic-color-foreground-control-indicator-selected);--wcs-checkbox-transition-duration:var(--wcs-semantic-motion-duration-feedback-base);display:inline-flex}:host([disabled]) .text{color:var(--wcs-checkbox-text-color-disabled)}:host([disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled)}:host([disabled]) .wcs-container{cursor:not-allowed}:host([checked]:not([indeterminate][disabled])){--wcs-checkbox-border-color:var(--wcs-checkbox-border-color-selected)}.wcs-checkmark{transition-property:border-color, background-color, color;transition:var(--wcs-checkbox-transition-duration) ease-in-out}.wcs-container{position:relative;font-size:var(--wcs-checkbox-text-font-size);font-weight:var(--wcs-checkbox-text-font-weight);user-select:none;display:flex;gap:var(--wcs-checkbox-gap)}.wcs-container:not([aria-disabled]){cursor:pointer}:host([label-alignment=top]) .wcs-container{align-items:start}:host([label-alignment=center]) .wcs-container{align-items:center}:host([label-alignment=bottom]) .wcs-container{align-items:flex-end}.wcs-container input{position:absolute;opacity:0;height:1px;width:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.wcs-container:hover:not([aria-disabled]) .text,input:focus .text{color:var(--wcs-checkbox-text-color-hover)}.wcs-container:hover:not([aria-disabled]) .wcs-checkmark,input:focus .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-hover)}.wcs-container:has(input:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}@supports not selector(.wcs-container:has(input:focus-visible)){.wcs-container:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-checkbox-outline-color-focus);outline-offset:var(--wcs-semantic-spacing-small);border-radius:var(--wcs-checkbox-outline-radius-focus)}}.wcs-checkmark{flex:0 0 var(--wcs-checkbox-size);width:var(--wcs-checkbox-size);height:var(--wcs-checkbox-size);background-color:var(--wcs-checkbox-background-color-default);border:var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);border-radius:var(--wcs-checkbox-border-radius);box-sizing:border-box}:host([indeterminate]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-indeterminate);background:var(--wcs-checkbox-background-color-indeterminate)}:host([indeterminate][disabled]) .wcs-checkmark{border-color:var(--wcs-checkbox-border-color-disabled);background:var(--wcs-checkbox-background-color-disabled)}.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-selected)}.wcs-container[aria-disabled] input:checked~.wcs-checkmark{background-color:var(--wcs-checkbox-background-color-disabled)}.wcs-checkmark:after{content:"";position:absolute;display:none}.wcs-checkmark{position:relative}:host([checked]),:host([indeterminate]){}:host([checked]) .wcs-container input~.wcs-checkmark:after,:host([indeterminate]) .wcs-container input~.wcs-checkmark:after{display:flex}:host([checked]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark,:host([indeterminate]) .wcs-container:not([aria-disabled]):hover .wcs-checkmark{background-color:var(--wcs-checkbox-background-color-hover)}:host(:not([indeterminate])){}:host(:not([indeterminate])) .wcs-container .wcs-checkmark:after{left:0.25rem;width:var(--wcs-checkmark-width);height:var(--wcs-checkmark-height);border:solid var(--wcs-checkmark-color, white);border-width:0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}:host([indeterminate]) .wcs-container .wcs-checkmark:after{position:absolute;background-color:var(--wcs-indeterminate-bar-background-color);left:calc(50% - var(--wcs-indeterminate-bar-width) / 2);top:calc(50% - var(--wcs-indeterminate-bar-height) / 2);width:var(--wcs-indeterminate-bar-width);height:var(--wcs-indeterminate-bar-height);border-radius:var(--wcs-indeterminate-bar-border-radius)}.wcs-container:not([aria-disabled]) input:not(:checked)~.text{color:var(--wcs-checkbox-text-color-default);font-weight:var(--wcs-checkbox-text-font-weight)}.wcs-container:not([aria-disabled]) input:checked~.text{color:var(--wcs-checkbox-text-color-selected);font-weight:var(--wcs-checkbox-text-font-weight)}.hidden{display:none}';const h=d;const l=["tabindex","title"];const b=class{constructor(o){c(this,o);this.wcsChange=e(this,"wcsChange",7);this.wcsFocus=e(this,"wcsFocus",7);this.wcsBlur=e(this,"wcsBlur",7);this.inheritedAttributes={};this.checkboxId=`wcs-checkbox-${w++}`;this.name=this.checkboxId;this.indeterminate=false;this.checked=false;this.labelAlignment="center";this.disabled=false}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),a(this.el,l))}componentDidLoad(){this.onSlotChange()}async setAriaAttribute(c,e){i(this.nativeInput,c,e)}async getLabel(){return n(this.el)}handleChange(c){c.stopImmediatePropagation();c.preventDefault();this.toggleCheckboxState()}async handleHostClick(c){c.preventDefault();c.stopPropagation();this.toggleCheckboxState()}handleInputClick(c){if(c.detail){c.stopImmediatePropagation();c.preventDefault()}}toggleCheckboxState(){if(this.disabled)return;this.indeterminate=false;this.checked=!this.checked;this.wcsChange.emit({checked:this.checked})}handleFocus(c){this.wcsFocus.emit(c)}handleBlur(c){this.wcsBlur.emit(c)}onSlotChange(){const c=this.el.shadowRoot.querySelector("slot");if(c){const e=c.assignedNodes();if(e.length>0){this.el.shadowRoot.querySelector(".text").classList.remove("hidden")}else{this.el.shadowRoot.querySelector(".text").classList.add("hidden")}}}render(){return o(r,{key:"a20390ff38ab6bf7ec5a0868d396857edd93daa1"},o("label",{key:"ab9d5f22c1f48f84dbd75ad4d4699f403cbfb059",htmlFor:this.name,class:"wcs-container","aria-disabled":this.disabled},o("input",Object.assign({key:"05afab86b77b327fe9e4f3c9e1e44d67d3c7678d",onBlur:this.handleBlur.bind(this),onChange:this.handleChange.bind(this),onFocus:this.handleFocus.bind(this),onClick:this.handleInputClick.bind(this),checked:this.checked,class:"wcs-checkbox",type:"checkbox",ref:c=>this.nativeInput=c,name:this.name,disabled:this.disabled,id:this.name},this.inheritedAttributes)),o("span",{key:"f864ab3331ce992ea6b769b06cb29485485300e8",class:"wcs-checkmark"}),o("span",{key:"5709887a3b90454c7a2f711f553f3d95a6f98326",class:"text"},o("slot",{key:"ed2dc70d43b7915962c531e901a7abb84b1d34b6",onSlotchange:c=>this.onSlotChange()}))))}static get delegatesFocus(){return true}get el(){return t(this)}};let w=0;b.style=h;export{b as wcs_checkbox};
+//# sourceMappingURL=p-9243a323.entry.js.map

package/dist/wcs/p-9243a323.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["checkboxCss","WcsCheckboxStyle0","CHECKBOX_INHERITED_ATTRS","Checkbox","this","inheritedAttributes","checkboxId","checkboxIds","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","componentDidLoad","onSlotChange","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeInput","getLabel","getSlottedContentText","handleChange","e","stopImmediatePropagation","preventDefault","toggleCheckboxState","handleHostClick","stopPropagation","handleInputClick","ev","detail","disabled","indeterminate","checked","wcsChange","emit","handleFocus","event","wcsFocus","handleBlur","wcsBlur","slot","shadowRoot","querySelector","assignedNodes","length","classList","remove","add","render","h","Host","key","htmlFor","name","class","onBlur","bind","onChange","onFocus","onClick","type","ref","id","onSlotchange","_"],"sources":["src/components/checkbox/checkbox.scss?tag=wcs-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-default);\n    --wcs-checkbox-border-color-default: var(--wcs-semantic-color-border-control-indicator-default);\n    --wcs-checkbox-border-color-hover: var(--wcs-semantic-color-border-control-indicator-hover);\n    --wcs-checkbox-border-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-border-color-selected: var(--wcs-semantic-color-border-control-indicator-selected);\n    --wcs-checkbox-border-color-indeterminate: var(--wcs-semantic-color-border-control-indicator-selected);\n\n    --wcs-checkbox-border-radius: calc(0.5 * var(--wcs-semantic-size-base));\n    --wcs-checkbox-border-width: var(--wcs-semantic-border-width-large);\n\n    --wcs-checkbox-size: calc(2 * var(--wcs-semantic-size-base));\n\n    --wcs-checkbox-text-color-default: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-disabled: var(--wcs-semantic-color-text-tertiary);\n    --wcs-checkbox-text-color-hover: var(--wcs-semantic-color-text-secondary);\n    --wcs-checkbox-text-color-selected: var(--wcs-semantic-color-text-primary);\n\n    --wcs-checkbox-text-font-size: var(--wcs-semantic-font-size-label-1);\n    --wcs-checkbox-text-font-weight: var(--wcs-semantic-font-weight-medium);\n\n    --wcs-checkbox-background-color-default: transparent;\n    --wcs-checkbox-background-color-hover: var(--wcs-semantic-color-background-control-indicator-hover);\n    --wcs-checkbox-background-color-disabled: var(--wcs-semantic-color-background-control-indicator-disabled);\n    --wcs-checkbox-background-color-selected: var(--wcs-semantic-color-background-control-indicator-selected);\n    --wcs-checkbox-background-color-indeterminate: var(--wcs-semantic-color-background-control-indicator-selected);\n\n    --wcs-checkbox-outline-radius-focus: var(--wcs-semantic-border-radius-base);\n    --wcs-checkbox-outline-color-focus: var(--wcs-semantic-color-border-focus-base);\n\n    --wcs-checkbox-gap: var(--wcs-semantic-spacing-base);\n    --wcs-checkmark-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n    --wcs-checkmark-height: 0.5rem;\n    --wcs-checkmark-width: 0.1875rem;\n    --wcs-checkmark-border-width: 0.125rem;\n\n    --wcs-indeterminate-bar-width: 0.625rem;\n    --wcs-indeterminate-bar-height: 0.125rem;\n    --wcs-indeterminate-bar-border-radius: 0.0625rem;\n    --wcs-indeterminate-bar-background-color: var(--wcs-semantic-color-foreground-control-indicator-selected);\n\n    --wcs-checkbox-transition-duration: var(--wcs-semantic-motion-duration-feedback-base);\n\n    display: inline-flex;\n}\n\n:host([disabled]) {\n    .text {\n        color: var(--wcs-checkbox-text-color-disabled);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n    }\n\n    .wcs-container {\n        cursor: not-allowed;\n    }\n}\n\n:host([checked]:not([indeterminate][disabled])) {\n    --wcs-checkbox-border-color: var(--wcs-checkbox-border-color-selected);\n}\n\n.wcs-checkmark {\n    transition-property: border-color, background-color, color;\n    transition: var(--wcs-checkbox-transition-duration) ease-in-out;\n\n}\n\n/* Customize the label (the wcs-container) */\n.wcs-container {\n    position: relative;\n    font-size: var(--wcs-checkbox-text-font-size);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n    user-select: none;\n    display: flex;\n    gap: var(--wcs-checkbox-gap);\n}\n\n.wcs-container:not([aria-disabled]) {\n    cursor: pointer;\n}\n\n/* Let the user choose the alignment of the checkbox with the label text */\n:host([label-alignment=\"top\"]){\n    .wcs-container {\n        align-items: start;\n    }\n}\n\n:host([label-alignment=\"center\"]){\n    .wcs-container {\n        align-items: center;\n    }\n}\n\n:host([label-alignment=\"bottom\"]){\n    .wcs-container {\n        align-items: flex-end;\n    }\n}\n\n/* Hide the browser's default checkbox */\n.wcs-container input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.wcs-container:hover:not([aria-disabled]), input:focus {\n    .text {\n        color: var(--wcs-checkbox-text-color-hover);\n    }\n\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-hover);\n    }\n}\n\n.wcs-container:has(input:focus-visible) {\n    @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n}\n\n@supports not selector(.wcs-container:has(input:focus-visible)){\n    .wcs-container:focus-within {\n        @include focus-outline($outline-color: var(--wcs-checkbox-outline-color-focus), $border-radius: var(--wcs-checkbox-outline-radius-focus));\n    }\n}\n\n/* Create a custom checkbox */\n.wcs-checkmark {\n    flex: 0 0 var(--wcs-checkbox-size);\n    width: var(--wcs-checkbox-size);\n    height: var(--wcs-checkbox-size);\n    background-color: var(--wcs-checkbox-background-color-default);\n    border: var(--wcs-checkbox-border-width) solid var(--wcs-checkbox-border-color);\n    border-radius: var(--wcs-checkbox-border-radius);\n    box-sizing: border-box;\n}\n\n:host([indeterminate]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-indeterminate);\n        background: var(--wcs-checkbox-background-color-indeterminate);\n    }\n}\n\n:host([indeterminate][disabled]) {\n    .wcs-checkmark {\n        border-color: var(--wcs-checkbox-border-color-disabled);\n        background: var(--wcs-checkbox-background-color-disabled);\n    }\n}\n\n/* When the checkbox is checked, add a blue background */\n.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-selected);\n}\n.wcs-container[aria-disabled] input:checked~.wcs-checkmark {\n    background-color: var(--wcs-checkbox-background-color-disabled);\n}\n\n/* Create the wcs-checkmark/indicator (hidden when not checked) */\n.wcs-checkmark:after {\n    content: \"\";\n    position: absolute;\n    display: none;\n}\n\n.wcs-checkmark {\n    position: relative;\n}\n\n:host([checked]), :host([indeterminate]) {\n    /* Show the wcs-checkmark when checked */\n    .wcs-container input~.wcs-checkmark:after {\n        display: flex;\n    }\n\n    /* Handle hover when checked/indeterminate */\n    .wcs-container:not([aria-disabled]):hover {\n        .wcs-checkmark {\n            background-color: var(--wcs-checkbox-background-color-hover);\n        }\n    }\n}\n\n:host(:not([indeterminate])) {\n    /* Style the wcs-checkmark/indicator */\n    .wcs-container .wcs-checkmark:after {\n        left: 0.25rem;\n        width: var(--wcs-checkmark-width);\n        height: var(--wcs-checkmark-height);\n        border: solid var(--wcs-checkmark-color, white);\n        border-width: 0 var(--wcs-checkmark-border-width) var(--wcs-checkmark-border-width) 0;\n        -webkit-transform: rotate(45deg);\n        -ms-transform: rotate(45deg);\n        transform: rotate(45deg);\n    }\n}\n\n:host([indeterminate]) {\n    .wcs-container .wcs-checkmark:after {\n        position: absolute;\n        background-color: var(--wcs-indeterminate-bar-background-color);\n        left: calc(50% - (var(--wcs-indeterminate-bar-width) / 2));\n        top: calc(50% - (var(--wcs-indeterminate-bar-height) / 2));\n        width: var(--wcs-indeterminate-bar-width);\n        height: var(--wcs-indeterminate-bar-height);\n        border-radius: var(--wcs-indeterminate-bar-border-radius);\n    }\n}\n\n.wcs-container:not([aria-disabled]) input:not(:checked)~.text {\n    color: var(--wcs-checkbox-text-color-default);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.wcs-container:not([aria-disabled]) input:checked~.text {\n    color: var(--wcs-checkbox-text-color-selected);\n    font-weight: var(--wcs-checkbox-text-font-weight);\n}\n\n.hidden {\n    display: none;\n}\n","import {\n    Component,\n    Prop,\n    Event,\n    EventEmitter,\n    ComponentInterface,\n    h,\n    Host,\n    Method,\n    Element,\n    Listen\n} from '@stencil/core';\nimport { CheckboxChangeEventDetail, CheckboxLabelAlignment } from './checkbox-interface';\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { inheritAriaAttributes, inheritAttributes, setOrRemoveAttribute } from \"../../utils/helpers\";\nimport { ControlComponentWithLabel, getSlottedContentText } from \"../../utils/control-component-interface\";\n\nconst CHECKBOX_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The checkbox component is an input for choosing one or more items from a set by checking / unchecking it.\n * \n * @cssprop --wcs-checkbox-border-color-default - Default color of the border\n * @cssprop --wcs-checkbox-border-color-hover - Color of the border when hovered\n * @cssprop --wcs-checkbox-border-color-disabled - Color of the border when disabled\n * @cssprop --wcs-checkbox-border-color-selected - Color of the border when selected\n * @cssprop --wcs-checkbox-border-color-indeterminate - Color of the border when indeterminate\n * \n * @cssprop --wcs-checkbox-border-radius - Border radius of the checkbox\n * @cssprop --wcs-checkbox-border-width - Width of the border of the checkbox\n * \n * @cssprop --wcs-checkbox-size - Size of the checkbox\n * \n * @cssprop --wcs-checkbox-text-color-default - Color of the text when the checkbox is not selected\n * @cssprop --wcs-checkbox-text-color-disabled - Color of the text when the checkbox is disabled\n * @cssprop --wcs-checkbox-text-color-hover - Color of the text when the checkbox is hovered\n * @cssprop --wcs-checkbox-text-color-selected - Color of the text when the checkbox is selected\n * \n * @cssprop --wcs-checkbox-text-font-size - Font size of the text\n * @cssprop --wcs-checkbox-text-font-weight - Font weight of the text\n * \n * @cssprop --wcs-checkbox-background-color-default - Default background color of the checkbox\n * @cssprop --wcs-checkbox-background-color-hover - Background color of the checkbox when hovered\n * @cssprop --wcs-checkbox-background-color-disabled - Background color of the checkbox when disabled\n * @cssprop --wcs-checkbox-background-color-selected - Background color of the checkbox when selected\n * @cssprop --wcs-checkbox-background-color-indeterminate - Background color of the checkbox when indeterminate\n * \n * @cssprop --wcs-checkbox-outline-radius-focus - Border radius of the focus outline\n * @cssprop --wcs-checkbox-outline-color-focus - Color of the focus outline\n * \n * @cssprop --wcs-checkbox-gap - Gap between the checkbox and the label\n * @cssprop --wcs-checkmark-color - Color of the checkmark\n * @cssprop --wcs-checkmark-height - Height of the checkmark (From the bottom left to the top right of the checkmark)\n * @cssprop --wcs-checkmark-width - Width of the checkmark (From the bottom right to the top left of the checkmark)\n * @cssprop --wcs-checkmark-border-width - Width of the border of the checkmark\n *\n * @cssprop --wcs-indeterminate-bar-width - Width of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-height - Height of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-border-radius - Border-radius of the indeterminate bar\n * @cssprop --wcs-indeterminate-bar-background-color - Color of the indeterminate bar\n * \n * @cssprop --wcs-checkbox-transition-duration - Duration of the transition\n */\n@Component({\n    tag: 'wcs-checkbox',\n    styleUrl: 'checkbox.scss',\n    shadow: {\n        delegatesFocus: true,\n    },\n})\nexport class Checkbox implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {\n    @Element() private el!: HTMLElement;\n    private nativeInput!: HTMLInputElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    private checkboxId = `wcs-checkbox-${checkboxIds++}`;\n\n    @Prop() name = this.checkboxId;\n    /**\n     * If `true` the checkbox is in indeterminate state.\n     */\n    @Prop({ reflect: true, mutable: true }) indeterminate = false;\n\n    /**\n     * If `true`, the checkbox is selected.\n     */\n    @Prop({ reflect: true, mutable: true }) checked = false;\n\n    /**\n     * Specifie the alignment of the checkbox with the label content\n     */\n    @Prop({ mutable: true, reflect: true }) labelAlignment: CheckboxLabelAlignment = 'center';\n\n    /**\n     * Specify whether the checkbox is disabled or not.\n     */\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    /**\n     * Emitted when the checked property has changed.\n     */\n    @Event() wcsChange!: EventEmitter<CheckboxChangeEventDetail>;\n\n    /**\n     * Emitted when the checkbox has focus.\n     */\n    @Event() wcsFocus!: EventEmitter<FocusEvent>;\n\n    /**\n     * Emitted when the checkbox loses focus.\n     */\n    @Event() wcsBlur!: EventEmitter<FocusEvent>;\n\n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, CHECKBOX_INHERITED_ATTRS),\n        };\n    }\n\n    componentDidLoad() {\n        this.onSlotChange();\n    }\n\n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeInput, attr, value);\n    }\n\n    @Method()\n    async getLabel(): Promise<string> {\n        return getSlottedContentText(this.el);\n    }\n\n    handleChange(e: Event) {\n        e.stopImmediatePropagation();\n        e.preventDefault();\n        this.toggleCheckboxState();\n    }\n    \n    @Listen('click')\n    async handleHostClick(e: Event){\n        e.preventDefault();\n        e.stopPropagation();\n        \n        this.toggleCheckboxState();\n    }\n\n    handleInputClick(ev: PointerEvent) {\n        // If the click event is coming from the mouse we ignore it.\n        // We only want to handle the keyboard interactions as it is the only purpose of this native input\n        if (ev.detail) {\n            ev.stopImmediatePropagation()\n            ev.preventDefault();\n        }\n    }\n\n    toggleCheckboxState() {\n        if (this.disabled) return;\n        \n        this.indeterminate = false;\n        this.checked = !this.checked;\n        this.wcsChange.emit({\n            checked: this.checked,\n        });\n    }\n    \n    handleFocus(event: FocusEvent) {\n        this.wcsFocus.emit(event);\n    }\n\n    handleBlur(event: FocusEvent) {\n        this.wcsBlur.emit(event);\n    }\n\n    onSlotChange() { \n        const slot = this.el.shadowRoot.querySelector('slot');\n        if (slot) {\n            // TODO: remove when pseudo-class that indicate a slot has content is supported in all major browsers \n            //  (https://github.com/w3c/csswg-drafts/issues/6867)\n            // https://developer.mozilla.org/en-US/docs/Web/CSS/:empty\n            const assignedNodes = slot.assignedNodes();\n            if (assignedNodes.length > 0) {\n                this.el.shadowRoot.querySelector('.text').classList.remove('hidden');\n            } else {\n                this.el.shadowRoot.querySelector('.text').classList.add('hidden');\n            }\n        }\n    }\n    \n    render() {\n        return (\n            <Host>\n                <label htmlFor={this.name} class=\"wcs-container\" aria-disabled={this.disabled}>\n                    <input\n                        onBlur={this.handleBlur.bind(this)}\n                        onChange={this.handleChange.bind(this)}\n                        onFocus={this.handleFocus.bind(this)}\n                        onClick={this.handleInputClick.bind(this)}\n                        checked={this.checked}\n                        class=\"wcs-checkbox\"\n                        type=\"checkbox\"\n                        ref={(el) => (this.nativeInput = el)}\n                        name={this.name}\n                        disabled={this.disabled}\n                        id={this.name}\n                        {...this.inheritedAttributes}\n                    ></input>\n                    <span class=\"wcs-checkmark\"></span>\n                    <span class=\"text\">\n                        <slot onSlotchange={(_) => this.onSlotChange()} />\n                    </span>\n                </label>\n            </Host>\n        );\n    }\n}\n\nlet checkboxIds = 0;\n"],"mappings":"iJAAA,MAAMA,EAAc,giNACpB,MAAAC,EAAeD,ECgBf,MAAME,EAA2B,CAAC,WAAY,S,MAqDjCC,EAAQ,M,kIAGTC,KAAAC,oBAA4C,GAC5CD,KAAAE,WAAa,gBAAgBC,M,UAEtBH,KAAKE,W,mBAIoC,M,aAKN,M,oBAK+B,S,cAKpC,K,CAiB7C,iBAAAE,GACIJ,KAAKC,oBAAmBI,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBP,KAAKQ,KAC3BC,EAAkBT,KAAKQ,GAAIV,G,CAItC,gBAAAY,GACIV,KAAKW,c,CAIT,sBAAMC,CAAiBC,EAAyBC,GAC5CC,EAAqBf,KAAKgB,YAAaH,EAAMC,E,CAIjD,cAAMG,GACF,OAAOC,EAAsBlB,KAAKQ,G,CAGtC,YAAAW,CAAaC,GACTA,EAAEC,2BACFD,EAAEE,iBACFtB,KAAKuB,qB,CAIT,qBAAMC,CAAgBJ,GAClBA,EAAEE,iBACFF,EAAEK,kBAEFzB,KAAKuB,qB,CAGT,gBAAAG,CAAiBC,GAGb,GAAIA,EAAGC,OAAQ,CACXD,EAAGN,2BACHM,EAAGL,gB,EAIX,mBAAAC,GACI,GAAIvB,KAAK6B,SAAU,OAEnB7B,KAAK8B,cAAgB,MACrB9B,KAAK+B,SAAW/B,KAAK+B,QACrB/B,KAAKgC,UAAUC,KAAK,CAChBF,QAAS/B,KAAK+B,S,CAItB,WAAAG,CAAYC,GACRnC,KAAKoC,SAASH,KAAKE,E,CAGvB,UAAAE,CAAWF,GACPnC,KAAKsC,QAAQL,KAAKE,E,CAGtB,YAAAxB,GACI,MAAM4B,EAAOvC,KAAKQ,GAAGgC,WAAWC,cAAc,QAC9C,GAAIF,EAAM,CAIN,MAAMG,EAAgBH,EAAKG,gBAC3B,GAAIA,EAAcC,OAAS,EAAG,CAC1B3C,KAAKQ,GAAGgC,WAAWC,cAAc,SAASG,UAAUC,OAAO,S,KACxD,CACH7C,KAAKQ,GAAGgC,WAAWC,cAAc,SAASG,UAAUE,IAAI,S,GAKpE,MAAAC,GACI,OACIC,EAACC,EAAI,CAAAC,IAAA,4CACDF,EAAA,SAAAE,IAAA,2CAAOC,QAASnD,KAAKoD,KAAMC,MAAM,gBAAe,gBAAgBrD,KAAK6B,UACjEmB,EAAA,QAAA3C,OAAAC,OAAA,CAAA4C,IAAA,2CACII,OAAQtD,KAAKqC,WAAWkB,KAAKvD,MAC7BwD,SAAUxD,KAAKmB,aAAaoC,KAAKvD,MACjCyD,QAASzD,KAAKkC,YAAYqB,KAAKvD,MAC/B0D,QAAS1D,KAAK0B,iBAAiB6B,KAAKvD,MACpC+B,QAAS/B,KAAK+B,QACdsB,MAAM,eACNM,KAAK,WACLC,IAAMpD,GAAQR,KAAKgB,YAAcR,EACjC4C,KAAMpD,KAAKoD,KACXvB,SAAU7B,KAAK6B,SACfgC,GAAI7D,KAAKoD,MACLpD,KAAKC,sBAEb+C,EAAA,QAAAE,IAAA,2CAAMG,MAAM,kBACZL,EAAA,QAAAE,IAAA,2CAAMG,MAAM,QACRL,EAAA,QAAAE,IAAA,2CAAMY,aAAeC,GAAM/D,KAAKW,mB,mEAQxD,IAAIR,EAAc,E"}

package/dist/wcs/p-94aa269f.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as i,h as t,H as s,g as a}from"./p-32e583ea.js";import{b as l,o as d,q as o,d as r}from"./p-52d77e1f.js";const n=["m","l"];function c(e){return n.includes(e)}const h=":host{--wcs-editable-field-label-color:var(--wcs-semantic-color-text-primary);--wcs-editable-field-label-font-weight:var(--wcs-semantic-font-weight-book);--wcs-editable-field-label-gap:var(--wcs-semantic-spacing-base);--wcs-editable-field-label-font-size:var(--wcs-semantic-font-size-m);--wcs-editable-field-background-color:var(--wcs-semantic-color-background-control-default);--wcs-editable-field-value-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-editable-field-value-color-default:var(--wcs-semantic-color-text-primary);--wcs-editable-field-value-color-hover:var(--wcs-semantic-color-text-primary);--wcs-editable-field-value-color-readonly:var(--wcs-semantic-color-text-tertiary);--wcs-editable-field-height-m:var(--wcs-semantic-size-m);--wcs-editable-field-height-l:var(--wcs-semantic-size-l);--wcs-editable-field-font-size-m:var(--wcs-semantic-font-size-m);--wcs-editable-field-font-size-l:var(--wcs-semantic-font-size-l);--wcs-editable-field-border-radius:var(--wcs-semantic-border-radius-base);--wcs-editable-field-border-width:var(--wcs-semantic-border-width-default);--wcs-editable-field-border-width-focus:var(--wcs-semantic-border-width-large);--wcs-editable-field-border-width-hover:var(--wcs-semantic-border-width-default);--wcs-editable-field-border-color-default:var(--wcs-semantic-color-border-primary);--wcs-editable-field-border-color-hover:var(--wcs-semantic-color-border-control-focus);--wcs-editable-field-border-color-focus:var(--wcs-semantic-color-border-control-focus);--wcs-editable-field-border-style:var(--wcs-semantic-border-style-focus-control);--wcs-editable-field-padding-vertical-m:0;--wcs-editable-field-padding-vertical-l:0;--wcs-editable-field-padding-horizontal-m:var(--wcs-semantic-spacing-large);--wcs-editable-field-padding-horizontal-l:var(--wcs-semantic-spacing-large);--wcs-editable-field-icon-color-readonly:var(--wcs-semantic-color-text-tertiary);display:block}:host .display-none{display:none !important}:host .label{margin-bottom:var(--wcs-editable-field-label-gap);font-weight:var(--wcs-editable-field-label-font-weight);font-size:var(--wcs-editable-field-label-font-size);color:var(--wcs-editable-field-label-color)}:host .edit-container{display:flex;width:100%}:host .edit-container .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap;outline:0;outline-offset:0}:host button.display-container{width:100%;border:none;font-family:inherit;text-align:start;box-sizing:border-box;min-height:var(--wcs-editable-field-host-height);white-space:break-spaces;display:flex;justify-content:space-between;align-items:center;background-color:var(--wcs-editable-field-background-color);border-radius:var(--wcs-editable-field-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:var(--wcs-editable-field-value-font-weight);color:var(--wcs-editable-field-value-color-default);padding:var(--wcs-editable-field-host-padding);outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default)}:host button.display-container wcs-mat-icon{display:none}:host .load-container{box-sizing:border-box;min-height:var(--wcs-editable-field-host-height);white-space:pre;display:flex;justify-content:space-between;background-color:var(--wcs-editable-field-background-color);border-radius:var(--wcs-editable-field-border-radius);font-size:var(--wcs-editable-field-font-size);line-height:1.5;font-weight:var(--wcs-editable-field-value-font-weight);color:var(--wcs-editable-field-value-color-default);padding:var(--wcs-editable-field-host-padding);outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);align-items:center}:host wcs-spinner{height:24px;width:24px}:host .readonly-icon{fill:var(--wcs-editable-field-icon-color-readonly)}:host([readonly]){--wcs-editable-field-background-color:var(--wcs-semantic-color-background-control-readonly)}:host([readonly]) .display-container{color:var(--wcs-editable-field-value-color-readonly)}:host([readonly]) .display-container:focus-visible{outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-default)}:host(:not([readonly])) .display-container:hover wcs-mat-icon,:host(:not([readonly])) .display-container:focus-visible wcs-mat-icon{display:flex;align-items:center}:host(:not([readonly])) .display-container:hover{color:var(--wcs-editable-field-value-color-hover);cursor:pointer;outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-hover) var(--wcs-editable-field-border-color-hover)}:host(:not([readonly])) .display-container:focus-visible{outline:var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-focus)}:host([size=l]){--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-l) var(--wcs-editable-field-padding-horizontal-l);--wcs-editable-field-host-height:var(--wcs-editable-field-height-l);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-l)}:host([size=m]){--wcs-editable-field-host-padding:var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);--wcs-editable-field-host-height:var(--wcs-editable-field-height-m);--wcs-editable-field-font-size:var(--wcs-editable-field-font-size-m)}";const f=h;var b;(function(e){e[e["DISPLAY"]=0]="DISPLAY";e[e["EDIT"]=1]="EDIT";e[e["LOAD"]=2]="LOAD"})(b||(b={}));const w="Éditer";const u=20;const v=class{constructor(t){e(this,t);this.wcsChange=i(this,"wcsChange",7);this.spiedElement=null;this.currentValue=null;this.currentState=b.DISPLAY;this.type="input";this.label=undefined;this.readonly=false;this.value=undefined;this.validateFn=undefined;this.formatFn=undefined;this.errorMsg=null;this.size="m";this.isError=false}componentWillLoad(){if(!c(this.size)){console.warn(`Invalid size value for wcs-editable-field : "${this.size}". Must be one of "${n.join(", ")}"`);this.size="m"}this.currentValue=this.value}componentDidLoad(){const e=this.el.shadowRoot.querySelector("slot").assignedElements();switch(this.type){case"input":this.initWithInput(e);break;case"textarea":this.initWithTextArea(e);break;case"select":this.initWithSelect(e);break}}disconnectedCallback(){this.cleanUpSpiedElementEventListeners()}keyboardSubmitHandler(e){const i=this.type==="textarea"||this.type==="select"?r(e)&&e.ctrlKey:r(e);if(i){this.sendCurrentValue()}if(l(e)){this.discardChanges()}}onWcsInputOrChange(e){e.stopImmediatePropagation();const i=this.type==="select"?e.detail.value:e.detail.target.value;this.currentValue=i;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}}cleanUpSpiedElementEventListeners(){var e,i,t;(e=this.spiedElement)===null||e===void 0?void 0:e.removeEventListener("keydown",this.onInputKeydownCallback);(i=this.spiedElement)===null||i===void 0?void 0:i.removeEventListener("wcsInput",this.onWcsInputOrChangeCallback);(t=this.spiedElement)===null||t===void 0?void 0:t.removeEventListener("wcsChange",this.onWcsInputOrChangeCallback)}initWithInput(e){const i=e.filter((e=>e.tagName==="WCS-INPUT"))[0];if(!i)throw new Error("You must provide a slotted input element to handle edition");this.spiedElement=i;this.addWcsInputEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}initWithTextArea(e){const i=e.filter((e=>e.tagName==="WCS-TEXTAREA"))[0];if(!i)throw new Error("You must provide a slotted textarea element to handle edition");this.spiedElement=i;this.addWcsInputEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}initWithSelect(e){const i=e.filter((e=>e.tagName==="WCS-SELECT"))[0];if(!i)throw new Error("You must provide a slotted select element to handle edition");this.spiedElement=i;this.addWcsChangeEventHandler(this.spiedElement);this.addKeyDownHandler(this.spiedElement)}addWcsChangeEventHandler(e){this.onWcsInputOrChangeCallback=this.onWcsInputOrChange.bind(this);e.addEventListener("wcsChange",this.onWcsInputOrChangeCallback)}addWcsInputEventHandler(e){this.onWcsInputOrChangeCallback=this.onWcsInputOrChange.bind(this);e.addEventListener("wcsInput",this.onWcsInputOrChangeCallback)}addKeyDownHandler(e){this.onInputKeydownCallback=this.keyboardSubmitHandler.bind(this);e.addEventListener("keydown",this.onInputKeydownCallback)}focusEditModeBtn(){setTimeout((()=>{var e;(e=this.editModeBtn)===null||e===void 0?void 0:e.focus()}),u)}sendCurrentValue(){if(this.currentState===b.EDIT){if(this.value===this.currentValue){this.currentState=b.DISPLAY;this.focusEditModeBtn()}else{this.isError=this.validateFn?!this.validateFn(this.currentValue):false;if(!this.isError){this.currentState=b.LOAD;this.wcsChange.emit({newValue:this.currentValue,successHandler:()=>this.forceDisplayStateAndValidate(),errorHandler:()=>this.errorHandler()})}}}}discardChanges(){this.currentValue=this.value;this.currentState=b.DISPLAY;this.isError=false;this.focusEditModeBtn()}forceDisplayStateAndValidate(){if(this.currentState===b.LOAD){this.value=this.currentValue;this.currentState=b.DISPLAY;this.focusEditModeBtn()}else{throw new Error("You cannot set display state from "+b[this.currentState]+" state")}}onWindowClickEvent(e){if(d(e)&&e.detail!==0&&!o(e,this.el)){if(this.currentState===b.EDIT){if(this.isError){this.discardChanges()}else{this.sendCurrentValue()}}}}errorHandler(){this.discardChanges()}onValueChange(){this.currentState=b.DISPLAY}onDisplayContainerClick(){if(this.currentState===b.DISPLAY&&this.readonly===false){this.currentState=b.EDIT;this.spiedElement["value"]=this.currentValue;if(this.validateFn){this.isError=!this.validateFn(this.currentValue)}setTimeout((()=>{if(this.type==="input"){this.spiedElement.focus()}else if(this.type==="textarea"){this.spiedElement.fitContent();this.spiedElement.focus()}}),u)}}getReadonlySvgIcon(){return t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"26",height:"24",viewBox:"0 0 27 25",class:"readonly-icon"},t("path",{d:"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z",transform:"translate(-0.5 -1.5)"}),t("path",{d:"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z",transform:"translate(-0.5 -1.5)"}),t("path",{d:"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z",transform:"translate(-0.5 -1.5)"}))}formatValues(){let e=this.value;let i=this.currentValue;if(this.formatFn){e=this.formatFn(this.value);i=this.formatFn(this.currentValue)}if(Array.isArray(this.value)){e=this.value.join(", ")}if(Array.isArray(this.currentValue)){i=this.currentValue.join(", ")}return{formattedValue:e?t("span",null,e):t("span",null),formattedValueText:e,formattedCurrentValue:i?t("span",null,i):t("span",null)}}render(){const{formattedValue:e,formattedValueText:i,formattedCurrentValue:a}=this.formatValues();return t(s,{key:"69142544bd835d3f7f161ca5174f78b957e9c65e"},t("div",{key:"b0d2d5fca3fb3297ea9a66cfd715d987714b60c1",class:"label"},this.label),t("button",{key:"cc69601762a0f05bcfb626730ee9ac210a052c13",type:"button",class:"display-container "+(this.currentState!==b.DISPLAY?"display-none":""),onClick:()=>this.onDisplayContainerClick(),ref:e=>this.editModeBtn=e,"aria-label":`${w} ${this.label} ${i}`},e,t("wcs-mat-icon",{key:"eda7d88109e0b5b55d913eae61861a5c63cc79d3",icon:"edit",size:"s"}),this.readonly?this.getReadonlySvgIcon():null),t("div",{key:"37aa4ca56e3e52bb28b559e11738b79d0b0b7164",class:"load-container "+(this.currentState!==b.LOAD?"display-none":"")},a,t("wcs-spinner",{key:"b2015422620aae0c7101c06d3693cf6356eba419"})),t("wcs-form-field",{key:"391ef6b73c942817994a133b191a1c81e7565fe7","is-error":this.isError,class:"edit-container "+(this.currentState!==b.EDIT?"display-none":"")},t("wcs-label",{key:"816e06561d96bdb9ca19c27d1329a0fe8f4d581f",class:"visually-hidden"},this.label),t("slot",{key:"a7855da5f41a873d01298218a32991010e589e34"}),this.isError&&this.errorMsg?t("wcs-error",null,this.errorMsg):null))}get el(){return a(this)}static get watchers(){return{value:["onValueChange"]}}};v.style=f;export{v as wcs_editable_field};
+//# sourceMappingURL=p-94aa269f.entry.js.map

package/dist/wcs/p-94aa269f.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["WcsEditableFieldSizeValues","isWcsEditableFieldSize","size","includes","editableFieldCss","WcsEditableFieldStyle0","EditableComponentState","EDIT_ARIA_LABEL","DELAY_BEFORE_FOCUS","EditableField","this","spiedElement","currentValue","DISPLAY","componentWillLoad","console","warn","join","value","componentDidLoad","assignedElements","el","shadowRoot","querySelector","type","initWithInput","initWithTextArea","initWithSelect","disconnectedCallback","cleanUpSpiedElementEventListeners","keyboardSubmitHandler","event","shouldValidateOnEnterKey","isEnterKey","ctrlKey","sendCurrentValue","isEscapeKey","discardChanges","onWcsInputOrChange","stopImmediatePropagation","detail","target","validateFn","isError","_a","removeEventListener","onInputKeydownCallback","_b","onWcsInputOrChangeCallback","_c","element","filter","x","tagName","Error","addWcsInputEventHandler","addKeyDownHandler","addWcsChangeEventHandler","elt","bind","addEventListener","focusEditModeBtn","setTimeout","editModeBtn","focus","currentState","EDIT","LOAD","wcsChange","emit","newValue","successHandler","forceDisplayStateAndValidate","errorHandler","onWindowClickEvent","isMouseEvent","clickInsideElement","onValueChange","onDisplayContainerClick","readonly","fitContent","getReadonlySvgIcon","h","xmlns","width","height","viewBox","class","d","transform","formatValues","formattedValue","formattedCurrentValue","formatFn","Array","isArray","formattedValueText","render","Host","key","label","onClick","ref","icon","errorMsg"],"sources":["src/components/editable-field/editable-field-interface.tsx","src/components/editable-field/editable-field.scss?tag=wcs-editable-field&encapsulation=shadow","src/components/editable-field/editable-field.tsx"],"sourcesContent":["import { WcsSize } from '../../shared-types';\n\nexport type ValidateFn<T> = (value: T) => boolean;\nexport type FormatFn<T> = (value: T) => string;\n\nexport interface EditableComponentUpdateEvent {\n    /**\n     * The new value sent by the component inside the `wcs-editable-field`\n     */\n    newValue: any; // We use any for now, but when components typings will support template, change for parameterized type\n    /**\n     * Used to get from LOAD state to DISPLAY state.  \n     * Only use to commit the value, when the value is not systematically updated at every event firing\n     */\n    successHandler: () => void;\n    /**\n     * Used to get from LOAD state to DISPLAY state.  \n     * Only use to discard the value, when the value should not be updated \n     */\n    errorHandler: () => void;\n}\n\nexport const WcsEditableFieldSizeValues = ['m', 'l'] as const; // as const keyword is used to infer and preserve the exact literal values of an array or object.\n\nexport type WcsEditableFieldSize = Extract<WcsSize, typeof WcsEditableFieldSizeValues[number]>;\n\nexport function isWcsEditableFieldSize(size: string): size is WcsEditableFieldSize {\n    // @ts-ignore : ignore size type, as it is checked with WcsEditableFieldSizeValues\n    return WcsEditableFieldSizeValues.includes(size);\n}\n\nexport type EditableFieldType = 'input' | 'textarea' | 'select';\n",":host {\n    --wcs-editable-field-label-color: var(--wcs-semantic-color-text-primary);\n    --wcs-editable-field-label-font-weight: var(--wcs-semantic-font-weight-book);\n    --wcs-editable-field-label-gap: var(--wcs-semantic-spacing-base);\n    --wcs-editable-field-label-font-size: var(--wcs-semantic-font-size-m);\n\n    --wcs-editable-field-background-color: var(--wcs-semantic-color-background-control-default);\n    --wcs-editable-field-value-font-weight: var(--wcs-semantic-font-weight-medium);\n    --wcs-editable-field-value-color-default: var(--wcs-semantic-color-text-primary);\n    --wcs-editable-field-value-color-hover: var(--wcs-semantic-color-text-primary);\n    --wcs-editable-field-value-color-readonly: var(--wcs-semantic-color-text-tertiary);\n    --wcs-editable-field-height-m: var(--wcs-semantic-size-m);\n    --wcs-editable-field-height-l: var(--wcs-semantic-size-l);\n    --wcs-editable-field-font-size-m: var(--wcs-semantic-font-size-m);\n    --wcs-editable-field-font-size-l: var(--wcs-semantic-font-size-l);\n\n    --wcs-editable-field-border-radius: var(--wcs-semantic-border-radius-base);\n    --wcs-editable-field-border-width: var(--wcs-semantic-border-width-default);\n    --wcs-editable-field-border-width-focus: var(--wcs-semantic-border-width-large);\n    --wcs-editable-field-border-width-hover: var(--wcs-semantic-border-width-default);\n    --wcs-editable-field-border-color-default: var(--wcs-semantic-color-border-primary);\n    --wcs-editable-field-border-color-hover: var(--wcs-semantic-color-border-control-focus);\n    --wcs-editable-field-border-color-focus: var(--wcs-semantic-color-border-control-focus);\n    --wcs-editable-field-border-style: var(--wcs-semantic-border-style-focus-control);\n\n    --wcs-editable-field-padding-vertical-m: 0;\n    --wcs-editable-field-padding-vertical-l: 0;\n    --wcs-editable-field-padding-horizontal-m: var(--wcs-semantic-spacing-large);\n    --wcs-editable-field-padding-horizontal-l: var(--wcs-semantic-spacing-large);\n\n    --wcs-editable-field-icon-color-readonly: var(--wcs-semantic-color-text-tertiary);\n\n    display: block;\n\n    .display-none {\n        display: none !important;\n    }\n\n    .label {\n        margin-bottom: var(--wcs-editable-field-label-gap);\n        font-weight: var(--wcs-editable-field-label-font-weight);\n        font-size: var(--wcs-editable-field-label-font-size);\n        color: var(--wcs-editable-field-label-color);\n    }\n\n    .edit-container {\n        display: flex;\n        width: 100%;\n\n        .visually-hidden {\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            clip-path: inset(50%);\n            white-space: nowrap;\n            outline: 0;\n            outline-offset: 0;\n        }\n    }\n\n    button.display-container {\n        // Reset native button styles\n        width: 100%;\n        border: none;\n        font-family: inherit;\n        text-align: start;\n\n        box-sizing: border-box;\n        wcs-mat-icon {\n            display: none;\n        }\n        min-height: var(--wcs-editable-field-host-height);\n        white-space: break-spaces;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        background-color: var(--wcs-editable-field-background-color);\n        border-radius: var(--wcs-editable-field-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: var(--wcs-editable-field-value-font-weight);\n        color: var(--wcs-editable-field-value-color-default);\n        padding: var(--wcs-editable-field-host-padding);\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);\n    }\n\n    .load-container {\n        box-sizing: border-box;\n        min-height: var(--wcs-editable-field-host-height);\n        white-space: pre;\n        display: flex;\n        justify-content: space-between;\n        background-color: var(--wcs-editable-field-background-color);\n        border-radius: var(--wcs-editable-field-border-radius);\n        font-size: var(--wcs-editable-field-font-size);\n        line-height: 1.5;\n        font-weight: var(--wcs-editable-field-value-font-weight);\n        color: var(--wcs-editable-field-value-color-default);\n        padding: var(--wcs-editable-field-host-padding);\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width) var(--wcs-editable-field-border-color-default);\n        align-items: center;\n    }\n\n    wcs-spinner {\n        height: 24px;\n        width: 24px;\n    }\n\n    .readonly-icon {\n        fill: var(--wcs-editable-field-icon-color-readonly);\n    }\n}\n\n:host([readonly]) {\n    --wcs-editable-field-background-color: var(--wcs-semantic-color-background-control-readonly);\n\n    .display-container {\n        color: var(--wcs-editable-field-value-color-readonly);\n\n        &:focus-visible {\n            outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-default);\n        }\n    }\n}\n\n:host(:not([readonly])) {\n    .display-container:hover,\n    .display-container:focus-visible {\n        wcs-mat-icon {\n            display: flex;\n            align-items: center;\n        }\n    }\n\n    .display-container:hover {\n        color: var(--wcs-editable-field-value-color-hover);\n        cursor: pointer;\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-hover) var(--wcs-editable-field-border-color-hover);\n    }\n\n    .display-container:focus-visible {\n        outline: var(--wcs-editable-field-border-style) var(--wcs-editable-field-border-width-focus) var(--wcs-editable-field-border-color-focus);\n    }\n}\n\n:host([size=l]) {\n    --wcs-editable-field-host-padding: var(--wcs-editable-field-padding-vertical-l) var(--wcs-editable-field-padding-horizontal-l);\n    --wcs-editable-field-host-height: var(--wcs-editable-field-height-l);\n    --wcs-editable-field-font-size: var(--wcs-editable-field-font-size-l);\n}\n\n:host([size=m]) { // Default\n    --wcs-editable-field-host-padding: var(--wcs-editable-field-padding-vertical-m) var(--wcs-editable-field-padding-horizontal-m);\n    --wcs-editable-field-host-height: var(--wcs-editable-field-height-m);\n    --wcs-editable-field-font-size: var(--wcs-editable-field-font-size-m);\n}\n","import {\n    Component,\n    ComponentInterface,\n    EventEmitter,\n    h,\n    Prop,\n    Event,\n    State,\n    Host,\n    Element,\n    Watch,\n    Listen\n} from '@stencil/core';\n\nimport {\n    EditableComponentUpdateEvent,\n    EditableFieldType,\n    FormatFn,\n    isWcsEditableFieldSize,\n    ValidateFn,\n    WcsEditableFieldSize,\n    WcsEditableFieldSizeValues\n} from './editable-field-interface';\nimport { clickInsideElement, isEnterKey, isEscapeKey, isMouseEvent } from '../../utils/helpers';\n\nenum EditableComponentState {\n    DISPLAY,\n    EDIT,\n    LOAD\n}\n\n/**\n * Aria-label of the display button\n */\nconst EDIT_ARIA_LABEL = \"Éditer\";\n\n// We wait until the element is displayed on the page otherwise the focus does not work.\n// 20ms is a little more than a 16ms frame at 60fps.\nconst DELAY_BEFORE_FOCUS = 20;\n\n/**\n * The editable-field component can be used to simplify the user experience, avoiding the use of a redirection to a form\n * to edit the data of an entity. You can use it with these wrapped components : `wcs-input`, `wcs-textarea`, `wcs-select`. \n *\n * This component is not present in the SNCF design system specifications, so we tried to build it in the most\n * \"discoverable\" way possible (for users who interact with), but it's a first version.\n * \n * **How to use ❓**  \n * This component is mostly used with a server that returns a response to the input sent through the `wcsChange` event.\n * It has 3 internal states :\n * - DISPLAY = the default state of the editable-field\n * - EDIT = the editable-field is editable, the user should input the data\n * - LOADING = the data is submitted and the editable-field is waiting for a **response**\n *\n * A **response** is needed to get the component out of the LOADING state. You can either :\n * - Set the `value` property to a different value to tell the component to refresh and go back into DISPLAY state\n * - Use the `successHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * - Use the `errorHandler` callback through the `wcsChange` event (see interface [EditableComponentUpdateEvent](https://gitlab.com/SNCF/wcs/-/blob/develop/src/components/editable-field/editable-field-interface.tsx))\n * \n * **Accessibility guidelines 💡**  \n * \n * > - Aria attributes are put on the native component on the first rendering with the `label` and `errorMsg` you provided \n * > - Additional aria attributes put on `<wcs-editable-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @cssprop --wcs-editable-field-label-color - Color of the label text\n * @cssprop --wcs-editable-field-label-font-weight - Font weight of the label text\n * @cssprop --wcs-editable-field-label-gap - Gap between the label and the field\n * @cssprop --wcs-editable-field-label-font-size - Font size of the label text\n *\n * @cssprop --wcs-editable-field-background-color - Background color of the editable field\n * @cssprop --wcs-editable-field-value-font-weight - Font weight of the field value text\n * @cssprop --wcs-editable-field-value-color-default - Default color of the field value text\n * @cssprop --wcs-editable-field-value-color-hover - Color of the field value text on hover\n * @cssprop --wcs-editable-field-value-color-readonly - Color of the field value text when readonly\n *\n * @cssprop --wcs-editable-field-height-m - Height of the editable field in medium size\n * @cssprop --wcs-editable-field-height-l - Height of the editable field in large size\n * @cssprop --wcs-editable-field-font-size-m - Font size of the field value text in medium size\n * @cssprop --wcs-editable-field-font-size-l - Font size of the field value text in large size\n *\n * @cssprop --wcs-editable-field-border-radius - Border radius of the editable field\n * @cssprop --wcs-editable-field-border-width - Border width of the editable field\n * @cssprop --wcs-editable-field-border-width-focus - Border width of the editable field when focused\n * @cssprop --wcs-editable-field-border-width-hover - Border width of the editable field on hover\n * @cssprop --wcs-editable-field-border-color-default - Default border color of the editable field\n * @cssprop --wcs-editable-field-border-color-hover - Border color of the editable field on hover\n * @cssprop --wcs-editable-field-border-color-focus - Border color of the editable field on focus\n * @cssprop --wcs-editable-field-border-style - Border style of the editable field\n *\n * @cssprop --wcs-editable-field-padding-vertical-m - Vertical padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-vertical-l - Vertical padding of the editable field in large size\n * @cssprop --wcs-editable-field-padding-horizontal-m - Horizontal padding of the editable field in medium size\n * @cssprop --wcs-editable-field-padding-horizontal-l - Horizontal padding of the editable field in large size\n *\n * @cssprop --wcs-editable-field-icon-color-readonly - Color of the icon when the field is readonly\n */\n@Component({\n    tag: 'wcs-editable-field',\n    styleUrl: 'editable-field.scss',\n    shadow: true\n})\nexport class EditableField implements ComponentInterface {\n    @Element() private el!: HTMLWcsEditableFieldElement;\n    private spiedElement: HTMLElement = null;\n    private editModeBtn: HTMLButtonElement;\n    private onInputKeydownCallback: (event: KeyboardEvent) => void;\n    private onWcsInputOrChangeCallback: (event: CustomEvent) => void;\n\n    @State() private currentState: EditableComponentState = EditableComponentState.DISPLAY;\n    /**\n     * Specifies which component is used for editing\n     */\n    @Prop() type: EditableFieldType = 'input';\n    /**\n     * Label of the field.  \n     * Will also be part of the edit button `aria-label`.\n     */\n    @Prop() label!: string;\n    /**\n     * Event called at each (valid) update of the field.\n     */\n    @Event() wcsChange!: EventEmitter<EditableComponentUpdateEvent>;\n    /**\n     * Specify whether the field is editable or not\n     */\n    @Prop({ reflect: true }) readonly: boolean = false;\n    /**\n     * Initial value of the field\n     */\n    @Prop({mutable: true}) value: any;\n    /**\n     * Function to customize the validation of the data during the update\n     */\n    @Prop() validateFn: ValidateFn<any>;\n    /**\n     * Function used to format the value\n     */\n    @Prop() formatFn: FormatFn<any>;\n    /**\n     * Error message displayed under the field if validation failed.\n     */\n    @Prop() errorMsg: string = null;\n    /**\n     * Specify the size (height) of the editable field.\n     */\n    @Prop({reflect: true}) size: WcsEditableFieldSize = 'm';\n\n    @State() private isError: boolean = false;\n\n    private currentValue: any = null;\n\n    componentWillLoad(): Promise<void> | void {\n        if(!isWcsEditableFieldSize(this.size)) {\n            console.warn(`Invalid size value for wcs-editable-field : \"${this.size}\". Must be one of \"${WcsEditableFieldSizeValues.join(', ')}\"`);\n            this.size = \"m\"; // Default fallback value\n        }\n        this.currentValue = this.value;\n    }\n\n    componentDidLoad() {\n        const assignedElements = (this.el.shadowRoot.querySelector('slot') as HTMLSlotElement).assignedElements();\n        switch (this.type) {\n            case 'input':\n                this.initWithInput(assignedElements);\n                break;\n            case 'textarea':\n                this.initWithTextArea(assignedElements);\n                break;\n            case 'select':\n                this.initWithSelect(assignedElements)\n                break;\n        }\n    }\n\n\n    disconnectedCallback(): void {\n        this.cleanUpSpiedElementEventListeners();\n    }\n\n    private keyboardSubmitHandler(event: KeyboardEvent): void {\n        const shouldValidateOnEnterKey = \n            (this.type === 'textarea' || this.type === 'select')\n            ? (isEnterKey(event) && event.ctrlKey)\n            : isEnterKey(event);\n\n        if (shouldValidateOnEnterKey) {\n            this.sendCurrentValue();\n        }\n        if (isEscapeKey(event)) {\n            this.discardChanges();\n        }\n    }\n\n    private onWcsInputOrChange(event: CustomEvent) {\n        event.stopImmediatePropagation();\n        const value = this.type === 'select' ? event.detail.value : event.detail.target.value;\n        this.currentValue = value;\n        if (this.validateFn) {\n            this.isError = !this.validateFn(this.currentValue);\n        }\n    }\n\n    private cleanUpSpiedElementEventListeners(): void {\n        this.spiedElement?.removeEventListener('keydown', this.onInputKeydownCallback);\n        this.spiedElement?.removeEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n        this.spiedElement?.removeEventListener('wcsChange', this.onWcsInputOrChangeCallback);\n    }\n\n    private initWithInput(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-INPUT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted input element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    private initWithTextArea(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-TEXTAREA'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted textarea element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsInputEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    private initWithSelect(assignedElements: Element[]) {\n        const element = assignedElements.filter(x => {\n            return x.tagName === 'WCS-SELECT'\n        })[0];\n        if (!element) throw new Error('You must provide a slotted select element to handle edition');\n        this.spiedElement = element as HTMLElement;\n        this.addWcsChangeEventHandler(this.spiedElement);\n        this.addKeyDownHandler(this.spiedElement);\n    }\n\n    /**\n     * This method subscribes the component to the change events produced by the other WCS components\n     * (provided by the user in slot)\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addWcsChangeEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsChange', this.onWcsInputOrChangeCallback);\n    }\n\n    /**\n     * This method subscribes the component to the input events produced by the other WCS components\n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addWcsInputEventHandler(elt: HTMLElement) {\n        this.onWcsInputOrChangeCallback = this.onWcsInputOrChange.bind(this);\n        elt.addEventListener('wcsInput', this.onWcsInputOrChangeCallback);\n    }\n\n    /**\n     * This method subscribes the component to the keydown events produced by the other WCS components \n     * @param elt the element to subscribe to\n     * @private\n     */\n    private addKeyDownHandler(elt: HTMLElement) {\n        this.onInputKeydownCallback = this.keyboardSubmitHandler.bind(this);\n        elt.addEventListener('keydown', this.onInputKeydownCallback);\n    }\n\n    private focusEditModeBtn() {\n        setTimeout(() => {\n            this.editModeBtn?.focus();\n        }, DELAY_BEFORE_FOCUS);\n    }\n\n    private sendCurrentValue() {\n        if (this.currentState === EditableComponentState.EDIT) {\n            if (this.value === this.currentValue) {\n                this.currentState = EditableComponentState.DISPLAY;\n                this.focusEditModeBtn();\n            } else {\n                this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;\n                if (!this.isError) {\n                    this.currentState = EditableComponentState.LOAD;\n                    this.wcsChange.emit({\n                        newValue: this.currentValue,\n                        successHandler: () => this.forceDisplayStateAndValidate(),\n                        errorHandler: () => this.errorHandler()\n                    });\n                }\n            }\n        }\n    }\n\n    private discardChanges() {\n        this.currentValue = this.value;\n        this.currentState = EditableComponentState.DISPLAY;\n        this.isError = false;\n        this.focusEditModeBtn();\n    }\n\n    forceDisplayStateAndValidate() {\n        if (this.currentState === EditableComponentState.LOAD) {\n            this.value = this.currentValue;\n            this.currentState = EditableComponentState.DISPLAY;\n            this.focusEditModeBtn();\n        } else {\n            throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');\n        }\n    }\n\n    // Process only mouse clicks, to avoid interfering with keyboard triggered button clicks. \n    // In some browsers, pressing \"Enter\" or \"Space\" while focused on a button generates a click event\n    // with `event.detail` set to 0. It's a keyboard triggered click, not a real mouse click. \n    @Listen('click', {target: 'window'})\n    onWindowClickEvent(event: MouseEvent | KeyboardEvent) {\n        // Ensure only true mouse clicks are processed\n        if (isMouseEvent(event) && event.detail !== 0 && !clickInsideElement(event, this.el)) {\n            if (this.currentState === EditableComponentState.EDIT) {\n                if (this.isError) {\n                    this.discardChanges();\n                } else {\n                    this.sendCurrentValue();\n                }\n            }\n        }\n    }\n\n    /**\n     * discard changes and force component state to DISPLAY\n     * <br/>\n     * This method must be call when component is in LOAD state\n     */\n    errorHandler() {\n        this.discardChanges();\n    }\n\n    @Watch('value')\n    onValueChange(): void {\n        this.currentState = EditableComponentState.DISPLAY;\n    }\n\n    private onDisplayContainerClick(): void {\n        if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {\n            this.currentState = EditableComponentState.EDIT;\n            this.spiedElement['value'] = this.currentValue;\n            if (this.validateFn) {\n                this.isError = !this.validateFn(this.currentValue);\n            }\n            setTimeout(() => {\n                if (this.type === 'input') {\n                    (this.spiedElement as HTMLWcsInputElement).focus();\n                } else if (this.type === 'textarea') {\n                    (this.spiedElement as HTMLWcsTextareaElement).fitContent();\n                    (this.spiedElement as HTMLWcsTextareaElement).focus();\n                }\n            }, DELAY_BEFORE_FOCUS)\n        }\n    }\n\n    private getReadonlySvgIcon() {\n        return <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"26\" height=\"24\" viewBox=\"0 0 27 25\"\n                    class=\"readonly-icon\">\n            <path d=\"M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z\"\n                  transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n            <path\n                d=\"M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z\"\n                transform=\"translate(-0.5 -1.5)\"/>\n        </svg>;\n    }\n\n    private formatValues() {\n        let formattedValue = this.value;\n        let formattedCurrentValue = this.currentValue;\n        if (this.formatFn) {\n            formattedValue = this.formatFn(this.value);\n            formattedCurrentValue = this.formatFn(this.currentValue);\n        }\n        if (Array.isArray(this.value)) {\n            formattedValue = this.value.join(', ');\n        }\n        if (Array.isArray(this.currentValue)) {\n            formattedCurrentValue = this.currentValue.join(', ');\n        }\n        return {\n            formattedValue: (formattedValue ? (<span>{formattedValue}</span>) : (<span></span>)),\n            formattedValueText: formattedValue,\n            formattedCurrentValue: (formattedCurrentValue ? (<span>{formattedCurrentValue}</span>) : (<span></span>))\n        };\n    }\n    \n    render(): any {\n        const {formattedValue, formattedValueText, formattedCurrentValue} = this.formatValues();\n        return (\n            <Host>\n                <div class=\"label\">{this.label}</div>\n                <button\n                    type=\"button\"\n                    class={'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : '')}\n                    onClick={() => this.onDisplayContainerClick()}\n                    ref={(el) => this.editModeBtn = el}\n                    aria-label={`${EDIT_ARIA_LABEL} ${this.label} ${formattedValueText}`}\n                >\n                    {formattedValue}\n                    <wcs-mat-icon icon=\"edit\" size=\"s\"></wcs-mat-icon>\n                    {this.readonly ? this.getReadonlySvgIcon() : null}\n                </button>\n                <div\n                    class={'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '')}>\n                    {formattedCurrentValue}\n                    <wcs-spinner></wcs-spinner>\n                </div>\n                <wcs-form-field is-error={this.isError}\n                                class={'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '')}\n                >\n                    <wcs-label class=\"visually-hidden\">{this.label}</wcs-label>\n                    <slot/>\n                    {\n                        this.isError && this.errorMsg\n                            ? <wcs-error>{this.errorMsg}</wcs-error>\n                            : null\n                    }\n                </wcs-form-field>\n            </Host>\n        );\n    }\n}\n"],"mappings":"yHAsBO,MAAMA,EAA6B,CAAC,IAAK,K,SAIhCC,EAAuBC,GAEnC,OAAOF,EAA2BG,SAASD,EAC/C,CC7BA,MAAME,EAAmB,42KACzB,MAAAC,EAAeD,ECwBf,IAAKE,GAAL,SAAKA,GACDA,IAAA,wBACAA,IAAA,kBACAA,IAAA,iBACH,EAJD,CAAKA,MAAsB,KAS3B,MAAMC,EAAkB,SAIxB,MAAMC,EAAqB,G,MA+DdC,EAAa,M,8DAEdC,KAAAC,aAA4B,KA8C5BD,KAAAE,aAAoB,K,kBAzC4BN,EAAuBO,Q,UAI7C,Q,mCAaW,M,qFAgBlB,K,UAIyB,I,aAEhB,K,CAIpC,iBAAAC,GACI,IAAIb,EAAuBS,KAAKR,MAAO,CACnCa,QAAQC,KAAK,gDAAgDN,KAAKR,0BAA0BF,EAA2BiB,KAAK,UAC5HP,KAAKR,KAAO,G,CAEhBQ,KAAKE,aAAeF,KAAKQ,K,CAG7B,gBAAAC,GACI,MAAMC,EAAoBV,KAAKW,GAAGC,WAAWC,cAAc,QAA4BH,mBACvF,OAAQV,KAAKc,MACT,IAAK,QACDd,KAAKe,cAAcL,GACnB,MACJ,IAAK,WACDV,KAAKgB,iBAAiBN,GACtB,MACJ,IAAK,SACDV,KAAKiB,eAAeP,GACpB,M,CAKZ,oBAAAQ,GACIlB,KAAKmB,mC,CAGD,qBAAAC,CAAsBC,GAC1B,MAAMC,EACDtB,KAAKc,OAAS,YAAcd,KAAKc,OAAS,SACxCS,EAAWF,IAAUA,EAAMG,QAC5BD,EAAWF,GAEjB,GAAIC,EAA0B,CAC1BtB,KAAKyB,kB,CAET,GAAIC,EAAYL,GAAQ,CACpBrB,KAAK2B,gB,EAIL,kBAAAC,CAAmBP,GACvBA,EAAMQ,2BACN,MAAMrB,EAAQR,KAAKc,OAAS,SAAWO,EAAMS,OAAOtB,MAAQa,EAAMS,OAAOC,OAAOvB,MAChFR,KAAKE,aAAeM,EACpB,GAAIR,KAAKgC,WAAY,CACjBhC,KAAKiC,SAAWjC,KAAKgC,WAAWhC,KAAKE,a,EAIrC,iCAAAiB,G,WACJe,EAAAlC,KAAKC,gBAAY,MAAAiC,SAAA,SAAAA,EAAEC,oBAAoB,UAAWnC,KAAKoC,yBACvDC,EAAArC,KAAKC,gBAAY,MAAAoC,SAAA,SAAAA,EAAEF,oBAAoB,WAAYnC,KAAKsC,6BACxDC,EAAAvC,KAAKC,gBAAY,MAAAsC,SAAA,SAAAA,EAAEJ,oBAAoB,YAAanC,KAAKsC,2B,CAGrD,aAAAvB,CAAcL,GAClB,MAAM8B,EAAU9B,EAAiB+B,QAAOC,GAC7BA,EAAEC,UAAY,cACtB,GACH,IAAKH,EAAS,MAAM,IAAII,MAAM,8DAC9B5C,KAAKC,aAAeuC,EACpBxC,KAAK6C,wBAAwB7C,KAAKC,cAClCD,KAAK8C,kBAAkB9C,KAAKC,a,CAGxB,gBAAAe,CAAiBN,GACrB,MAAM8B,EAAU9B,EAAiB+B,QAAOC,GAC7BA,EAAEC,UAAY,iBACtB,GACH,IAAKH,EAAS,MAAM,IAAII,MAAM,iEAC9B5C,KAAKC,aAAeuC,EACpBxC,KAAK6C,wBAAwB7C,KAAKC,cAClCD,KAAK8C,kBAAkB9C,KAAKC,a,CAGxB,cAAAgB,CAAeP,GACnB,MAAM8B,EAAU9B,EAAiB+B,QAAOC,GAC7BA,EAAEC,UAAY,eACtB,GACH,IAAKH,EAAS,MAAM,IAAII,MAAM,+DAC9B5C,KAAKC,aAAeuC,EACpBxC,KAAK+C,yBAAyB/C,KAAKC,cACnCD,KAAK8C,kBAAkB9C,KAAKC,a,CASxB,wBAAA8C,CAAyBC,GAC7BhD,KAAKsC,2BAA6BtC,KAAK4B,mBAAmBqB,KAAKjD,MAC/DgD,EAAIE,iBAAiB,YAAalD,KAAKsC,2B,CAQnC,uBAAAO,CAAwBG,GAC5BhD,KAAKsC,2BAA6BtC,KAAK4B,mBAAmBqB,KAAKjD,MAC/DgD,EAAIE,iBAAiB,WAAYlD,KAAKsC,2B,CAQlC,iBAAAQ,CAAkBE,GACtBhD,KAAKoC,uBAAyBpC,KAAKoB,sBAAsB6B,KAAKjD,MAC9DgD,EAAIE,iBAAiB,UAAWlD,KAAKoC,uB,CAGjC,gBAAAe,GACJC,YAAW,K,OACPlB,EAAAlC,KAAKqD,eAAW,MAAAnB,SAAA,SAAAA,EAAEoB,OAAO,GAC1BxD,E,CAGC,gBAAA2B,GACJ,GAAIzB,KAAKuD,eAAiB3D,EAAuB4D,KAAM,CACnD,GAAIxD,KAAKQ,QAAUR,KAAKE,aAAc,CAClCF,KAAKuD,aAAe3D,EAAuBO,QAC3CH,KAAKmD,kB,KACF,CACHnD,KAAKiC,QAAUjC,KAAKgC,YAAchC,KAAKgC,WAAWhC,KAAKE,cAAgB,MACvE,IAAKF,KAAKiC,QAAS,CACfjC,KAAKuD,aAAe3D,EAAuB6D,KAC3CzD,KAAK0D,UAAUC,KAAK,CAChBC,SAAU5D,KAAKE,aACf2D,eAAgB,IAAM7D,KAAK8D,+BAC3BC,aAAc,IAAM/D,KAAK+D,gB,IAOrC,cAAApC,GACJ3B,KAAKE,aAAeF,KAAKQ,MACzBR,KAAKuD,aAAe3D,EAAuBO,QAC3CH,KAAKiC,QAAU,MACfjC,KAAKmD,kB,CAGT,4BAAAW,GACI,GAAI9D,KAAKuD,eAAiB3D,EAAuB6D,KAAM,CACnDzD,KAAKQ,MAAQR,KAAKE,aAClBF,KAAKuD,aAAe3D,EAAuBO,QAC3CH,KAAKmD,kB,KACF,CACH,MAAM,IAAIP,MAAM,qCAAuChD,EAAuBI,KAAKuD,cAAgB,S,EAQ3G,kBAAAS,CAAmB3C,GAEf,GAAI4C,EAAa5C,IAAUA,EAAMS,SAAW,IAAMoC,EAAmB7C,EAAOrB,KAAKW,IAAK,CAClF,GAAIX,KAAKuD,eAAiB3D,EAAuB4D,KAAM,CACnD,GAAIxD,KAAKiC,QAAS,CACdjC,KAAK2B,gB,KACF,CACH3B,KAAKyB,kB,IAWrB,YAAAsC,GACI/D,KAAK2B,gB,CAIT,aAAAwC,GACInE,KAAKuD,aAAe3D,EAAuBO,O,CAGvC,uBAAAiE,GACJ,GAAIpE,KAAKuD,eAAiB3D,EAAuBO,SAAWH,KAAKqE,WAAa,MAAO,CACjFrE,KAAKuD,aAAe3D,EAAuB4D,KAC3CxD,KAAKC,aAAa,SAAWD,KAAKE,aAClC,GAAIF,KAAKgC,WAAY,CACjBhC,KAAKiC,SAAWjC,KAAKgC,WAAWhC,KAAKE,a,CAEzCkD,YAAW,KACP,GAAIpD,KAAKc,OAAS,QAAS,CACtBd,KAAKC,aAAqCqD,O,MACxC,GAAItD,KAAKc,OAAS,WAAY,CAChCd,KAAKC,aAAwCqE,aAC7CtE,KAAKC,aAAwCqD,O,IAEnDxD,E,EAIH,kBAAAyE,GACJ,OAAOC,EAAA,OAAKC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAClEC,MAAM,iBACdL,EAAA,QAAMM,EAAE,mEACFC,UAAU,yBAChBP,EAAA,QACIM,EAAE,oQACFC,UAAU,yBACdP,EAAA,QACIM,EAAE,2HACFC,UAAU,yB,CAId,YAAAC,GACJ,IAAIC,EAAiBjF,KAAKQ,MAC1B,IAAI0E,EAAwBlF,KAAKE,aACjC,GAAIF,KAAKmF,SAAU,CACfF,EAAiBjF,KAAKmF,SAASnF,KAAKQ,OACpC0E,EAAwBlF,KAAKmF,SAASnF,KAAKE,a,CAE/C,GAAIkF,MAAMC,QAAQrF,KAAKQ,OAAQ,CAC3ByE,EAAiBjF,KAAKQ,MAAMD,KAAK,K,CAErC,GAAI6E,MAAMC,QAAQrF,KAAKE,cAAe,CAClCgF,EAAwBlF,KAAKE,aAAaK,KAAK,K,CAEnD,MAAO,CACH0E,eAAiBA,EAAkBT,EAAA,YAAOS,GAA2BT,EAAA,aACrEc,mBAAoBL,EACpBC,sBAAwBA,EAAyBV,EAAA,YAAOU,GAAkCV,EAAA,a,CAIlG,MAAAe,GACI,MAAMN,eAACA,EAAcK,mBAAEA,EAAkBJ,sBAAEA,GAAyBlF,KAAKgF,eACzE,OACIR,EAACgB,EAAI,CAAAC,IAAA,4CACDjB,EAAA,OAAAiB,IAAA,2CAAKZ,MAAM,SAAS7E,KAAK0F,OACzBlB,EAAA,UAAAiB,IAAA,2CACI3E,KAAK,SACL+D,MAAO,sBAAwB7E,KAAKuD,eAAiB3D,EAAuBO,QAAU,eAAiB,IACvGwF,QAAS,IAAM3F,KAAKoE,0BACpBwB,IAAMjF,GAAOX,KAAKqD,YAAc1C,EAAE,aACtB,GAAGd,KAAmBG,KAAK0F,SAASJ,KAE/CL,EACDT,EAAA,gBAAAiB,IAAA,2CAAcI,KAAK,OAAOrG,KAAK,MAC9BQ,KAAKqE,SAAWrE,KAAKuE,qBAAuB,MAEjDC,EAAA,OAAAiB,IAAA,2CACIZ,MAAO,mBAAqB7E,KAAKuD,eAAiB3D,EAAuB6D,KAAO,eAAiB,KAChGyB,EACDV,EAAA,eAAAiB,IAAA,8CAEJjB,EAAA,kBAAAiB,IAAA,sDAA0BzF,KAAKiC,QACf4C,MAAO,mBAAqB7E,KAAKuD,eAAiB3D,EAAuB4D,KAAO,eAAiB,KAE7GgB,EAAA,aAAAiB,IAAA,2CAAWZ,MAAM,mBAAmB7E,KAAK0F,OACzClB,EAAA,QAAAiB,IAAA,6CAEIzF,KAAKiC,SAAWjC,KAAK8F,SACftB,EAAA,iBAAYxE,KAAK8F,UACjB,M"}

package/dist/wcs/{p-87b69cac.entry.js → p-9554196c.entry.js}

@@ -1,2 +1,2 @@
-import{r as e,f as o,h as a,H as n,g as c}from"./p-32e583ea.js";import{r as i,c as t}from"./p-d7acbf01.js";import{i as s,a as r,b as l}from"./p-a3aece7a.js";const m=':host{--wcs-com-nav-menu-bar-height:calc(var(--wcs-semantic-size-base) * 8);--wcs-com-nav-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-border-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-app-name-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-app-name-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-app-name-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-com-nav-app-name-line-height:var(--wcs-semantic-font-line-height-large);--wcs-com-nav-item-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-vertical-padding:0;--wcs-com-nav-horizontal-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-gap:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-menu-icon-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-mobile-menu-icon-gap:calc(var(--wcs-semantic-spacing-base) * 2);--wcs-com-nav-mobile-menu-icon-margin-left:var(--wcs-semantic-spacing-base);--wcs-com-nav-mobile-menu-icon-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-com-nav-menu-bar-gap:calc(var(--wcs-semantic-spacing-base) * 5);--wcs-com-nav-menu-bar-margin-left:calc(var(--wcs-semantic-spacing-base) * 6.25);display:block;position:relative;height:var(--wcs-com-nav-menu-bar-height);border-bottom:var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color)}:host .container{padding:var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container nav{display:flex;align-items:center}:host .container-left{display:flex;height:100%;align-items:center;flex-direction:row}:host .container-right{display:flex;align-items:center}:host .app-name{font-weight:var(--wcs-com-nav-app-name-font-weight);font-size:var(--wcs-com-nav-app-name-font-size);line-height:var(--wcs-com-nav-app-name-line-height);color:var(--wcs-com-nav-app-name-color)}:host .menu-bar{display:none}:host #mobile-menu-icon{display:flex;align-items:center;flex-wrap:nowrap;color:var(--wcs-com-nav-mobile-menu-icon-color);padding-left:var(--wcs-com-nav-mobile-menu-icon-gap);margin-left:var(--wcs-com-nav-mobile-menu-icon-margin-left);border-left:solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host #mobile-menu-icon:after{font-family:icons;font-size:18px;cursor:pointer;content:"\\f198";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[aria-expanded=true]:after{content:"\\f129"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding:var(--wcs-com-nav-mobile-overlay-padding);position:absolute;top:var(--wcs-com-nav-menu-bar-height);left:0;right:0;display:flex;flex-direction:column;gap:var(--wcs-com-nav-mobile-overlay-gap);z-index:9999;background-color:var(--wcs-com-nav-background-color)}:host .mobile-overlay[data-mobile-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}@media (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host nav{height:100%}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:var(--wcs-com-nav-menu-bar-margin-left)}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:var(--wcs-com-nav-menu-bar-gap)}:host .menu-bar ::slotted(wcs-com-nav-item){height:100%;color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}:host .menu-bar ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:0.1rem;border-radius:2px}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}}';const d=m;const v=["title"];const h="WCS-COM-NAV-SUBMENU";const b=class{constructor(o){e(this,o);this.inheritedAttributes={};this.appName=undefined;this.mobileMenuOpen=false;this.currentActiveSizing=undefined}mobileMenuIconClick(){this.mobileMenuOpen=!this.mobileMenuOpen}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),r(this.el,v));const e=this.el.querySelectorAll(":scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])");i(e,h)}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=t(this);this.resizeObserver.observe(document.body)}}async setAriaAttribute(e,a){this.inheritedAttributes[e]=a;o(this)}closeMobileMenu(){this.mobileMenuOpen=false}onClickOnFinalAction(){this.closeMobileMenu()}render(){const e=this.inheritedAttributes["aria-label"]||undefined;return a(n,{key:"85451701261dc64faebd405a0186b857d1881655"},a("div",{key:"84e33d688f36901ee1608b765c3c20c26d099f83",class:"container"},a("div",{key:"f8fe43fcf24ce46ad57d010a46bb19ebbea8175c",class:"container-left"},a("div",{key:"246da8710a8b10e52753a865b1345ce8a9d6f0e9",class:"app-name"},this.appName,a("slot",{key:"0c6ad2ea30db8cc6ae51ec44d4f6e253b7cca850",name:"app-name"})),this.currentActiveSizing==="desktop"?a("nav",Object.assign({role:"navigation"},this.inheritedAttributes),a("div",{class:"menu-bar",role:"list"},this.currentActiveSizing==="desktop"?a("slot",null):null)):null),a("div",{key:"34e2eb03491479f033a891d1f2bf46814e45057c",class:"container-right"},a("slot",{key:"18bd4464e1ce6725f63d152dba5ddff4a73e48cf",name:"actions"}),this.currentActiveSizing==="mobile"?a("nav",Object.assign({id:"wcs-com-nav-mobile-menu",role:"navigation"},this.inheritedAttributes),a("button",{id:"mobile-menu-icon","aria-label":e,"aria-expanded":this.mobileMenuOpen?"true":"false","aria-controls":"wcs-com-nav-mobile-menu",onClick:()=>this.mobileMenuIconClick()}),this.currentActiveSizing==="mobile"?a("div",{class:"mobile-overlay","data-mobile-open":this.mobileMenuOpen,role:"list"},a("slot",null)):null):null)))}exitMobileMenuOnKeyDown(e){if(l(e)){this.closeMobileMenu()}}get el(){return c(this)}};b.style=d;export{b as wcs_com_nav};
-//# sourceMappingURL=p-87b69cac.entry.js.map
+import{r as e,f as o,h as a,H as n,g as c}from"./p-32e583ea.js";import{r as i,c as t}from"./p-0017d766.js";import{i as s,a as r,b as l}from"./p-52d77e1f.js";const m=':host{--wcs-com-nav-menu-bar-height:calc(var(--wcs-semantic-size-base) * 8);--wcs-com-nav-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-border-width:var(--wcs-semantic-border-width-default);--wcs-com-nav-background-color:var(--wcs-semantic-color-background-surface-primary);--wcs-com-nav-app-name-color:var(--wcs-semantic-color-text-primary);--wcs-com-nav-app-name-font-weight:var(--wcs-semantic-font-weight-heavy);--wcs-com-nav-app-name-font-size:var(--wcs-semantic-font-size-heading-5);--wcs-com-nav-app-name-line-height:var(--wcs-semantic-font-line-height-large);--wcs-com-nav-item-color:var(--wcs-semantic-color-foreground-action-neutral-default);--wcs-com-nav-item-font-weight:var(--wcs-semantic-font-weight-medium);--wcs-com-nav-focus-outline-color:var(--wcs-semantic-color-border-focus-base);--wcs-com-nav-vertical-padding:0;--wcs-com-nav-horizontal-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-gap:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-overlay-padding:var(--wcs-semantic-spacing-large);--wcs-com-nav-mobile-menu-icon-border-color:var(--wcs-semantic-color-border-secondary);--wcs-com-nav-mobile-menu-icon-gap:calc(var(--wcs-semantic-spacing-base) * 2);--wcs-com-nav-mobile-menu-icon-margin-left:var(--wcs-semantic-spacing-base);--wcs-com-nav-mobile-menu-icon-color:var(--wcs-semantic-color-foreground-action-secondary-default);--wcs-com-nav-menu-bar-gap:calc(var(--wcs-semantic-spacing-base) * 5);--wcs-com-nav-menu-bar-margin-left:calc(var(--wcs-semantic-spacing-base) * 6.25);display:block;position:relative;height:var(--wcs-com-nav-menu-bar-height);border-bottom:var(--wcs-com-nav-border-width) solid var(--wcs-com-nav-border-color)}:host .container{padding:var(--wcs-com-nav-vertical-padding) var(--wcs-com-nav-horizontal-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container nav{display:flex;align-items:center}:host .container-left{display:flex;height:100%;align-items:center;flex-direction:row}:host .container-right{display:flex;align-items:center}:host .app-name{font-weight:var(--wcs-com-nav-app-name-font-weight);font-size:var(--wcs-com-nav-app-name-font-size);line-height:var(--wcs-com-nav-app-name-line-height);color:var(--wcs-com-nav-app-name-color)}:host .menu-bar{display:none}:host #mobile-menu-icon{display:flex;align-items:center;flex-wrap:nowrap;color:var(--wcs-com-nav-mobile-menu-icon-color);padding-left:var(--wcs-com-nav-mobile-menu-icon-gap);margin-left:var(--wcs-com-nav-mobile-menu-icon-margin-left);border-left:solid 1px var(--wcs-com-nav-mobile-menu-icon-border-color)}:host #mobile-menu-icon:focus{outline:none}:host #mobile-menu-icon:focus-visible::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}@supports not selector(#mobile-menu-icon:focus-visible::after){:host #mobile-menu-icon:focus::after{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:var(--wcs-semantic-spacing-small);border-radius:0.1rem}}:host button{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer}:host #mobile-menu-icon:after{font-family:icons;font-size:18px;cursor:pointer;content:"\\f198";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[aria-expanded=true]:after{content:"\\f129"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding:var(--wcs-com-nav-mobile-overlay-padding);position:absolute;top:var(--wcs-com-nav-menu-bar-height);left:0;right:0;display:flex;flex-direction:column;gap:var(--wcs-com-nav-mobile-overlay-gap);z-index:9999;background-color:var(--wcs-com-nav-background-color)}:host .mobile-overlay[data-mobile-open] ::slotted(wcs-com-nav-item){color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}@media (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host nav{height:100%}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:var(--wcs-com-nav-menu-bar-margin-left)}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:var(--wcs-com-nav-menu-bar-gap)}:host .menu-bar ::slotted(wcs-com-nav-item){height:100%;color:var(--wcs-com-nav-item-color);font-weight:var(--wcs-com-nav-item-font-weight)}:host .menu-bar ::slotted(wcs-com-nav-item:focus-within){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-com-nav-focus-outline-color);outline-offset:0.1rem;border-radius:2px}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}}';const d=m;const v=["title"];const h="WCS-COM-NAV-SUBMENU";const b=class{constructor(o){e(this,o);this.inheritedAttributes={};this.appName=undefined;this.mobileMenuOpen=false;this.currentActiveSizing=undefined}mobileMenuIconClick(){this.mobileMenuOpen=!this.mobileMenuOpen}disconnectedCallback(){var e;(e=this.resizeObserver)===null||e===void 0?void 0:e.disconnect()}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},s(this.el)),r(this.el,v));const e=this.el.querySelectorAll(":scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])");i(e,h)}componentDidLoad(){if(!this.resizeObserver){this.resizeObserver=t(this);this.resizeObserver.observe(document.body)}}async setAriaAttribute(e,a){this.inheritedAttributes[e]=a;o(this)}closeMobileMenu(){this.mobileMenuOpen=false}onClickOnFinalAction(){this.closeMobileMenu()}render(){const e=this.inheritedAttributes["aria-label"]||undefined;return a(n,{key:"85451701261dc64faebd405a0186b857d1881655"},a("div",{key:"84e33d688f36901ee1608b765c3c20c26d099f83",class:"container"},a("div",{key:"f8fe43fcf24ce46ad57d010a46bb19ebbea8175c",class:"container-left"},a("div",{key:"246da8710a8b10e52753a865b1345ce8a9d6f0e9",class:"app-name"},this.appName,a("slot",{key:"0c6ad2ea30db8cc6ae51ec44d4f6e253b7cca850",name:"app-name"})),this.currentActiveSizing==="desktop"?a("nav",Object.assign({role:"navigation"},this.inheritedAttributes),a("div",{class:"menu-bar",role:"list"},this.currentActiveSizing==="desktop"?a("slot",null):null)):null),a("div",{key:"34e2eb03491479f033a891d1f2bf46814e45057c",class:"container-right"},a("slot",{key:"18bd4464e1ce6725f63d152dba5ddff4a73e48cf",name:"actions"}),this.currentActiveSizing==="mobile"?a("nav",Object.assign({id:"wcs-com-nav-mobile-menu",role:"navigation"},this.inheritedAttributes),a("button",{id:"mobile-menu-icon","aria-label":e,"aria-expanded":this.mobileMenuOpen?"true":"false","aria-controls":"wcs-com-nav-mobile-menu",onClick:()=>this.mobileMenuIconClick()}),this.currentActiveSizing==="mobile"?a("div",{class:"mobile-overlay","data-mobile-open":this.mobileMenuOpen,role:"list"},a("slot",null)):null):null)))}exitMobileMenuOnKeyDown(e){if(l(e)){this.closeMobileMenu()}}get el(){return c(this)}};b.style=d;export{b as wcs_com_nav};
+//# sourceMappingURL=p-9554196c.entry.js.map

package/dist/wcs/{p-80a23f9c.entry.js → p-96bff8fe.entry.js}

@@ -1,2 +1,2 @@
-import{h as r,r as t,c as e,H as s,g as o}from"./p-32e583ea.js";import{i,a,s as n,c as d,d as h}from"./p-a3aece7a.js";const c=({state:t})=>r("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none"},r("g",{class:(t==="none"?"":t)+" arrow-group"},r("path",{class:"arrow",fill:"#333333",d:"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z"})));const l=":host{display:contents}:host th{color:var(--wcs-grid-header-text-color);background-color:var(--wcs-grid-header-background-color-default);border-bottom:var(--wcs-grid-header-border-bottom);border-left:var(--wcs-grid-header-border-left);border-radius:var(--wcs-grid-header-border-radius);padding:var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);text-align:left;align-content:center;transition:background-color var(--wcs-grid-header-transition-duration) ease-in-out;}:host th .grid-column-th-content{-webkit-appearance:none;appearance:none;background:none;border:none;outline:none;margin:0;padding:0;font-size:var(--wcs-grid-header-font-size);line-height:var(--wcs-grid-header-line-height);color:var(--wcs-grid-header-text-color);cursor:inherit;display:inline-flex;border-collapse:separate;font-family:inherit;text-align:left;align-items:center;gap:var(--wcs-semantic-spacing-base)}:host th .grid-column-th-content span{font-weight:var(--wcs-grid-header-font-weight)}:host th[aria-sort]:hover{background-color:var(--wcs-grid-header-background-color-hover)}:host th[aria-sort]:active{background-color:var(--wcs-grid-header-background-color-press)}:host th[aria-sort=ascending],:host th[aria-sort=descending]{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-default)}:host th[aria-sort=none]:hover{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-hover)}:host th:focus-visible,:host th:has(:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}@supports not selector(&:has(:focus-visible)){:host th:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}}:host .pointer{cursor:pointer}:host([hidden]){display:none !important}";const g=l;const u=".arrow-group{transform-origin:50% 50%;transition:transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out}.arrow{fill:var(--wcs-grid-header-sort-arrow-color, transparent)}.desc{transform:rotate(180deg)}";const f=u;const w=["tabindex","title"];const b=class{constructor(r){t(this,r);this.wcsSortChange=e(this,"wcsSortChange",7);this.wcsHiddenChange=e(this,"wcsHiddenChange",7);this.inheritedAttributes={};this.path=undefined;this.name=undefined;this.sort=false;this.sortFn=undefined;this.formatter=undefined;this.sortOrder="none";this.width=undefined;this.customCells=false;this.hidden=false;this.cursorPosition=undefined;this.columnPosition=undefined}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),a(this.el,w))}async setAriaAttribute(r,t){n(this.nativeTh,r,t)}parseMyObjectProp(r){this.wcsHiddenChange.emit(r)}sortOrderChange(r){this.emitSortConfig()}emitSortConfig(){if(!this.sort)return;this.wcsSortChange.emit({column:this.el,order:this.sortOrder,sortFn:this.sortFn})}getSortOrderForAriaSort(r){switch(r){case"asc":return"ascending";case"desc":return"descending";case"none":default:return"none"}}getTabIndex(){var r,t;return((r=this.cursorPosition)===null||r===void 0?void 0:r.col)===this.columnPosition&&((t=this.cursorPosition)===null||t===void 0?void 0:t.row)===0?0:-1}getTagName(){return this.sort?"button":"div"}delegateFocusToButton(){if(this.sort){this.buttonOrDiv.focus()}}render(){const t=this.getTagName();return r(s,{key:"05815f3b9f03f3248347108555a3fea6495d9193",slot:"grid-column"},r("th",Object.assign({key:"e25a02d656e7f4cbf9c6bb8ada58b0300f41ce12",style:{width:this.width},class:this.sort?"pointer":"",tabIndex:this.sort?-1:this.getTabIndex(),scope:"col",onClick:this.onSortClick.bind(this),onKeyDown:this.handleSortKeyDown.bind(this),onFocus:this.delegateFocusToButton.bind(this),"aria-sort":this.sort?this.getSortOrderForAriaSort(this.sortOrder):null,ref:r=>this.nativeTh=r},this.inheritedAttributes),r(t,{key:"8954f92f00869d26c0bcea419ff0173e02ecbb94",class:"grid-column-th-content",ref:r=>this.buttonOrDiv=r,tabIndex:this.sort?this.getTabIndex():-1},r("span",{key:"84006eeb0d8f91817aab26af7ba89e47ceedf850"},this.name),this.sort?r(c,{state:this.sortOrder}):"")))}onSortClick(){if(!this.sort)return;this.sortOrder=this.sortOrder==="none"||this.sortOrder==="desc"?"asc":"desc"}handleSortKeyDown(r){if(d(r)||h(r)){r.preventDefault();this.onSortClick()}}get el(){return o(this)}static get watchers(){return{hidden:["parseMyObjectProp"],sortOrder:["sortOrderChange"]}}};b.style=g+f;export{b as wcs_grid_column};
-//# sourceMappingURL=p-80a23f9c.entry.js.map
+import{h as r,r as t,c as e,H as s,g as o}from"./p-32e583ea.js";import{i,a,s as n,c as d,d as c}from"./p-52d77e1f.js";const h=({state:t})=>r("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"12",viewBox:"0 0 12 12",fill:"none"},r("g",{class:(t==="none"?"":t)+" arrow-group"},r("path",{class:"arrow",fill:"#333333",d:"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z"})));const l=":host{display:contents}:host th{color:var(--wcs-grid-header-text-color);background-color:var(--wcs-grid-header-background-color-default);border-bottom:var(--wcs-grid-header-border-bottom);border-left:var(--wcs-grid-header-border-left);border-radius:var(--wcs-grid-header-border-radius);padding:var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);text-align:left;align-content:center;transition:background-color var(--wcs-grid-header-transition-duration) ease-in-out;}:host th .grid-column-th-content{-webkit-appearance:none;appearance:none;background:none;border:none;outline:none;margin:0;padding:0;font-size:var(--wcs-grid-header-font-size);line-height:var(--wcs-grid-header-line-height);color:var(--wcs-grid-header-text-color);cursor:inherit;display:inline-flex;border-collapse:separate;font-family:inherit;text-align:left;align-items:center;gap:var(--wcs-semantic-spacing-base)}:host th .grid-column-th-content span{font-weight:var(--wcs-grid-header-font-weight)}:host th[aria-sort]:hover{background-color:var(--wcs-grid-header-background-color-hover)}:host th[aria-sort]:active{background-color:var(--wcs-grid-header-background-color-press)}:host th[aria-sort=ascending],:host th[aria-sort=descending]{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-default)}:host th[aria-sort=none]:hover{--wcs-grid-header-sort-arrow-color:var(--wcs-grid-header-sort-arrow-color-hover)}:host th:focus-visible,:host th:has(:focus-visible){outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}@supports not selector(&:has(:focus-visible)){:host th:focus-within{outline:var(--wcs-semantic-border-width-large) dashed var(--wcs-grid-outline-color);outline-offset:0;border-radius:0.1rem}}:host .pointer{cursor:pointer}:host([hidden]){display:none !important}";const g=l;const u=".arrow-group{transform-origin:50% 50%;transition:transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out}.arrow{fill:var(--wcs-grid-header-sort-arrow-color, transparent)}.desc{transform:rotate(180deg)}";const f=u;const w=["tabindex","title"];const b=class{constructor(r){t(this,r);this.wcsSortChange=e(this,"wcsSortChange",7);this.wcsHiddenChange=e(this,"wcsHiddenChange",7);this.inheritedAttributes={};this.path=undefined;this.name=undefined;this.sort=false;this.sortFn=undefined;this.formatter=undefined;this.sortOrder="none";this.width=undefined;this.customCells=false;this.hidden=false;this.cursorPosition=undefined;this.columnPosition=undefined}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},i(this.el)),a(this.el,w))}async setAriaAttribute(r,t){n(this.nativeTh,r,t)}parseMyObjectProp(r){this.wcsHiddenChange.emit(r)}sortOrderChange(r){this.emitSortConfig()}emitSortConfig(){if(!this.sort)return;this.wcsSortChange.emit({column:this.el,order:this.sortOrder,sortFn:this.sortFn})}getSortOrderForAriaSort(r){switch(r){case"asc":return"ascending";case"desc":return"descending";case"none":default:return"none"}}getTabIndex(){var r,t;return((r=this.cursorPosition)===null||r===void 0?void 0:r.col)===this.columnPosition&&((t=this.cursorPosition)===null||t===void 0?void 0:t.row)===0?0:-1}getTagName(){return this.sort?"button":"div"}delegateFocusToButton(){if(this.sort){this.buttonOrDiv.focus()}}render(){const t=this.getTagName();return r(s,{key:"46989c38681747daf1a458eeda881657aa5acdfb",slot:"grid-column"},r("th",Object.assign({key:"3e6fdcb1db342dc6b974fc709fb1adea92b0d731",style:{width:this.width},class:this.sort?"pointer":"",tabIndex:this.sort?-1:this.getTabIndex(),scope:"col",onClick:this.onSortClick.bind(this),onKeyDown:this.handleSortKeyDown.bind(this),onFocus:this.delegateFocusToButton.bind(this),"aria-sort":this.sort?this.getSortOrderForAriaSort(this.sortOrder):null,ref:r=>this.nativeTh=r},this.inheritedAttributes),r(t,{key:"cb49f504363332cb9c586bc906804cc4295d6ec5",class:"grid-column-th-content",ref:r=>this.buttonOrDiv=r,tabIndex:this.sort?this.getTabIndex():-1},r("span",{key:"801194d92757db834561dd11396223a939b1c6cb"},this.name),this.sort?r("div",{class:"sort-arrow-container"},r(h,{state:this.sortOrder})):"")))}onSortClick(){if(!this.sort)return;this.sortOrder=this.sortOrder==="none"||this.sortOrder==="desc"?"asc":"desc"}handleSortKeyDown(r){if(d(r)||c(r)){r.preventDefault();this.onSortClick()}}get el(){return o(this)}static get watchers(){return{hidden:["parseMyObjectProp"],sortOrder:["sortOrderChange"]}}};b.style=g+f;export{b as wcs_grid_column};
+//# sourceMappingURL=p-96bff8fe.entry.js.map

package/dist/wcs/{p-80a23f9c.entry.js.map → p-96bff8fe.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["GridSortArrow","state","h","xmlns","width","height","viewBox","fill","class","d","gridColumnCss","WcsGridColumnStyle0","gridSortArrowCss","WcsGridColumnStyle1","GRID_COLUMN_INHERITED_ATTRS","GridColumn","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeTh","parseMyObjectProp","newValue","wcsHiddenChange","emit","sortOrderChange","_","emitSortConfig","sort","wcsSortChange","column","order","sortOrder","sortFn","getSortOrderForAriaSort","getTabIndex","_a","cursorPosition","col","columnPosition","_b","row","getTagName","delegateFocusToButton","buttonOrDiv","focus","render","ButtonOrDiv","Host","key","slot","style","tabIndex","scope","onClick","onSortClick","bind","onKeyDown","handleSortKeyDown","onFocus","ref","name","_event","isSpaceKey","isEnterKey","preventDefault"],"sources":["src/components/grid-column/grid-sort-arrow.tsx","src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-sort-arrow.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n    state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({state}) => (\n    <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n        <g class={(state === 'none' ? '' : state) + ' arrow-group'}>\n            <path class=\"arrow\"\n                  fill=\"#333333\"\n                  d=\"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z\"\n            />\n        </g>\n    </svg>\n\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n\n    /* All css variables are in grid.scss.\n       Any variable can be overridden here for a single grid-column by using the correct selector in CSS */\n\n    display: contents;\n\n    th {\n        color: var(--wcs-grid-header-text-color);\n        background-color: var(--wcs-grid-header-background-color-default);\n        border-bottom: var(--wcs-grid-header-border-bottom);\n        border-left: var(--wcs-grid-header-border-left);\n        border-radius: var(--wcs-grid-header-border-radius);\n        padding: var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);\n        text-align: left;\n        align-content: center;\n        transition: background-color var(--wcs-grid-header-transition-duration) ease-in-out;\n\n        .grid-column-th-content {\n            // The following lines aim to avoid displaying the native button style of the agent\n            -webkit-appearance: none;\n            appearance: none;\n            background: none;\n            border: none;\n            outline: none;\n            margin: 0;\n            padding: 0;\n            font-size: var(--wcs-grid-header-font-size);\n            line-height: var(--wcs-grid-header-line-height);\n            color: var(--wcs-grid-header-text-color);\n            cursor: inherit;\n            display: inline-flex;\n            border-collapse: separate;\n            font-family: inherit;\n            text-align: left;\n            align-items: center;\n            gap: var(--wcs-semantic-spacing-base);\n\n            span {\n                font-weight: var(--wcs-grid-header-font-weight);\n            }\n        }\n\n        /* Hovered grid header */\n        &[aria-sort]:hover {\n            background-color: var(--wcs-grid-header-background-color-hover);\n        }\n\n        /* Pressed grid header */\n        &[aria-sort]:active {\n            background-color: var(--wcs-grid-header-background-color-press);\n        }\n\n        /* Grid header with asc or desc sort-config */\n        &[aria-sort=ascending],\n        &[aria-sort=descending] {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-default);\n        }\n\n        /* Hovered grid header, not sorted yet */\n        &[aria-sort=none]:hover {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-hover);\n        }\n\n        // XXX: This code works in Firefox as well, but there is a browser-side rendering bug that prevents it from displaying correctly.\n        // We decided to wait for Firefox to fix the bug instead adding a dirty fix here\n        &:focus-visible, &:has(:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(:focus-visible)) {\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n            }\n        }\n    }\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n",".arrow-group {\n    transform-origin: 50% 50%;\n    transition: transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out;\n}\n\n.arrow {\n    fill: var(--wcs-grid-header-sort-arrow-color, transparent);\n}\n\n.desc {\n    transform: rotate(180deg);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport {\n    WcsCellFormatter,\n    WcsGridColumnSortChangeEventDetails,\n    WcsSortFn,\n    WcsSortOrder\n} from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEnterKey,\n    isSpaceKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst GRID_COLUMN_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * \n * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column\n */\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrls: ['grid-column.scss', 'grid-sort-arrow.scss'],\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsGridColumnElement;\n    private nativeTh!: HTMLTableHeaderCellElement;\n    private buttonOrDiv: HTMLButtonElement | HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    /**\n     * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)\n     */\n    @Prop() path: string;\n    /**\n     * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)\n     */\n    @Prop() name: string;\n    /**\n     * Make the column sortable.\n     */\n    @Prop() sort: boolean = false;\n    /**\n     * Customizable sort function to change the comparison of values.\n     */\n    @Prop() sortFn: WcsSortFn;\n    /**\n     * Customizable formatter function to render the cell differently.\n     */\n    @Prop() formatter: WcsCellFormatter;\n    /**\n     * Defines if the column sort is ascending or descending.  \n     * `none` = the column is not sorted.\n     */\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column `<th>` element width.\n     */\n    @Prop() width: string;\n    /**\n     * Set to true if using a `wcs-custom-cell` linked to it.\n     */\n    @Prop() customCells: boolean = false;\n    /**\n     * Flag to hide the column.\n     */\n    @Prop() hidden: boolean = false;\n    /**\n     * Event emitted when the sort of the column is changed.\n     */\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    /**\n     * Event emitted if the column is dynamically switching visibility.\n     */\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns\n     * using keyboard.\n     * @internal\n     */\n    @Prop() public cursorPosition: {col: number, row: number};\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a\n     * grid in order to move the focus between the grid columns.\n     * @internal\n     */\n    @Prop() public columnPosition: number;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_COLUMN_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeTh, attr, value);\n    }\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    getSortOrderForAriaSort(sortOrder: WcsSortOrder) {\n        switch (sortOrder) {\n            case 'asc':\n                return 'ascending';\n            case 'desc':\n                return 'descending';\n            case 'none':\n            default:\n                return 'none';\n        }\n    }\n    \n    private getTabIndex() {\n        return this.cursorPosition?.col === this.columnPosition\n        && this.cursorPosition?.row === 0 ? 0 : -1;\n    }\n\n    private getTagName() {\n        return this.sort ? 'button' : 'div';\n    }\n    \n    private delegateFocusToButton() {\n        if (this.sort) {\n            this.buttonOrDiv.focus();\n        }\n    }\n\n    render(): any {\n        const ButtonOrDiv = this.getTagName();\n        return (<Host slot=\"grid-column\">\n            <th style={{width: this.width}}\n                class={this.sort ? 'pointer' : ''}\n                tabIndex={this.sort ? -1 : this.getTabIndex()}\n                scope=\"col\"\n                onClick={this.onSortClick.bind(this)}\n                onKeyDown={this.handleSortKeyDown.bind(this)}\n                onFocus={this.delegateFocusToButton.bind(this)}\n                aria-sort={this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null}\n                ref={(el) => (this.nativeTh = el)}\n                {...this.inheritedAttributes}\n            >\n                <ButtonOrDiv class=\"grid-column-th-content\"\n                        ref={(el: HTMLButtonElement | HTMLDivElement) => this.buttonOrDiv = el}\n                        tabIndex={this.sort ? this.getTabIndex() : -1}>\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <GridSortArrow state={this.sortOrder}/> : ''\n                    }\n                </ButtonOrDiv>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        if (!this.sort) return;\n        \n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n    \n    private handleSortKeyDown(_event: KeyboardEvent) {\n        if (isSpaceKey(_event) || isEnterKey(_event)) {\n            _event.preventDefault();\n            this.onSortClick();\n        }\n    }\n}\n"],"mappings":"sHAOO,MAAMA,EAAyD,EAAEC,WACpEC,EAAA,qBAAiB,OAAOC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,QACvGL,EAAA,KAAGM,OAAQP,IAAU,OAAS,GAAKA,GAAS,gBACxCC,EAAA,QAAMM,MAAM,QACND,KAAK,UACLE,EAAE,+eCZpB,MAAMC,EAAgB,80DACtB,MAAAC,EAAeD,ECDf,MAAME,EAAmB,mOACzB,MAAAC,EAAeD,EC0Bf,MAAME,EAA8B,CAAC,WAAY,S,MAYpCC,EAAU,M,uHAIXC,KAAAC,oBAA4C,G,kDAY5B,M,8DAayB,O,sCAQlB,M,YAIL,M,4DAwB1B,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIR,G,CAKtC,sBAAMU,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,SAAUH,EAAMC,E,CAI9C,iBAAAG,CAAkBC,GACdd,KAAKe,gBAAgBC,KAAKF,E,CAI9B,eAAAG,CAAgBC,GACZlB,KAAKmB,gB,CAGT,cAAAA,GACI,IAAKnB,KAAKoB,KAAM,OAChBpB,KAAKqB,cAAcL,KAAK,CACpBM,OAAQtB,KAAKM,GACbiB,MAAOvB,KAAKwB,UACZC,OAAQzB,KAAKyB,Q,CAIrB,uBAAAC,CAAwBF,GACpB,OAAQA,GACJ,IAAK,MACD,MAAO,YACX,IAAK,OACD,MAAO,aACX,IAAK,OACL,QACI,MAAO,O,CAIX,WAAAG,G,QACJ,QAAOC,EAAA5B,KAAK6B,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,OAAQ9B,KAAK+B,kBACtCC,EAAAhC,KAAK6B,kBAAc,MAAAG,SAAA,SAAAA,EAAEC,OAAQ,EAAI,GAAK,C,CAGrC,UAAAC,GACJ,OAAOlC,KAAKoB,KAAO,SAAW,K,CAG1B,qBAAAe,GACJ,GAAInC,KAAKoB,KAAM,CACXpB,KAAKoC,YAAYC,O,EAIzB,MAAAC,GACI,MAAMC,EAAcvC,KAAKkC,aACzB,OAAQhD,EAACsD,EAAI,CAAAC,IAAA,2CAACC,KAAK,eACfxD,EAAA,KAAAiB,OAAAC,OAAA,CAAAqC,IAAA,2CAAIE,MAAO,CAACvD,MAAOY,KAAKZ,OACpBI,MAAOQ,KAAKoB,KAAO,UAAY,GAC/BwB,SAAU5C,KAAKoB,MAAQ,EAAIpB,KAAK2B,cAChCkB,MAAM,MACNC,QAAS9C,KAAK+C,YAAYC,KAAKhD,MAC/BiD,UAAWjD,KAAKkD,kBAAkBF,KAAKhD,MACvCmD,QAASnD,KAAKmC,sBAAsBa,KAAKhD,MAAK,YACnCA,KAAKoB,KAAOpB,KAAK0B,wBAAwB1B,KAAKwB,WAAa,KACtE4B,IAAM9C,GAAQN,KAAKY,SAAWN,GAC1BN,KAAKC,qBAETf,EAACqD,EAAW,CAAAE,IAAA,2CAACjD,MAAM,yBACX4D,IAAM9C,GAA2CN,KAAKoC,YAAc9B,EACpEsC,SAAU5C,KAAKoB,KAAOpB,KAAK2B,eAAiB,GAChDzC,EAAA,QAAAuD,IAAA,4CAAOzC,KAAKqD,MAERrD,KAAKoB,KAAOlC,EAACF,EAAa,CAACC,MAAOe,KAAKwB,YAAe,K,CAOlE,WAAAuB,GACJ,IAAK/C,KAAKoB,KAAM,OAGhBpB,KAAKwB,UAAYxB,KAAKwB,YAAc,QAAUxB,KAAKwB,YAAc,OAAS,MAAQ,M,CAG9E,iBAAA0B,CAAkBI,GACtB,GAAIC,EAAWD,IAAWE,EAAWF,GAAS,CAC1CA,EAAOG,iBACPzD,KAAK+C,a"}
+{"version":3,"names":["GridSortArrow","state","h","xmlns","width","height","viewBox","fill","class","d","gridColumnCss","WcsGridColumnStyle0","gridSortArrowCss","WcsGridColumnStyle1","GRID_COLUMN_INHERITED_ATTRS","GridColumn","this","inheritedAttributes","componentWillLoad","Object","assign","inheritAriaAttributes","el","inheritAttributes","setAriaAttribute","attr","value","setOrRemoveAttribute","nativeTh","parseMyObjectProp","newValue","wcsHiddenChange","emit","sortOrderChange","_","emitSortConfig","sort","wcsSortChange","column","order","sortOrder","sortFn","getSortOrderForAriaSort","getTabIndex","_a","cursorPosition","col","columnPosition","_b","row","getTagName","delegateFocusToButton","buttonOrDiv","focus","render","ButtonOrDiv","Host","key","slot","style","tabIndex","scope","onClick","onSortClick","bind","onKeyDown","handleSortKeyDown","onFocus","ref","name","_event","isSpaceKey","isEnterKey","preventDefault"],"sources":["src/components/grid-column/grid-sort-arrow.tsx","src/components/grid-column/grid-column.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-sort-arrow.scss?tag=wcs-grid-column&encapsulation=shadow","src/components/grid-column/grid-column.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport { WcsSortOrder } from '../grid/grid-interface';\n\ninterface GridSortArrowProps {\n    state: WcsSortOrder;\n}\n\nexport const GridSortArrow: FunctionalComponent<GridSortArrowProps> = ({state}) => (\n    <svg aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\">\n        <g class={(state === 'none' ? '' : state) + ' arrow-group'}>\n            <path class=\"arrow\"\n                  fill=\"#333333\"\n                  d=\"M10.0973 5.34619C9.79269 5.67941 9.29832 5.67941 8.99348 5.34619L6.78316 2.92128L6.78316 11.144C6.78316 11.6168 6.43368 12 6.00289 12C5.57187 12 5.22261 11.6168 5.22261 11.144L5.22261 2.92128L3.01219 5.34619C2.70802 5.67941 2.21341 5.67941 1.90881 5.34619C1.75655 5.17859 1.68005 4.95932 1.68005 4.73997C1.68005 4.52061 1.75655 4.30192 1.90881 4.13433L5.45122 0.250846C5.75597 -0.0836145 6.24977 -0.0836145 6.55454 0.250846L10.0973 4.13433C10.4017 4.46883 10.4017 5.01168 10.0973 5.34619Z\"\n            />\n        </g>\n    </svg>\n\n);\n","@import '../../style/focus-outline.scss';\n\n:host {\n\n    /* All css variables are in grid.scss.\n       Any variable can be overridden here for a single grid-column by using the correct selector in CSS */\n\n    display: contents;\n\n    th {\n        color: var(--wcs-grid-header-text-color);\n        background-color: var(--wcs-grid-header-background-color-default);\n        border-bottom: var(--wcs-grid-header-border-bottom);\n        border-left: var(--wcs-grid-header-border-left);\n        border-radius: var(--wcs-grid-header-border-radius);\n        padding: var(--wcs-grid-header-padding-vertical) var(--wcs-grid-header-padding-horizontal);\n        text-align: left;\n        align-content: center;\n        transition: background-color var(--wcs-grid-header-transition-duration) ease-in-out;\n\n        .grid-column-th-content {\n            // The following lines aim to avoid displaying the native button style of the agent\n            -webkit-appearance: none;\n            appearance: none;\n            background: none;\n            border: none;\n            outline: none;\n            margin: 0;\n            padding: 0;\n            font-size: var(--wcs-grid-header-font-size);\n            line-height: var(--wcs-grid-header-line-height);\n            color: var(--wcs-grid-header-text-color);\n            cursor: inherit;\n            display: inline-flex;\n            border-collapse: separate;\n            font-family: inherit;\n            text-align: left;\n            align-items: center;\n            gap: var(--wcs-semantic-spacing-base);\n\n            span {\n                font-weight: var(--wcs-grid-header-font-weight);\n            }\n        }\n\n        /* Hovered grid header */\n        &[aria-sort]:hover {\n            background-color: var(--wcs-grid-header-background-color-hover);\n        }\n\n        /* Pressed grid header */\n        &[aria-sort]:active {\n            background-color: var(--wcs-grid-header-background-color-press);\n        }\n\n        /* Grid header with asc or desc sort-config */\n        &[aria-sort=ascending],\n        &[aria-sort=descending] {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-default);\n        }\n\n        /* Hovered grid header, not sorted yet */\n        &[aria-sort=none]:hover {\n            --wcs-grid-header-sort-arrow-color: var(--wcs-grid-header-sort-arrow-color-hover);\n        }\n\n        // XXX: This code works in Firefox as well, but there is a browser-side rendering bug that prevents it from displaying correctly.\n        // We decided to wait for Firefox to fix the bug instead adding a dirty fix here\n        &:focus-visible, &:has(:focus-visible) {\n            @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n        }\n\n        @supports not selector(&:has(:focus-visible)) {\n            &:focus-within {\n                @include focus-outline($outline-color: var(--wcs-grid-outline-color), $outline-offset: 0);\n            }\n        }\n    }\n    .pointer {\n        cursor: pointer;\n    }\n}\n\n:host([hidden]) {\n    display: none !important;\n}\n",".arrow-group {\n    transform-origin: 50% 50%;\n    transition: transform var(--wcs-semantic-motion-duration-feedback-base, 150ms) ease-in-out;\n}\n\n.arrow {\n    fill: var(--wcs-grid-header-sort-arrow-color, transparent);\n}\n\n.desc {\n    transform: rotate(180deg);\n}\n","import {\n    Component,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host, Method,\n    Prop,\n    Watch\n} from '@stencil/core';\nimport {\n    WcsCellFormatter,\n    WcsGridColumnSortChangeEventDetails,\n    WcsSortFn,\n    WcsSortOrder\n} from '../grid/grid-interface';\nimport { GridSortArrow } from './grid-sort-arrow';\nimport {\n    inheritAriaAttributes,\n    inheritAttributes,\n    isEnterKey,\n    isSpaceKey,\n    setOrRemoveAttribute\n} from \"../../utils/helpers\";\nimport { AriaAttributeName, MutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\nconst GRID_COLUMN_INHERITED_ATTRS = ['tabindex', 'title'];\n\n/**\n * The grid column is a subcomponent of `wcs-grid` that represents a column of the table.\n * \n * @csspart [path]-column - CSS part for each column for styling. e.g: first_name-column, email-column\n */\n@Component({\n    tag: 'wcs-grid-column',\n    styleUrls: ['grid-column.scss', 'grid-sort-arrow.scss'],\n    shadow: true\n})\nexport class GridColumn implements ComponentInterface, MutableAriaAttribute {\n    @Element() private el: HTMLWcsGridColumnElement;\n    private nativeTh!: HTMLTableHeaderCellElement;\n    private buttonOrDiv: HTMLButtonElement | HTMLDivElement;\n    private inheritedAttributes: { [k: string]: any } = {};\n    /**\n     * Represents the name of the field from the `data` object (e.g: first_name, last_name, email, ...)\n     */\n    @Prop() path: string;\n    /**\n     * The name of the column displayed on the table (e.g: First Name, Last Name, Email, ...)\n     */\n    @Prop() name: string;\n    /**\n     * Make the column sortable.\n     */\n    @Prop() sort: boolean = false;\n    /**\n     * Customizable sort function to change the comparison of values.\n     */\n    @Prop() sortFn: WcsSortFn;\n    /**\n     * Customizable formatter function to render the cell differently.\n     */\n    @Prop() formatter: WcsCellFormatter;\n    /**\n     * Defines if the column sort is ascending or descending.  \n     * `none` = the column is not sorted.\n     */\n    @Prop({mutable: true}) sortOrder: WcsSortOrder = 'none';\n    /**\n     * Set the column `<th>` element width.\n     */\n    @Prop() width: string;\n    /**\n     * Set to true if using a `wcs-custom-cell` linked to it.\n     */\n    @Prop() customCells: boolean = false;\n    /**\n     * Flag to hide the column.\n     */\n    @Prop({ reflect: true }) hidden: boolean = false;\n    /**\n     * Event emitted when the sort of the column is changed.\n     */\n    @Event() wcsSortChange!: EventEmitter<WcsGridColumnSortChangeEventDetails>;\n    /**\n     * Event emitted if the column is dynamically switching visibility.\n     */\n    @Event() wcsHiddenChange!: EventEmitter<boolean>;\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to move the focus between grid columns\n     * using keyboard.\n     * @internal\n     */\n    @Prop() public cursorPosition: {col: number, row: number};\n\n    /**\n     * This property mustn't be set by hand, it is set by the wcs-grid component to register the column index in a\n     * grid in order to move the focus between the grid columns.\n     * @internal\n     */\n    @Prop() public columnPosition: number;\n    \n    componentWillLoad(): Promise<void> | void {\n        this.inheritedAttributes = {\n            ...inheritAriaAttributes(this.el),\n            ...inheritAttributes(this.el, GRID_COLUMN_INHERITED_ATTRS),\n        };\n    }\n    \n    @Method()\n    async setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined) {\n        setOrRemoveAttribute(this.nativeTh, attr, value);\n    }\n\n    @Watch('hidden')\n    parseMyObjectProp(newValue: boolean) {\n        this.wcsHiddenChange.emit(newValue);\n    }\n\n    @Watch('sortOrder')\n    sortOrderChange(_: WcsSortOrder) {\n        this.emitSortConfig();\n    }\n\n    emitSortConfig() {\n        if (!this.sort) return;\n        this.wcsSortChange.emit({\n            column: this.el,\n            order: this.sortOrder,\n            sortFn: this.sortFn\n        });\n    }\n\n    getSortOrderForAriaSort(sortOrder: WcsSortOrder) {\n        switch (sortOrder) {\n            case 'asc':\n                return 'ascending';\n            case 'desc':\n                return 'descending';\n            case 'none':\n            default:\n                return 'none';\n        }\n    }\n    \n    private getTabIndex() {\n        return this.cursorPosition?.col === this.columnPosition\n        && this.cursorPosition?.row === 0 ? 0 : -1;\n    }\n\n    private getTagName() {\n        return this.sort ? 'button' : 'div';\n    }\n    \n    private delegateFocusToButton() {\n        if (this.sort) {\n            this.buttonOrDiv.focus();\n        }\n    }\n\n    render(): any {\n        const ButtonOrDiv = this.getTagName();\n        return (<Host slot=\"grid-column\">\n            <th style={{width: this.width}}\n                class={this.sort ? 'pointer' : ''}\n                tabIndex={this.sort ? -1 : this.getTabIndex()}\n                scope=\"col\"\n                onClick={this.onSortClick.bind(this)}\n                onKeyDown={this.handleSortKeyDown.bind(this)}\n                onFocus={this.delegateFocusToButton.bind(this)}\n                aria-sort={this.sort ? this.getSortOrderForAriaSort(this.sortOrder) : null}\n                ref={(el) => (this.nativeTh = el)}\n                {...this.inheritedAttributes}\n            >\n                <ButtonOrDiv class=\"grid-column-th-content\"\n                        ref={(el: HTMLButtonElement | HTMLDivElement) => this.buttonOrDiv = el}\n                        tabIndex={this.sort ? this.getTabIndex() : -1}>\n                    <span>{this.name}</span>\n                    {\n                        this.sort ? <div class=\"sort-arrow-container\"><GridSortArrow state={this.sortOrder}/></div> : ''\n                    }\n                </ButtonOrDiv>\n            </th>\n        </Host>)\n    }\n\n    private onSortClick() {\n        if (!this.sort) return;\n        \n        // @Watch on sortOrder property will trigger wcsSortChange event\n        this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';\n    }\n    \n    private handleSortKeyDown(_event: KeyboardEvent) {\n        if (isSpaceKey(_event) || isEnterKey(_event)) {\n            _event.preventDefault();\n            this.onSortClick();\n        }\n    }\n}\n"],"mappings":"sHAOO,MAAMA,EAAyD,EAAEC,WACpEC,EAAA,qBAAiB,OAAOC,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,KAAKC,QAAQ,YAAYC,KAAK,QACvGL,EAAA,KAAGM,OAAQP,IAAU,OAAS,GAAKA,GAAS,gBACxCC,EAAA,QAAMM,MAAM,QACND,KAAK,UACLE,EAAE,+eCZpB,MAAMC,EAAgB,80DACtB,MAAAC,EAAeD,ECDf,MAAME,EAAmB,mOACzB,MAAAC,EAAeD,EC0Bf,MAAME,EAA8B,CAAC,WAAY,S,MAYpCC,EAAU,M,uHAIXC,KAAAC,oBAA4C,G,kDAY5B,M,8DAayB,O,sCAQlB,M,YAIY,M,4DAwB3C,iBAAAC,GACIF,KAAKC,oBAAmBE,OAAAC,OAAAD,OAAAC,OAAA,GACjBC,EAAsBL,KAAKM,KAC3BC,EAAkBP,KAAKM,GAAIR,G,CAKtC,sBAAMU,CAAiBC,EAAyBC,GAC5CC,EAAqBX,KAAKY,SAAUH,EAAMC,E,CAI9C,iBAAAG,CAAkBC,GACdd,KAAKe,gBAAgBC,KAAKF,E,CAI9B,eAAAG,CAAgBC,GACZlB,KAAKmB,gB,CAGT,cAAAA,GACI,IAAKnB,KAAKoB,KAAM,OAChBpB,KAAKqB,cAAcL,KAAK,CACpBM,OAAQtB,KAAKM,GACbiB,MAAOvB,KAAKwB,UACZC,OAAQzB,KAAKyB,Q,CAIrB,uBAAAC,CAAwBF,GACpB,OAAQA,GACJ,IAAK,MACD,MAAO,YACX,IAAK,OACD,MAAO,aACX,IAAK,OACL,QACI,MAAO,O,CAIX,WAAAG,G,QACJ,QAAOC,EAAA5B,KAAK6B,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,OAAQ9B,KAAK+B,kBACtCC,EAAAhC,KAAK6B,kBAAc,MAAAG,SAAA,SAAAA,EAAEC,OAAQ,EAAI,GAAK,C,CAGrC,UAAAC,GACJ,OAAOlC,KAAKoB,KAAO,SAAW,K,CAG1B,qBAAAe,GACJ,GAAInC,KAAKoB,KAAM,CACXpB,KAAKoC,YAAYC,O,EAIzB,MAAAC,GACI,MAAMC,EAAcvC,KAAKkC,aACzB,OAAQhD,EAACsD,EAAI,CAAAC,IAAA,2CAACC,KAAK,eACfxD,EAAA,KAAAiB,OAAAC,OAAA,CAAAqC,IAAA,2CAAIE,MAAO,CAACvD,MAAOY,KAAKZ,OACpBI,MAAOQ,KAAKoB,KAAO,UAAY,GAC/BwB,SAAU5C,KAAKoB,MAAQ,EAAIpB,KAAK2B,cAChCkB,MAAM,MACNC,QAAS9C,KAAK+C,YAAYC,KAAKhD,MAC/BiD,UAAWjD,KAAKkD,kBAAkBF,KAAKhD,MACvCmD,QAASnD,KAAKmC,sBAAsBa,KAAKhD,MAAK,YACnCA,KAAKoB,KAAOpB,KAAK0B,wBAAwB1B,KAAKwB,WAAa,KACtE4B,IAAM9C,GAAQN,KAAKY,SAAWN,GAC1BN,KAAKC,qBAETf,EAACqD,EAAW,CAAAE,IAAA,2CAACjD,MAAM,yBACX4D,IAAM9C,GAA2CN,KAAKoC,YAAc9B,EACpEsC,SAAU5C,KAAKoB,KAAOpB,KAAK2B,eAAiB,GAChDzC,EAAA,QAAAuD,IAAA,4CAAOzC,KAAKqD,MAERrD,KAAKoB,KAAOlC,EAAA,OAAKM,MAAM,wBAAuBN,EAACF,EAAa,CAACC,MAAOe,KAAKwB,aAAqB,K,CAO1G,WAAAuB,GACJ,IAAK/C,KAAKoB,KAAM,OAGhBpB,KAAKwB,UAAYxB,KAAKwB,YAAc,QAAUxB,KAAKwB,YAAc,OAAS,MAAQ,M,CAG9E,iBAAA0B,CAAkBI,GACtB,GAAIC,EAAWD,IAAWE,EAAWF,GAAS,CAC1CA,EAAOG,iBACPzD,KAAK+C,a"}

package/dist/wcs/{p-fa507e06.entry.js → p-9ad23e83.entry.js}

@@ -1,2 +1,2 @@
-import{r as t,h as i,H as n,g as e}from"./p-32e583ea.js";import{i as o,a,s}from"./p-a3aece7a.js";const r=':host{display:flex;flex-direction:column;justify-content:center}:host .size-s{font-size:18px !important}:host .size-m{font-size:24px !important}:host .size-l{font-size:36px !important}:host .size-xl{font-size:48px !important}:host .material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-outlined{font-family:"Material Icons Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-two-tone{--google-font-color-materialiconstwotone:none;font-family:"Material Icons Two Tone";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-round{font-family:"Material Icons Round";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-sharp{font-family:"Material Icons Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}';const l=r;const f={filled:"material-icons",outlined:"material-icons-outlined",twotone:"material-icons-two-tone",rounded:"material-icons-round",sharp:"material-icons-sharp"};const c=["title"];const m=class{constructor(i){t(this,i);this.inheritedAttributes={};this.icon=undefined;this.size="m";this.family="filled"}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),a(this.el,c))}async setAriaAttribute(t,i){s(this.nativeIcon,t,i)}render(){return i(n,{key:"2db12f2b8f6c1d6f45e1513f671af976d97152cb"},i("i",Object.assign({key:"cfa280b4e9cf307801d82137de3c92f88a4879e0","aria-hidden":"true",class:f[this.family]+" size-"+this.size,ref:t=>this.nativeIcon=t},this.inheritedAttributes),this.icon))}get el(){return e(this)}};m.style=l;export{m as wcs_mat_icon};
-//# sourceMappingURL=p-fa507e06.entry.js.map
+import{r as t,h as i,H as n,g as e}from"./p-32e583ea.js";import{i as o,a,s}from"./p-52d77e1f.js";const r=':host{display:flex;flex-direction:column;justify-content:center}:host .size-s{font-size:18px !important}:host .size-m{font-size:24px !important}:host .size-l{font-size:36px !important}:host .size-xl{font-size:48px !important}:host .material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-outlined{font-family:"Material Icons Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-two-tone{--google-font-color-materialiconstwotone:none;font-family:"Material Icons Two Tone";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-round{font-family:"Material Icons Round";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}:host .material-icons-sharp{font-family:"Material Icons Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}';const l=r;const f={filled:"material-icons",outlined:"material-icons-outlined",twotone:"material-icons-two-tone",rounded:"material-icons-round",sharp:"material-icons-sharp"};const c=["title"];const m=class{constructor(i){t(this,i);this.inheritedAttributes={};this.icon=undefined;this.size="m";this.family="filled"}componentWillLoad(){this.inheritedAttributes=Object.assign(Object.assign({},o(this.el)),a(this.el,c))}async setAriaAttribute(t,i){s(this.nativeIcon,t,i)}render(){return i(n,{key:"1e0c8f28a59f398d0981007401cda39bf9e089d8"},i("i",Object.assign({key:"caa5e118dfeb306aef87a9b10514247d45cc2f9f","aria-hidden":"true",class:f[this.family]+" size-"+this.size,ref:t=>this.nativeIcon=t},this.inheritedAttributes),this.icon))}get el(){return e(this)}};m.style=l;export{m as wcs_mat_icon};
+//# sourceMappingURL=p-9ad23e83.entry.js.map