wcs-core 2.5.2 → 2.7.0

package/dist/collection/components/select-option/select-option.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);
 }
 
 wcs-select-option {
@@ -214,6 +200,13 @@ wcs-select-option::before, wcs-select-option::after {
 wcs-select-option::before {
   transition: opacity 15ms linear, background-color 15ms linear;
   z-index: 1;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 1);
+}
+wcs-select-option::after {
+  z-index: 0;
+  /* @alternate */
+  z-index: var(--mdc-ripple-z-index, 0);
 }
 wcs-select-option.mdc-ripple-upgraded::before {
   transform: scale(var(--mdc-ripple-fg-scale, 1));
@@ -221,6 +214,7 @@ wcs-select-option.mdc-ripple-upgraded::before {
 wcs-select-option.mdc-ripple-upgraded::after {
   top: 0;
   /* @noflip */
+  /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
@@ -228,6 +222,7 @@ wcs-select-option.mdc-ripple-upgraded::after {
 wcs-select-option.mdc-ripple-upgraded--unbounded::after {
   top: var(--mdc-ripple-top, 0);
   /* @noflip */
+  /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 wcs-select-option.mdc-ripple-upgraded--foreground-activation::after {
@@ -240,6 +235,7 @@ wcs-select-option.mdc-ripple-upgraded--foreground-deactivation::after {
 wcs-select-option::before, wcs-select-option::after {
   top: calc(50% - 100%);
   /* @noflip */
+  /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
@@ -250,13 +246,19 @@ wcs-select-option.mdc-ripple-upgraded::after {
 }
 wcs-select-option::before, wcs-select-option::after {
   background-color: #999;
+  /* @alternate */
+  background-color: var(--mdc-ripple-color, #999);
 }
-wcs-select-option:hover::before {
+wcs-select-option:hover::before, wcs-select-option.mdc-ripple-surface--hover::before {
   opacity: 0.1;
+  /* @alternate */
+  opacity: var(--mdc-ripple-hover-opacity, 0.1);
 }
-wcs-select-option:not(.mdc-ripple-upgraded):focus::before, wcs-select-option.mdc-ripple-upgraded--background-focused::before {
+wcs-select-option.mdc-ripple-upgraded--background-focused::before, wcs-select-option:not(.mdc-ripple-upgraded):focus::before {
   transition-duration: 75ms;
   opacity: 0.2;
+  /* @alternate */
+  opacity: var(--mdc-ripple-focus-opacity, 0.2);
 }
 wcs-select-option:not(.mdc-ripple-upgraded)::after {
   transition: opacity 150ms linear;
@@ -264,9 +266,11 @@ wcs-select-option:not(.mdc-ripple-upgraded)::after {
 wcs-select-option:not(.mdc-ripple-upgraded):active::after {
   transition-duration: 75ms;
   opacity: 0.3;
+  /* @alternate */
+  opacity: var(--mdc-ripple-press-opacity, 0.3);
 }
 wcs-select-option.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: 0.3;
+  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.3);
 }
 wcs-select-option:hover {
   color: var(--wcs-primary);

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

@@ -1,5 +1,5 @@
 import { Component, Element, Event, Prop, h, Host, Listen } from '@stencil/core';
-import * as MDCRipple from '@material/ripple';
+import { MDCRipple } from '@material/ripple';
 /**
  * Select option component, use in conjunction with wcs-select.
  */
@@ -24,8 +24,7 @@ export class SelectOption {
     }
   }
   componentDidLoad() {
-    const ripple = new MDCRipple.MDCRipple(this.el);
-    ripple.unbounded = true;
+    this.mdcRipple = new MDCRipple(this.el);
   }
   onMouseDown(event) {
     if (!this.disabled) {
@@ -152,11 +151,11 @@ export class SelectOption {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }, {
-            "text": undefined,
-            "name": "ignore"
+            "name": "ignore",
+            "text": undefined
           }],
         "text": "This property musn't be set by hand, it is used by the `wcs-select` component.\nIf you want a multiple select, set `multiple` attribute on the parent select instead."
       },

package/dist/collection/components/switch/switch.css

@@ -3,40 +3,54 @@
   --wcs-switch-background-color-final: var(--wcs-primary);
   --wcs-switch-bullet-color-initial: var(--wcs-switch-background-color-final);
   --wcs-switch-bullet-color-final: var(--wcs-switch-background-color-initial);
+  --wcs-switch-text-color: var(--wcs-text-medium);
   display: flex;
 }
 
+:host([disabled]) {
+  --wcs-switch-text-color: var(--wcs-text-disabled);
+}
+
 /* Customize the label (the wcs-container) */
 .wcs-container {
   position: relative;
-  display: inline-block;
-  width: 3rem;
-  height: 1.5rem;
+  display: flex;
   margin-bottom: 0;
 }
 
+/* Let the user choose the alignment of the checkbox with the label text */
+:host([label-alignment=top]) .wcs-container {
+  align-items: start;
+}
+
+:host([label-alignment=center]) .wcs-container {
+  align-items: center;
+}
+
+:host([label-alignment=bottom]) .wcs-container {
+  align-items: flex-end;
+}
+
 /* Hide the browser's default switch */
 .wcs-container input {
   position: absolute;
   opacity: 0;
-  cursor: pointer;
   height: 0;
   width: 0;
 }
 
-/* Create a custom switch */
-.wcs-switch, .text {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.text {
+  color: var(--wcs-switch-text-color);
+  margin-left: 6px;
+  font-weight: 500;
+  line-height: 1.375;
+}
+
+.wcs-container:not([aria-disabled]) input:checked ~ .text {
+  --wcs-switch-text-color: var(--wcs-primary);
 }
 
-.wcs-checkmark::before, .wcs-checkmark {
+.wcs-checkmark::before {
   position: absolute;
   transition: all 0.15s ease-out;
 }
@@ -51,16 +65,39 @@
   background-color: var(--wcs-switch-bullet-color-initial);
 }
 
+:host([disabled]:not([checked])) .wcs-checkmark::before {
+  background-color: var(--wcs-text-disabled);
+}
+:host([disabled]:not([checked])) .wcs-checkmark {
+  background-color: var(--wcs-light);
+}
+
+:host([disabled][checked]) .wcs-checkmark::before {
+  background-color: var(--wcs-white);
+}
+:host([disabled][checked]) .wcs-checkmark {
+  background-color: var(--wcs-text-disabled);
+}
+
 .wcs-checkmark {
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  cursor: pointer;
+  width: 3rem;
+  height: 1.5rem;
   border-radius: 0.75rem;
   background-color: var(--wcs-switch-background-color-initial);
 }
 
+.wcs-container:not([aria-disabled]) {
+  cursor: pointer;
+}
+
+.wcs-container:hover:not([aria-disabled]) {
+  --wcs-switch-text-color: var(--wcs-primary);
+}
+
 /* When the switch is checked, change the bullet to grey */
 input:not([disabled]):checked + .wcs-checkmark::before,
 .wcs-container:hover input:not([disabled]) + .wcs-checkmark::before,

package/dist/collection/components/switch/switch.js

@@ -1,4 +1,4 @@
-import { Component, Prop, Event, Element, h, Host } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop } from '@stencil/core';
 export class Switch {
   constructor() {
     this.switchId = `wcs-switch-${switchIds++}`;
@@ -7,6 +7,14 @@ export class Switch {
      * If `true`, the switch is selected.
      */
     this.checked = false;
+    /**
+     * Specifie the alignment of the switch with the label content
+     */
+    this.labelAlignment = 'center';
+    /**
+     * Specify wether the switch is disabled or not.
+     */
+    this.disabled = false;
   }
   toggleChange(_event) {
     this.checked = !this.checked;
@@ -16,11 +24,11 @@ export class Switch {
   }
   render() {
     return (h(Host, null,
-      h("label", { htmlFor: this.name, class: "wcs-container" },
+      h("label", { htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled },
+        h("input", { onChange: (evt) => this.toggleChange(evt), checked: this.checked, class: "wcs-switch", type: "checkbox", name: this.name, disabled: this.disabled, id: this.name }),
+        h("span", { class: "wcs-checkmark" }),
         h("span", { class: "text" },
-          h("slot", null)),
-        h("input", { onChange: (evt) => this.toggleChange(evt), checked: this.checked, class: "wcs-switch", type: "checkbox", name: this.name, id: this.name }),
-        h("span", { class: "wcs-checkmark" }))));
+          h("slot", null)))));
   }
   static get is() { return "wcs-switch"; }
   static get encapsulation() { return "shadow"; }
@@ -51,7 +59,7 @@ export class Switch {
     },
     "checked": {
       "type": "boolean",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -64,6 +72,47 @@ export class Switch {
         "text": "If `true`, the switch is selected."
       },
       "attribute": "checked",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "labelAlignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SwitchLabelAlignment",
+        "resolved": "\"bottom\" | \"center\" | \"top\"",
+        "references": {
+          "SwitchLabelAlignment": {
+            "location": "import",
+            "path": "./switch-interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifie the alignment of the switch with the label content"
+      },
+      "attribute": "label-alignment",
+      "reflect": true,
+      "defaultValue": "'center'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specify wether the switch is disabled or not."
+      },
+      "attribute": "disabled",
       "reflect": false,
       "defaultValue": "false"
     }

package/dist/collection/components/tab/tab.js

@@ -57,11 +57,11 @@ export class Tab {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "inner"
+            "name": "inner",
+            "text": undefined
           }, {
-            "text": undefined,
-            "name": "ignore"
+            "name": "ignore",
+            "text": undefined
           }],
         "text": "Do not use, meant for internal use only."
       },

package/dist/collection/components/tabs/tabs.js

@@ -270,7 +270,7 @@ export class Tabs {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when the selected tab change."
+        "text": "\nEmitted when the selected tab change."
       },
       "complexType": {
         "original": "WcsTabChangeEvent",

package/dist/collection/components/textarea/textarea.css

@@ -40,6 +40,10 @@
   margin-right: -8px;
 }
 
+:host([disabled]) textarea {
+  color: var(--wcs-text-disabled);
+}
+
 :host([state=error]) {
   border-color: var(--wcs-red) !important;
 }

package/dist/collection/components/textarea/textarea.js

@@ -226,8 +226,8 @@ export class Textarea {
       "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/tooltip/tooltip.js

@@ -119,8 +119,8 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "```html\n<span id=\"tooltiped\">Some content</span>\n<wcs-tooltip for=\"tooltiped\">A tooltip!</wcs-tooltip>\n```",
-            "name": "example"
+            "name": "example",
+            "text": "```html\n<span id=\"tooltiped\">Some content</span>\n<wcs-tooltip for=\"tooltiped\">A tooltip!</wcs-tooltip>\n```"
           }],
         "text": "The **id** of the element the tooltip's going to describe."
       },

package/dist/collection/utils/helpers.js

@@ -69,3 +69,7 @@ export const clickInsideElement = (event, element) => {
   return event.x >= element.getBoundingClientRect().x && event.x <= element.getBoundingClientRect().x + element.getBoundingClientRect().width
     && event.y >= element.getBoundingClientRect().y && event.y <= element.getBoundingClientRect().y + element.getBoundingClientRect().height;
 };
+export const clickTargetIsElementOrChildren = (mouseEvent, element) => {
+  return mouseEvent.target instanceof Node
+    && element.contains(mouseEvent.target);
+};