wcs-core 2.5.4 → 2.6.0

package/dist/esm/select-arrow-73ac4016.js

@@ -0,0 +1,34 @@
+import { h } from './index-b982604a.js';
+
+/* <svg style="display: block;height: 24px;" width="24" height="24" viewbox="0 0 100 100">
+    <style>
+        polyline {
+            stroke: black;
+        stroke-linecap: round;
+        stroke-width: 10px;
+    }
+
+                        </style>
+    <polyline fill="none" points="20,65 50,35 80,65">
+        <animate attributename="points" dur="375ms" repeatcount="indefinite" to="20,65 50,35 80,65"
+            from="20,35 50,65 80,35"></animate>
+    </polyline>
+</svg> */
+const SelectArrow = ({ up }) => (h("svg", { style: { marginLeft: 'auto' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" },
+  h("style", { type: "text/css" }, `
+            .arrow-group {
+                transform-origin: 50% 50%;
+                transition: transform 175ms ease-in-out;
+            }
+            .up {
+                transform: scaleY(1);
+            }
+            .down {
+                transform: scaleY(-1);
+            }
+        `),
+  h("g", { fill: "none", class: (up ? 'up' : 'down') + ' arrow-group' },
+    h("path", { class: "arrow", fill: "black", d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }),
+    h("path", { d: "M0 0h24v24H0z", fill: "none" }))));
+
+export { SelectArrow as S };

package/dist/esm/wcs-action-bar.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b982604a.js';
+
+const actionBarCss = ":host{padding:0 var(--wcs-padding);min-height:81px;background-color:var(--wcs-white);box-sizing:border-box;display:flex;flex-direction:column}:host .title-actions{padding-top:16px;padding-bottom:16px;display:flex;align-items:center;justify-content:space-between;flex-grow:1}:host .title-actions[data-has-tabs]{padding-bottom:0}:host h1{font-weight:400;line-height:1.25;margin:0;color:var(--wcs-gray)}:host([gutter]){border-bottom:solid 1px var(--wcs-light)}::slotted([slot=actions]){display:flex}";
+
+let ActionBar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hasTabs = false;
+  }
+  componentWillLoad() {
+    this.hasTabs = !!this.el.querySelector('[slot="tabs"]');
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "title-actions", "data-has-tabs": this.hasTabs }, h("h1", null, h("slot", null)), h("div", { class: "actions" }, h("slot", { name: "actions" }))), h("div", { class: "tabs-container" }, h("slot", { name: "tabs" }))));
+  }
+  get el() { return getElement(this); }
+};
+ActionBar.style = actionBarCss;
+
+export { ActionBar as wcs_action_bar };

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, g as getElement } from './index-c619b1fa.js';
+import { r as registerInstance, h, g as getElement } from './index-b982604a.js';
 
 const appCss = ":host{background-color:#f2f2f2;margin:0;display:grid;grid-template-areas:\"header header\" \"sidebar content\";grid-template-columns:min-content auto;overflow-y:hidden}::slotted(main){padding:8px;grid-area:content;overflow-y:scroll;height:calc(100vh - 64px)}::slotted(wcs-header){grid-area:header}@media screen and (max-width: 768px){:host{grid-template-areas:\"header\" \"sidebar\" \"content\";grid-template-columns:auto}::slotted(header){position:relative}::slotted(main){overflow-y:visible;height:initial}}";
 
-const App = class {
+let App = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }

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

@@ -0,0 +1,23 @@
+import { r as registerInstance, h } from './index-b982604a.js';
+
+const badgeCss = ":host{--wcs-badge-ligther-percentage:20;display:inline-block;padding:0.313rem 1.5rem;font-size:0.875rem;font-weight:500;line-height:1;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:0.75rem;color:var(--wcs-contrast);background-color:var(--wcs-base)}:host([color=lighter]){opacity:calc((100 - var(--wcs-badge-ligther-percentage)) / 100)}:host([mode=rounded]){border-radius:6px}";
+
+let Badge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Define the shape of the badge
+     */
+    this.shape = 'normal';
+    /**
+     * Allows you to change the color of the badge to make it less bright (based on the color chosen by the CSS class).
+     */
+    this.color = 'initial';
+  }
+  render() {
+    return (h("slot", null));
+  }
+};
+Badge.style = badgeCss;
+
+export { Badge as wcs_badge };

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

