wcs-core 2.5.3 → 2.8.0

package/dist/collection/components/com-nav-category/com-nav-category.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 :host {
   display: block;
 }
@@ -9,7 +8,7 @@
   font-family: icons;
   padding-left: var(--wcs-base-margin);
   font-size: 0.6rem;
-  content: "";
+  content: "\f107";
   line-height: 1;
   box-sizing: border-box;
 }
@@ -21,7 +20,7 @@
 }
 :host .label-container[data-open]:after {
   position: absolute;
-  left: calc(calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8)) - calc(1.125rem / 2));
+  left: calc(50% + var(--wcs-com-content-max-width) / 8 - 0.5625rem);
   z-index: 2;
   display: block;
   width: 1.125rem;
@@ -32,14 +31,14 @@
 }
 :host .item-container[data-open] {
   position: absolute;
-  left: calc(calc(100% / 2) + calc(var(--wcs-com-content-max-width) / 8));
+  left: calc(50% + var(--wcs-com-content-max-width) / 8);
   top: 0;
   right: 0;
   padding: 50px 0 50px 50px;
   background-blend-mode: multiply;
   background-color: rgba(0, 0, 0, 0.15);
   box-sizing: border-box;
-  height: calc(100%);
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: start;
@@ -51,7 +50,7 @@
   font-family: icons;
   padding-left: var(--wcs-base-margin);
   font-size: 0.6rem;
-  content: "";
+  content: "\f107";
   line-height: 1;
   box-sizing: border-box;
 }

package/dist/collection/components/com-nav-category/com-nav-category.js

@@ -32,11 +32,22 @@ export class ComNavCategory {
     evt.stopPropagation();
     this.wcsCategoryOpened.emit({ categoryElement: this.el });
   }
+  /**
+   * Close the category and fire item click if we detect a mouse click on a slotted `a` element.
+   * @param evt
+   * @private
+   */
+  handleItemClick(evt) {
+    if (evt.target.tagName === 'A') {
+      this.close();
+      this.wcsCategoryItemClicked.emit(evt);
+    }
+  }
   render() {
     return (h(Host, { onClick: evt => this.onClick(evt) },
       h("div", { class: "label-container", "data-open": this.categoryOpen, onClick: _ => this.categoryOpen = !this.categoryOpen },
         h("span", { class: "label" }, this.label)),
-      h("div", { class: "item-container", "data-open": this.categoryOpen },
+      h("div", { class: "item-container", "data-open": this.categoryOpen, onClick: (evt) => this.handleItemClick(evt) },
         h("slot", null))));
   }
   static get is() { return "wcs-com-nav-category"; }
@@ -89,6 +100,25 @@ export class ComNavCategory {
           }
         }
       }
