wcs-core 2.6.0 → 2.10.0

package/dist/cjs/wcs-button.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3cb9d725.js');
-const helpers = require('./helpers-d9aaa8c4.js');
+const helpers = require('./helpers-6abce594.js');
 const component = require('./component-fc28ed16.js');
 
 const buttonCss = "@keyframes mdc-ripple-fg-radius-in{from{animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1))}}@keyframes mdc-ripple-fg-opacity-in{from{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-out{from{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;position:relative;outline:none;overflow:hidden}.mdc-ripple-surface::before,.mdc-ripple-surface::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.mdc-ripple-surface::after{z-index:0;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;left:0;transform:scale(0);transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);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{top:calc(50% - 100%);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-upgraded--unbounded{overflow:visible}.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%);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-upgraded--unbounded.mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{top:var(--mdc-ripple-top, calc(50% - 50%));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-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.mdc-ripple-surface::before,.mdc-ripple-surface::after{background-color:#000;background-color:var(--mdc-ripple-color, #000)}.mdc-ripple-surface:hover::before,.mdc-ripple-surface.mdc-ripple-surface--hover::before{opacity:0.04;opacity:var(--mdc-ripple-hover-opacity, 0.04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.12;opacity:var(--mdc-ripple-focus-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;opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}:host{display:inline-block;--wcs-button-padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);--wcs-button-color:var(--wcs-contrast, var(--wcs-white, white));--wcs-button-background-color:var(--wcs-base, var(--wcs-primary, #0088CE));--wcs-button-ripple-color:var(--wcs-contrast, var(--wcs-white, white));--wcs-button-border-radius:var(--wcs-border-radius);--wcs-button-border-color:var(--wcs-base)}:host([mode=clear]){--wcs-button-border-color:transparent}:host([mode=clear]) .wcs-inner-button{box-shadow:none}:host([mode=clear]),:host([mode=stroked]){--wcs-button-color:var(--wcs-base);--wcs-button-background-color:transparent}:host([mode=clear]) .wcs-inner-button::before,:host([mode=clear]) .wcs-inner-button::after,:host([mode=stroked]) .wcs-inner-button::before,:host([mode=stroked]) .wcs-inner-button::after{--wcs-button-ripple-color:var(--wcs-base)}:host([shape=small]){--wcs-button-padding:2px 16px}:host([shape=round]){--wcs-button-padding:0;--wcs-button-border-radius:50%}:host([shape=round]) .wcs-inner-button{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px}:host([shape=square]){--wcs-button-padding:0}:host([shape=square]) .wcs-inner-button{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:42px}:host([shape=normal]){--wcs-button-padding:calc(var(--wcs-padding) / 2 + 1px) calc(var(--wcs-padding))}:host([mode=stroked]) .wcs-inner-button{box-shadow:inset 0 0 0 1px var(--wcs-button-border-color)}:host([disabled]){--wcs-button-color:var(--wcs-text-disabled);--wcs-button-background-color:var(--wcs-light)}:host([disabled]) .wcs-inner-button{--wcs-button-border-color:var(--wcs-light);opacity:1;cursor:default;pointer-events:none}:host([disabled]):host([mode=clear]),:host([disabled]):host([disabled]){--wcs-button-background-color:transparent}.wcs-inner-button{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);will-change:transform, opacity;display:flex;align-content:center;font-family:var(--wcs-font-sans-serif);background-color:var(--wcs-button-background-color);color:var(--wcs-button-color);padding:var(--wcs-button-padding);border-radius:var(--wcs-button-border-radius);border:none;overflow:hidden;outline:0;text-transform:none;margin:0;cursor:pointer;font-weight:500;text-align:center;white-space:nowrap;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5;transition:color 175ms ease-in-out, background-color 175ms ease-in-out, box-shadow 175ms cubic-bezier(0.4, 0, 0.2, 1)}.wcs-inner-button::before,.wcs-inner-button::after{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.wcs-inner-button::before{transition:opacity 15ms linear, background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index, 1)}.wcs-inner-button::after{z-index:0;z-index:var(--mdc-ripple-z-index, 0)}.wcs-inner-button.mdc-ripple-upgraded::before{transform:scale(var(--mdc-ripple-fg-scale, 1))}.wcs-inner-button.mdc-ripple-upgraded::after{top:0;left:0;transform:scale(0);transform-origin:center center}.wcs-inner-button.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top, 0);left:var(--mdc-ripple-left, 0)}.wcs-inner-button.mdc-ripple-upgraded--foreground-activation::after{animation:mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards}.wcs-inner-button.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))}.wcs-inner-button::before,.wcs-inner-button::after{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.wcs-inner-button.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size, 100%);height:var(--mdc-ripple-fg-size, 100%)}.wcs-inner-button:hover::before,.wcs-inner-button.mdc-ripple-surface--hover::before{opacity:0.1;opacity:var(--mdc-ripple-hover-opacity, 0.1)}.wcs-inner-button.mdc-ripple-upgraded--background-focused::before,.wcs-inner-button:not(.mdc-ripple-upgraded):focus::before{transition-duration:75ms;opacity:0.2;opacity:var(--mdc-ripple-focus-opacity, 0.2)}.wcs-inner-button:not(.mdc-ripple-upgraded)::after{transition:opacity 150ms linear}.wcs-inner-button:not(.mdc-ripple-upgraded):active::after{transition-duration:75ms;opacity:0.3;opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.3)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:white;background-color:var(--mdc-ripple-color, white)}.wcs-inner-button::before,.wcs-inner-button::after{background-color:var(--wcs-button-ripple-color)}.wcs-inner-button:focus{box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.2)}.wcs-inner-button:hover{box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2)}a{text-decoration:none}button::-moz-focus-inner,a::-moz-focus-inner{border:0}";

