wcs-core 2.5.4 → 2.6.0

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

@@ -1,9 +1,14 @@
-import { Component, Event, h, Host, Prop, Element } from '@stencil/core';
+import { Component, Event, h, Host, Prop, Element, 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);
   }
   emitSortConfig() {
     if (!this.sort)
@@ -15,7 +20,7 @@ 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),
@@ -165,6 +170,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 +228,25 @@ 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"
+    }]; }
 }

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/input/input.js

@@ -230,8 +230,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."
       },

package/dist/collection/components/select/select.css

@@ -25,14 +25,6 @@
     opacity: 0;
   }
 }
-.mdc-ripple-surface--test-edge-var-bug {
-  --mdc-ripple-surface-test-edge-var: 1px solid #000;
-  visibility: hidden;
-}
-.mdc-ripple-surface--test-edge-var-bug::before {
-  border: var(--mdc-ripple-surface-test-edge-var);
-}
-
 .mdc-ripple-surface {
   --mdc-ripple-fg-size: 0;
   --mdc-ripple-left: 0;
@@ -46,6 +38,7 @@
   outline: none;
   overflow: hidden;
 }
+
 .mdc-ripple-surface::before, .mdc-ripple-surface::after {
   position: absolute;
   border-radius: 50%;
@@ -53,135 +46,128 @@
   pointer-events: none;
   content: "";
 }
+
 .mdc-ripple-surface::before {
   transition: opacity 15ms linear, background-color 15ms linear;
   z-index: 1;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 1);