@@ -0,0 +1,82 @@
+import { r as registerInstance, h, g as getElement } from './index-b982604a.js';
+import { h as hasShadowDom } from './helpers-50436c51.js';
+import { M as MDCRipple } from './component-6b4d470f.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}";
+
+let Button = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Specify the button type.
+     */
+    this.type = 'button';
+    /**
+     * Specify wether the button is disabled or not.
+     */
+    this.disabled = false;
+    /**
+     * Specify wether the button should have a ripple effect or not.
+     */
+    this.ripple = true;
+    /**
+     * Specify the shape of the button.
+     */
+    this.shape = 'normal';
+    /**
+     * This attribute specify the appearance of the button.
+     */
+    this.mode = 'plain';
+  }
+  onClick(ev) {
+    if (this.disabled) {
+      ev.stopImmediatePropagation();
+    }
+    if (this.type !== 'button' && hasShadowDom(this.el)) {
+      // this button wants to specifically submit a form
+      // climb up the dom to see if we're in a <form>
+      // and if so, then use JS to submit it
+      const form = this.el.closest('form');
+      if (form) {
+        ev.preventDefault();
+        const fakeButton = window.document.createElement('button');
+        fakeButton.type = this.type;
+        fakeButton.style.display = 'none';
+        form.appendChild(fakeButton);
+        fakeButton.click();
+        fakeButton.remove();
+      }
+    }
+  }
+  componentDidLoad() {
+    this.mdcRipple = new MDCRipple(this.el.shadowRoot.querySelector('.wcs-inner-button'));
+  }
+  enabledRippleEffect() {
+    this.mdcRipple.disabled = false;
+  }
+  disabledRippleEffect() {
+    this.mdcRipple.disabled = true;
+  }
+  onRippleChange() {
+    if (this.ripple) {
+      this.enabledRippleEffect();
+    }
+    else {
+      this.disabledRippleEffect();
+    }
+  }
+  render() {
+    const TagType = this.href !== undefined ? 'a' : 'button';
+    const attrs = this.href !== undefined
+      ? { href: this.href, role: 'button' }
+      : { type: this.type };
+    return (h(TagType, Object.assign({}, attrs, { class: "wcs-inner-button" }, this.disabled === true ? { disabled: true } : null), h("slot", null)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "ripple": ["onRippleChange"]
+  }; }
+};
+Button.style = buttonCss;
+
+export { Button as wcs_button };

package/dist/esm/wcs-card-body.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-b982604a.js';
+
+const cardBodyCss = ":host{flex:1 1 auto;padding:var(--wcs-padding)}";
+
+let CardBody = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("slot", null));
+  }
+};
+CardBody.style = cardBodyCss;
+
+export { CardBody as wcs_card_body };

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

@@ -0,0 +1,16 @@
+import { r as registerInstance, h } from './index-b982604a.js';
+
+const cardCss = ":host{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-clip:border-box;border-radius:var(--wcs-border-radius);background-color:var(--wcs-white)}:host([mode=raised]){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)}:host([mode=flat]){border:solid 1px var(--wcs-text-light)}";
+
+let Card = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.mode = 'raised';
+  }
+  render() {
+    return (h("slot", null));
+  }
+};
+Card.style = cardCss;
+
+export { Card as wcs_card };

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

