wcs-core 2.6.0 → 2.7.0

package/dist/esm/wcs-grid-column.entry.js

@@ -43,6 +43,9 @@ let GridColumn = class {
   parseMyObjectProp(newValue) {
     this.wcsHiddenChange.emit(newValue);
   }
+  sortOrderChange(_) {
+    this.emitSortConfig();
+  }
   emitSortConfig() {
     if (!this.sort)
       return;
@@ -61,7 +64,8 @@ let GridColumn = class {
   }
   get el() { return getElement(this); }
   static get watchers() { return {
-    "hidden": ["parseMyObjectProp"]
+    "hidden": ["parseMyObjectProp"],
+    "sortOrder": ["sortOrderChange"]
   }; }
 };
 GridColumn.style = gridColumnCss;

package/dist/esm/wcs-grid.entry.js

@@ -170,6 +170,19 @@ let Grid = class {
     if (this.selectedItems) {
       this.updateSelectionWithValues(this.selectedItems);
     }
+    this.applyInitialSortConfig();
+  }
+  /**
+   * Handle existing column's filters (defined before the grid is instantiated)
+   * @private
+   */
+  applyInitialSortConfig() {
+    const [first, ...other] = this.columns.filter(c => c.sortOrder !== 'none');
+    // We keep only one active sorted column
+    other === null || other === void 0 ? void 0 : other.forEach(o => o.sortOrder = 'none');
+    if (first && !this.serverMode) {
+      this.sortBy(first);
+    }
   }
   getGridColumnsFromTemplate() {
     const slotted = this.el.shadowRoot.querySelector('slot[name="grid-column"]');
@@ -180,22 +193,32 @@ let Grid = class {
     return slotted.assignedElements();
   }
   sortChangeEventHandler(event) {
+    if (event.detail.order === 'none')
+      return;
     // We keep only one active sort column
     this.columns.filter(c => c !== event.detail.column).forEach(c => c.sortOrder = 'none');
     if (this.serverMode)
       return;
-    if (event.detail.sortFn) {
+    this.sortBy(event.detail.column);
+    this.updatePageIndex();
+  }
+  /**
+   * Sorts the grid rows according to the given column's configuration
+   * @param colmun Column from which to extract the sorting configuration
+   * @private
+   */
+  sortBy(colmun) {
+    if (colmun.sortFn) {
       this.rows = lodash.cloneDeep(this.rows)
-        .sort((a, b) => event.detail.sortFn(a.data, b.data, event.detail.column) * getSortOrderInteger(event.detail.order));
+        .sort((a, b) => colmun.sortFn(a.data, b.data, colmun) * getSortOrderInteger(colmun.sortOrder));
     }
     else {
       this.rows = lodash.cloneDeep(this.rows)
         .sort((a, b) => {
-        const path = event.detail.column.path;
-        return ((lodash.get(a.data, path) < lodash.get(b.data, path)) ? -1 : (lodash.get(a.data, path) > lodash.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(event.detail.order);
+        const path = colmun.path;
+        return ((lodash.get(a.data, path) < lodash.get(b.data, path)) ? -1 : (lodash.get(a.data, path) > lodash.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);
       });
     }
-    this.updatePageIndex();
   }
   /**
    * Update the page's number of all rows

package/dist/esm/wcs-input.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.js';
-import { d as debounceEvent, i as inheritAttributes, f as findItemLabel } from './helpers-50436c51.js';
+import { d as debounceEvent, i as inheritAttributes, f as findItemLabel } from './helpers-e2993152.js';
 
-const inputCss = ":host{--wcs-input-icon-color:var(--wcs-text-medium);--wcs-internal-input-border-radius-left:var(--wcs-input-border-radius-left, var(--wcs-border-radius));--wcs-internal-input-border-radius-right:var(--wcs-input-border-radius-right, var(--wcs-border-radius));display:flex;width:100%;border-radius:var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);background-color:var(--wcs-light);border:1px solid var(--wcs-light);background-clip:padding-box}:host ::placeholder{font-weight:400;font-style:italic}:host input{overflow:hidden;box-sizing:border-box;min-height:24px;width:100%;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-primary);font-weight:var(--wcs-font-weight-form-value) !important;border:none;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);font-size:1rem;line-height:1.5}:host input:focus{box-shadow:none;outline:0}:host wcs-mat-icon{position:relative;margin-top:8px;margin-left:8px;margin-right:-8px}:host([state=error]){border-color:var(--wcs-red) !important}:host(:focus-within){border:solid 1px var(--wcs-primary)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-primary)}";
+const inputCss = ":host{--wcs-input-icon-color:var(--wcs-text-medium);--wcs-internal-input-border-radius-left:var(--wcs-input-border-radius-left, var(--wcs-border-radius));--wcs-internal-input-border-radius-right:var(--wcs-input-border-radius-right, var(--wcs-border-radius));display:flex;width:100%;border-radius:var(--wcs-internal-input-border-radius-left) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-right) var(--wcs-internal-input-border-radius-left);background-color:var(--wcs-light);border:1px solid var(--wcs-light);background-clip:padding-box}:host ::placeholder{font-weight:400;font-style:italic}:host input{overflow:hidden;box-sizing:border-box;min-height:24px;width:100%;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-primary);font-weight:var(--wcs-font-weight-form-value) !important;border:none;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);font-size:1rem;line-height:1.5}:host input:focus{box-shadow:none;outline:0}:host wcs-mat-icon{position:relative;margin-top:8px;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)}";
 
 let Input = class {
   constructor(hostRef) {
@@ -210,7 +210,7 @@ let Input = class {
     if (label) {
       label.id = labelId;
     }
-    return (h(Host, { "aria-disabled": this.disabled ? 'true' : 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))));
+    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)), this.suffixLabel ? (h("span", { class: "suffix" }, this.suffixLabel)) : null));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/wcs-radio.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.js';
 
-const radioCss = ":host([mode=radio]) input{display:none}:host([mode=radio]) label{padding:0.125rem 0 0;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;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{transition:0.175s ease-in-out;position:relative;width:1.125rem;height:1.125rem;content:\"\";background:no-repeat 50%/50% 50%}:host([mode=radio][checked]) label{color:var(--wcs-primary)}:host([mode=radio][checked]) label:before{border-color:var(--wcs-primary);background-color:var(--wcs-primary)}:host([mode=radio]:hover) label{color:var(--wcs-primary)}:host([mode=radio]:hover) label:before{border-color:var(--wcs-primary)}:host([mode=option]){padding:var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);font-weight:500 !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:0.375rem 1.25rem 0.3125rem;margin-bottom:0;color:var(--wcs-white);white-space:nowrap;cursor:pointer;border-radius:0.4375rem}:host([mode=option][checked]) label{font-weight:500 !important;color:var(--wcs-primary);background-color:var(--wcs-white)}";
+const radioCss = ":host([mode=radio]) input{display:none}:host([mode=radio]) label{padding:0.125rem 0 0;margin-bottom:0;color:var(--wcs-text-medium);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;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{transition:0.175s ease-in-out;position:relative;width:1.125rem;height:1.125rem;content:\"\";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)}:host([mode=radio][checked]) label:before{border-color:var(--wcs-primary);background-color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label{color:var(--wcs-primary)}:host([mode=radio]:hover):not([disabled]) label:before{border-color:var(--wcs-primary)}:host([mode=option]){padding:var(--wcs-base-margin) calc(var(--wcs-base-margin) / 2);font-weight:500 !important}:host([mode=option]) input{position:absolute;z-index:-1;opacity:0;box-sizing:border-box;padding:0}:host([mode=option]) label{padding:0.375rem 1.25rem 0.3125rem;margin-bottom:0;color:var(--wcs-white);white-space:nowrap;border-radius:0.4375rem}:host([mode=option][checked]) label{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}";
 
 let Radio = class {
   constructor(hostRef) {
@@ -35,7 +35,7 @@ let Radio = class {
     });
   }
   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("label", { htmlFor: `${this.inputId}` }, this.label)));
+    return (h(Host, { slot: "option" }, 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)));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/wcs-select_2.entry.js

@@ -1,7 +1,7 @@
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-b982604a.js';
 import { l as lodash } from './lodash-d6d9d079.js';
 import { S as SelectArrow } from './select-arrow-73ac4016.js';
-import { a as isElement } from './helpers-50436c51.js';
+import { b as isElement } from './helpers-e2993152.js';
 import { M as MDCRipple } from './component-6b4d470f.js';
 
 /*! *****************************************************************************

package/dist/esm/wcs-switch.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.js';
 
-const switchCss = ":host{--wcs-switch-background-color-initial:var(--wcs-text-light);--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);display:flex}.wcs-container{position:relative;display:inline-block;width:3rem;height:1.5rem;margin-bottom:0}.wcs-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.wcs-switch,.text{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.wcs-checkmark::before,.wcs-checkmark{position:absolute;transition:all 0.15s ease-out}.wcs-checkmark::before{bottom:0.3125rem;left:0.3125rem;width:0.875rem;height:0.875rem;content:\"\";border-radius:50%;background-color:var(--wcs-switch-bullet-color-initial)}.wcs-checkmark{top:0;right:0;bottom:0;left:0;cursor:pointer;border-radius:0.75rem;background-color:var(--wcs-switch-background-color-initial)}input:not([disabled]):checked+.wcs-checkmark::before,.wcs-container:hover input:not([disabled])+.wcs-checkmark::before,.wcs-container:focus input:not([disabled])+.wcs-checkmark::before{background-color:var(--wcs-switch-bullet-color-final)}input:checked+.wcs-checkmark::before{transform:translateX(24px)}input:not([disabled]):checked+.wcs-checkmark,.wcs-container:hover input:not([disabled])+.wcs-checkmark,.wcs-container:focus input:not([disabled])+.wcs-checkmark{background-color:var(--wcs-switch-background-color-final)}";
+const switchCss = ":host{--wcs-switch-background-color-initial:var(--wcs-text-light);--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)}.wcs-container{position:relative;display:flex;margin-bottom:0}: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}.wcs-container input{position:absolute;opacity:0;height:0;width: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{position:absolute;transition:all 0.15s ease-out}.wcs-checkmark::before{bottom:0.3125rem;left:0.3125rem;width:0.875rem;height:0.875rem;content:\"\";border-radius:50%;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;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)}input:not([disabled]):checked+.wcs-checkmark::before,.wcs-container:hover input:not([disabled])+.wcs-checkmark::before,.wcs-container:focus input:not([disabled])+.wcs-checkmark::before{background-color:var(--wcs-switch-bullet-color-final)}input:checked+.wcs-checkmark::before{transform:translateX(24px)}input:not([disabled]):checked+.wcs-checkmark,.wcs-container:hover input:not([disabled])+.wcs-checkmark,.wcs-container:focus input:not([disabled])+.wcs-checkmark{background-color:var(--wcs-switch-background-color-final)}";
 
 let Switch = class {
   constructor(hostRef) {
@@ -12,6 +12,14 @@ let Switch = class {
      * 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;
@@ -20,7 +28,7 @@ let Switch = class {
     });
   }
   render() {
-    return (h(Host, null, h("label", { htmlFor: this.name, class: "wcs-container" }, 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" }))));
+    return (h(Host, null, 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)))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/wcs-textarea.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, a as readTask, h, H as Host, g as getElement } from './index-b982604a.js';
-import { d as debounceEvent, i as inheritAttributes, r as raf, f as findItemLabel } from './helpers-50436c51.js';
+import { d as debounceEvent, i as inheritAttributes, r as raf, f as findItemLabel } from './helpers-e2993152.js';
 
-const textareaCss = ":host{--wcs-textarea-icon-color:var(--wcs-text-medium);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-border-radius));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-border-radius));display:flex;flex-direction:row;width:100%;border-radius:var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);background-color:var(--wcs-light);border:1px solid var(--wcs-light);background-clip:padding-box}:host ::placeholder{font-weight:400;font-style:italic}:host textarea{overflow:auto;flex:1;width:100%;box-sizing:border-box;min-height:24px;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-primary);font-weight:var(--wcs-font-weight-form-value) !important;border:none;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);font-size:1rem;line-height:1.5}:host textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{position:relative;margin-top:7px;margin-left:8px;margin-right:-8px}:host([state=error]){border-color:var(--wcs-red) !important}:host(:focus-within){border:solid 1px var(--wcs-primary)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-primary)}";
+const textareaCss = ":host{--wcs-textarea-icon-color:var(--wcs-text-medium);--wcs-internal-textarea-border-radius-left:var(--wcs-textarea-border-radius-left, var(--wcs-border-radius));--wcs-internal-textarea-border-radius-right:var(--wcs-textarea-border-radius-right, var(--wcs-border-radius));display:flex;flex-direction:row;width:100%;border-radius:var(--wcs-internal-textarea-border-radius-left) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-right) var(--wcs-internal-textarea-border-radius-left);background-color:var(--wcs-light);border:1px solid var(--wcs-light);background-clip:padding-box}:host ::placeholder{font-weight:400;font-style:italic}:host textarea{overflow:auto;flex:1;width:100%;box-sizing:border-box;min-height:24px;background-color:transparent;font-family:var(--wcs-font-sans-serif);color:var(--wcs-primary);font-weight:var(--wcs-font-weight-form-value) !important;border:none;padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);font-size:1rem;line-height:1.5}:host textarea:focus{box-shadow:none;outline:0}:host wcs-mat-icon{position:relative;margin-top:7px;margin-left:8px;margin-right:-8px}:host([disabled]) textarea{color:var(--wcs-text-disabled)}:host([state=error]){border-color:var(--wcs-red) !important}:host(:focus-within){border:solid 1px var(--wcs-primary)}:host(:focus-within) wcs-mat-icon{color:var(--wcs-primary)}";
 
 let Textarea = class {
   constructor(hostRef) {

package/dist/esm/wcs.js

@@ -13,5 +13,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["wcs-editable-field",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-grid",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-horizontal-stepper",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"buttonMode":[32],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-dropdown",[[1,"wcs-dropdown",{"mode":[1],"shape":[1],"disabled":[4],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"]]]]],["wcs-galactic-menu",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input",[[1,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"disabled":[4],"enterkeyhint":[1],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"size":[2],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-modal",[[4,"wcs-modal",{"backdrop":[516],"show":[1540],"showCloseButton":[516,"show-close-button"]},[[4,"keydown","onKeyDown"]]]]],["wcs-textarea",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-action-bar",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app",[[1,"wcs-app"]]],["wcs-badge",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body",[[1,"wcs-card-body"]]],["wcs-com-nav",[[1,"wcs-com-nav",{"appName":[1,"app-name"]}]]],["wcs-com-nav-category",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider",[[1,"wcs-divider"]]],["wcs-dropdown-item",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"]]]]],["wcs-field",[[1,"wcs-field"]]],["wcs-field-content",[[1,"wcs-field-content"]]],["wcs-field-label",[[1,"wcs-field-label"]]],["wcs-footer",[[1,"wcs-footer"]]],["wcs-galactic",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1537,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header",[[1,"wcs-header"]]],["wcs-hint",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property",[[1,"wcs-list-item-property"]]],["wcs-nav",[[1,"wcs-nav"]]],["wcs-nav-item",[[4,"wcs-nav-item",{"text":[513],"href":[1537]}]]],["wcs-progress-radial",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch",[[1,"wcs-switch",{"name":[1],"checked":[1028]}]]],["wcs-tab",[[1,"wcs-tab",{"header":[1537],"itemKey":[8,"item-key"]}]]],["wcs-tabs",[[1,"wcs-tabs",{"align":[1537],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip",[[1,"wcs-tooltip",{"for":[513],"position":[513]}]]],["wcs-progress-bar",[[1,"wcs-progress-bar",{"small":[1028],"showLabel":[1028,"show-label"],"value":[1026]}]]],["wcs-radio",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]}]]],["wcs-select_2",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"]]],[1,"wcs-select",{"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"icon":[8],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-spinner",[[1,"wcs-spinner",{"mode":[1537]}]]],["wcs-button",[[1,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513]},[[0,"click","onClick"]]]]],["wcs-checkbox",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"]}]]],["wcs-mat-icon",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"familyFile":[32],"familyClass":[32]}]]]], options);
+  return bootstrapLazy([["wcs-editable-field",[[1,"wcs-editable-field",{"type":[1],"label":[1],"readonly":[4],"value":[1032],"validateFn":[16],"formatFn":[16],"errorMsg":[1,"error-msg"],"currentState":[32],"isError":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-grid",[[1,"wcs-grid",{"serverMode":[4,"server-mode"],"data":[16],"loading":[4],"selectionConfig":[1,"selection-config"],"selectedItems":[8,"selected-items"],"wcsGridPaginationId":[1,"wcs-grid-pagination-id"],"rowIdPath":[1,"row-id-path"],"columns":[32],"paginationEl":[32],"rows":[32]},[[0,"wcsHiddenChange","onHiddenColumnChange"],[0,"wcsSortChange","sortChangeEventHandler"],[0,"wcsGridPaginationChange","paginationChangeEventHandler"],[8,"wcsGridPaginationChange","paginationChangeEventHandlerOutside"]]]]],["wcs-grid-pagination",[[1,"wcs-grid-pagination",{"availablePageSizes":[16],"currentPage":[2,"current-page"],"pageSize":[2,"page-size"],"itemsCount":[2,"items-count"],"pageCount":[2,"page-count"]}]]],["wcs-horizontal-stepper",[[1,"wcs-horizontal-stepper",{"currentStep":[1026,"current-step"],"steps":[16],"mode":[1],"checkOnComplete":[4,"check-on-complete"],"buttonMode":[32],"internalCurrentStep":[32],"previous":[64],"next":[64]}]]],["wcs-dropdown",[[1,"wcs-dropdown",{"noArrow":[4,"no-arrow"],"mode":[1],"shape":[1],"disabled":[4],"placement":[1],"expanded":[32]},[[8,"click","onWindowClickEvent"],[0,"wcsDropdownItemClick","dropdownItemClick"]]]]],["wcs-galactic-menu",[[1,"wcs-galactic-menu",{"text":[1],"showPopoverMenu":[32]},[[8,"click","onWindowClickEvent"]]]]],["wcs-input",[[1,"wcs-input",{"fireFocusEvents":[4,"fire-focus-events"],"accept":[1],"autocapitalize":[1],"autocomplete":[1],"autocorrect":[1],"autofocus":[4],"clearInput":[4,"clear-input"],"clearOnEdit":[4,"clear-on-edit"],"debounce":[2],"prefixLabel":[1,"prefix-label"],"suffixLabel":[1,"suffix-label"],"disabled":[4],"enterkeyhint":[1],"icon":[1],"inputmode":[1],"max":[1],"maxlength":[2],"min":[1],"minlength":[2],"multiple":[4],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"step":[1],"size":[2],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-modal",[[4,"wcs-modal",{"backdrop":[516],"show":[1540],"showCloseButton":[516,"show-close-button"]},[[4,"keydown","onKeyDown"]]]]],["wcs-textarea",[[1,"wcs-textarea",{"fireFocusEvents":[4,"fire-focus-events"],"autocapitalize":[1],"autofocus":[4],"clearOnEdit":[1028,"clear-on-edit"],"debounce":[2],"disabled":[4],"icon":[1],"inputmode":[1],"enterkeyhint":[1],"maxlength":[2],"minlength":[2],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"spellcheck":[4],"state":[513],"cols":[2],"rows":[2],"wrap":[1],"autoGrow":[4,"auto-grow"],"value":[1025],"hasFocus":[32],"fitContent":[64],"setFocus":[64],"setBlur":[64],"getInputElement":[64]}]]],["wcs-action-bar",[[1,"wcs-action-bar",{"gutter":[4],"hasTabs":[32]}]]],["wcs-app",[[1,"wcs-app"]]],["wcs-badge",[[1,"wcs-badge",{"shape":[1],"color":[1]}]]],["wcs-card",[[1,"wcs-card",{"mode":[1537]}]]],["wcs-card-body",[[1,"wcs-card-body"]]],["wcs-com-nav",[[1,"wcs-com-nav",{"appName":[1,"app-name"]}]]],["wcs-com-nav-category",[[1,"wcs-com-nav-category",{"label":[1],"categoryOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsCategoryOpened","onSubmenuOpened"]]]]],["wcs-com-nav-submenu",[[1,"wcs-com-nav-submenu",{"label":[1],"panelTitle":[1,"panel-title"],"panelDescription":[1,"panel-description"],"menuOpen":[32],"close":[64],"open":[64]},[[8,"click","onWindowClickEvent"],[8,"wcsSubmenuOpened","onSubmenuOpened"],[0,"wcsCategoryItemClicked","wcsCategoryItemClickedHandler"]]]]],["wcs-divider",[[1,"wcs-divider"]]],["wcs-dropdown-divider",[[1,"wcs-dropdown-divider"]]],["wcs-dropdown-header",[[1,"wcs-dropdown-header"]]],["wcs-dropdown-item",[[4,"wcs-dropdown-item",null,[[1,"mousedown","onMouseDown"]]]]],["wcs-field",[[1,"wcs-field"]]],["wcs-field-content",[[1,"wcs-field-content"]]],["wcs-field-label",[[1,"wcs-field-label"]]],["wcs-footer",[[1,"wcs-footer"]]],["wcs-galactic",[[1,"wcs-galactic",{"text":[1],"show":[32]}]]],["wcs-grid-column",[[1,"wcs-grid-column",{"path":[1],"name":[1],"sort":[4],"sortFn":[16],"formatter":[16],"sortOrder":[1025,"sort-order"],"width":[1],"customCells":[4,"custom-cells"],"hidden":[4]}]]],["wcs-grid-custom-cell",[[1,"wcs-grid-custom-cell",{"columnId":[1,"column-id"],"rowId":[8,"row-id"]}]]],["wcs-header",[[1,"wcs-header"]]],["wcs-hint",[[1,"wcs-hint",{"small":[1540]}]]],["wcs-icon",[[0,"wcs-icon",{"icon":[1],"size":[1]}]]],["wcs-label",[[1,"wcs-label",{"required":[516]}]]],["wcs-list-item",[[1,"wcs-list-item",{"activated":[1028]}]]],["wcs-list-item-properties",[[1,"wcs-list-item-properties"]]],["wcs-list-item-property",[[1,"wcs-list-item-property"]]],["wcs-nav",[[1,"wcs-nav"]]],["wcs-nav-item",[[4,"wcs-nav-item",{"text":[513],"href":[1537]}]]],["wcs-progress-radial",[[1,"wcs-progress-radial",{"size":[2],"showLabel":[4,"show-label"],"value":[2]}]]],["wcs-radio-group",[[1,"wcs-radio-group",{"value":[8],"name":[520],"mode":[513]},[[0,"wcsRadioClick","selectedOptionChanged"]]]]],["wcs-switch",[[1,"wcs-switch",{"name":[1],"checked":[516],"labelAlignment":[513,"label-alignment"],"disabled":[4]}]]],["wcs-tab",[[1,"wcs-tab",{"header":[1537],"itemKey":[8,"item-key"]}]]],["wcs-tabs",[[1,"wcs-tabs",{"align":[1537],"selectedIndex":[2,"selected-index"],"selectedKey":[8,"selected-key"],"headersOnly":[4,"headers-only"],"gutter":[4],"headers":[32],"currentActiveTabIndex":[32]},[[0,"tabLoaded","onTabLoaded"]]]]],["wcs-tooltip",[[1,"wcs-tooltip",{"for":[513],"position":[513]}]]],["wcs-progress-bar",[[1,"wcs-progress-bar",{"small":[1028],"showLabel":[1028,"show-label"],"value":[1026]}]]],["wcs-radio",[[1,"wcs-radio",{"mode":[513],"value":[1544],"label":[1537],"checked":[1540],"disabled":[1028]}]]],["wcs-select_2",[[4,"wcs-select-option",{"disabled":[1540],"selected":[1540],"value":[8],"chipColor":[1,"chip-color"],"chipBackgroundColor":[1,"chip-background-color"],"multiple":[1540]},[[1,"mousedown","onMouseDown"]]],[1,"wcs-select",{"value":[1032],"placeholder":[1537],"disabled":[1028],"multiple":[516],"chips":[516],"name":[1],"compareWith":[16],"expanded":[32],"hasLoaded":[32],"displayText":[32],"focused":[32],"overlayDirection":[32],"open":[64],"close":[64]},[[1,"mousedown","onMouseDown"],[8,"click","onWindowClickEvent"],[0,"wcsSelectOptionClick","selectedOptionChanged"]]]]],["wcs-error_2",[[1,"wcs-error"],[1,"wcs-form-field",{"isError":[1540,"is-error"],"icon":[8],"hasPrefix":[32],"hasSuffix":[32],"spiedElement":[32]}]]],["wcs-spinner",[[1,"wcs-spinner",{"mode":[1537]}]]],["wcs-button",[[1,"wcs-button",{"type":[1025],"href":[1],"disabled":[516],"ripple":[4],"shape":[513],"mode":[513]},[[0,"click","onClick"]]]]],["wcs-checkbox",[[1,"wcs-checkbox",{"name":[1],"indeterminate":[1540],"checked":[1540],"labelAlignment":[1537,"label-alignment"],"disabled":[4]}]]],["wcs-mat-icon",[[1,"wcs-mat-icon",{"icon":[1],"size":[1],"family":[1],"familyFile":[32],"familyClass":[32]}]]]], options);
 });

package/dist/types/components/checkbox/checkbox.d.ts

@@ -16,6 +16,10 @@ export declare class Checkbox implements ComponentInterface {
    * Specifie the alignment of the checkbox with the label content
    */
   labelAlignment: CheckboxLabelAlignment;
+  /**
+   * Specify wether the checkbox is disabled or not.
+   */
+  disabled: boolean;
   /**
    * Emitted when the checked property has changed.
    */

package/dist/types/components/dropdown/dropdown-interface.d.ts

@@ -0,0 +1 @@
+export declare type WcsDropdownPlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';

package/dist/types/components/dropdown/dropdown.d.ts

@@ -1,30 +1,27 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 import { WcsButtonMode, WcsButtonShape } from '../button/button-interface';
-/**
- * Dropdown component.
- *
- * @example ```hmtl
- *   <wcs-dropdown>
- *       <div slot="placeholder"></div>
- *       <div slot="items">
- *           <wcs-dropdown-header></wcs-dropdown-header>
- *           <wcs-divider></wcs-divider>
- *           <wcs-dropdown-item></wcs-dropdown-item>
- *      </div>
- *   </wcs-dropdown>
- * ```
- * @todo Complete keyboard navigation.
- */
+import { WcsDropdownPlacement } from './dropdown-interface';
 export declare class Dropdown implements ComponentInterface {
   el: HTMLWcsDropdownElement;
+  /** Hides the arrow in the button */
+  noArrow: boolean;
+  /** Dropdown's button mode */
   mode: WcsButtonMode;
+  /** Dropdown's button shape */
   shape: WcsButtonShape;
+  /** Specifies whether the dropdown button is clickable or not */
   disabled: boolean;
+  /** placement of the dropdown's popover */
+  placement: WcsDropdownPlacement;
   expanded: boolean;
+  private popper;
+  private buttonTextColor;
+  protected placementChange(): void;
   componentDidLoad(): void;
   private fixForFirefoxBelow63;
   private onButtonClick;
   onWindowClickEvent(event: MouseEvent): void;
-  dropdownItemClick(_: CustomEvent<any>): void;
+  dropdownItemClick(_: CustomEvent<void>): void;
+  componentDidRender(): void;
   render(): any;
 }

package/dist/types/components/dropdown-divider/dropdown-divider.d.ts

@@ -0,0 +1,3 @@
+export declare class DropdownDivider {
+  render(): any;
+}

package/dist/types/components/dropdown-header/dropdown-header.d.ts

@@ -0,0 +1,3 @@
+export declare class DropdownHeader {
+  render(): any;
+}

package/dist/types/components/grid/grid.d.ts

@@ -46,9 +46,20 @@ export declare class Grid implements ComponentInterface, ComponentDidLoad {
   private wcsGridRowToWcsGridRowData;
   private updateGridRows;
   componentDidLoad(): void;
+  /**
+   * Handle existing column's filters (defined before the grid is instantiated)
+   * @private
+   */
+  private applyInitialSortConfig;
   private getGridColumnsFromTemplate;
   private getGridPaginationsFromTemplate;
   sortChangeEventHandler(event: CustomEvent<WcsGridColumnSortChangeEventDetails>): void;
+  /**
+   * Sorts the grid rows according to the given column's configuration
+   * @param colmun Column from which to extract the sorting configuration
+   * @private
+   */
+  private sortBy;
   /**
    * Update the page's number of all rows
    */

package/dist/types/components/grid-column/grid-column.d.ts

@@ -17,6 +17,7 @@ export declare class GridColumn implements ComponentInterface {
   wcsSortChange: EventEmitter<WcsGridColumnSortChangeEventDetails>;
   wcsHiddenChange: EventEmitter<boolean>;
   parseMyObjectProp(newValue: boolean): void;
+  sortOrderChange(_: WcsSortOrder): void;
   emitSortConfig(): void;
   render(): any;
   private onSortClick;

package/dist/types/components/input/input.d.ts

@@ -52,6 +52,14 @@ export declare class Input implements ComponentInterface {
    * Set the amount of time, in milliseconds, to wait to trigger the `wcsChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`.
    */
   debounce: number;
+  /**
+   * Prefix displayed before the text field contents. This is not included in the value.
+   */
+  prefixLabel: string;
+  /**
+   * Suffix displayed after the text field contents. This is not included in the value.
+   */
+  suffixLabel: string;
   protected debounceChanged(): void;
   /**
    * If `true`, the user cannot interact with the input.

package/dist/types/components/radio-group/radio-group-interface.d.ts

@@ -1,3 +1,4 @@
 export interface RadioGroupChangeEventDetail {
   value: any | any[] | undefined | null;
 }
+export declare type RadioGroupMode = 'radio' | 'option';

package/dist/types/components/radio-group/radio-group.d.ts

@@ -1,10 +1,10 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import { RadioGroupChangeEventDetail } from './radio-group-interface';
+import { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';
 import { RadioChosedEvent } from '../radio/radio-interface';
 export declare class RadioGroup implements ComponentInterface {
   value: any | any[] | undefined | null;
   name: any;
-  mode: 'radio' | 'option';
+  mode: RadioGroupMode;
   el: HTMLWcsRadioGroupElement;
   /** Emitted when the value has changed. */
   wcsChange: EventEmitter<RadioGroupChangeEventDetail>;

package/dist/types/components/switch/switch-interface.d.ts

@@ -1,3 +1,4 @@
 export interface SwitchChangeEventDetail {
   checked: boolean;
 }
+export declare type SwitchLabelAlignment = 'top' | 'center' | 'bottom';

package/dist/types/components/switch/switch.d.ts

@@ -1,5 +1,5 @@
-import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
-import { SwitchChangeEventDetail } from './switch-interface';
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';
 export declare class Switch implements ComponentInterface {
   private switchId;
   el: HTMLElement;
@@ -12,6 +12,14 @@ export declare class Switch implements ComponentInterface {
    * Emitted when the checked property has changed.
    */
   wcsChange: EventEmitter<SwitchChangeEventDetail>;
+  /**
+   * Specifie the alignment of the switch with the label content
+   */
+  labelAlignment: SwitchLabelAlignment;
+  /**
+   * Specify wether the switch is disabled or not.
+   */
+  disabled: boolean;
   toggleChange(_event: Event): void;
   render(): any;
 }