+}
+
+.mdc-ripple-surface::after {
+  z-index: 0;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 0);
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded::before {
   transform: scale(var(--mdc-ripple-fg-scale, 1));
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after {
   animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after {
   animation: mdc-ripple-fg-opacity-out 150ms;
   transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
 }
-.mdc-ripple-surface::before, .mdc-ripple-surface::after {
-  background-color: #000;
-}
-.mdc-ripple-surface:hover::before {
-  opacity: 0.04;
-}
-.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.12;
-}
+
 .mdc-ripple-surface::before, .mdc-ripple-surface::after {
   top: calc(50% - 100%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
 }
+
 .mdc-ripple-surface.mdc-ripple-upgraded::after {
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded] {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded],
+.mdc-ripple-upgraded--unbounded {
   overflow: visible;
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,
+.mdc-ripple-upgraded--unbounded::before,
+.mdc-ripple-upgraded--unbounded::after {
   top: calc(50% - 50%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 50%);
   width: 100%;
   height: 100%;
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before, .mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
+.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before,
+.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
   top: var(--mdc-ripple-top, calc(50% - 50%));
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, calc(50% - 50%));
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after {
+
+.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,
+.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after {
   width: var(--mdc-ripple-fg-size, 100%);
   height: var(--mdc-ripple-fg-size, 100%);
 }
-.mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after {
-  background-color: #6200ee;
-}
-@supports not (-ms-ime-align: auto) {
-  .mdc-ripple-surface--primary::before, .mdc-ripple-surface--primary::after {
-    /* @alternate */
-    background-color: var(--mdc-theme-primary, #6200ee);
-  }
-}
-.mdc-ripple-surface--primary:hover::before {
-  opacity: 0.04;
-}
-.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface--primary.mdc-ripple-upgraded--background-focused::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded)::after {
-  transition: opacity 150ms linear;
-}
-.mdc-ripple-surface--primary:not(.mdc-ripple-upgraded):active::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-}
-.mdc-ripple-surface--primary.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.12;
-}
-.mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after {
-  background-color: #018786;
-}
-@supports not (-ms-ime-align: auto) {
-  .mdc-ripple-surface--accent::before, .mdc-ripple-surface--accent::after {
-    /* @alternate */
-    background-color: var(--mdc-theme-secondary, #018786);
-  }
+
+.mdc-ripple-surface::before, .mdc-ripple-surface::after {
+  background-color: #000;
+  /* @alternate */
+  background-color: var(--mdc-ripple-color, #000);
 }
-.mdc-ripple-surface--accent:hover::before {
+
+.mdc-ripple-surface:hover::before, .mdc-ripple-surface.mdc-ripple-surface--hover::before {
   opacity: 0.04;
+  /* @alternate */
+  opacity: var(--mdc-ripple-hover-opacity, 0.04);
 }
-.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):focus::before, .mdc-ripple-surface--accent.mdc-ripple-upgraded--background-focused::before {
+
+.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before, .mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before {
   transition-duration: 75ms;
   opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-focus-opacity, 0.12);
 }
-.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded)::after {
+
+.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after {
   transition: opacity 150ms linear;
 }
-.mdc-ripple-surface--accent:not(.mdc-ripple-upgraded):active::after {
+
+.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after {
   transition-duration: 75ms;
   opacity: 0.12;
+  /* @alternate */
+  opacity: var(--mdc-ripple-press-opacity, 0.12);
 }
-.mdc-ripple-surface--accent.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.12;
+
+.mdc-ripple-surface.mdc-ripple-upgraded {
+  --mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12);
 }
 
 :host {
@@ -292,6 +278,13 @@ label {
 .wcs-select-control::before {
   transition: opacity 15ms linear, background-color 15ms linear;
   z-index: 1;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 1);
+}
+.wcs-select-control::after {
+  z-index: 0;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 0);
 }
 .wcs-select-control.mdc-ripple-upgraded::before {
   transform: scale(var(--mdc-ripple-fg-scale, 1));
@@ -299,6 +292,7 @@ label {
 .wcs-select-control.mdc-ripple-upgraded::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
@@ -306,6 +300,7 @@ label {
 .wcs-select-control.mdc-ripple-upgraded--unbounded::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .wcs-select-control.mdc-ripple-upgraded--foreground-activation::after {
@@ -318,6 +313,7 @@ label {
 .wcs-select-control::before, .wcs-select-control::after {
   top: calc(50% - 100%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
@@ -328,13 +324,19 @@ label {
 }
 .wcs-select-control::before, .wcs-select-control::after {
   background-color: #999;
+  /* @alternate */
+  background-color: var(--mdc-ripple-color, #999);
 }
-.wcs-select-control:hover::before {
+.wcs-select-control:hover::before, .wcs-select-control.mdc-ripple-surface--hover::before {
   opacity: 0.1;
+  /* @alternate */
+  opacity: var(--mdc-ripple-hover-opacity, 0.1);
 }
-.wcs-select-control:not(.mdc-ripple-upgraded):focus::before, .wcs-select-control.mdc-ripple-upgraded--background-focused::before {
+.wcs-select-control.mdc-ripple-upgraded--background-focused::before, .wcs-select-control:not(.mdc-ripple-upgraded):focus::before {
   transition-duration: 75ms;
   opacity: 0.2;
+  /* @alternate */
+  opacity: var(--mdc-ripple-focus-opacity, 0.2);
 }
 .wcs-select-control:not(.mdc-ripple-upgraded)::after {
   transition: opacity 150ms linear;
@@ -342,9 +344,11 @@ label {
 .wcs-select-control:not(.mdc-ripple-upgraded):active::after {
   transition-duration: 75ms;
   opacity: 0.3;
+  /* @alternate */
+  opacity: var(--mdc-ripple-press-opacity, 0.3);
 }
 .wcs-select-control.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.3;
+  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.3);
 }
 
 .wcs-select-placeholder {
@@ -364,8 +368,8 @@ label {
   border-radius: 0.75rem;
   display: flex;
   align-items: center;
-  margin: calc(var(--wcs-base-margin)/2);
-  padding: calc(calc(var(--wcs-padding) - 8px) / 2) var(--wcs-padding);
+  margin: calc(var(--wcs-base-margin) / 2);
+  padding: calc((var(--wcs-padding) - 8px) / 2) var(--wcs-padding);
   overflow: initial;
 }
 

package/dist/collection/components/select/select.js

@@ -1,10 +1,10 @@
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';
 import _ from 'lodash';
-import * as MDCRipple from '@material/ripple';
 import { interpret, Machine } from 'xstate';
 import { SelectArrow } from './select-arrow';
 import { isElement } from '../../utils/helpers';
 import { SelectChips } from './select-chips';
+import { MDCRipple } from '@material/ripple';
 const SELECT_MACHINE_CONFIG = {
   key: 'select',
   initial: 'closed',
@@ -277,7 +277,7 @@ export class Select {
   }
   addRippleEffect() {
     // TODO: wrap MDCRipple dependency so we can eventually write our own or at least decouple a bit.
-    const ripple = new MDCRipple.MDCRipple(this.controlEl);
+    const ripple = new MDCRipple(this.controlEl);
     ripple.unbounded = false;
   }
   get hasValue() {