wcs-core 2.5.2 → 2.7.0

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

@@ -0,0 +1,332 @@
+'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);
+    }
+    this.applyInitialSortConfig();
+  }
+  /**
+   * Handle existing column's filters (defined before the grid is instantiated)
+   * @private
+   */
+  applyInitialSortConfig() {
+    const [first, ...other] = this.columns.filter(c => c.sortOrder !== 'none');
+    // We keep only one active sorted column
+    other === null || other === void 0 ? void 0 : other.forEach(o => o.sortOrder = 'none');
+    if (first && !this.serverMode) {
+      this.sortBy(first);
+    }
+  }
+  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) {
+    if (event.detail.order === 'none')
+      return;
+    // We keep only one active sort column
+    this.columns.filter(c => c !== event.detail.column).forEach(c => c.sortOrder = 'none');
+    if (this.serverMode)
+      return;
+    this.sortBy(event.detail.column);
+    this.updatePageIndex();
+  }
+  /**
+   * Sorts the grid rows according to the given column's configuration
+   * @param colmun Column from which to extract the sorting configuration
+   * @private
+   */
+  sortBy(colmun) {
+    if (colmun.sortFn) {
+      this.rows = lodash.lodash.cloneDeep(this.rows)
+        .sort((a, b) => colmun.sortFn(a.data, b.data, colmun) * getSortOrderInteger(colmun.sortOrder));
+    }
+    else {
+      this.rows = lodash.lodash.cloneDeep(this.rows)
+        .sort((a, b) => {
+        const path = colmun.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(colmun.sortOrder);
+      });
+    }
+  }
+  /**
+   * 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);
   }