wcs-core 2.5.2 → 2.7.0

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.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/radio/radio.component.js

@@ -31,7 +31,7 @@ export class Radio {
   }
   render() {
     return (h(Host, { slot: "option" },
-      h("input", { id: this.inputId, type: "radio", value: this.value, checked: this.checked, "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}` }),
+      h("input", { id: this.inputId, type: "radio", value: this.value, checked: this.checked, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null, "aria-checked": `${this.checked}` }),
       h("label", { htmlFor: `${this.inputId}` }, this.label)));
   }
   static get is() { return "wcs-radio"; }

package/dist/collection/components/radio/radio.css

@@ -5,7 +5,6 @@
   padding: 0.125rem 0 0;
   margin-bottom: 0;
   color: var(--wcs-text-medium);
-  cursor: pointer;
   background-color: transparent;
   border: none;
   font-weight: 500 !important;
@@ -35,6 +34,14 @@
   background: no-repeat 50%/50% 50%;
 }
 
+:host([mode=radio][disabled]) label {
+  color: var(--wcs-text-disabled);
+}
+
+:host([mode=radio]:not([disabled])) label {
+  cursor: pointer;
+}
+
 :host([mode=radio][checked]) label {
   color: var(--wcs-primary);
 }
@@ -43,10 +50,10 @@
   background-color: var(--wcs-primary);
 }
 
-:host([mode=radio]:hover) label {
+:host([mode=radio]:hover):not([disabled]) label {
   color: var(--wcs-primary);
 }
-:host([mode=radio]:hover) label:before {
+:host([mode=radio]:hover):not([disabled]) label:before {
   border-color: var(--wcs-primary);
 }
 
@@ -66,7 +73,6 @@
   margin-bottom: 0;
   color: var(--wcs-white);
   white-space: nowrap;
-  cursor: pointer;
   border-radius: 0.4375rem;
 }
 
@@ -74,4 +80,12 @@
   font-weight: 500 !important;
   color: var(--wcs-primary);
   background-color: var(--wcs-white);
+}
+
+:host([mode=option][disabled]) label {
+  color: var(--wcs-text-disabled);
+}
+
+:host([mode=option]:not([disabled])) label {
+  cursor: pointer;
 }

package/dist/collection/components/radio-group/radio-group.js

@@ -94,9 +94,14 @@ export class RadioGroup {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'radio' | 'option'",
+        "original": "RadioGroupMode",
         "resolved": "\"option\" | \"radio\"",
-        "references": {}
+        "references": {
+          "RadioGroupMode": {
+            "location": "import",
+            "path": "./radio-group-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

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() {