wcs-core 2.9.0 → 2.12.0

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3cb9d725.js');
-const popper = require('./popper-5777994b.js');
+const popper = require('./popper-8cf375ec.js');
 
 /**!
 * tippy.js v6.3.7
@@ -1564,7 +1564,7 @@ let Tooltip = class {
     this.tippyInstance = tippy(document.getElementById(this.for), {
       theme: this.theme,
       allowHTML: true,
-      content: this.el.innerHTML,
+      content: this.getTooltipContentFromPropAndSlot(),
       maxWidth: this.maxWidth,
       placement: this.position,
       delay: this.delay,
@@ -1573,6 +1573,12 @@ let Tooltip = class {
       trigger: this.trigger
     });
   }
+  getTooltipContentFromPropAndSlot() {
+    if (this.content) {
+      return this.content + this.el.innerHTML;
+    }
+    return this.el.innerHTML;
+  }
   updateProps() {
     this.tippyInstance.setProps({
       interactive: this.interactive,
@@ -1586,7 +1592,7 @@ let Tooltip = class {
   }
   updateTippyContent() {
     this.tippyInstance.setProps({
-      content: this.el.innerHTML
+      content: this.getTooltipContentFromPropAndSlot()
     });
   }
   /**
@@ -1627,7 +1633,8 @@ let Tooltip = class {
     "theme": ["updateProps"],
     "delay": ["updateProps"],
     "duration": ["updateProps"],
-    "trigger": ["updateProps"]
+    "trigger": ["updateProps"],
+    "content": ["updateTippyContent"]
   }; }
 };
 Tooltip.style = tooltipCss;

package/dist/cjs/wcs.cjs.js

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

package/dist/collection/collection-manifest.json

@@ -1,5 +1,9 @@
 {
   "entries": [
+    "./components/accordion/accordion.js",
+    "./components/accordion-content/accordion-content.js",
+    "./components/accordion-header/accordion-header.js",
+    "./components/accordion-panel/accordion-panel.js",
     "./components/action-bar/action-bar.js",
     "./components/app/app.js",
     "./components/badge/badge.js",

package/dist/collection/components/accordion/accordion.js

@@ -0,0 +1,38 @@
+import { Component, Element, h, Host, Listen } from '@stencil/core';
+export class Accordion {
+  constructor() {
+    this.accordionPanels = [];
+  }
+  componentWillLoad() {
+    this.accordionPanels = this.getAllAccordionPanelsFromHostElement();
+  }
+  wcsOpenChangeHandler(event) {
+    if (event.detail) {
+      this.closeAllAccordionsExcept(event.target);
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  getAllAccordionPanelsFromHostElement() {
+    return Array.from(this.el.children)
+      .filter(el => el.tagName === 'WCS-ACCORDION-PANEL');
+  }
+  /**
+   * Close all accordion panels except the one that match the eventTarget reference
+   */
+  closeAllAccordionsExcept(eventTarget) {
+    this.accordionPanels.filter(a => a !== eventTarget).forEach(a => a.close());
+  }
+  static get is() { return "wcs-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "wcsOpenChange",
+      "method": "wcsOpenChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/accordion-content/accordion-content.css

@@ -0,0 +1,4 @@
+:host {
+  margin: calc(3 * var(--wcs-base-margin));
+  display: block;
+}

package/dist/collection/components/accordion-content/accordion-content.js

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

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

@@ -0,0 +1,9 @@
+import { Component, h, Host } from '@stencil/core';
+export class AccordionHeader {
+  render() {
+    return (h(Host, { slot: "header" },
+      h("slot", null)));
+  }
+  static get is() { return "wcs-accordion-header"; }
+  static get encapsulation() { return "shadow"; }
+}

package/dist/collection/components/accordion-panel/accordion-panel.css

@@ -0,0 +1,35 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  margin-bottom: 16px;
+}
+:host .header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 24px;
+  border-radius: 7px;
+  font-weight: 500;
+  font-size: 16px;
+  color: var(--wcs-primary);
+  background-color: var(--wcs-light);
+}
+:host .header-action {
+  display: flex;
+  align-items: center;
+  user-select: none;
+}
+:host .header-action .arrow {
+  fill: var(--wcs-primary);
+}
+:host .content {
+  display: none;
+}
+
+:host([open]) {
+  margin-bottom: 0;
+}
+:host([open]) .content {
+  display: block;
+}

