wcs-core 2.5.4 → 2.9.0

package/dist/collection/components/grid/grid.js

@@ -1,4 +1,4 @@
-import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, forceUpdate, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
 import { getSortOrderInteger } from './grid-interface';
 import _ from 'lodash';
 import { v4 as uuid } from 'uuid';
@@ -23,6 +23,11 @@ export class Grid {
   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.
+    forceUpdate(this);
+  }
   updateSelectionWithValues(values) {
     if (this.selectionConfig === 'single') {
       this.rows.map(r => r.selected = false);
@@ -78,6 +83,19 @@ export class Grid {
     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"]');
@@ -88,22 +106,32 @@ export class Grid {
     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;
-    if (event.detail.sortFn) {
+    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 = _.cloneDeep(this.rows)
-        .sort((a, b) => event.detail.sortFn(a.data, b.data, event.detail.column) * getSortOrderInteger(event.detail.order));
+        .sort((a, b) => colmun.sortFn(a.data, b.data, colmun) * getSortOrderInteger(colmun.sortOrder));
     }
     else {
       this.rows = _.cloneDeep(this.rows)
         .sort((a, b) => {
-        const path = event.detail.column.path;
-        return ((_.get(a.data, path) < _.get(b.data, path)) ? -1 : (_.get(a.data, path) > _.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(event.detail.order);
+        const path = colmun.path;
+        return ((_.get(a.data, path) < _.get(b.data, path)) ? -1 : (_.get(a.data, path) > _.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);
       });
     }
-    this.updatePageIndex();
   }
   /**
    * Update the page's number of all rows
@@ -138,7 +166,9 @@ export class Grid {
       this.rows.filter(r => r.uuid !== row.uuid).map(r => r.selected = false);
     }
     row.selected = !row.selected;
-    this.wcsGridSelectionChange.emit({ row: this.wcsGridRowToWcsGridRowData(row) });
+    if (this.selectionConfig !== 'single' || row.selected) {
+      this.wcsGridSelectionChange.emit({ row: this.wcsGridRowToWcsGridRowData(row) });
+    }
     this.rows = _.cloneDeep(this.rows);
   }
   selectAllRows() {
@@ -195,14 +225,23 @@ export class Grid {
           ? h("tr", null,
             h("td", { colSpan: this.totalColumnCount(), class: "loading" },
               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 => {
-            var _a;
-            return h("tr", { class: row.selected ? 'selected' : '' },
-              this.renderSelectionColumn(row), (_a = row.cells) === null || _a === void 0 ? void 0 :
-              _a.map(cell => h("td", { part: cell.column.path + '-column' }, this.getCellContent(row, cell))));
-          }))),
+          : (_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)))),
       h("slot", { name: "grid-pagination" })));
   }
+  renderRow(row) {
+    var _a;
+    return 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
+          ? (h("td", null,
+            h("slot", { name: cell.column.id + '-' + row.data[this.rowIdPath] })))
+          : (h("td", { part: cell.column.path + '-column' }, this.getCellContent(row, cell)));
+      }));
+  }
   static get is() { return "wcs-grid"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -318,6 +357,23 @@ export class Grid {
       },
       "attribute": "wcs-grid-pagination-id",
       "reflect": false
+    },
+    "rowIdPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name of the object's key that will be used to display the cells whose keyValue attribute matches to the\nobject's value for this key."
+      },
+      "attribute": "row-id-path",
+      "reflect": false
     }
   }; }
   static get states() { return {
@@ -375,6 +431,12 @@ export class Grid {
       "methodName": "onSelectedItemsPropertyChange"
     }]; }
   static get listeners() { return [{
+      "name": "wcsHiddenChange",
+      "method": "onHiddenColumnChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
       "name": "wcsSortChange",
       "method": "sortChangeEventHandler",
       "target": undefined,

package/dist/collection/components/grid-column/grid-column.css

@@ -1,5 +1,6 @@
 :host {
   --wcs-grid-column-border-left: solid 1px var(--wcs-text-light);
+  display: contents;
 }
 :host th {
   color: var(--wcs-gray-dark);
@@ -32,4 +33,8 @@
 }
 :host([sort-order=none]) th:hover img {
   display: inline-block;
+}
+
+:host([hidden]) {
+  display: none !important;
 }

package/dist/collection/components/grid-column/grid-column.js

@@ -1,9 +1,17 @@
-import { Component, Event, h, Host, Prop, Element } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
 import { GridSortArrow } from './grid-sort-arrow';
 export class GridColumn {
   constructor() {
     this.sort = false;
     this.sortOrder = 'none';
+    this.customCells = false;
+    this.hidden = false;
+  }
+  parseMyObjectProp(newValue) {
+    this.wcsHiddenChange.emit(newValue);
+  }
+  sortOrderChange(_) {
+    this.emitSortConfig();
   }
   emitSortConfig() {
     if (!this.sort)
@@ -15,15 +23,15 @@ export class GridColumn {
     });
   }
   render() {
-    return (h(Host, { onClick: this.onSortClick.bind(this), slot: "grid-column", style: { display: 'contents' } },
+    return (h(Host, { onClick: this.onSortClick.bind(this), slot: "grid-column" },
       h("th", { style: { width: this.width }, class: this.sort ? 'pointer' : '' },
         h("div", { class: "grid-column-th-content" },
           h("span", null, this.name),
           this.sort ? h(GridSortArrow, { state: this.sortOrder }) : ''))));
   }
   onSortClick() {
+    // @Watch on sortOrder property will trigger wcsSortChange event
     this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';
-    this.emitSortConfig();
   }
   static get is() { return "wcs-grid-column"; }
   static get encapsulation() { return "shadow"; }
@@ -146,7 +154,7 @@ export class GridColumn {
         "text": ""
       },
       "attribute": "sort-order",
-      "reflect": true,
+      "reflect": false,
       "defaultValue": "'none'"
     },
     "width": {
@@ -165,6 +173,42 @@ export class GridColumn {
       },
       "attribute": "width",
       "reflect": false
+    },
+    "customCells": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "custom-cells",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hidden": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "hidden",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -187,6 +231,28 @@ export class GridColumn {
           }
         }
       }
+    }, {
+      "method": "wcsHiddenChange",
+      "name": "wcsHiddenChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "hidden",
+      "methodName": "parseMyObjectProp"
+    }, {
+      "propName": "sortOrder",
+      "methodName": "sortOrderChange"
+    }]; }
 }

package/dist/collection/components/grid-custom-cell/grid-custom-cell.js

@@ -0,0 +1,45 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class GridCustomCell {
+  render() {
+    return (h(Host, { slot: this.columnId + '-' + this.rowId },
+      h("slot", null)));
+  }
+  static get is() { return "wcs-grid-custom-cell"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "columnId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "ID of the column for which to render the cell"
+      },
+      "attribute": "column-id",
+      "reflect": false
+    },
+    "rowId": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Key value of the object rendered for the cell's row"
+      },
+      "attribute": "row-id",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/grid-pagination/grid-pagination.js

@@ -3,10 +3,10 @@ import { GridPaginationArrow } from './grid-pagination-arrow';
 export class GridPagination {
   constructor() {
     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;
@@ -116,7 +116,7 @@ export class GridPagination {
       },
       "attribute": "current-page",
       "reflect": false,
-      "defaultValue": "1"
+      "defaultValue": "0"
     },
     "pageSize": {
       "type": "number",
@@ -170,7 +170,7 @@ export class GridPagination {
       },
       "attribute": "page-count",
       "reflect": false,
-      "defaultValue": "0"
+      "defaultValue": "1"
     }
   }; }
   static get events() { return [{

package/dist/collection/components/header/header.css

@@ -4,7 +4,7 @@ header {
   align-items: center;
   background: var(--wcs-gray);
   padding: 8px 8px 8px 16px;
-  height: calc(64px - 16px);
+  height: 48px;
   z-index: 1;
 }
 

package/dist/collection/components/horizontal-stepper/horizontal-stepper.js

@@ -133,9 +133,14 @@ export class HorizontalStepper {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'linear' | 'nonLinear'",
+        "original": "HorizontalStepperMode",
         "resolved": "\"linear\" | \"nonLinear\"",
-        "references": {}
+        "references": {
+          "HorizontalStepperMode": {
+            "location": "import",
+            "path": "./horizontal-stepper-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/input/input.css

@@ -37,14 +37,62 @@
   margin-left: 8px;
   margin-right: -8px;
 }
+:host .prefix, :host .suffix {
+  color: var(--wcs-white);
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  padding: 0 calc(var(--wcs-padding) / 2);
+  font-weight: var(--wcs-font-weight-form-value) !important;
+  background-color: var(--wcs-text-disabled);
+}
+:host .prefix {
+  border-radius: var(--wcs-internal-input-border-radius-left) 0 0 var(--wcs-internal-input-border-radius-left);
+  margin: -1px 0 -1px -1px;
+  border-left: solid 1px transparent;
+  border-top: solid 1px transparent;
+  border-bottom: solid 1px transparent;
+}
+:host .suffix {
+  border-radius: 0 var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) 0;
+  margin: -1px -1px -1px 0px;
+  border-right: solid 1px transparent;
+  border-top: solid 1px transparent;
+  border-bottom: solid 1px transparent;
+}
 
 :host([state=error]) {
   border-color: var(--wcs-red) !important;
 }
 
+:host([data-has-prefix]) input {
+  padding-left: calc(var(--wcs-padding) / 2);
+}
+
+:host([data-has-suffix]) input {
+  padding-left: calc(var(--wcs-padding) / 2);
+}
+
+:host([disabled]) input {
+  color: var(--wcs-text-disabled);
+}
+:host([disabled]) .prefix, :host([disabled]) .suffix {
+  color: var(--wcs-light);
+}
+
 :host(:focus-within) {
   border: solid 1px var(--wcs-primary);
 }
+:host(:focus-within) .prefix {
+  border-left: solid 1px var(--wcs-primary);
+  border-top: solid 1px var(--wcs-primary);
+  border-bottom: solid 1px var(--wcs-primary);
+}
+:host(:focus-within) .suffix {
+  border-right: solid 1px var(--wcs-primary);
+  border-top: solid 1px var(--wcs-primary);
+  border-bottom: solid 1px var(--wcs-primary);
+}
 :host(:focus-within) wcs-mat-icon {
   color: var(--wcs-primary);
 }

package/dist/collection/components/input/input.js

@@ -205,9 +205,11 @@ export class Input {
     if (label) {
       label.id = labelId;
     }
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null },
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, "data-has-prefix": !!this.prefixLabel, "data-has-suffix": !!this.suffixLabel },
+      this.prefixLabel ? (h("span", { class: "prefix" }, this.prefixLabel)) : null,
       this.icon ? (h("wcs-mat-icon", { icon: this.icon, size: "m" })) : null,
-      h("input", Object.assign({ class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes))));
+      h("input", Object.assign({ class: "native-input", ref: input => this.nativeInput = input, "aria-labelledby": label ? labelId : null, disabled: this.disabled, accept: this.accept, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, size: this.size, type: this.type, value: value, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown }, this.inheritedAttributes)),
+      this.suffixLabel ? (h("span", { class: "suffix" }, this.suffixLabel)) : null));
   }
   static get is() { return "wcs-input"; }
   static get encapsulation() { return "shadow"; }
@@ -230,8 +232,8 @@ export class Input {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "This is required for a WebKit bug which requires us to\nblur and focus an input to properly focus the input in\nan item with delegatesFocus. It will no longer be needed\nwith iOS 14."
       },
@@ -386,6 +388,40 @@ export class Input {
       "reflect": false,
       "defaultValue": "0"
     },
+    "prefixLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Prefix displayed before the text field contents. This is not included in the value."
+      },
+      "attribute": "prefix-label",
+      "reflect": false
+    },
+    "suffixLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Suffix displayed after the text field contents. This is not included in the value."
+      },
+      "attribute": "suffix-label",
+      "reflect": false
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/mat-icon/mat-icon.css

@@ -1,5 +1,5 @@
 :host {
-  display: flex;
+  display: inline-block;
 }
 :host .size-s {
   font-size: 18px;

package/dist/collection/components/mat-icon/mat-icon.js

@@ -88,9 +88,14 @@ export class MatIcon {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'s' | 'm' | 'l' | 'xl'",
+        "original": "MaterialIconSize",
         "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
-        "references": {}
+        "references": {
+          "MaterialIconSize": {
+            "location": "import",
+            "path": "./mat-icon-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/modal/modal-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/modal/modal.css

@@ -20,7 +20,14 @@ wcs-modal[show] {
 /**
 Backdrop
  */
-wcs-modal[backdrop] .wcs-modal-backdrop {
+wcs-modal[without-backdrop] .wcs-modal-backdrop {
+  display: none;
+}
+wcs-modal[without-backdrop] .wcs-modal-container {
+  border: solid 1px var(--wcs-text-light);
+}
+
+.wcs-modal-backdrop {
   display: block;
   position: fixed;
   top: 0;
@@ -31,10 +38,6 @@ wcs-modal[backdrop] .wcs-modal-backdrop {
   background-color: var(--wcs-black);
 }
 
-.wcs-modal-backdrop {
-  display: none;
-}
-
 /**
 Modal window
  */
@@ -42,8 +45,8 @@ Modal window
   position: fixed;
   top: 50%;
   left: 50%;
-  min-width: 400px;
-  max-width: 480px;
+  box-sizing: border-box;
+  max-width: 100%;
   /* bring your own prefixes */
   transform: translate(-50%, -50%);
   pointer-events: auto;
@@ -57,6 +60,22 @@ Modal window
   padding: 1.375rem 1.875rem 1.875rem 1.875rem;
 }
 
+.wcs-modal-container[data-size=s] {
+  width: 288px;
+}
+
+.wcs-modal-container[data-size=m] {
+  width: 480px;
+}
+
+.wcs-modal-container[data-size=l] {
+  width: 864px;
+}
+
+.wcs-modal-container[data-size=xl] {
+  width: 1200px;
+}
+
 .wcs-modal-header {
   margin-bottom: 8px;
   display: flex;