wcs-core 4.0.2 → 4.1.0

package/dist/wcs/p-bcb8b731.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,f as s,h as e,H as n,g as r}from"./p-a2df3a49.js";import{l as o}from"./p-adef7aaf.js";import{G as h}from"./p-475ac7c5.js";function a(t){switch(t){case"asc":return 1;case"desc":return-1}}var l;var c=new Uint8Array(16);function d(){if(!l){l=typeof crypto!=="undefined"&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||typeof msCrypto!=="undefined"&&typeof msCrypto.getRandomValues==="function"&&msCrypto.getRandomValues.bind(msCrypto);if(!l){throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported")}}return l(c)}const u=/^(?:[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 f(t){return typeof t==="string"&&u.test(t)}var g=[];for(var p=0;p<256;++p){g.push((p+256).toString(16).substr(1))}function m(t){var i=arguments.length>1&&arguments[1]!==undefined?arguments[1]:0;var s=(g[t[i+0]]+g[t[i+1]]+g[t[i+2]]+g[t[i+3]]+"-"+g[t[i+4]]+g[t[i+5]]+"-"+g[t[i+6]]+g[t[i+7]]+"-"+g[t[i+8]]+g[t[i+9]]+"-"+g[t[i+10]]+g[t[i+11]]+g[t[i+12]]+g[t[i+13]]+g[t[i+14]]+g[t[i+15]]).toLowerCase();if(!f(s)){throw TypeError("Stringified UUID is invalid")}return s}function w(t,i,s){t=t||{};var e=t.random||(t.rng||d)();e[6]=e[6]&15|64;e[8]=e[8]&63|128;if(i){s=s||0;for(var n=0;n<16;++n){i[s+n]=e[n]}return i}return m(e)}const v=":host{display:block;--wcs-grid-highlight-color:var(--wcs-light)}:host th{background-color:var(--wcs-light)}:host th:not(:first-child){border-left:solid 1px var(--wcs-text-light)}:host ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:none}:host table{width:100%;border-spacing:0}:host td{color:var(--wcs-gray-light);margin:0;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding)}:host tr:not(:last-child) td{border-bottom:solid 1px var(--wcs-text-light)}:host .wcs-grid-selection-column{padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);width:40px}:host tr.selected{background-color:var(--wcs-grid-highlight-color)}:host .loading{text-align:center}:host([selection]) ::slotted([slot=grid-column]:first-child){--wcs-grid-column-border-left:solid 1px var(--wcs-text-light) !important}";const C=class{constructor(s){t(this,s);this.wcsGridSelectionChange=i(this,"wcsGridSelectionChange",7);this.wcsGridAllSelectionChange=i(this,"wcsGridAllSelectionChange",7);this.serverMode=undefined;this.data=undefined;this.loading=undefined;this.selectionConfig="none";this.selectedItems=[];this.wcsGridPaginationId=undefined;this.rowIdPath=undefined;this.columns=undefined;this.paginationEl=undefined;this.rows=[]}onDataChange(t){this.updateGridRows(t);this.refreshSort(false)}onSelectedItemsPropertyChange(t){this.updateSelectionWithValues(t)}onHiddenColumnChange(){s(this)}updateSelectionWithValues(t){if(this.selectionConfig==="single"){this.rows.map((t=>t.selected=false));for(const i of this.rows){if(o.isEqual(i.data,t)){i.selected=true;break}}}else if(this.selectionConfig==="multiple"){this.rows.map((t=>t.selected=false));for(const i of this.rows){if(t.find((t=>o.isEqual(t,i.data)))){i.selected=true}}}this.rows=o.cloneDeep(this.rows)}wcsGridRowToWcsGridRowData(t){return{selected:t.selected,page:t.page,data:t.data}}updateGridRows(t){const i=[];if(t&&this.columns){for(let s=0;s<t.length;s++){const e={uuid:w(),data:t[s],selected:false,cells:[]};for(const i of this.columns){e.cells.push({content:o.get(t[s],i.path),column:i,formatter:i.formatter})}i.push(e)}this.rows=i;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)}refreshSort(t){if(this.columns){const[i,...s]=this.columns.filter((t=>t.sortOrder!=="none"));if(i&&!this.serverMode){this.sortBy(i)}t&&this.disableSortOrderForColumns(s)}}disableSortOrderForColumns(t){t===null||t===void 0?void 0:t.forEach((t=>t.sortOrder="none"))}getGridColumnsFromTemplate(){const t=this.el.shadowRoot.querySelector('slot[name="grid-column"]');return t.assignedElements()}getGridPaginationsFromTemplate(){const t=this.el.shadowRoot.querySelector('slot[name="grid-pagination"]');return t.assignedElements()}sortChangeEventHandler(t){if(t.detail.order==="none")return;this.disableSortOrderForColumns(this.columns.filter((i=>i!==t.detail.column)));if(this.serverMode)return;this.sortBy(t.detail.column);this.updatePageIndex()}sortBy(t){if(t.sortFn){this.rows=o.cloneDeep(this.rows).sort(((i,s)=>t.sortFn(i.data,s.data,t)*a(t.sortOrder)))}else{this.rows=o.cloneDeep(this.rows).sort(((i,s)=>{const e=t.path;return(o.get(i.data,e)<o.get(s.data,e)?-1:o.get(i.data,e)>o.get(s.data,e)?1:0)*a(t.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=h.INDEX_FIRST_PAGE}else if(this.paginationEl.pageCount>0&&this.paginationEl.currentPage+1>this.paginationEl.pageCount){this.paginationEl.currentPage=this.paginationEl.pageCount-1}const t=o.cloneDeep(this.rows);t.forEach(((t,i)=>t.page=Math.floor(i/this.paginationEl.pageSize)));this.rows=[...t]}}paginationChangeEventHandler(){this.onPaginationChange()}paginationChangeEventHandlerOutside(t){if(this.wcsGridPaginationId&&this.wcsGridPaginationId===t.target.id){this.onPaginationChange()}}onPaginationChange(){if(this.serverMode)return;this.updatePageIndex()}onRowSelection(t){if(this.selectionConfig==="single"){this.rows.filter((i=>i.uuid!==t.uuid)).map((t=>t.selected=false))}t.selected=!t.selected;if(this.selectionConfig!=="single"||t.selected){this.wcsGridSelectionChange.emit({row:this.wcsGridRowToWcsGridRowData(t)})}this.rows=o.cloneDeep(this.rows)}selectAllRows(){const t=this.getRowsForCurrentPage();const i=!this.allRowsAreSelected();t.map((t=>t.selected=i));this.wcsGridAllSelectionChange.emit({rows:i?t.map((t=>this.wcsGridRowToWcsGridRowData(t))):[]});this.rows=o.cloneDeep(this.rows)}allRowsAreSelected(){const t=this.getRowsForCurrentPage();return t.length>0&&t.filter((t=>t.selected)).length===t.length}getRowsForCurrentPage(){if(this.paginationEl){return this.rows.filter((t=>t.page===this.paginationEl.currentPage))}return this.rows}renderSelectionColumn(t){switch(this.selectionConfig){case"none":return;case"single":return e("td",null,e("wcs-radio",{checked:t.selected,onClick:this.onRowSelection.bind(this,t)}));case"multiple":return e("td",null,e("wcs-checkbox",{checked:t.selected,onWcsChange:this.onRowSelection.bind(this,t)}))}}getCellContent(t,i){if(i.formatter){return i.formatter(e,i.column,this.wcsGridRowToWcsGridRowData(t))}return i.content}totalColumnCount(){if(!this.columns){return 0}return this.columns.length+(this.selectionConfig==="none"?0:1)}render(){var t;return e(n,null,e("table",null,e("thead",null,this.selectionConfig==="none"?"":e("th",{class:"wcs-grid-selection-column"},this.selectionConfig==="single"?"":e("wcs-checkbox",{checked:this.allRowsAreSelected(),onWcsChange:this.selectAllRows.bind(this)})),e("slot",{name:"grid-column"})),e("tbody",null,this.loading?e("tr",null,e("td",{colSpan:this.totalColumnCount(),class:"loading"},e("wcs-spinner",null))):(t=this.rows)===null||t===void 0?void 0:t.filter((t=>this.serverMode||!this.paginationEl||t.page===this.paginationEl.currentPage)).map((t=>this.renderRow(t))))),e("slot",{name:"grid-pagination"}))}renderRow(t){var i;return e("tr",{class:t.selected?"selected":""},this.renderSelectionColumn(t),(i=t.cells)===null||i===void 0?void 0:i.map((i=>{if(i.column.hidden){return}return i.column.customCells?e("td",null,e("slot",{name:i.column.id+"-"+t.data[this.rowIdPath]})):e("td",{part:i.column.path+"-column"},this.getCellContent(t,i))})))}get el(){return r(this)}static get watchers(){return{data:["onDataChange"],selectedItems:["onSelectedItemsPropertyChange"]}}};C.style=v;export{C as wcs_grid};
-//# sourceMappingURL=p-bcb8b731.entry.js.map