@@ -0,0 +1,39 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.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}";
+
+let Checkbox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcsChange = createEvent(this, "wcsChange", 7);
+    this.checkboxId = `wcs-checkbox-${checkboxIds++}`;
+    this.name = this.checkboxId;
+    /**
+     * If `true` the checkbox is in indeterminate state.
+     */
+    this.indeterminate = false;
+    /**
+     * If `true`, the checkbox is selected.
+     */
+    this.checked = false;
+    /**
+     * Specifie the alignment of the checkbox with the label content
+     */
+    this.labelAlignment = 'center';
+  }
+  handleChange(_event) {
+    this.indeterminate = false;
+    this.checked = !this.checked;
+    this.wcsChange.emit({
+      checked: this.checked
+    });
+  }
+  render() {
+    return (h(Host, null, h("label", { htmlFor: this.name, class: "wcs-container" }, h("input", { onChange: (evt) => this.handleChange(evt), checked: this.checked, class: "wcs-checkbox", type: "checkbox", name: this.name, id: this.name }), h("span", { class: "wcs-checkmark" }), h("span", { class: "text" }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
+let checkboxIds = 0;
+Checkbox.style = checkboxCss;
+
+export { Checkbox as wcs_checkbox };

package/dist/esm/wcs-com-nav-category.entry.js

@@ -0,0 +1,59 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.js';
+
+const comNavCategoryCss = ":host{display:block}:host .item-container:not([data-open]){display:none}:host .label:after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:\"\\f107\";line-height:1;box-sizing:border-box}:host .label-container{cursor:pointer;user-select:none;display:flex;align-items:center}:host .label-container[data-open]:after{position:absolute;left:calc(50% + var(--wcs-com-content-max-width) / 8 - 0.5625rem);z-index:2;display:block;width:1.125rem;height:1.125rem;content:\"\";background-color:var(--wcs-primary);transform:rotate(45deg)}:host .item-container[data-open]{position:absolute;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:100%;display:flex;flex-direction:column;align-items:start}:host .item-container[data-open] ::slotted(a:not(:first-child)){margin-top:24px}:host .item-container[data-open] ::slotted(a):after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:\"\\f107\";line-height:1;box-sizing:border-box}:host .item-container[data-open] ::slotted(a){cursor:pointer;text-decoration:none;font-size:16px;color:var(--wcs-white)}";
+
+let ComNavCategory = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcsCategoryOpened = createEvent(this, "wcsCategoryOpened", 7);
+    this.wcsCategoryItemClicked = createEvent(this, "wcsCategoryItemClicked", 7);
+    this.categoryOpen = false;
+  }
+  onWindowClickEvent(_) {
+    if (this.categoryOpen)
+      this.categoryOpen = false;
+  }
+  onSubmenuOpened(event) {
+    if (event.detail.categoryElement !== this.el) {
+      this.categoryOpen = false;
+    }
+  }
+  /**
+   * Close the category
+   */
+  async close() {
+    this.categoryOpen = false;
+  }
+  /**
+   * Opens the category
+   */
+  async open() {
+    this.categoryOpen = true;
+  }
+  /**
+   * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage
+   * the closing of the menu correctly
+   */
+  onClick(evt) {
+    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, onClick: (evt) => this.handleItemClick(evt) }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+ComNavCategory.style = comNavCategoryCss;
+
+export { ComNavCategory as wcs_com_nav_category };

package/dist/esm/wcs-com-nav-submenu.entry.js

@@ -0,0 +1,65 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.js';
+
+const comNavSubmenuCss = ":host{display:block;height:100%}:host .menu-button{display:flex;align-items:center;height:100%;cursor:pointer;user-select:none}:host .label{font-size:16px;cursor:pointer;font-weight:500;color:var(--wcs-gray);text-decoration:none}:host .arrow-icon{display:inline-block;font-family:icons;font-size:0.6rem;line-height:1;box-sizing:border-box}:host .arrow-icon:not([data-open]){transform:rotate(90deg)}:host .arrow-icon[data-open]{transform:rotate(-90deg)}:host .arrow-container{margin-left:var(--wcs-base-margin)}:host .drawer{display:none;position:absolute;top:75px;z-index:8888;left:0;width:100%;box-sizing:border-box;padding:50px;background-color:var(--wcs-primary);color:var(--wcs-white)}:host .drawer-content{display:flex;justify-content:space-between;max-width:62.5%;flex:1}:host .drawer-content div:first-child{flex:0.8}:host .drawer-content div{max-width:260px}:host .menu-items{padding:0 80px 0 50px;display:flex;flex-direction:column;align-items:flex-end}:host .menu-items ::slotted(*:not(:first-child)){margin-top:24px}:host .menu-items ::slotted(a):after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:\"\\f107\";line-height:1;box-sizing:border-box}:host .menu-items ::slotted(a){user-select:none;cursor:pointer;text-decoration:none;font-size:16px;color:var(--wcs-white)}:host .drawer-container{display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}:host .drawer-container h3{margin:0 0 24px 0;font-size:1.5rem;line-height:1.25;font-weight:400}:host .drawer-container p{margin-top:0;margin-bottom:1rem;font-weight:500;font-size:1rem;line-height:1.375}:host .drawer[data-open]{display:block}";
+
+let ComNavSubmenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcsSubmenuOpened = createEvent(this, "wcsSubmenuOpened", 7);
+    this.menuOpen = false;
+  }
+  /**
+   * If the user clicks outside the menu, we close it
+   */
+  onWindowClickEvent(_) {
+    if (this.menuOpen)
+      this.menuOpen = false;
+  }
+  onSubmenuOpened(event) {
+    // If the clicked menu is not this component, we close it
+    if (event.detail.menuElement !== this.el) {
+      this.menuOpen = false;
+    }
+  }
+  /**
+   * Close the menu
+   */
+  async close() {
+    this.menuOpen = false;
+  }
+  /**
+   * Opens the menu
+   */
+  async open() {
+    this.menuOpen = true;
+  }
+  /**
+   * When the user clicks on the menu, we do not propagate the native event and we launch a custom event to manage
+   * the closing of the menu correctly
+   */
+  onClick(evt) {
+    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" }, h("span", { class: "label" }, this.label), h("span", { class: "arrow-container" }, h("span", { class: "arrow-icon", "data-open": this.menuOpen }, "\uF107"))), h("div", { class: "drawer", "data-open": this.menuOpen }, h("div", { class: "drawer-container" }, h("div", { class: "drawer-content" }, h("div", null, h("h3", null, this.panelTitle), h("p", null, this.panelDescription)), h("div", { class: "menu-items", onClick: (evt) => this.handleMenuItemsClick(evt) }, h("slot", null)))))));
+  }
+  get el() { return getElement(this); }
+};
+ComNavSubmenu.style = comNavSubmenuCss;
+
+export { ComNavSubmenu as wcs_com_nav_submenu };

package/dist/esm/wcs-com-nav.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-b982604a.js';
+
+const comNavCss = ":host{display:block;position:relative;height:75px;border-bottom:solid 1px var(--wcs-text-light)}:host .container{margin:0 auto;height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between;max-width:var(--wcs-com-content-max-width)}:host .container-left{display:flex;height:100%;align-items:center;flex-direction:row}:host .app-name{font-weight:300;font-size:1.5rem;line-height:1.25;color:var(--wcs-gray)}:host .menu-bar{display:flex;align-items:center;height:100%;margin-left:50px}:host .menu-bar ::slotted(*:not(:first-child)){margin-left:40px}:host ::slotted(a){display:flex;align-items:center;height:100%;font-size:16px;cursor:pointer;font-weight:500;color:var(--wcs-gray);text-decoration:none}:host ::slotted(a):after{font-family:icons;padding-left:var(--wcs-base-margin);font-size:0.6rem;content:\"\\f107\";line-height:1;box-sizing:border-box}";
+
+let ComNav = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "container" }, h("div", { class: "container-left" }, h("div", { class: "app-name" }, this.appName, h("slot", { name: "app-name" })), h("div", { class: "menu-bar" }, h("slot", null))), h("div", null, h("slot", { name: "actions" })))));
+  }
+};
+ComNav.style = comNavCss;
+
+export { ComNav as wcs_com_nav };

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

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-b982604a.js';
+
+const dividerCss = ":host{display:block;border-bottom:solid 1px var(--wcs-text-light)}";
+
+let Divider = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null));
+  }
+};
+Divider.style = dividerCss;
+
+export { Divider as wcs_divider };

