wcs-core 2.6.0 → 2.7.0

package/dist/collection/components/dropdown/dropdown.js

@@ -1,31 +1,41 @@
-import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';
+import { Component, Element, h, Host, Listen, Prop, State, Watch } from '@stencil/core';
 import { SelectArrow } from '../select/select-arrow';
-/**
- * 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 { createPopper } from '@popperjs/core';
+import { clickTargetIsElementOrChildren } from '../../utils/helpers';
 export class Dropdown {
   constructor() {
+    /** Hides the arrow in the button */
+    this.noArrow = false;
+    /** Dropdown's button mode */
     this.mode = 'stroked';
+    /** Dropdown's button shape */
     this.shape = 'normal';
+    /** Specifies whether the dropdown button is clickable or not */
     this.disabled = false;
+    /** placement of the dropdown's popover */
+    this.placement = 'bottom-end';
     this.expanded = false;
   }
+  placementChange() {
+    this.popper.setOptions(Object.assign(Object.assign({}, this.popper.state.options), { placement: this.placement })).then(_ => this.popper.update());
+  }
   componentDidLoad() {
-    const buttonWrapper = this.el.shadowRoot.querySelector('wcs-button').shadowRoot.querySelector('button');
-    const buttonTextColor = window.getComputedStyle(buttonWrapper).color;
-    this.el.shadowRoot.querySelector('.arrow').style.fill = buttonTextColor;
+    const wcsButtonElement = this.el.shadowRoot.querySelector('wcs-button');
+    const buttonWrapper = wcsButtonElement.shadowRoot.querySelector('button');
+    this.buttonTextColor = window.getComputedStyle(buttonWrapper).color;
+    const popoverDiv = this.el.shadowRoot.querySelector('.popover');
+    this.popper = createPopper(wcsButtonElement, popoverDiv, {
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 8]
+          }
+        }
+      ]
+    });
+    this.el.shadowRoot.querySelector('.arrow').style.fill = this.buttonTextColor;
     this.fixForFirefoxBelow63();
   }
   fixForFirefoxBelow63() {
@@ -39,14 +49,11 @@ export class Dropdown {
       });
     }
   }