package/dist/wcs/p-bcb8b731.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["getSortOrderInteger","sortOrder","getRandomValues","rnds8","Uint8Array","rng","crypto","bind","msCrypto","Error","REGEX","validate","uuid","test","byteToHex","i","push","toString","substr","stringify","arr","offset","arguments","length","undefined","toLowerCase","TypeError","v4","options","buf","rnds","random","gridCss","Grid","onDataChange","newValue","this","updateGridRows","refreshSort","onSelectedItemsPropertyChange","updateSelectionWithValues","onHiddenColumnChange","forceUpdate","values","selectionConfig","rows","map","r","selected","row","_","isEqual","data","find","x","cloneDeep","wcsGridRowToWcsGridRowData","page","columns","cells","column","content","get","path","formatter","updatePageIndex","componentDidLoad","getGridColumnsFromTemplate","paginationEl","wcsGridPaginationId","document","getElementById","getGridPaginationsFromTemplate","selectedItems","refreshOthersColmumnsSortOrderState","first","other","filter","c","serverMode","sortBy","disableSortOrderForColumns","forEach","slotted","el","shadowRoot","querySelector","assignedElements","sortChangeEventHandler","event","detail","order","colmun","sortFn","sort","a","b","itemsCount","pageCount","Math","ceil","pageSize","currentPage","GridPagination","INDEX_FIRST_PAGE","index","floor","paginationChangeEventHandler","onPaginationChange","paginationChangeEventHandlerOutside","target","id","onRowSelection","wcsGridSelectionChange","emit","selectAllRows","getRowsForCurrentPage","allRowsAreSelected","wcsGridAllSelectionChange","renderSelectionColumn","h","checked","onClick","onWcsChange","getCellContent","cell","totalColumnCount","render","Host","class","name","loading","colSpan","_a","renderRow","hidden","customCells","rowIdPath","part"],"sources":["./src/components/grid/grid-interface.ts","./node_modules/uuid/dist/esm-browser/rng.js","./node_modules/uuid/dist/esm-browser/regex.js","./node_modules/uuid/dist/esm-browser/validate.js","./node_modules/uuid/dist/esm-browser/stringify.js","./node_modules/uuid/dist/esm-browser/v4.js","./src/components/grid/grid.scss?tag=wcs-grid&encapsulation=shadow","./src/components/grid/grid.tsx"],"sourcesContent":["import { VNode } from '@stencil/core';\n\nexport type WcsGridSelectionConfig = 'none' | 'single' | 'multiple';\n\nexport type WcsSortFn = (a: any, b: any, column: HTMLWcsGridColumnElement) => -1 | 0 | 1;\n\nexport type WcsCellFormatter = (_h: HyperFunc<VNode>, column: HTMLWcsGridColumnElement, rowData: WcsGridRowData) => HTMLElement | HTMLElement[];\n\nexport interface WcsGridColumnSortChangeEventDetails {\n    sortFn: WcsSortFn;\n    order: WcsSortOrder;\n    column: HTMLWcsGridColumnElement;\n}\n\nexport interface WcsGridRowSelectedEventDetails {\n    row: WcsGridRowData;\n}\n\nexport interface WcsGridAllRowSelectedEventDetails {\n    rows: WcsGridRowData[];\n}\n\nexport type WcsGridPaginationConfig = {\n    currentPage: number;\n    pageSize: number;\n    itemsCount: number;\n    pageCount: number;\n};\n\nexport interface WcsGridPaginationChangeEventDetails {\n    pagination: WcsGridPaginationConfig;\n}\n\nexport type WcsSortOrder = 'asc' | 'desc' | 'none';\n\nexport function getSortOrderInteger(sortOrder: WcsSortOrder) {\n    switch (sortOrder) {\n        case 'asc':\n            return 1;\n        case 'desc':\n            return -1;\n        case 'none':\n            break;\n    }\n}\n\nexport interface WcsGridRow {\n    uuid: string;\n    page?: number;\n    selected?: boolean;\n    data?: any;\n    cells?: WcsGridCell[];\n}\n\nexport interface WcsGridCell {\n    content: string | void;\n    column: HTMLWcsGridColumnElement;\n    formatter: (_h: HyperFunc<VNode>, column: HTMLWcsGridColumnElement, rowData: WcsGridRowData) => HTMLElement | HTMLElement[];\n}\n\nexport interface WcsGridRowData {\n    page: number;\n    selected: boolean;\n    data: any;\n}\n\nexport interface HyperFunc<T> {\n    (tag: any): T;\n}\n\nexport interface HyperFunc<T> {\n    (tag: any, data: any): T;\n}\n\nexport interface HyperFunc<T> {\n    (tag: any, text: string): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, children: (T | undefined | null)[]): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, data: any, text: string): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, data: any, children: (T | undefined | null)[]): T;\n}\n\nexport interface HyperFunc<T> {\n    (sel: any, data: any, children: T): T;\n}\n","// Unique ID creation requires a high quality random # generator. In the browser we therefore\n// require the crypto API and do not support built-in fallback to lower quality random number\n// generators (like Math.random()).\nvar getRandomValues;\nvar rnds8 = new Uint8Array(16);\nexport default function rng() {\n  // lazy load so that environments that need to polyfill have a chance to do so\n  if (!getRandomValues) {\n    // getRandomValues needs to be invoked in a context where \"this\" is a Crypto implementation. Also,\n    // find the complete implementation of crypto (msCrypto) on IE11.\n    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);\n\n    if (!getRandomValues) {\n      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n    }\n  }\n\n  return getRandomValues(rnds8);\n}","export default /^(?:[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;","import REGEX from './regex.js';\n\nfunction validate(uuid) {\n  return typeof uuid === 'string' && REGEX.test(uuid);\n}\n\nexport default validate;","import validate from './validate.js';\n/**\n * Convert array of 16 byte values to UUID string format of the form:\n * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX\n */\n\nvar byteToHex = [];\n\nfor (var i = 0; i < 256; ++i) {\n  byteToHex.push((i + 0x100).toString(16).substr(1));\n}\n\nfunction stringify(arr) {\n  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n  // Note: Be careful editing this code!  It's been tuned for performance\n  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434\n  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one\n  // of the following:\n  // - One or more input array values don't map to a hex octet (leading to\n  // \"undefined\" in the uuid)\n  // - Invalid input values for the RFC `version` or `variant` fields\n\n  if (!validate(uuid)) {\n    throw TypeError('Stringified UUID is invalid');\n  }\n\n  return uuid;\n}\n\nexport default stringify;","import rng from './rng.js';\nimport stringify from './stringify.js';\n\nfunction v4(options, buf, offset) {\n  options = options || {};\n  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`\n\n  rnds[6] = rnds[6] & 0x0f | 0x40;\n  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided\n\n  if (buf) {\n    offset = offset || 0;\n\n    for (var i = 0; i < 16; ++i) {\n      buf[offset + i] = rnds[i];\n    }\n\n    return buf;\n  }\n\n  return stringify(rnds);\n}\n\nexport default v4;",":host {\n    display: block;\n    --wcs-grid-highlight-color: var(--wcs-light);\n\n    th {\n        background-color: var(--wcs-light);\n    }\n\n    th:not(:first-child) {\n        border-left: solid 1px var(--wcs-text-light);\n    }\n\n    // Remove the border for the first column\n    ::slotted([slot=grid-column]:first-child) {\n        --wcs-grid-column-border-left: none;\n    }\n\n    table {\n        width: 100%;\n        border-spacing: 0;\n    }\n\n    td {\n        color: var(--wcs-gray-light);\n        margin: 0;\n        padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n    }\n\n    tr:not(:last-child) td {\n        border-bottom: solid 1px var(--wcs-text-light);\n    }\n\n    .wcs-grid-selection-column {\n        padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);\n        width: 40px;\n    }\n\n    tr.selected {\n        background-color: var(--wcs-grid-highlight-color);\n    }\n\n    .loading {\n        text-align: center;\n    }\n}\n\n// If the grid displays a selection column, we set the border on the\n// first data column (which has been disabled in :host)\n:host([selection]) {\n    ::slotted([slot=grid-column]:first-child) {\n        --wcs-grid-column-border-left: solid 1px var(--wcs-text-light) !important;\n    }\n}\n","import {\n    Component,\n    ComponentDidLoad,\n    ComponentInterface,\n    Element,\n    Event,\n    EventEmitter,\n    forceUpdate,\n    h,\n    Host,\n    Listen,\n    Prop,\n    State,\n    VNode,\n    Watch\n} from '@stencil/core';\nimport {\n    getSortOrderInteger,\n    HyperFunc,\n    WcsGridAllRowSelectedEventDetails,\n    WcsGridCell,\n    WcsGridColumnSortChangeEventDetails,\n    WcsGridPaginationChangeEventDetails,\n    WcsGridRow,\n    WcsGridRowData,\n    WcsGridRowSelectedEventDetails,\n    WcsGridSelectionConfig\n} from './grid-interface';\nimport _ from 'lodash';\nimport { v4 as uuid } from 'uuid';\nimport { GridPagination } from '../grid-pagination/grid-pagination';\n\n@Component({\n    tag: 'wcs-grid',\n    styleUrl: 'grid.scss',\n    shadow: true\n})\nexport class Grid implements ComponentInterface, ComponentDidLoad {\n    @Element() private el!: HTMLWcsGridElement;\n    /**\n     * True to manage sort and pagination with a backend server, default: false\n     */\n    @Prop() serverMode: boolean;\n    @Prop() data: any[];\n    /**\n     * Flag to display spinner during data loading\n     */\n    @Prop() loading: boolean;\n    /**\n     * Used to manage grid's row selection\n     */\n    @Prop() selectionConfig: WcsGridSelectionConfig = 'none';\n    /**\n     * Set the selected items\n     */\n    @Prop() selectedItems: any | any[] = [];\n    @Prop() wcsGridPaginationId: string;\n    /**\n     * Name of the object's key that will be used to display the cells whose keyValue attribute matches to the\n     * object's value for this key.\n     */\n    @Prop() rowIdPath: string;\n    @State() private columns: HTMLWcsGridColumnElement[];\n    @State() private paginationEl: HTMLWcsGridPaginationElement;\n    /**\n     * Rows to display, contains user data and meta data\n     */\n    @State() private rows: WcsGridRow[] = [];\n    /**\n     * Event emitted when a row is selected or unselected\n     */\n    @Event() wcsGridSelectionChange!: EventEmitter<WcsGridRowSelectedEventDetails>;\n    /**\n     * Event emitted when all rows are selected or unselected\n     */\n    @Event() wcsGridAllSelectionChange!: EventEmitter<WcsGridAllRowSelectedEventDetails>;\n\n    @Watch('data')\n    onDataChange(newValue: any[]): void {\n        this.updateGridRows(newValue);\n        this.refreshSort(false);\n    }\n\n    @Watch('selectedItems')\n    onSelectedItemsPropertyChange(newValue: any | any[]) {\n        this.updateSelectionWithValues(newValue);\n    }\n\n    @Listen('wcsHiddenChange')\n    onHiddenColumnChange(): void {\n        // We use forceUpdate because the fact of hiding a column or not does not modify the internal structure of the grid (WcsGridRow).\n        // Hide a column only impacts the way it is rendered but the grid-column remains in the dom and in our internal model.\n        forceUpdate(this);\n    }\n\n    private updateSelectionWithValues(values: any | any[]) {\n        if (this.selectionConfig === 'single') {\n            this.rows.map(r => r.selected = false);\n            for (const row of this.rows) {\n                if (_.isEqual(row.data, values)) {\n                    row.selected = true;\n                    break; // only one line can be selected\n                }\n            }\n        } else if (this.selectionConfig === 'multiple') {\n            this.rows.map(r => r.selected = false);\n            for (const row of this.rows) {\n                if (values.find(x => _.isEqual(x, row.data))) {\n                    row.selected = true;\n                }\n            }\n        }\n        this.rows = _.cloneDeep(this.rows);\n    }\n\n    private wcsGridRowToWcsGridRowData(row: WcsGridRow): WcsGridRowData {\n        return {selected: row.selected, page: row.page, data: row.data};\n    }\n\n    private updateGridRows(data: any[]): void {\n        const rows: WcsGridRow[] = [];\n        if (data && this.columns) {\n            for (let i = 0; i < data.length; i++) {\n                const row: WcsGridRow = {\n                    uuid: uuid(),\n                    data: data[i],\n                    selected: false,\n                    cells: []\n                };\n                for (const column of this.columns) {\n                    row.cells.push({\n                        content: _.get(data[i], column.path),\n                        column,\n                        formatter: column.formatter\n                    })\n                }\n                rows.push(row);\n            }\n            this.rows = rows;\n            this.updatePageIndex();\n        }\n    }\n\n    componentDidLoad(): void {\n        this.columns = this.getGridColumnsFromTemplate();\n        this.paginationEl = this.wcsGridPaginationId\n            ? document.getElementById(this.wcsGridPaginationId) as HTMLWcsGridPaginationElement\n            : this.getGridPaginationsFromTemplate()[0];\n        this.updateGridRows(this.data);\n        if (this.selectedItems) {\n            this.updateSelectionWithValues(this.selectedItems);\n        }\n        this.refreshSort(true);\n    }\n\n    /**\n     * Handle existing column's filters (defined before the grid is instantiated)\n     * @private\n     */\n    private refreshSort(refreshOthersColmumnsSortOrderState: boolean) {\n        //fixme: why the column property can be null or undefined?\n        if (this.columns) {\n            const [first, ...other] = this.columns.filter(c => c.sortOrder !== 'none');\n            if (first && !this.serverMode) {\n                this.sortBy(first);\n            }\n            refreshOthersColmumnsSortOrderState && this.disableSortOrderForColumns(other);\n        }\n    }\n\n    private disableSortOrderForColumns(columns: HTMLWcsGridColumnElement[] | null | undefined): void {\n        columns?.forEach(c => c.sortOrder = 'none');\n    }\n\n    private getGridColumnsFromTemplate(): HTMLWcsGridColumnElement[] {\n        const slotted = this.el.shadowRoot.querySelector('slot[name=\"grid-column\"]') as HTMLSlotElement;\n        return slotted.assignedElements() as any as HTMLWcsGridColumnElement[];\n    }\n\n    private getGridPaginationsFromTemplate(): HTMLWcsGridPaginationElement[] {\n        const slotted = this.el.shadowRoot.querySelector('slot[name=\"grid-pagination\"]') as HTMLSlotElement;\n        return slotted.assignedElements() as any as HTMLWcsGridPaginationElement[];\n    }\n\n    @Listen('wcsSortChange')\n    sortChangeEventHandler(event: CustomEvent<WcsGridColumnSortChangeEventDetails>): void {\n        if (event.detail.order === 'none') return;\n        // We keep only one active sort column\n        this.disableSortOrderForColumns(this.columns.filter(c => c !== event.detail.column));\n        if (this.serverMode) return;\n        this.sortBy(event.detail.column);\n        this.updatePageIndex();\n    }\n\n    /**\n     * Sorts the grid rows according to the given column's configuration\n     * @param colmun Column from which to extract the sorting configuration\n     * @private\n     */\n    private sortBy(colmun: HTMLWcsGridColumnElement) {\n        if (colmun.sortFn) {\n            this.rows = _.cloneDeep(this.rows)\n                .sort((a: any, b: any) => colmun.sortFn(a.data, b.data, colmun) * getSortOrderInteger(colmun.sortOrder));\n        } else {\n            this.rows = _.cloneDeep(this.rows)\n                .sort((a: any, b: any) => {\n                    const path = colmun.path;\n                    return ((_.get(a.data, path) < _.get(b.data, path)) ? -1 : (_.get(a.data, path) > _.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);\n                });\n        }\n    }\n\n    /**\n     * Update the page's number of all rows\n     */\n    private updatePageIndex(): void {\n        if (!this.serverMode && this.paginationEl) {\n            this.paginationEl.itemsCount = this.data.length;\n            this.paginationEl.pageCount = Math.ceil(this.data.length / this.paginationEl.pageSize);\n\n            if (this.paginationEl.pageCount <= 1) {\n                this.paginationEl.currentPage = GridPagination.INDEX_FIRST_PAGE;\n            } else if (this.paginationEl.pageCount > 0 && this.paginationEl.currentPage + 1 > this.paginationEl.pageCount) {\n                this.paginationEl.currentPage = this.paginationEl.pageCount - 1;\n            }\n\n            const rows = _.cloneDeep(this.rows);\n            rows.forEach((row: WcsGridRow, index: number) =>\n                row.page = Math.floor(index / this.paginationEl.pageSize)\n            );\n            this.rows = [...rows];\n        }\n    }\n\n    @Listen('wcsGridPaginationChange')\n    paginationChangeEventHandler(): void {\n        this.onPaginationChange();\n    }\n\n    @Listen('wcsGridPaginationChange', {target: 'window'})\n    paginationChangeEventHandlerOutside(event: CustomEvent<WcsGridPaginationChangeEventDetails>): void {\n        if (this.wcsGridPaginationId && this.wcsGridPaginationId === (event.target as HTMLElement).id) {\n            this.onPaginationChange();\n        }\n    }\n\n    private onPaginationChange(): void {\n        if (this.serverMode) return;\n        this.updatePageIndex();\n    }\n\n    private onRowSelection(row: WcsGridRow): void {\n        if (this.selectionConfig === 'single') {\n            this.rows.filter(r => r.uuid !== row.uuid).map(r => r.selected = false);\n        }\n        row.selected = !row.selected;\n        if (this.selectionConfig !== 'single' || row.selected) {\n            this.wcsGridSelectionChange.emit({row: this.wcsGridRowToWcsGridRowData(row)});\n        }\n        this.rows = _.cloneDeep(this.rows);\n    }\n\n    private selectAllRows(): void {\n        const rows = this.getRowsForCurrentPage();\n        const selected = !this.allRowsAreSelected();\n        rows.map(r => r.selected = selected);\n        this.wcsGridAllSelectionChange.emit({rows: selected ? rows.map(row => this.wcsGridRowToWcsGridRowData(row)) : []});\n        this.rows = _.cloneDeep(this.rows);\n    }\n\n    private allRowsAreSelected(): boolean {\n        const rows = this.getRowsForCurrentPage();\n        return rows.length > 0 && rows.filter(row => row.selected).length === rows.length;\n    }\n\n    private getRowsForCurrentPage(): WcsGridRow[] {\n        if (this.paginationEl) {\n            return this.rows.filter(row => row.page === this.paginationEl.currentPage);\n        }\n        return this.rows;\n    }\n\n    renderSelectionColumn(row: WcsGridRow): any {\n        switch (this.selectionConfig) {\n            case 'none':\n                return;\n            case 'single':\n                return <td>\n                    <wcs-radio checked={row.selected} onClick={this.onRowSelection.bind(this, row)}/>\n                </td>;\n            case 'multiple':\n                return <td>\n                    <wcs-checkbox checked={row.selected} onWcsChange={this.onRowSelection.bind(this, row)}/>\n                </td>;\n        }\n    }\n\n    private getCellContent(row: WcsGridRow, cell: WcsGridCell): HTMLElement | HTMLElement[] | string | void {\n        if (cell.formatter) {\n            return cell.formatter(\n                (h as unknown) as HyperFunc<VNode>,\n                cell.column,\n                this.wcsGridRowToWcsGridRowData(row)\n            );\n        }\n        return cell.content;\n    }\n\n    private totalColumnCount() {\n        if (!this.columns) {\n            return 0;\n        }\n        return this.columns.length + (this.selectionConfig === 'none' ? 0 : 1);\n    }\n\n    render(): any {\n        return (\n            <Host>\n                {\n                    <table>\n                        <thead>\n                        {\n                            this.selectionConfig === 'none' ? ''\n                                : <th class=\"wcs-grid-selection-column\">\n                                    {\n                                        this.selectionConfig === 'single' ? '' :\n                                            <wcs-checkbox checked={this.allRowsAreSelected()}\n                                                          onWcsChange={this.selectAllRows.bind(this)}/>\n                                    }\n                                </th>\n                        }\n                        <slot name=\"grid-column\"></slot>\n                        </thead>\n                        <tbody>\n                        {\n                            this.loading\n                                ? <tr>\n                                    <td colSpan={this.totalColumnCount()} class=\"loading\">\n                                        <wcs-spinner></wcs-spinner>\n                                    </td>\n                                </tr>\n                                : this.rows\n                                    ?.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage)\n                                    .map(row =>\n                                        this.renderRow(row)\n                                    )\n                        }\n                        </tbody>\n                    </table>\n                }\n                <slot name=\"grid-pagination\"></slot>\n            </Host>\n        );\n    }\n\n    private renderRow(row: WcsGridRow) {\n        return <tr class={row.selected ? 'selected' : ''}>\n            {this.renderSelectionColumn(row)}\n            {row.cells?.map(cell => {\n                    if (cell.column.hidden) {\n                        return;\n                    }\n                    return cell.column.customCells\n                        ? (<td>\n                            <slot name={cell.column.id + '-' + row.data[this.rowIdPath]}/>\n                        </td>)\n                        : (<td part={cell.column.path + '-column'}>{this.getCellContent(row, cell)}</td>)\n                }\n            )}\n        </tr>;\n    }\n}\n\n/**\n * Pour resize le tableau\n * https://www.brainbell.com/javascript/making-resizable-table-js.htmls\n *\n */\n"],"mappings":"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"}