package/dist/collection/components/accordion-panel/accordion-panel.js

@@ -0,0 +1,89 @@
+import { Component, h, Host, Prop, Event, Watch, Method } from '@stencil/core';
+import { SelectArrow } from '../select/select-arrow';
+export class AccordionPanel {
+  constructor() {
+    this.open = false;
+  }
+  openChange(newValue) {
+    this.wcsOpenChange.emit(newValue);
+  }
+  async close() {
+    this.open = false;
+  }
+  render() {
+    return (h(Host, null,
+      h("div", { class: "header", onClick: () => this.open = !this.open },
+        h("slot", { name: "header" }),
+        h("div", { class: "header-action" },
+          h("span", null, this.open ? 'Fermez' : 'Ouvrez'),
+          h(SelectArrow, { up: this.open }))),
+      h("div", { class: "content" },
+        h("slot", { name: "content" }))));
+  }
+  static get is() { return "wcs-accordion-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["accordion-panel.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["accordion-panel.css"]
+  }; }
+  static get properties() { return {
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "wcsOpenChange",
+      "name": "wcsOpenChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "close": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "openChange"
+    }]; }
+}

package/dist/collection/components/button/button.css

@@ -201,6 +201,10 @@
 :host([shape=small]) {
   --wcs-button-padding: 2px 16px;
 }
+:host([shape=small]) .wcs-inner-button {
+  min-width: var(--wcs-button-min-width, unset);
+  min-height: var(--wcs-button-min-height, unset);
+}
 
 :host([shape=round]) {
   --wcs-button-padding: 0;
@@ -210,8 +214,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 42px;
-  min-height: 42px;
+  min-width: var(--wcs-button-min-width, 42px);
+  min-height: var(--wcs-button-min-height, 42px);
 }
 
 :host([shape=square]) {
@@ -221,13 +225,17 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 42px;
-  min-height: 42px;
+  min-width: var(--wcs-button-min-width, 42px);
+  min-height: var(--wcs-button-min-height, 42px);
 }
 
 :host([shape=normal]) {
   --wcs-button-padding: calc(var(--wcs-padding) / 2 + 1px) calc(var(--wcs-padding));
 }
+:host([shape=normal]) .wcs-inner-button {
+  min-width: var(--wcs-button-min-width, unset);
+  min-height: var(--wcs-button-min-height, unset);
+}
 
 :host([mode=stroked]) .wcs-inner-button {
   box-shadow: inset 0 0 0 1px var(--wcs-button-border-color);

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

@@ -5,13 +5,12 @@
   border-bottom: solid 1px var(--wcs-text-light);
 }
 :host .container {
-  margin: 0 auto;
+  margin: 0 calc(3 * var(--wcs-base-margin));
   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;
@@ -19,22 +18,23 @@
   align-items: center;
   flex-direction: row;
 }
+:host .container-right {
+  display: flex;
+  align-items: center;
+}
 :host .app-name {
-  font-weight: 300;
+  font-weight: 400;
   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;
+  display: none;
 }
 :host ::slotted(a) {
+  padding-top: calc(1.5 * var(--wcs-base-margin));
+  padding-bottom: calc(1.5 * var(--wcs-base-margin));
+  padding-left: calc(3 * var(--wcs-base-margin));
   display: flex;
   align-items: center;
   height: 100%;
@@ -51,4 +51,62 @@
   content: "\f107";
   line-height: 1;
   box-sizing: border-box;
+}
+:host #mobile-menu-icon {
+  height: 24px;
+  padding-left: calc(2 * var(--wcs-base-margin));
+  margin-left: var(--wcs-base-margin);
+  border-left: solid 1px var(--wcs-text-light);
+}
+:host #mobile-menu-icon:after {
+  font-family: icons;
+  font-size: 24px;
+  cursor: pointer;
+  content: "\f198";
+  line-height: 1;
+  box-sizing: border-box;
+}
+:host #mobile-menu-icon[data-mobile-open]:after {
+  content: "\f129";
+}
+:host .mobile-overlay {
+  display: none;
+}
+:host .mobile-overlay[data-mobile-open] {
+  padding-top: calc(2 * var(--wcs-base-margin));
+  padding-bottom: calc(2 * var(--wcs-base-margin));
+  position: relative;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: block;
+  z-index: 9999;
+  background-color: var(--wcs-white);
+}
+
+@media screen and (min-width: 576px) {
+  :host .container {
+    margin: 0 auto;
+    max-width: var(--wcs-com-content-max-width);
+  }
+  :host .menu-bar {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    margin-left: 50px;
+  }
+  :host .menu-bar ::slotted(*:not(:first-child)) {
+    margin-left: 40px;
+  }
+  :host #mobile-menu-icon {
+    display: none;
+  }
+  :host .mobile-overlay {
+    display: none !important;
+  }
+  :host ::slotted(a) {
+    padding-top: unset;
+    padding-bottom: unset;
+    padding-left: unset;
+  }
 }

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

