wcs-core 2.5.4 → 2.9.0

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

@@ -4,7 +4,7 @@ export class Modal {
     /**
      * Specifies whether the component should display a backdrop on the entire page
      */
-    this.backdrop = true;
+    this.withoutBackdrop = false;
     /**
      * Displays the modal
      */
@@ -14,15 +14,20 @@ export class Modal {
      * if false, it won't close the modal when the escape key is pressed.
      */
     this.showCloseButton = false;
+    /**
+     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the
+     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.
+     */
+    this.size = 'm';
   }
   render() {
     return (h(Host, null,
       h("div", { class: "wcs-modal-backdrop" }),
-      h("div", { class: "wcs-modal-container" },
+      h("div", { class: "wcs-modal-container", "data-size": this.size },
         h("div", { class: "wcs-modal-header" },
           h("h5", null,
             h("slot", { name: "header" })),
-          this.showCloseButton && (h("wcs-button", { shape: "round", mode: "stroked", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) },
+          this.showCloseButton && (h("wcs-button", { shape: "round", mode: "clear", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) },
             h("i", { class: "material-icons" }, "close")))),
         h("div", { class: "wcs-modal-content" },
           h("slot", null)),
@@ -49,7 +54,7 @@ export class Modal {
     "$": ["modal.css"]
   }; }
   static get properties() { return {
-    "backdrop": {
+    "withoutBackdrop": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -63,13 +68,13 @@ export class Modal {
         "tags": [],
         "text": "Specifies whether the component should display a backdrop on the entire page"
       },
-      "attribute": "backdrop",
+      "attribute": "without-backdrop",
       "reflect": true,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "show": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -102,6 +107,29 @@ export class Modal {
       "attribute": "show-close-button",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ModalSize",
+        "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
+        "references": {
+          "ModalSize": {
+            "location": "import",
+            "path": "./modal-interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\nsize best suited for the content and screen size displaying the modal. Remember to test responsiveness."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'m'"
     }
   }; }
   static get events() { return [{

package/dist/collection/components/nav-item/nav-item.js

@@ -39,7 +39,7 @@ export class NavItem {
     },
     "href": {
       "type": "string",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "string",
         "resolved": "string",

package/dist/collection/components/progress-bar/progress-bar.js

@@ -1,4 +1,4 @@
-import { Component, Prop, h } from '@stencil/core';
+import { Component, h, Prop } from '@stencil/core';
 /**
  * Component displaying progress as a bar.
  */
@@ -50,7 +50,7 @@ export class ProgressBar {
   static get properties() { return {
     "small": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -68,7 +68,7 @@ export class ProgressBar {
     },
     "showLabel": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -86,7 +86,7 @@ export class ProgressBar {
     },
     "value": {
       "type": "number",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "number",
         "resolved": "number",

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"; }
@@ -47,9 +47,14 @@ export class Radio {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'radio' | 'option'",
-        "resolved": "\"option\" | \"radio\"",
-        "references": {}
+        "original": "RadioGroupMode",
+        "resolved": "\"horizontal\" | \"option\" | \"radio\"",
+        "references": {
+          "RadioGroupMode": {
+            "location": "import",
+            "path": "../radio-group/radio-group-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

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

@@ -1,32 +1,27 @@
-:host([mode=radio]) input {
+:host([mode=radio]) input,
+:host([mode=horizontal]) input {
   display: none;
 }
-:host([mode=radio]) label {
-  padding: 0.125rem 0 0;
+:host([mode=radio]) label,
+:host([mode=horizontal]) label {
   margin-bottom: 0;
   color: var(--wcs-text-medium);
-  cursor: pointer;
   background-color: transparent;
-  border: none;
   font-weight: 500 !important;
-  transition: 0.175s ease-in-out;
 }
-:host([mode=radio]) label:before {
-  transition: 0.175s ease-in-out;
+:host([mode=radio]) label:before,
+:host([mode=horizontal]) label:before {
   border-radius: 50%;
-  margin-right: var(--wcs-base-margin);
   border: 2px solid var(--wcs-text-disabled);
   position: relative;
-  display: inline-block;
-  top: 3px;
   width: 1.125rem;
   height: 1.125rem;
   pointer-events: none;
   content: "";
   background-color: var(--wcs-white);
-  box-sizing: border-box;
 }
-:host([mode=radio]) label:after {
+:host([mode=radio]) label:after,
+:host([mode=horizontal]) label:after {
   transition: 0.175s ease-in-out;
   position: relative;
   width: 1.125rem;
@@ -35,21 +30,52 @@
   background: no-repeat 50%/50% 50%;
 }
 
-:host([mode=radio][checked]) label {
+:host([disabled]) label {
+  color: var(--wcs-text-disabled);
+}
+
+:host(:not([disabled])) label {
+  cursor: pointer;
+}
+
+:host([mode=radio][checked]) label,
+:host([mode=horizontal][checked]) label {
   color: var(--wcs-primary);
 }
-:host([mode=radio][checked]) label:before {
+:host([mode=radio][checked]) label:before,
+:host([mode=horizontal][checked]) label:before {
   border-color: var(--wcs-primary);
   background-color: var(--wcs-primary);
 }
 
-:host([mode=radio]:hover) label {
+:host([mode=radio]:hover):not([disabled]) label,
+:host([mode=horizontal]:hover):not([disabled]) label {
   color: var(--wcs-primary);
 }
-:host([mode=radio]:hover) label:before {
+:host([mode=radio]:hover):not([disabled]) label:before,
+:host([mode=horizontal]:hover):not([disabled]) label:before {
   border-color: var(--wcs-primary);
 }
 
+:host([mode=radio]) label {
+  padding: 0.125rem 0 0;
+  border: none;
+  transition: 0.175s ease-in-out;
+}
+:host([mode=radio]) label:before {
+  transition: 0.175s ease-in-out;
+  margin-right: var(--wcs-base-margin);
+  display: inline-block;
+  top: 3px;
+  box-sizing: border-box;
+}
+
+:host([mode=horizontal]) label:before {
+  transition: background-color 0.175s ease-in-out;
+  margin: auto auto var(--wcs-base-margin);
+  display: block;
+}
+
 :host([mode=option]) {
   padding: var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);
   font-weight: 500 !important;
@@ -62,11 +88,10 @@
   padding: 0;
 }
 :host([mode=option]) label {
-  padding: 0.375rem 1.25rem 0.3125rem;
+  padding: 5px calc(2 * var(--wcs-base-margin));
   margin-bottom: 0;
   color: var(--wcs-white);
   white-space: nowrap;
-  cursor: pointer;
   border-radius: 0.4375rem;
 }
 

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

@@ -19,7 +19,11 @@
 :host([mode=option]) {
   display: inline-flex;
   flex-direction: row;
-  padding: calc(var(--wcs-base-margin) / 2);
+  padding: calc(var(--wcs-base-margin) / 4);
   background-color: #4d4f53;
   border-radius: 0.6875rem;
+}
+
+:host([mode=horizontal]) {
+  justify-content: space-between;
 }

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

@@ -10,9 +10,9 @@ export class RadioGroup {
     if (this.value) {
       this.updateOptionsState(this.value, true);
     }
-    if (this.mode === 'option') {
+    if (this.mode === 'option' || this.mode === 'horizontal') {
       for (const option of this.options) {
-        option.mode = 'option';
+        option.mode = this.mode;
       }
     }
   }
@@ -94,9 +94,14 @@ export class RadioGroup {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'radio' | 'option'",
-        "resolved": "\"option\" | \"radio\"",
-        "references": {}
+        "original": "RadioGroupMode",
+        "resolved": "\"horizontal\" | \"option\" | \"radio\"",
+        "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() {