+    }, {
+      "method": "wcsCategoryItemClicked",
+      "name": "wcsCategoryItemClicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "close": {

package/dist/collection/components/com-nav-submenu/com-nav-submenu.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 :host {
   display: block;
   height: 100%;
@@ -70,7 +69,7 @@
   font-family: icons;
   padding-left: var(--wcs-base-margin);
   font-size: 0.6rem;
-  content: "";
+  content: "\f107";
   line-height: 1;
   box-sizing: border-box;
 }

package/dist/collection/components/com-nav-submenu/com-nav-submenu.js

@@ -36,6 +36,20 @@ export class ComNavSubmenu {
     evt.stopPropagation();
     this.wcsSubmenuOpened.emit({ menuElement: this.el });
   }
+  handleMenuItemsClick(evt) {
+    if (evt.target.tagName === 'A') {
+      this.close();
+    }
+  }
+  /**
+   * handle category item click to close the submenu
+   * @param _
+   * @private
+   */
+  wcsCategoryItemClickedHandler(_) {
+    // If a category item is clicked, we close the submenu drawer;
+    this.close();
+  }
   render() {
     return (h(Host, { onClick: evt => this.onClick(evt) },
       h("div", { onClick: _ => this.menuOpen = !this.menuOpen, class: "menu-button" },
@@ -48,7 +62,7 @@ export class ComNavSubmenu {
             h("div", null,
               h("h3", null, this.panelTitle),
               h("p", null, this.panelDescription)),
-            h("div", { class: "menu-items" },
+            h("div", { class: "menu-items", onClick: (evt) => this.handleMenuItemsClick(evt) },
               h("slot", null)))))));
   }
   static get is() { return "wcs-com-nav-submenu"; }
@@ -183,5 +197,11 @@ export class ComNavSubmenu {
       "target": "window",
       "capture": false,
       "passive": false
+    }, {
+      "name": "wcsCategoryItemClicked",
+      "method": "wcsCategoryItemClickedHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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

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

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

@@ -1,21 +1,23 @@
 :host {
-  display: inline-flex;
-  flex-direction: row;
-  position: relative;
-  flex-flow: row-reverse;
+  display: flex;
 }
 
 wcs-button {
   --wcs-button-padding: 8px 10px 8px 16px !important;
 }
 
-:host([shape=small]) .show {
-  top: 48px !important;
+:host([no-arrow]) wcs-button {
+  --wcs-button-padding: 8px 16px 8px 16px !important;
 }
+
 :host([shape=small]) wcs-button {
   --wcs-button-padding: 2px 10px 2px 16px !important;
 }
 
+:host([shape=small][no-arrow]) wcs-button {
+  --wcs-button-padding: 2px 16px 2px 16px !important;
+}
+
 .wcs-button-content-wrapper {
   display: flex;
 }
@@ -24,47 +26,53 @@ wcs-button {
   display: none;
   border: 1px solid #d7d7d7;
   border-radius: var(--wcs-border-radius);
-  white-space: nowrap;
+  background-color: var(--wcs-white);
+  z-index: 9999;
+}
+
+.show {
+  display: block;
+}
+
+.container {
+  border-radius: inherit;
+  overflow: hidden;
+  padding: calc(var(--wcs-padding) / 2) 0;
+  background-color: var(--wcs-white);
 }
 
-.popover::before, .popover::after {
+#arrow,
+#arrow::before {
   position: absolute;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-  content: " ";
-  border: solid transparent;
-  z-index: 1000;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+  border: solid 1px #d7d7d7;
 }
 
-.popover::before {
-  border-color: rgba(216, 216, 216, 0);
-  border-width: 0.625rem;
-  right: 1.0625rem;
-  margin-left: -0.625rem;
-  bottom: 100%;
-  border-bottom-color: #d7d7d7;
+#arrow {
+  visibility: hidden;
+  z-index: -1;
 }
 
-.popover::after {
-  border-color: rgba(255, 255, 255, 0);
-  border-width: 9px;
-  right: 1.125rem;
-  margin-left: -0.5625rem;
-  bottom: 100%;
-  border-bottom-color: #fff;
+#arrow::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
 }
 
-.show {
-  z-index: 1000;
-  display: block;
-  flex-direction: column;
-  position: absolute;
-  background-color: var(--wcs-white);
-  top: 58px;
+.popover[data-popper-placement^=top] > #arrow {
+  bottom: -5px;
 }
 
-.container {
-  border-radius: inherit;
-  overflow: hidden;
+.popover[data-popper-placement^=bottom] > #arrow {
+  top: -6px;
+}
+
+.popover[data-popper-placement^=left] > #arrow {
+  right: -4px;
+}
+
+.popover[data-popper-placement^=right] > #arrow {
+  left: -6px;
 }

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/editable-field/editable-field.js

@@ -233,9 +233,14 @@ export class EditableField {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'input' | 'textarea' | 'select'",
+        "original": "EditableFieldType",
         "resolved": "\"input\" | \"select\" | \"textarea\"",
-        "references": {}
+        "references": {
+          "EditableFieldType": {
+            "location": "import",
+            "path": "./editable-field-interface"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/footer/footer.css

@@ -5,7 +5,7 @@
   color: white;
 }
 :host .end {
-  margin-top: calc(2*var(--wcs-base-margin));
+  margin-top: calc(2 * var(--wcs-base-margin));
   width: 100%;
   display: flex;
   justify-content: space-between;

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

@@ -1,8 +1,7 @@
 :host {
-  --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/form-field/form-field.js

@@ -143,23 +143,6 @@ export class FormField {
       "attribute": "is-error",
       "reflect": true,
       "defaultValue": "false"
-    },
-    "icon": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name of the material icon to add to the field"
-      },
-      "attribute": "icon",
-      "reflect": false
     }
   }; }
   static get states() { return {