package/dist/wcs/p-f386bb8b.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as e,H as i,g as o}from"./p-a2df3a49.js";import{r as s}from"./p-1a170e8d.js";const n=':host{display:block;position:relative;height:75px;border-bottom:solid 1px var(--wcs-text-light)}:host .container{padding:0 var(--wcs-padding);height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}: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:400;font-size:1.5rem;line-height:1.25;color:var(--wcs-gray)}:host .menu-bar{display:none}:host ::slotted(a){padding-top:calc(1.5 * var(--wcs-base-margin));padding-bottom:calc(1.5 * var(--wcs-base-margin));padding-left:calc(3 * var(--wcs-base-margin));display:flex;align-items:center;height:100%;font-size:16px;cursor:pointer;font-weight:500;color:var(--wcs-gray);text-decoration:none}:host ::slotted(a):after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:"\\f107";line-height:1;box-sizing:border-box}:host ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}:host #mobile-menu-icon{height:24px;padding-left:calc(2 * var(--wcs-base-margin));margin-left:var(--wcs-base-margin);border-left:solid 1px var(--wcs-text-light)}:host #mobile-menu-icon:after{font-family:icons;font-size:24px;cursor:pointer;content:"\\f198";line-height:1;box-sizing:border-box}:host #mobile-menu-icon[data-mobile-open]:after{content:"\\f129"}:host .mobile-overlay{display:none}:host .mobile-overlay[data-mobile-open]{padding-top:calc(2 * var(--wcs-base-margin));padding-bottom:calc(2 * var(--wcs-base-margin));position:relative;top:0;left:0;right:0;display:block;z-index:9999;background-color:var(--wcs-white)}@media screen and (min-width: 576px){:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width)}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:50px}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:40px}:host .menu-bar ::slotted(a:focus-visible){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}@supports not selector(::slotted(a:focus-visible)){:host .menu-bar ::slotted(a:focus-within){outline:2px dashed var(--wcs-primary);outline-offset:0.1rem;border-radius:2px}}:host #mobile-menu-icon{display:none}:host .mobile-overlay{display:none !important}:host ::slotted(a){padding-top:unset;padding-bottom:unset;padding-left:unset}}';const a="WCS-COM-NAV-SUBMENU";const l=class{constructor(e){t(this,e);this.hasAlreadyRegisteredClickHandlerOnSlottedLink=false;this.appName=undefined;this.mobileMenuOpen=false;this.currentActiveSizing=undefined}mobileMenuIconClick(){this.mobileMenuOpen=!this.mobileMenuOpen}disconnectedCallback(){var t;(t=this.resizeObserver)===null||t===void 0?void 0:t.disconnect()}componentWillLoad(){this.resizeObserver=new ResizeObserver((t=>{const e=t[0].contentRect;const i=e.right-e.width;const o=e.left;if(e.width<576-(o+i)){this.currentActiveSizing="mobile"}else{this.currentActiveSizing="desktop"}}));this.resizeObserver.observe(document.body);const t=this.el.querySelectorAll(":scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])");s(t,a)}componentDidRender(){this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag()}registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag(){if(this.hasAlreadyRegisteredClickHandlerOnSlottedLink)return;const t=this.el.shadowRoot.querySelector("slot:not([name])");if(t){this.hasAlreadyRegisteredClickHandlerOnSlottedLink=true;t.assignedElements().filter((t=>t.tagName==="A")).forEach((t=>{t.addEventListener("click",(t=>{this.mobileMenuOpen=false}))}))}}onClickOnFinalAction(){this.mobileMenuOpen=false}onClickOnFinalActionCat(){this.mobileMenuOpen=false}render(){return e(i,null,e("div",{class:"container"},e("div",{class:"container-left"},e("div",{class:"app-name"},this.appName,e("slot",{name:"app-name"})),e("div",{class:"menu-bar"},this.currentActiveSizing==="desktop"?e("slot",null):null)),e("div",{class:"container-right"},e("slot",{name:"actions"}),e("span",{id:"mobile-menu-icon","data-mobile-open":this.mobileMenuOpen,onClick:()=>this.mobileMenuIconClick()}))),e("div",{class:"mobile-overlay","data-mobile-open":this.mobileMenuOpen},this.currentActiveSizing==="mobile"?e("slot",null):null))}get el(){return o(this)}};l.style=n;export{l as wcs_com_nav};
-//# sourceMappingURL=p-f386bb8b.entry.js.map