package/dist/cjs/wcs-checkbox.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3cb9d725.js');
 
-const checkboxCss = ":host{--wcs-checkbox-border-color:var(--wcs-text-medium);--wcs-checkbox-text-color:var(--wcs-black);display:flex}.wcs-checkmark{transition:background-color 225ms cubic-bezier(0.17, 0.84, 0.44, 1), color 225ms cubic-bezier(0.17, 0.84, 0.44, 1)}.wcs-container{position:relative;cursor:pointer;font-size:1rem;user-select:none;font-weight:500;display:flex}: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;cursor:pointer;height:0;width:0}.wcs-container:hover,input:focus{--wcs-checkbox-border-color:var(--wcs-primary);--wcs-checkbox-text-color:var(--wcs-primary)}.wcs-checkmark{width:1.125rem;height:1.125rem;border:2px solid var(--wcs-checkbox-border-color);border-radius:3px}:host([indeterminate]) .wcs-checkmark{--wcs-checkbox-border-color:var(--wcs-primary);background:var(--wcs-primary)}.wcs-container input:checked~.wcs-checkmark{background-color:var(--wcs-primary);--wcs-checkbox-border-color:var(--wcs-primary)}.wcs-checkmark:after{content:\"\";position:absolute;display:none}.wcs-container input:checked~.wcs-checkmark:after{display:flex}.wcs-container .wcs-checkmark:after{left:7px;width:5px;height:10px;border:solid var(--wcs-white, white);border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.wcs-container input:checked~.text{--wcs-checkbox-text-color:var(--wcs-primary)}.text{color:var(--wcs-checkbox-text-color);margin-left:6px;font-weight:500;line-height:1.375}";
+const checkboxCss = ":host{--wcs-checkbox-border-color:var(--wcs-text-medium);--wcs-checkbox-text-color:var(--wcs-text-medium);display:flex}:host([disabled]){--wcs-checkbox-border-color:var(--wcs-light);--wcs-checkbox-text-color:var(--wcs-text-disabled)}.wcs-checkmark{transition:background-color 225ms cubic-bezier(0.17, 0.84, 0.44, 1), color 225ms cubic-bezier(0.17, 0.84, 0.44, 1)}.wcs-container{position:relative;font-size:1rem;user-select:none;font-weight:500;display:flex}.wcs-container:not([aria-disabled]){cursor:pointer}: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}.wcs-container:hover:not([aria-disabled]),input:focus{--wcs-checkbox-border-color:var(--wcs-primary);--wcs-checkbox-text-color:var(--wcs-primary)}.wcs-checkmark{width:1.125rem;height:1.125rem;border:2px solid var(--wcs-checkbox-border-color);border-radius:3px}:host([indeterminate]) .wcs-checkmark{--wcs-checkbox-border-color:var(--wcs-primary);background:var(--wcs-primary)}.wcs-container:not([aria-disabled]) input:checked~.wcs-checkmark{background-color:var(--wcs-primary);--wcs-checkbox-border-color:var(--wcs-primary)}.wcs-container[aria-disabled] input:checked~.wcs-checkmark{background-color:var(--wcs-light);--wcs-checkbox-border-color:var(--wcs-light)}.wcs-checkmark:after{content:\"\";position:absolute;display:none}.wcs-container input:checked~.wcs-checkmark:after{display:flex}.wcs-container .wcs-checkmark:after{left:7px;width:5px;height:10px;border:solid var(--wcs-white, white);border-width:0 3px 3px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.wcs-container:not([aria-disabled]) input:checked~.text{--wcs-checkbox-text-color:var(--wcs-primary)}.text{color:var(--wcs-checkbox-text-color);margin-left:6px;font-weight:500;line-height:1.375}";
 
 let Checkbox = class {
   constructor(hostRef) {
@@ -24,6 +24,10 @@ let Checkbox = class {
      * Specifie the alignment of the checkbox with the label content
      */
     this.labelAlignment = 'center';
+    /**
+     * Specify wether the checkbox is disabled or not.
+     */
+    this.disabled = false;
   }
   handleChange(_event) {
     this.indeterminate = false;
@@ -33,7 +37,7 @@ let Checkbox = class {
     });
   }
   render() {
-    return (index.h(index.Host, null, index.h("label", { htmlFor: this.name, class: "wcs-container" }, index.h("input", { onChange: (evt) => this.handleChange(evt), checked: this.checked, class: "wcs-checkbox", type: "checkbox", name: this.name, id: this.name }), index.h("span", { class: "wcs-checkmark" }), index.h("span", { class: "text" }, index.h("slot", null)))));
+    return (index.h(index.Host, null, index.h("label", { htmlFor: this.name, class: "wcs-container", "aria-disabled": this.disabled }, index.h("input", { onChange: (evt) => this.handleChange(evt), checked: this.checked, class: "wcs-checkbox", type: "checkbox", name: this.name, disabled: this.disabled, id: this.name }), index.h("span", { class: "wcs-checkmark" }), index.h("span", { class: "text" }, index.h("slot", null)))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/wcs-dropdown-divider.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const dropdownDividerCss = ":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)}";
+
+let DropdownDivider = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { slot: "item" }));
+  }
+};
+DropdownDivider.style = dropdownDividerCss;
+
+exports.wcs_dropdown_divider = DropdownDivider;

