wcs-core 2.5.4 → 2.6.0

package/dist/cjs/wcs-galactic.cjs.entry.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const galacticCss = ":host{display:block;background-color:var(--wcs-gray)}.container{height:32px;align-items:center;justify-content:space-between;color:var(--wcs-white);font-size:14px;display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}.container #sncf-logo{height:32px;margin-right:20px}.container .container-left{display:flex;align-items:center}";
+
+let Galactic = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.show = false;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "container" }, index.h("div", { class: "container-left" }, index.h("img", { src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "Logo SNCF" }), index.h("span", null, this.text)), index.h("div", { class: "menu" }, index.h("slot", null)))));
+  }
+  get el() { return index.getElement(this); }
+};
+const SNCF_BASE64_SVG_LOGO = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVy' +
+  'c2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5' +
+  'rIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHX0dSQURJRU5UIiBncmFkaW' +
+  'VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIxNiIgeDI9IjMxLjk1OTMiIHkyPSIxNiI+DQoJCTxzdG9wICBvZmZzZXQ9IjAiIHN0e' +
+  'WxlPSJzdG9wLWNvbG9yOiM4MzJGNzAiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC4yNDcyIiBzdHlsZT0ic3RvcC1jb2xvcjojQUMyODdDIi8+DQoJCTxz' +
+  'dG9wICBvZmZzZXQ9IjAuODE0NiIgc3R5bGU9InN0b3AtY29sb3I6I0RGMjUzMCIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2x' +
+  'vcjojREYyNTMwIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cGF0aCBmaWxsPSJ1cmwoI1NWR19HUkFESUVOVCkiIGQ9Ik0wLjYsNy43QzAuMiw3Lj' +
+  'csMCw3LjgsMCw4LjJ2MTUuN2MwLDAuMywwLjIsMC41LDAuNSwwLjVoMjhjMC4zLDAsMC41LDAsMC42LTAuNGMwLDAsMi44LTguOSwyLjktOSBjMC4xL' +
+  'TAuMywwLTAuNS0wLjMtMC43QzIyLjYsOC41LDguOSw3LjYsMi44LDcuNkMxLjksNy42LDEuMSw3LjYsMC42LDcuN3oiLz4NCgk8cGF0aCBmaWxsPSIj' +
+  'RkZGRkZGIiBkPSJNNi40LDE3LjdjLTEtMC41LTEuNy0wLjgtMS42LTEuM0M1LDE1LjgsNi4xLDE1LjYsNywxNS42YzAuNSwwLDAuOCwwLjEsMS4yLDA' +
+  'uMmwwLjMtMS4xIGMtMC41LTAuMS0wLjgtMC4xLTEuNC0wLjFjLTEuOSwwLTMuNiwwLjUtNCwxLjZjLTAuNSwxLjMsMC45LDIsMi4yLDIuNmMxLDAuNS' +
+  'wxLjgsMC45LDEuNSwxLjVjLTAuMiwwLjUtMC45LDAuNy0yLDAuNyBjLTAuOSwwLTItMC4zLTIuOS0wLjdsLTAuNSwxLjFjMC42LDAuMywyLDAuNywzL' +
+  'jEsMC43YzIuMSwwLDMuNS0wLjUsNC4xLTEuN0M5LjMsMTkuMSw3LjcsMTguMyw2LjQsMTcuN3oiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJN' +
+  'OS4zLDE5LjZDOS4zLDE5LjcsOS4zLDE5LjcsOS4zLDE5LjZjMC4xLDAsMC4xLDAsMC4xLDBjMCwwLDEtMy4yLDEtMy4yYzEuMSwxLjUsMi4xLDMuNSw' +
+  'yLjcsNS42aDEuNyBsMC45LTIuN2MwLDAsMCwwLDAuMSwwYzAsMCwwLDAsMC4xLDBjMC4zLDEuNywxLjksMi44LDQuMywyLjhjMS41LDAsMi45LTAuNC' +
+  'wzLjItMC42bDAuOS0yLjhoMy40bDAuMy0xLjFoLTMuNGwwLjYtMS44aDQuMSBsMC40LTEuMWgtNS43bC0xLjksNi4xYy0wLjQsMC4xLTAuOSwwLjItM' +
+  'S41LDAuMmMtMS4xLDAtMi4xLTAuMy0yLjYtMC45Yy0wLjQtMC41LTAuNS0xLTAuNC0xLjdjMC4yLTEuNiwxLjgtMi42LDMuOC0yLjYgYzAuNCwwLDAu' +
+  'OSwwLDEuMywwLjFsMC40LTEuMmMtMC41LTAuMS0xLjEtMC4xLTEuNy0wLjFjLTEuOCwwLTMuNCwwLjYtNC40LDEuN2MwLDAtMC4xLDAtMC4xLDBjMCw' +
+  'wLTAuMSwwLDAsMGwwLjUtMS42aC0xLjUgTDE0LDE5LjhjLTAuNS0xLjUtMS42LTMuNS0yLjktNS4xSDkuNWwtMS4yLDMuN0M4LjksMTguOCw5LjEsMT' +
+  'kuMiw5LjMsMTkuNnoiLz4NCjwvc3ZnPg0K';
+Galactic.style = galacticCss;
+
+exports.wcs_galactic = Galactic;