package/dist/wcs/p-f386bb8b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["comNavCss","WCS_COM_NAV_SUBMENU_TAG_NAME","ComNav","this","hasAlreadyRegisteredClickHandlerOnSlottedLink","mobileMenuIconClick","mobileMenuOpen","disconnectedCallback","_a","resizeObserver","disconnect","componentWillLoad","ResizeObserver","entry","cr","contentRect","paddingRight","right","width","paddingLeft","left","currentActiveSizing","observe","document","body","slottedNavigableItems","el","querySelectorAll","registerCloseHandlerForFocusOutEventOn","componentDidRender","registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag","mainSlot","shadowRoot","querySelector","assignedElements","filter","e","tagName","forEach","a","addEventListener","_","onClickOnFinalAction","onClickOnFinalActionCat","render","h","Host","class","appName","name","id","onClick"],"sources":["./src/components/com-nav/com-nav.scss?tag=wcs-com-nav&encapsulation=shadow","./src/components/com-nav/com-nav.tsx"],"sourcesContent":["@import '../../style/focus-outline.scss';\n\n:host {\n    display: block;\n    position: relative;\n    height: 75px;\n    border-bottom: solid 1px var(--wcs-text-light);\n\n    .container {\n        padding: 0 var(--wcs-padding);\n        height: 100%;\n        display: flex;\n        align-items: center;\n        flex-direction: row;\n        justify-content: space-between;\n    }\n\n    .container-left {\n        display: flex;\n        height: 100%;\n        align-items: center;\n        flex-direction: row;\n    }\n\n    .container-right {\n        display: flex;\n        align-items: center;\n    }\n\n    .app-name {\n        font-weight: 400;\n        font-size: 1.5rem;\n        line-height: 1.25;\n        color: var(--wcs-gray);\n    }\n\n    .menu-bar {\n        display: none;\n    }\n\n    ::slotted(a) {\n        padding-top: calc(1.5 * var(--wcs-base-margin));\n        padding-bottom: calc(1.5 * var(--wcs-base-margin));\n        padding-left: calc(3 * var(--wcs-base-margin));\n        display: flex;\n        align-items: center;\n        height: 100%;\n        font-size: 16px;\n        cursor: pointer;\n        font-weight: 500;\n        color: var(--wcs-gray);\n        text-decoration: none;\n    }\n\n    ::slotted(a):after {\n        font-family: icons;\n        padding-left: var(--wcs-base-margin);\n        font-size: 0.6rem;\n        content: \"\\f107\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n\n    ::slotted(a:focus-visible) {\n        @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n    }\n\n    @supports not selector(::slotted(a:focus-visible)) {\n        ::slotted(a:focus-within) {\n            @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n        }\n    }\n\n    #mobile-menu-icon {\n        height: 24px;\n        padding-left: calc(2 * var(--wcs-base-margin));\n        margin-left: var(--wcs-base-margin);\n        border-left: solid 1px var(--wcs-text-light);\n    }\n\n    #mobile-menu-icon:after {\n        font-family: icons;\n        font-size: 24px;\n        cursor: pointer;\n        content: \"\\f198\";\n        line-height: 1;\n        box-sizing: border-box;\n    }\n        #mobile-menu-icon[data-mobile-open]:after {\n            content: \"\\f129\";\n        }\n    .mobile-overlay {\n        display: none;\n    }\n\n    .mobile-overlay[data-mobile-open] {\n        padding-top: calc(2 * var(--wcs-base-margin));\n        padding-bottom: calc(2 * var(--wcs-base-margin));\n        position: relative;\n        top: 0;\n        left: 0;\n        right: 0;\n        display: block;\n        z-index: 9999;\n        background-color: var(--wcs-white);\n    }\n}\n\n@media screen and (min-width: 576px) {\n    :host {\n        .container {\n            margin: 0 auto;\n            max-width: var(--wcs-com-content-max-width);\n        }\n\n        .menu-bar {\n            display: flex;\n            align-items: center;\n            height: 100%;\n            margin-left: 50px;\n\n            ::slotted(*:not(:first-child)) {\n                margin-left: 40px;\n            }\n\n            ::slotted(a:focus-visible) {\n                @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n            }\n\n            @supports not selector(::slotted(a:focus-visible)) {\n                ::slotted(a:focus-within) {\n                    @include focus-outline(var(--wcs-primary), 2px, 0.1rem);\n                }\n            }\n        }\n\n        #mobile-menu-icon {\n            display: none;\n        }\n\n        .mobile-overlay {\n            display: none !important;\n        }\n\n        ::slotted(a) {\n            padding-top: unset;\n            padding-bottom: unset;\n            padding-left: unset;\n        }\n    }\n}\n","import {Component, Host, h, Prop, Element, ComponentInterface, State, Listen} from '@stencil/core';\nimport {registerCloseHandlerForFocusOutEventOn} from \"./com-nav-utils\";\n\nconst WCS_COM_NAV_SUBMENU_TAG_NAME = 'WCS-COM-NAV-SUBMENU';\n\n@Component({\n    tag: 'wcs-com-nav',\n    styleUrl: 'com-nav.scss',\n    shadow: true,\n})\nexport class ComNav implements ComponentInterface {\n    @Element() private el!: HTMLWcsComNavElement;\n\n    /** Name of the application to be displayed in the menu bar */\n    @Prop() appName: string;\n\n    @State() private mobileMenuOpen: boolean = false;\n    @State() private currentActiveSizing: 'desktop' | 'mobile';\n    private resizeObserver: ResizeObserver;\n    private hasAlreadyRegisteredClickHandlerOnSlottedLink: boolean = false;\n\n    private mobileMenuIconClick() {\n        this.mobileMenuOpen = !this.mobileMenuOpen;\n    }\n\n    disconnectedCallback() {\n        this.resizeObserver?.disconnect();\n    }\n\n    componentWillLoad(): Promise<void> | void {\n        this.resizeObserver = new ResizeObserver(entry => {\n            const cr = entry[0].contentRect;\n            const paddingRight = cr.right - cr.width;\n            const paddingLeft = cr.left;\n            if (cr.width < 576 - (paddingLeft + paddingRight)) {\n                this.currentActiveSizing = 'mobile';\n            } else {\n                this.currentActiveSizing = 'desktop';\n            }\n        });\n        this.resizeObserver.observe(document.body);\n\n        const slottedNavigableItems = this.el.querySelectorAll(':scope > wcs-com-nav-submenu:not([slot]), :scope > a:not([slot])');\n        registerCloseHandlerForFocusOutEventOn<HTMLWcsComNavSubmenuElement>(slottedNavigableItems, WCS_COM_NAV_SUBMENU_TAG_NAME);\n    }\n\n    componentDidRender() {\n        this.registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag();\n    }\n\n\n    private registerHandlerToCloseMobileMenuOnClickOnSlottedLinkTag() {\n        if (this.hasAlreadyRegisteredClickHandlerOnSlottedLink) return;\n\n        const mainSlot = this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n        if (mainSlot) {\n            this.hasAlreadyRegisteredClickHandlerOnSlottedLink = true;\n            // If the user click on a `a` tag, we close the mobile menu overlay.\n            mainSlot.assignedElements().filter(e => e.tagName === 'A').forEach(a => {\n                    a.addEventListener('click', _ => {\n                        this.mobileMenuOpen = false;\n                    })\n                }\n            );\n\n        }\n    }\n\n    //region Handlers for mobile menu overlay visibility\n    //\n    // In mobile mode, we have only one global drawer to display the menu, that why we have to listen the clicks events\n    // in the root component (this component). In desktop mode, all submenus and categories manage their drawer its\n    // opening state.\n    //\n    // We listen to the click events fired by the sebmenu component and we close the mobile menu.\n    // In desktop mode, the submenu itself manages the closing of the menu.\n    @Listen('wcsClickOnFinalAction')\n    onClickOnFinalAction() {\n        this.mobileMenuOpen = false;\n    }\n\n    // We also listen click events on the category menu items, to close the mobile menu.\n    // In desktop mode, the category itself manages the closing of the menu.\n    @Listen('wcsCategoryItemClicked')\n    onClickOnFinalActionCat() {\n        this.mobileMenuOpen = false;\n    }\n\n    //endregion\n\n    render() {\n        return (\n            <Host>\n                <div class=\"container\">\n                    <div class=\"container-left\">\n                        <div class=\"app-name\">{this.appName}\n                            <slot name=\"app-name\"/>\n                        </div>\n                        <div class=\"menu-bar\">\n                            {this.currentActiveSizing === 'desktop' ? <slot/> : null}\n                        </div>\n                    </div>\n                    <div class=\"container-right\">\n                        <slot name=\"actions\"/>\n                        <span id=\"mobile-menu-icon\" data-mobile-open={this.mobileMenuOpen}\n                              onClick={() => this.mobileMenuIconClick()}></span>\n                    </div>\n                </div>\n                <div class=\"mobile-overlay\" data-mobile-open={this.mobileMenuOpen}>\n                    {this.currentActiveSizing === 'mobile' ? <slot/> : null}\n                </div>\n            </Host>\n        );\n    }\n\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,++ECGlB,MAAMC,EAA+B,sB,MAOxBC,EAAM,M,yBASPC,KAAAC,8CAAyD,M,2CAHtB,M,mCAKnCC,sBACJF,KAAKG,gBAAkBH,KAAKG,c,CAGhCC,uB,OACIC,EAAAL,KAAKM,kBAAc,MAAAD,SAAA,SAAAA,EAAEE,Y,CAGzBC,oBACIR,KAAKM,eAAiB,IAAIG,gBAAeC,IACrC,MAAMC,EAAKD,EAAM,GAAGE,YACpB,MAAMC,EAAeF,EAAGG,MAAQH,EAAGI,MACnC,MAAMC,EAAcL,EAAGM,KACvB,GAAIN,EAAGI,MAAQ,KAAOC,EAAcH,GAAe,CAC/Cb,KAAKkB,oBAAsB,Q,KACxB,CACHlB,KAAKkB,oBAAsB,S,KAGnClB,KAAKM,eAAea,QAAQC,SAASC,MAErC,MAAMC,EAAwBtB,KAAKuB,GAAGC,iBAAiB,oEACvDC,EAAoEH,EAAuBxB,E,CAG/F4B,qBACI1B,KAAK2B,yD,CAIDA,0DACJ,GAAI3B,KAAKC,8CAA+C,OAExD,MAAM2B,EAAW5B,KAAKuB,GAAGM,WAAWC,cAAc,oBAClD,GAAIF,EAAU,CACV5B,KAAKC,8CAAgD,KAErD2B,EAASG,mBAAmBC,QAAOC,GAAKA,EAAEC,UAAY,MAAKC,SAAQC,IAC3DA,EAAEC,iBAAiB,SAASC,IACxBtC,KAAKG,eAAiB,KAAK,GAC7B,G,EAgBlBoC,uBACIvC,KAAKG,eAAiB,K,CAM1BqC,0BACIxC,KAAKG,eAAiB,K,CAK1BsC,SACI,OACIC,EAACC,EAAI,KACDD,EAAA,OAAKE,MAAM,aACPF,EAAA,OAAKE,MAAM,kBACPF,EAAA,OAAKE,MAAM,YAAY5C,KAAK6C,QACxBH,EAAA,QAAMI,KAAK,cAEfJ,EAAA,OAAKE,MAAM,YACN5C,KAAKkB,sBAAwB,UAAYwB,EAAA,aAAU,OAG5DA,EAAA,OAAKE,MAAM,mBACPF,EAAA,QAAMI,KAAK,YACXJ,EAAA,QAAMK,GAAG,mBAAkB,mBAAmB/C,KAAKG,eAC7C6C,QAAS,IAAMhD,KAAKE,0BAGlCwC,EAAA,OAAKE,MAAM,iBAAgB,mBAAmB5C,KAAKG,gBAC9CH,KAAKkB,sBAAwB,SAAWwB,EAAA,aAAU,M"}