-  onButtonClick(e) {
-    e.stopPropagation();
+  onButtonClick(_) {
     this.expanded = !this.expanded;
   }
   onWindowClickEvent(event) {
-    // TODO: Extract to utils
-    const clickedOnDropdownOrChildren = event.target instanceof Node
-      && this.el.contains(event.target);
+    const clickedOnDropdownOrChildren = clickTargetIsElementOrChildren(event, this.el);
     if (this.expanded && !clickedOnDropdownOrChildren) {
       this.expanded = false;
     }
@@ -54,13 +61,22 @@ export class Dropdown {
   dropdownItemClick(_) {
     this.expanded = false;
   }
+  componentDidRender() {
+    if (this.popper) {
+      this.popper.update();
+    }
+    if (!this.noArrow) {
+      this.el.shadowRoot.querySelector('.arrow').style.fill = this.buttonTextColor;
+    }
+  }
   render() {
     return (h(Host, null,
-      h("wcs-button", { mode: this.mode, shape: this.shape, onClick: ($event) => this.onButtonClick($event) },
+      h("wcs-button", { mode: this.mode, shape: this.shape, disabled: this.disabled, onClick: ($event) => this.onButtonClick($event) },
         h("div", { class: "wcs-button-content-wrapper" },
           h("slot", { name: "placeholder" }),
-          h(SelectArrow, { up: this.expanded }))),
+          this.noArrow ? null : (h(SelectArrow, { up: this.expanded })))),
       h("div", { class: (this.expanded ? 'show ' : '') + 'popover' },
+        h("div", { id: "arrow", "data-popper-arrow": true }),
         h("div", { class: "container" },
           h("slot", { name: "item" })))));
   }
@@ -73,6 +89,24 @@ export class Dropdown {
     "$": ["dropdown.css"]
   }; }
   static get properties() { return {
+    "noArrow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hides the arrow in the button"
+      },
+      "attribute": "no-arrow",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "mode": {
       "type": "string",
       "mutable": false,
@@ -90,7 +124,7 @@ export class Dropdown {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Dropdown's button mode"
       },
       "attribute": "mode",
       "reflect": false,
@@ -113,7 +147,7 @@ export class Dropdown {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Dropdown's button shape"
       },
       "attribute": "shape",
       "reflect": false,
@@ -131,17 +165,44 @@ export class Dropdown {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Specifies whether the dropdown button is clickable or not"
       },
       "attribute": "disabled",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "WcsDropdownPlacement",
+        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {
+          "WcsDropdownPlacement": {
+            "location": "import",
+            "path": "./dropdown-interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "placement of the dropdown's popover"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'bottom-end'"
     }
   }; }
   static get states() { return {
     "expanded": {}
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "placement",
+      "methodName": "placementChange"
+    }]; }
   static get listeners() { return [{
       "name": "click",
       "method": "onWindowClickEvent",

package/dist/collection/components/dropdown-divider/dropdown-divider.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+  margin: var(--wcs-base-margin) calc(var(--wcs-base-margin) * 2);
+  overflow: hidden;
+  border-top: 1px solid var(--wcs-text-light);
+  width: calc(100% - var(--wcs-base-margin) * 4);
+}

package/dist/collection/components/dropdown-divider/dropdown-divider.js

@@ -0,0 +1,14 @@
+import { Component, h, Host } from '@stencil/core';
+export class DropdownDivider {
+  render() {
+    return (h(Host, { slot: "item" }));
+  }
+  static get is() { return "wcs-dropdown-divider"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dropdown-divider.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dropdown-divider.css"]
+  }; }
+}

package/dist/collection/components/dropdown-header/dropdown-header.css

@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  padding: calc(var(--wcs-padding) / 2) var(--wcs-padding);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  color: var(--wcs-text-medium);
+  white-space: nowrap;
+}

package/dist/collection/components/dropdown-header/dropdown-header.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from '@stencil/core';
+export class DropdownHeader {
+  render() {
+    return (h(Host, { slot: "item" },
+      h("slot", null)));
+  }
+  static get is() { return "wcs-dropdown-header"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["dropdown-header.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dropdown-header.css"]
+  }; }
+}

package/dist/collection/components/form-field/form-field.css

@@ -2,7 +2,7 @@
   --wcs-form-field-icon-color: var(--wcs-text-medium);
   --wcs-form-field-border-radius-left: var(--wcs-border-radius);
   --wcs-form-field-border-radius-right: var(--wcs-border-radius);
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
 }
 

package/dist/collection/components/grid/grid.js

@@ -83,6 +83,19 @@ export class Grid {
     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"]');
@@ -93,22 +106,32 @@ export class Grid {
     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 = _.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 = _.cloneDeep(this.rows)
         .sort((a, b) => {
-        const path = event.detail.column.path;
-        return ((_.get(a.data, path) < _.get(b.data, path)) ? -1 : (_.get(a.data, path) > _.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(event.detail.order);
+        const path = colmun.path;
+        return ((_.get(a.data, path) < _.get(b.data, path)) ? -1 : (_.get(a.data, path) > _.get(b.data, path)) ? 1 : 0) * getSortOrderInteger(colmun.sortOrder);
       });
     }
-    this.updatePageIndex();
   }
   /**
    * Update the page's number of all rows

package/dist/collection/components/grid-column/grid-column.js

@@ -10,6 +10,9 @@ export class GridColumn {
   parseMyObjectProp(newValue) {
     this.wcsHiddenChange.emit(newValue);
   }
+  sortOrderChange(_) {
+    this.emitSortConfig();
+  }
   emitSortConfig() {
     if (!this.sort)
       return;
@@ -151,7 +154,7 @@ export class GridColumn {
         "text": ""
       },
       "attribute": "sort-order",
-      "reflect": true,
+      "reflect": false,
       "defaultValue": "'none'"
     },
     "width": {
@@ -248,5 +251,8 @@ export class GridColumn {
   static get watchers() { return [{
       "propName": "hidden",
       "methodName": "parseMyObjectProp"
+    }, {
+      "propName": "sortOrder",
+      "methodName": "sortOrderChange"
     }]; }
 }

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"; }
@@ -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/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,