package/dist/cjs/wcs-grid-column.cjs.entry.js

@@ -0,0 +1,73 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const GridSortArrow = ({ state }) => (index.h("svg", { style: { marginLeft: 'auto' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" },
+  index.h("style", { type: "text/css" }, `
+            .arrow-group {
+                transform-origin: 50% 51%;
+                transition: transform 175ms ease-in-out;
+            }
+            .arrow{
+                transition: fill 175ms ease-in-out;
+                fill: var(--wcs-text-light);
+            }
+            .asc {
+                transform: scaleY(1) translateY(-6px);
+            }
+            .desc {
+                transform: scaleY(-1) translateY(-6px);
+            }
+            .active {
+                fill: var(--wcs-primary);
+            }
+
+        `),
+  index.h("g", { fill: "none", class: 'asc arrow-group' },
+    index.h("path", { class: (state === 'asc' ? 'active' : '') + ' arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }),
+    index.h("path", { d: "M0 0h24v24H0z", fill: "none" })),
+  index.h("g", { fill: "none", class: 'desc arrow-group' },
+    index.h("path", { class: (state === 'desc' ? 'active' : '') + ' arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }),
+    index.h("path", { d: "M0 0h24v24H0z", fill: "none" }))));
+
+const gridColumnCss = ":host{--wcs-grid-column-border-left:solid 1px var(--wcs-text-light);display:contents}:host th{color:var(--wcs-gray-dark);background-color:var(--wcs-light);border-left:var(--wcs-grid-column-border-left);padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);text-align:left}:host th .grid-column-th-content{display:inline-flex;flex-direction:row}:host th .grid-column-th-content span{user-select:none}:host .pointer{cursor:pointer}:host([sort-order=asc]) img{transform:scaleY(1)}:host([sort-order=desc]) img{transform:scaleY(-1)}:host([sort-order=none]) img{display:none}:host([sort-order=none]) th:hover img{display:inline-block}:host([hidden]){display:none !important}";
+
+let GridColumn = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wcsSortChange = index.createEvent(this, "wcsSortChange", 7);
+    this.wcsHiddenChange = index.createEvent(this, "wcsHiddenChange", 7);
+    this.sort = false;
+    this.sortOrder = 'none';
+    this.customCells = false;
+    this.hidden = false;
+  }
+  parseMyObjectProp(newValue) {
+    this.wcsHiddenChange.emit(newValue);
+  }
+  emitSortConfig() {
+    if (!this.sort)
+      return;
+    this.wcsSortChange.emit({
+      column: this.el,
+      order: this.sortOrder,
+      sortFn: this.sortFn
+    });
+  }
+  render() {
+    return (index.h(index.Host, { onClick: this.onSortClick.bind(this), slot: "grid-column" }, index.h("th", { style: { width: this.width }, class: this.sort ? 'pointer' : '' }, index.h("div", { class: "grid-column-th-content" }, index.h("span", null, this.name), this.sort ? index.h(GridSortArrow, { state: this.sortOrder }) : ''))));
+  }
+  onSortClick() {
+    this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';
+    this.emitSortConfig();
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "hidden": ["parseMyObjectProp"]
+  }; }
+};
+GridColumn.style = gridColumnCss;
+
+exports.wcs_grid_column = GridColumn;

package/dist/cjs/wcs-grid-custom-cell.cjs.entry.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+let GridCustomCell = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { slot: this.columnId + '-' + this.rowId }, index.h("slot", null)));
+  }
+};
+
+exports.wcs_grid_custom_cell = GridCustomCell;