package/dist/esm/wcs-dropdown-item.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-b982604a.js';
+
+const dropdownItemCss = "wcs-dropdown-item{display:block;padding:0 var(--wcs-padding);font-weight:500;cursor:pointer;height:42px;line-height:42px}wcs-dropdown-item:hover{color:var(--wcs-primary);background-color:var(--wcs-light)}";
+
+let DropdownItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcsDropdownItemClick = createEvent(this, "wcsDropdownItemClick", 7);
+  }
+  onMouseDown(_) {
+    this.wcsDropdownItemClick.emit();
+  }
+  render() {
+    return (h(Host, { slot: "item" }, h("slot", null)));
+  }
+};
+DropdownItem.style = dropdownItemCss;
+
+export { DropdownItem as wcs_dropdown_item };

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

@@ -0,0 +1,53 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b982604a.js';
+import { S as SelectArrow } from './select-arrow-73ac4016.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}";
+
+let Dropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.mode = 'stroked';
+    this.shape = 'normal';
+    this.disabled = false;
+    this.expanded = false;
+  }
+  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;
+    this.fixForFirefoxBelow63();
+  }
+  fixForFirefoxBelow63() {
+    // If the items appear out of the slot we place them back
+    const items = this.el.querySelectorAll('wcs-dropdown-item');
+    const container = this.el.querySelector('.container');
+    if (items.length > 0 && container) {
+      items.forEach(i => {
+        this.el.removeChild(i);
+        container.appendChild(i);
+      });
+    }
+  }
+  onButtonClick(e) {
+    e.stopPropagation();
+    this.expanded = !this.expanded;
+  }
+  onWindowClickEvent(event) {
+    // TODO: Extract to utils
+    const clickedOnDropdownOrChildren = event.target instanceof Node
+      && this.el.contains(event.target);
+    if (this.expanded && !clickedOnDropdownOrChildren) {
+      this.expanded = false;
+    }
+  }
+  dropdownItemClick(_) {
+    this.expanded = false;
+  }
+  render() {
+    return (h(Host, null, h("wcs-button", { mode: this.mode, shape: this.shape, onClick: ($event) => this.onButtonClick($event) }, h("div", { class: "wcs-button-content-wrapper" }, h("slot", { name: "placeholder" }), h(SelectArrow, { up: this.expanded }))), h("div", { class: (this.expanded ? 'show ' : '') + 'popover' }, h("div", { class: "container" }, h("slot", { name: "item" })))));
+  }
+  get el() { return getElement(this); }
+};
+Dropdown.style = dropdownCss;
+
+export { Dropdown as wcs_dropdown };