wcs-core 2.6.0 → 2.10.0

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/spinner/spinner-interface.js

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

package/dist/collection/components/spinner/spinner.js

@@ -18,11 +18,16 @@ export class Spinner {
   static get properties() { return {
     "mode": {
       "type": "string",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
-        "original": "'border' | 'growing'",
+        "original": "WcsSpinnerMode",
         "resolved": "\"border\" | \"growing\"",
-        "references": {}
+        "references": {
+          "WcsSpinnerMode": {
+            "location": "import",
+            "path": "./spinner-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

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

@@ -16,7 +16,7 @@ export class Tab {
   static get properties() { return {
     "header": {
       "type": "string",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "string",
         "resolved": "string",

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

@@ -166,7 +166,7 @@ export class Tabs {
   static get properties() { return {
     "align": {
       "type": "string",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "WcsTabsAlignment",
         "resolved": "\"center\" | \"end\" | \"start\"",

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/tooltip/tooltip.css

@@ -0,0 +1,3 @@
+:host {
+  display: none;
+}