@@ -1,5 +1,28 @@
-import { Component, Host, h, Prop } from '@stencil/core';
+import { Component, Host, h, Prop, Element, State } from '@stencil/core';
 export class ComNav {
+  constructor() {
+    this.mobileMenuOpen = true;
+  }
+  mobileMenuIconClick() {
+    this.mobileMenuOpen = !this.mobileMenuOpen;
+  }
+  disconnectedCallback() {
+    this.resizeObserver.disconnect();
+  }
+  componentWillLoad() {
+    this.resizeObserver = new ResizeObserver(entry => {
+      const cr = entry[0].contentRect;
+      const paddingRight = cr.right - cr.width;
+      const paddingLeft = cr.left;
+      if (cr.width < 576 - (paddingLeft + paddingRight)) {
+        this.currentActiveSizing = 'mobile';
+      }
+      else {
+        this.currentActiveSizing = 'desktop';
+      }
+    });
+    this.resizeObserver.observe(document.body);
+  }
   render() {
     return (h(Host, null,
       h("div", { class: "container" },
@@ -7,10 +30,11 @@ export class ComNav {
           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" })))));
+          h("div", { class: "menu-bar" }, this.currentActiveSizing === 'desktop' ? h("slot", null) : null)),
+        h("div", { class: "container-right" },
+          h("slot", { name: "actions" }),
+          h("span", { id: "mobile-menu-icon", "data-mobile-open": this.mobileMenuOpen, onClick: () => this.mobileMenuIconClick() }))),
+      h("div", { class: "mobile-overlay", "data-mobile-open": this.mobileMenuOpen }, this.currentActiveSizing === 'mobile' ? h("slot", null) : null)));
   }
   static get is() { return "wcs-com-nav"; }
   static get encapsulation() { return "shadow"; }
@@ -39,4 +63,9 @@ export class ComNav {
       "reflect": false
     }
   }; }
+  static get states() { return {
+    "mobileMenuOpen": {},
+    "currentActiveSizing": {}
+  }; }
+  static get elementRef() { return "el"; }
 }

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

@@ -1,52 +1,13 @@
 :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;
+  padding-bottom: var(--wcs-padding);
 }
 :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;
+  padding-left: calc(9 * var(--wcs-base-margin));
+  color: var(--wcs-gray);
 }
-:host .item-container[data-open] ::slotted(a:not(:first-child)) {
-  margin-top: 24px;
-}
-:host .item-container[data-open] ::slotted(a):after {
+:host ::slotted(a):after {
   font-family: icons;
   padding-left: var(--wcs-base-margin);
   font-size: 0.6rem;
@@ -54,9 +15,73 @@
   line-height: 1;
   box-sizing: border-box;
 }
-:host .item-container[data-open] ::slotted(a) {
+:host ::slotted(a) {
+  display: block;
   cursor: pointer;
   text-decoration: none;
   font-size: 16px;
-  color: var(--wcs-white);
+  color: var(--wcs-gray);
+  padding-left: calc(12 * var(--wcs-base-margin));
+  padding-top: calc(1.5 * var(--wcs-base-margin));
+  padding-bottom: calc(1.5 * var(--wcs-base-margin));
+}
+
+@media screen and (min-width: 576px) {
+  :host {
+    padding-bottom: unset;
+  }
+  :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;
+    padding-left: unset;
+    color: var(--wcs-white);
+  }
+  :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) {
+    display: unset;
+    color: var(--wcs-white);
+    padding-left: unset;
+    padding-top: unset;
+    padding-bottom: unset;
+  }
 }