package/dist/cjs/wcs-dropdown-header.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3cb9d725.js');
+
+const dropdownHeaderCss = ":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}";
+
+let DropdownHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { slot: "item" }, index.h("slot", null)));
+  }
+};
+DropdownHeader.style = dropdownHeaderCss;
+
+exports.wcs_dropdown_header = DropdownHeader;

package/dist/cjs/wcs-dropdown.cjs.entry.js

@@ -4,21 +4,46 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3cb9d725.js');
 const selectArrow = require('./select-arrow-76ccf86d.js');
+const helpers = require('./helpers-6abce594.js');
+const popper = require('./popper-5777994b.js');
 
-const dropdownCss = ":host{display:inline-flex;flex-direction:row;position:relative;flex-flow:row-reverse}wcs-button{--wcs-button-padding:8px 10px 8px 16px !important}:host([shape=small]) .show{top:48px !important}:host([shape=small]) wcs-button{--wcs-button-padding:2px 10px 2px 16px !important}.wcs-button-content-wrapper{display:flex}.popover{display:none;border:1px solid #d7d7d7;border-radius:var(--wcs-border-radius);white-space:nowrap}.popover::before,.popover::after{position:absolute;width:0;height:0;pointer-events:none;content:\" \";border:solid transparent;z-index:1000}.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}.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}.show{z-index:1000;display:block;flex-direction:column;position:absolute;background-color:var(--wcs-white);top:58px}.container{border-radius:inherit;overflow:hidden}";
+const dropdownCss = ":host{display:flex}wcs-button{--wcs-button-padding:8px 10px 8px 16px !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}.popover{display:none;border:1px solid #d7d7d7;border-radius:var(--wcs-border-radius);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)}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit;border:solid 1px #d7d7d7}#arrow{visibility:hidden;z-index:-1}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}.popover[data-popper-placement^=top]>#arrow{bottom:-5px}.popover[data-popper-placement^=bottom]>#arrow{top:-6px}.popover[data-popper-placement^=left]>#arrow{right:-4px}.popover[data-popper-placement^=right]>#arrow{left:-6px}";
 
 let Dropdown = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /** 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 = 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() {
@@ -32,14 +57,11 @@ let Dropdown = class {
       });
     }
   }
-  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 = helpers.clickTargetIsElementOrChildren(event, this.el);
     if (this.expanded && !clickedOnDropdownOrChildren) {
       this.expanded = false;
     }
@@ -47,10 +69,21 @@ let Dropdown = class {
   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 (index.h(index.Host, null, index.h("wcs-button", { mode: this.mode, shape: this.shape, onClick: ($event) => this.onButtonClick($event) }, index.h("div", { class: "wcs-button-content-wrapper" }, index.h("slot", { name: "placeholder" }), index.h(selectArrow.SelectArrow, { up: this.expanded }))), index.h("div", { class: (this.expanded ? 'show ' : '') + 'popover' }, index.h("div", { class: "container" }, index.h("slot", { name: "item" })))));
+    return (index.h(index.Host, null, index.h("wcs-button", { mode: this.mode, shape: this.shape, disabled: this.disabled, onClick: ($event) => this.onButtonClick($event) }, index.h("div", { class: "wcs-button-content-wrapper" }, index.h("slot", { name: "placeholder" }), this.noArrow ? null : (index.h(selectArrow.SelectArrow, { up: this.expanded })))), index.h("div", { class: (this.expanded ? 'show ' : '') + 'popover' }, index.h("div", { id: "arrow", "data-popper-arrow": true }), index.h("div", { class: "container" }, index.h("slot", { name: "item" })))));
   }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "placement": ["placementChange"]
+  }; }
 };
 Dropdown.style = dropdownCss;
 

package/dist/cjs/wcs-error_2.cjs.entry.js

@@ -16,7 +16,7 @@ let Label = class {
 };
 Label.style = errorCss;
 
-const formFieldCss = ":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;flex-direction:column}.input-container{display:flex}::slotted(wcs-radio-group){margin-left:var(--wcs-base-margin)}::slotted(wcs-radio-group[mode=option]){margin-left:0}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(label){font-weight:500;margin-bottom:8px}:host(.has-prefix){--wcs-input-border-radius-left:0}:host(.has-suffix){--wcs-input-border-radius-right:0}::slotted([slot=prefix]){--wcs-select-border-radius:var(--wcs-border-radius) 0 0 var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-gray-light);--wcs-select-value-color:var(--wcs-white);--wcs-select-placeholder-color:var(--wcs-white);--wcs-select-border-color:var(--wcs-gray-light)}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0}";
+const formFieldCss = ":host{--wcs-form-field-border-radius-left:var(--wcs-border-radius);--wcs-form-field-border-radius-right:var(--wcs-border-radius);display:flex;flex-direction:column}.input-container{display:flex}::slotted(wcs-radio-group){margin-left:var(--wcs-base-margin)}::slotted(wcs-radio-group[mode=option]){margin-left:0}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(label){font-weight:500;margin-bottom:8px}:host(.has-prefix){--wcs-input-border-radius-left:0}:host(.has-suffix){--wcs-input-border-radius-right:0}::slotted([slot=prefix]){--wcs-select-border-radius:var(--wcs-border-radius) 0 0 var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-gray-light);--wcs-select-value-color:var(--wcs-white);--wcs-select-placeholder-color:var(--wcs-white);--wcs-select-border-color:var(--wcs-gray-light)}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0}";
 
 let FormField = class {
   constructor(hostRef) {
@@ -81,22 +81,19 @@ let FormField = class {
     this.updateLabelRequiredFlag(isRequired, label);
   }
   initSpiedElement() {
-    var _a;
+    var _a, _b;
     const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox'];
-    this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements()[0];
+    this.spiedElement = (_a = this.el.shadowRoot.querySelector('slot:not([name])')) === null || _a === void 0 ? void 0 : _a.assignedElements().filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];
     // If the component is used in another web component
-    if (this.spiedElement.tagName === 'SLOT') {
+    if (((_b = this.spiedElement) === null || _b === void 0 ? void 0 : _b.tagName) === 'SLOT') {
       this.spiedElement = (this.spiedElement
         .assignedElements()
         .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]);
     }
-    if (!this.spiedElement)
-      throw new Error('You must provide a slotted element in form field');
-    if (SUPPORTED_COMPONENTS
-      .map(x => x.toUpperCase())
-      .indexOf(this.spiedElement.tagName) === -1) {
+    if (!this.spiedElement) {
       // tslint:disable-next-line:no-console
-      console.warn('form-field component support ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component (component ' + this.spiedElement.tagName + ' not natively supported).');
+      console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');
+      return;
     }
   }
   updateLabelRequiredFlag(isRequired, label) {