package/dist/cjs/wcs-grid-pagination.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e05c3e1f.js');
+const index = require('./index-3cb9d725.js');
 
 const GridPaginationArrow = ({ active, order, double = false }) => (index.h("svg", { style: { marginLeft: 'auto', cursor: 'pointer' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" },
   index.h("style", { type: "text/css" }, `
@@ -38,15 +38,15 @@ const GridPaginationArrow = ({ active, order, double = false }) => (index.h("svg
 
 const gridPaginationCss = ":host{display:block;border-style:solid none none;border-width:1px;border-color:var(--wcs-text-light)}.container{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;color:var(--wcs-text-medium)}.available-page-sizes{width:auto}.page-management,.page-size,.items-count{display:flex;align-items:center}.pagination-arrow{display:flex}";
 
-const GridPagination = class {
+let GridPagination = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.wcsGridPaginationChange = index.createEvent(this, "wcsGridPaginationChange", 7);
     this.availablePageSizes = [10, 20, 50];
-    this.currentPage = 1;
+    this.currentPage = 0;
     this.pageSize = this.availablePageSizes[0];
     this.itemsCount = 0;
-    this.pageCount = 0;
+    this.pageCount = 1;
   }
   lastPage() {
     this.currentPage = this.pageCount - 1;

package/dist/cjs/wcs-grid.cjs.entry.js

@@ -0,0 +1,309 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+const lodash = require('./lodash-776d6f03.js');
+
+function getSortOrderInteger(sortOrder) {
+  switch (sortOrder) {
+    case 'asc':
+      return 1;
+    case 'desc':
+      return -1;
+  }
+}
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
+    // find the complete implementation of crypto (msCrypto) on IE11.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+const REGEX = /^(?:[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 validate(uuid) {
+  return typeof uuid === 'string' && REGEX.test(uuid);
+}
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+var byteToHex = [];
+
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).substr(1));
+}
+
+function stringify(arr) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+  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
+  // of the following:
+  // - One or more input array values don't map to a hex octet (leading to
+  // "undefined" in the uuid)
+  // - Invalid input values for the RFC `version` or `variant` fields
+
+  if (!validate(uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
+
+  return uuid;
+}
+
+function v4(options, buf, offset) {
+  options = options || {};
+  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return stringify(rnds);
+}
+
+const gridCss = ":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}";
+
+let Grid = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wcsGridSelectionChange = index.createEvent(this, "wcsGridSelectionChange", 7);
+    this.wcsGridAllSelectionChange = index.createEvent(this, "wcsGridAllSelectionChange", 7);
+    /**
+     * Used to manage grid's row selection
+     */
+    this.selectionConfig = 'none';
+    /**
+     * Set the selected items
+     */
+    this.selectedItems = [];
+    /**
+     * Rows to display, contains user data and meta data
+     */
+    this.rows = [];
+  }
+  onDataChange(newValue) {
+    this.updateGridRows(newValue);
+  }
+  onSelectedItemsPropertyChange(newValue) {
+    this.updateSelectionWithValues(newValue);
+  }
+  onHiddenColumnChange() {
+    // We use forceUpdate because the fact of hiding a column or not does not modify the internal structure of the grid (WcsGridRow).
+    // Hide a column only impacts the way it is rendered but the grid-column remains in the dom and in our internal model.
+    index.forceUpdate(this);
+  }
+  updateSelectionWithValues(values) {
+    if (this.selectionConfig === 'single') {
+      this.rows.map(r => r.selected = false);
+      for (const row of this.rows) {
+        if (lodash.lodash.isEqual(row.data, values)) {
+          row.selected = true;
+          break; // only one line can be selected
+        }
+      }
+    }
+    else if (this.selectionConfig === 'multiple') {
+      this.rows.map(r => r.selected = false);
+      for (const row of this.rows) {
+        if (values.find(x => lodash.lodash.isEqual(x, row.data))) {
+          row.selected = true;
+        }
+      }
+    }
+    this.rows = lodash.lodash.cloneDeep(this.rows);
+  }
+  wcsGridRowToWcsGridRowData(row) {
+    return { selected: row.selected, page: row.page, data: row.data };
+  }
+  updateGridRows(data) {
+    const rows = [];
+    if (data && this.columns) {
+      for (let i = 0; i < data.length; i++) {
+        const row = {
+          uuid: v4(),
+          data: data[i],
+          selected: false,
+          cells: []
+        };
+        for (const column of this.columns) {
+          row.cells.push({
+            content: lodash.lodash.get(data[i], column.path),
+            column,
+            formatter: column.formatter
+          });
+        }
+        rows.push(row);
+      }
+      this.rows = rows;
+      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);
+    }
+  }
+  getGridColumnsFromTemplate() {
+    const slotted = this.el.shadowRoot.querySelector('slot[name="grid-column"]');
+    return slotted.assignedElements();
+  }
+  getGridPaginationsFromTemplate() {
+    const slotted = this.el.shadowRoot.querySelector('slot[name="grid-pagination"]');
+    return slotted.assignedElements();
+  }
+  sortChangeEventHandler(event) {
+    // We keep only one active sort column
+    this.columns.filter(c => c !== event.detail.column).forEach(c => c.sortOrder = 'none');
+    if (this.serverMode)
+      return;
+    if (event.detail.sortFn) {
+      this.rows = lodash.lodash.cloneDeep(this.rows)
+        .sort((a, b) => event.detail.sortFn(a.data, b.data, event.detail.column) * getSortOrderInteger(event.detail.order));
+    }
+    else {
+      this.rows = lodash.lodash.cloneDeep(this.rows)
+        .sort((a, b) => {
+        const path = event.detail.column.path;
+        return ((lodash.lodash.get(a.data, path) < lodash.lodash.get(b.data, path)) ? -1 : (lodash.lodash.get(a.data, path) > lodash.lodash.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(event.detail.order);
+      });
+    }
+    this.updatePageIndex();
+  }
+  /**
+   * Update the page's number of all rows
+   */
+  updatePageIndex() {
+    if (!this.serverMode && this.paginationEl) {
+      if (this.paginationEl.currentPage + 1 > this.paginationEl.pageCount) {
+        this.paginationEl.currentPage = this.paginationEl.pageCount - 1;
+      }
+      this.paginationEl.itemsCount = this.data.length;
+      this.paginationEl.pageCount = Math.ceil(this.data.length / this.paginationEl.pageSize);
+      const rows = lodash.lodash.cloneDeep(this.rows);
+      rows.forEach((row, index) => row.page = Math.floor(index / this.paginationEl.pageSize));
+      this.rows = [...rows];
+    }
+  }
+  paginationChangeEventHandler() {
+    this.onPaginationChange();
+  }
+  paginationChangeEventHandlerOutside(event) {
+    if (this.wcsGridPaginationId && this.wcsGridPaginationId === event.target.id) {
+      this.onPaginationChange();
+    }
+  }
+  onPaginationChange() {
+    if (this.serverMode)
+      return;
+    this.updatePageIndex();
+  }
+  onRowSelection(row) {
+    if (this.selectionConfig === 'single') {
+      this.rows.filter(r => r.uuid !== row.uuid).map(r => r.selected = false);
+    }
+    row.selected = !row.selected;
+    if (this.selectionConfig !== 'single' || row.selected) {
+      this.wcsGridSelectionChange.emit({ row: this.wcsGridRowToWcsGridRowData(row) });
+    }
+    this.rows = lodash.lodash.cloneDeep(this.rows);
+  }
+  selectAllRows() {
+    const rows = this.getRowsForCurrentPage();
+    const selected = !this.allRowsAreSelected();
+    rows.map(r => r.selected = selected);
+    this.wcsGridAllSelectionChange.emit({ rows: selected ? rows.map(row => this.wcsGridRowToWcsGridRowData(row)) : [] });
+    this.rows = lodash.lodash.cloneDeep(this.rows);
+  }
+  allRowsAreSelected() {
+    const rows = this.getRowsForCurrentPage();
+    return rows.length > 0 && rows.filter(row => row.selected).length === rows.length;
+  }
+  getRowsForCurrentPage() {
+    if (this.paginationEl) {
+      return this.rows.filter(row => row.page === this.paginationEl.currentPage);
+    }
+    return this.rows;
+  }
+  renderSelectionColumn(row) {
+    switch (this.selectionConfig) {
+      case 'none':
+        return;
+      case 'single':
+        return index.h("td", null, index.h("wcs-radio", { checked: row.selected, onClick: this.onRowSelection.bind(this, row) }));
+      case 'multiple':
+        return index.h("td", null, index.h("wcs-checkbox", { checked: row.selected, onWcsChange: this.onRowSelection.bind(this, row) }));
+    }
+  }
+  getCellContent(row, cell) {
+    if (cell.formatter) {
+      return cell.formatter(index.h, cell.column, this.wcsGridRowToWcsGridRowData(row));
+    }
+    return cell.content;
+  }
+  totalColumnCount() {
+    if (!this.columns) {
+      return 0;
+    }
+    return this.columns.length + (this.selectionConfig === 'none' ? 0 : 1);
+  }
+  render() {
+    var _a;
+    return (index.h(index.Host, null, index.h("table", null, index.h("thead", null, this.selectionConfig === 'none' ? ''
+      : index.h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
+        index.h("wcs-checkbox", { checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), index.h("slot", { name: "grid-column" })), index.h("tbody", null, this.loading
+      ? index.h("tr", null, index.h("td", { colSpan: this.totalColumnCount(), class: "loading" }, index.h("wcs-spinner", null)))
+      : (_a = this.rows) === null || _a === void 0 ? void 0 : _a.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map(row => this.renderRow(row)))), index.h("slot", { name: "grid-pagination" })));
+  }
+  renderRow(row) {
+    var _a;
+    return index.h("tr", { class: row.selected ? 'selected' : '' }, this.renderSelectionColumn(row), (_a = row.cells) === null || _a === void 0 ? void 0 :
+      _a.map(cell => {
+        if (cell.column.hidden) {
+          return;
+        }
+        return cell.column.customCells
+          ? (index.h("td", null, index.h("slot", { name: cell.column.id + '-' + row.data[this.rowIdPath] })))
+          : (index.h("td", { part: cell.column.path + '-column' }, this.getCellContent(row, cell)));
+      }));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "data": ["onDataChange"],
+    "selectedItems": ["onSelectedItemsPropertyChange"]
+  }; }
+};
+Grid.style = gridCss;
+
+exports.wcs_grid = Grid;

package/dist/cjs/wcs-header.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const headerCss = "header{box-shadow:0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);display:flex;align-items:center;background:var(--wcs-gray);padding:8px 8px 8px 16px;height:48px;z-index:1}::slotted(img){width:70px;height:36.8px;margin-right:16px}::slotted(h1){color:var(--wcs-white);margin:0;font-weight:500;font-size:1.5rem}::slotted([slot=actions]){margin-left:auto}";
+
+let Header = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  hostData() {
+    return {
+      'slot': 'header'
+    };
+  }
+  __stencil_render() {
+    return (index.h("header", null, index.h("slot", { name: "logo" }), index.h("slot", { name: "title" }), index.h("slot", { name: "actions" })));
+  }
+  render() { return index.h(index.Host, this.hostData(), this.__stencil_render()); }
+};
+Header.style = headerCss;
+
+exports.wcs_header = Header;

package/dist/cjs/wcs-hint.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const hintCss = ":host{margin-top:0.25rem}:host([small]){font-size:0.75rem;font-weight:400;color:var(--wcs-text-medium)}";
+
+let Label = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.small = false;
+  }
+  render() {
+    return (index.h(index.Host, { slot: "messages" }, index.h("slot", null)));
+  }
+};
+Label.style = hintCss;
+
+exports.wcs_hint = Label;

package/dist/cjs/wcs-horizontal-stepper.cjs.entry.js

@@ -0,0 +1,114 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const HorizontalStep = ({ step, checkOnComplete, complete, passed, active, first, disable, onClick }) => {
+  return (index.h("div", { class: "graphic-step", "data-first": first },
+    first ? null : (index.h("wcs-progress-bar", { value: passed ? 100 : 0 })),
+    index.h("wcs-button", { style: { 'backgroundColor': 'white' }, shape: "round", onClick: _ => onClick(step), mode: (active || complete) && !step.disable ? 'plain' : 'stroked', disabled: disable }, getButtonContent(step.button, checkOnComplete, complete, active))));
+};
+const getButtonContent = (stepButton, checkOnComplete, complete, active) => {
+  if (checkOnComplete && complete && !active) {
+    return (index.h("wcs-mat-icon", { size: "m", icon: "done", family: "outlined" }));
+  }
+  switch (stepButton.kind) {
+    case 'Icon':
+      return (index.h("wcs-mat-icon", { size: "m", icon: stepButton.iconName, family: stepButton.family ? stepButton.family : 'outlined' }));
+    case 'Text':
+      return (stepButton.text);
+  }
+};
+
+const horizontalStepperCss = ":host{display:block}:host .steps{display:flex;flex-direction:row;flex:1}:host .graphic-step{display:flex;flex-direction:row;flex:1;align-items:center}:host .graphic-step[data-first]{flex:0}:host wcs-progress-bar{--wcs-internal-progress-bar-border-radius:0;flex:1;margin:0 -1px}:host .label-container{justify-content:space-between;display:flex;flex-direction:row;margin-top:var(--wcs-base-margin)}:host .label-container>*{width:100%;text-align:center;flex:1;color:var(--wcs-text-medium);font-weight:500}:host .label-container>*[data-disable]{color:var(--wcs-text-light)}:host .label-container>*[data-current]{color:var(--wcs-primary)}:host .label-container>div[data-first]{margin-left:20px;text-align:left;flex:0.5}:host .label-container>div[data-first]>span{margin-left:-20px}:host .label-container>div[data-last]{margin-right:20px;text-align:right;flex:0.5}:host .label-container>div[data-last]>span{margin-right:-20px}";
+
+let HorizontalStepper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.wcsHorizontalStepClick = index.createEvent(this, "wcsHorizontalStepClick", 7);
+    /**
+     * index of the active step. The index corresponds to the index of the step in the 'steps' list
+     */
+    this.currentStep = 0;
+    /**
+     * Specifies if the stepper is in linear mode (the user can only click on the next step)
+     * or non-linear (the user can click on any step)
+     */
+    this.mode = 'nonLinear';
+    this.buttonMode = 'stroked';
+  }
+  componentWillLoad() {
+    this.internalCurrentStep = this.currentStep;
+    if (this.steps.length < 1) {
+      throw new Error('You must add at least one step');
+    }
+  }
+  onCurrentStepChange(newValue, oldValue) {
+    const stepInterval = Math.abs(oldValue - newValue);
+    this.el.style.setProperty('--wcs-progress-bar-animation-duration', 375 / stepInterval + 'ms');
+    if (newValue !== oldValue) {
+      for (let i = 0; i < stepInterval; i++) {
+        setTimeout(() => {
+          this.internalCurrentStep -= (oldValue - newValue) > 0 ? 1 : -1;
+          if (i === stepInterval - 1) {
+            this.el.style.removeProperty('--wcs-progress-bar-animation-duration');
+          }
+        }, (i * (375 / stepInterval)));
+      }
+    }
+  }
+  async previous() {
+    this.navigateToIndex(this.internalCurrentStep - 1, 'backward');
+  }
+  async next() {
+    this.navigateToIndex(this.internalCurrentStep + 1, 'forward');
+  }
+  navigateToIndex(index, direction) {
+    var _a, _b;
+    if (index >= 0 && index <= this.steps.length - 1) {
+      if (((_a = this.steps[index]) === null || _a === void 0 ? void 0 : _a.complete) || ((_b = this.steps[index]) === null || _b === void 0 ? void 0 : _b.disable)) {
+        this.navigateToIndex(index + (direction === 'forward' ? 1 : -1), direction);
+      }
+      else {
+        this.currentStep = index;
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "steps" }, this.steps.map((step, index$1) => (index.h(HorizontalStep, { step: step, passed: index$1 <= this.internalCurrentStep, checkOnComplete: this.checkOnComplete, complete: this.isComplete(step, index$1), active: index$1 === this.internalCurrentStep, first: index$1 === 0, disable: this.isDisable(step, index$1), onClick: step => this.wcsHorizontalStepClick.emit({ step, index: index$1 }) })))), this.renderLabels()));
+  }
+  isComplete(step, index) {
+    return index <= this.internalCurrentStep || step.complete;
+  }
+  renderLabels() {
+    if (this.steps.map(s => s.text).every(s => !s)) {
+      return null;
+    }
+    else {
+      return index.h("div", { class: "label-container" }, this.steps.map((step, index$1) => (index.h("div", { "data-first": index$1 === 0, "data-current": index$1 === this.internalCurrentStep && !step.disable, "data-disable": this.isDisable(step, index$1), "data-last": index$1 === this.steps.length - 1 }, index.h("span", null, step.text)))));
+    }
+  }
+  isDisable(step, index) {
+    return step.disable || (this.mode === 'linear' && (!this.isNextPossibleStep(index) && this.internalCurrentStep < index));
+  }
+  isNextPossibleStep(index) {
+    var _a;
+    if (index === 0)
+      return true;
+    if (((_a = this.steps[index - 1]) === null || _a === void 0 ? void 0 : _a.disable) || this.previousStepIsCompleteAndNotActive(index))
+      return this.isNextPossibleStep(index - 1);
+    return this.internalCurrentStep === index - 1;
+  }
+  previousStepIsCompleteAndNotActive(index) {
+    var _a;
+    return ((_a = this.steps[index - 1]) === null || _a === void 0 ? void 0 : _a.complete) && index - 1 !== this.internalCurrentStep;
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "currentStep": ["onCurrentStepChange"]
+  }; }
+};
+HorizontalStepper.style = horizontalStepperCss;
+
+exports.wcs_horizontal_stepper = HorizontalStepper;

package/dist/cjs/wcs-icon.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e05c3e1f.js');
+const index = require('./index-3cb9d725.js');
 
-const Icon = class {
+let Icon = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }