wcs-core 2.8.0 → 2.11.0

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/dropdown/dropdown.js

@@ -35,7 +35,9 @@ export class Dropdown {
         }
       ]
     });
-    this.el.shadowRoot.querySelector('.arrow').style.fill = this.buttonTextColor;
+    if (!this.noArrow) {
+      this.el.shadowRoot.querySelector('.arrow').style.fill = this.buttonTextColor;
+    }
     this.fixForFirefoxBelow63();
   }
   fixForFirefoxBelow63() {

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

@@ -65,22 +65,19 @@ export class FormField {
     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) {

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

@@ -1,4 +1,4 @@
-import { Component, Event, h, Host, Prop, Element, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
 import { GridSortArrow } from './grid-sort-arrow';
 export class GridColumn {
   constructor() {
@@ -30,8 +30,8 @@ export class GridColumn {
           this.sort ? h(GridSortArrow, { state: this.sortOrder }) : ''))));
   }
   onSortClick() {
+    // @Watch on sortOrder property will trigger wcsSortChange event
     this.sortOrder = this.sortOrder === 'none' || this.sortOrder === 'desc' ? 'asc' : 'desc';
-    this.emitSortConfig();
   }
   static get is() { return "wcs-grid-column"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/horizontal-stepper/horizontal-stepper.js

@@ -1,4 +1,4 @@
-import { Component, Host, h, State, Prop, Element, Event, Watch, Method } from '@stencil/core';
+import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import { HorizontalStep } from './horizontal-step';
 export class HorizontalStepper {
   constructor() {
@@ -20,16 +20,19 @@ export class HorizontalStepper {
     }
   }
   onCurrentStepChange(newValue, oldValue) {
-    const stepInterval = Math.abs(oldValue - newValue);
-    this.el.style.setProperty('--wcs-progress-bar-animation-duration', 375 / stepInterval + 'ms');
-    if (newValue !== oldValue) {
-      for (let i = 0; i < stepInterval; i++) {
-        setTimeout(() => {
-          this.internalCurrentStep -= (oldValue - newValue) > 0 ? 1 : -1;
-          if (i === stepInterval - 1) {
-            this.el.style.removeProperty('--wcs-progress-bar-animation-duration');
-          }
-        }, (i * (375 / stepInterval)));
+    //Check if the function is called before the component has finished its initialization in which case we do nothing
+    if (this.internalCurrentStep !== undefined) {
+      const stepInterval = Math.abs(oldValue - newValue);
+      this.el.style.setProperty('--wcs-progress-bar-animation-duration', 375 / stepInterval + 'ms');
+      if (newValue !== oldValue) {
+        for (let i = 0; i < stepInterval; i++) {
+          setTimeout(() => {
+            this.internalCurrentStep -= (oldValue - newValue) > 0 ? 1 : -1;
+            if (i === stepInterval - 1) {
+              this.el.style.removeProperty('--wcs-progress-bar-animation-duration');
+            }
+          }, (i * (375 / stepInterval)));
+        }
       }
     }
   }

package/dist/collection/components/mat-icon/mat-icon.css

@@ -1,5 +1,7 @@
 :host {
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 :host .size-s {
   font-size: 18px;

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

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

package/dist/collection/components/modal/modal.css

@@ -1,5 +1,4 @@
 wcs-modal {
-  --saas-fix-modal: rgba(var(--wcs-black), 0.5);
   z-index: 999;
   position: fixed;
   top: 0;
@@ -7,59 +6,61 @@ wcs-modal {
   left: 0;
   right: 0;
   display: none;
+  background: rgba(0, 0, 0, 0.4);
 }
 
 wcs-modal[show] {
-  display: block;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  display: block;
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  align-items: center;
+  justify-content: center;
 }
 
 /**
 Backdrop
  */
-wcs-modal[without-backdrop] .wcs-modal-backdrop {
-  display: none;
+wcs-modal[without-backdrop] {
+  background-color: unset;
 }
 wcs-modal[without-backdrop] .wcs-modal-container {
   border: solid 1px var(--wcs-text-light);
 }
 
-.wcs-modal-backdrop {
-  display: block;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  opacity: 0.4;
-  background-color: var(--wcs-black);
-}
-
 /**
 Modal window
  */
 .wcs-modal-container {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  min-width: 400px;
-  max-width: 480px;
-  /* bring your own prefixes */
-  transform: translate(-50%, -50%);
-  pointer-events: auto;
+  max-height: var(--wcs-modal-max-height, 80%);
   background-color: #fff;
+  display: grid;
+  grid-template-columns: 100%;
+  grid-template-rows: auto 1fr auto;
+  box-sizing: border-box;
+  pointer-events: auto;
   background-clip: padding-box;
   border: 0 solid rgba(0, 0, 0, 0.2);
   border-radius: 0.4375rem;
-  outline: 0;
   z-index: 20000;
-  display: block;
   padding: 1.375rem 1.875rem 1.875rem 1.875rem;
 }
 
+.wcs-modal-container[data-size=s] {
+  width: 288px;
+}
+
+.wcs-modal-container[data-size=m] {
+  width: 480px;
+}
+
+.wcs-modal-container[data-size=l] {
+  width: 864px;
+}
+
+.wcs-modal-container[data-size=xl] {
+  width: 1200px;
+}
+
 .wcs-modal-header {
   margin-bottom: 8px;
   display: flex;
@@ -75,9 +76,11 @@ Modal window
 .wcs-modal-content {
   font-weight: 400;
   font-size: 16px;
+  overflow-y: auto;
 }
 
 .wcs-modal-actions {
   margin-top: 20px;
-  float: right;
+  display: flex;
+  justify-content: flex-end;
 }

package/dist/collection/components/modal/modal.js

@@ -14,20 +14,28 @@ export class Modal {
      * if false, it won't close the modal when the escape key is pressed.
      */
     this.showCloseButton = false;
+    /**
+     * There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the
+     * size best suited for the content and screen size displaying the modal. Remember to test responsiveness.
+     */
+    this.size = 'm';
+    /**
+     * Specifies whether the component should hide the actions slot or not
+     */
+    this.hideActions = false;
   }
   render() {
     return (h(Host, null,
-      h("div", { class: "wcs-modal-backdrop" }),
-      h("div", { class: "wcs-modal-container" },
+      h("div", { class: "wcs-modal-container", "data-size": this.size },
         h("div", { class: "wcs-modal-header" },
           h("h5", null,
             h("slot", { name: "header" })),
-          this.showCloseButton && (h("wcs-button", { shape: "round", mode: "stroked", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) },
-            h("i", { class: "material-icons" }, "close")))),
+          this.showCloseButton && (h("wcs-button", { shape: "round", mode: "clear", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) },
+            h("wcs-mat-icon", { icon: "close" })))),
         h("div", { class: "wcs-modal-content" },
           h("slot", null)),
-        h("div", { class: "wcs-modal-actions" },
-          h("slot", { name: "actions" })))));
+        !this.hideActions && (h("div", { class: "wcs-modal-actions" },
+          h("slot", { name: "actions" }))))));
   }
   onKeyDown(event) {
     if (this.showCloseButton && event.key === 'Escape') {
@@ -102,6 +110,47 @@ export class Modal {
       "attribute": "show-close-button",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ModalSize",
+        "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
+        "references": {
+          "ModalSize": {
+            "location": "import",
+            "path": "./modal-interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "There are multiple sizes for modals. The default size is medium (m), however other sizes are available. Select the\nsize best suited for the content and screen size displaying the modal. Remember to test responsiveness."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'m'"
+    },
+    "hideActions": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies whether the component should hide the actions slot or not"
+      },
+      "attribute": "hide-actions",
+      "reflect": true,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

package/dist/collection/components/radio/radio.css

@@ -88,7 +88,7 @@
   padding: 0;
 }
 :host([mode=option]) label {
-  padding: 0.375rem 1.25rem 0.3125rem;
+  padding: 5px calc(2 * var(--wcs-base-margin));
   margin-bottom: 0;
   color: var(--wcs-white);
   white-space: nowrap;

package/dist/collection/components/radio-group/radio-group.css

@@ -19,7 +19,7 @@
 :host([mode=option]) {
   display: inline-flex;
   flex-direction: row;
-  padding: calc(var(--wcs-base-margin) / 2);
+  padding: calc(var(--wcs-base-margin) / 4);
   background-color: #4d4f53;
   border-radius: 0.6875rem;
 }

package/dist/collection/components/tooltip/tooltip.js

@@ -64,7 +64,7 @@ export class Tooltip {
     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,
@@ -73,6 +73,12 @@ export class Tooltip {
       trigger: this.trigger
     });
   }
+  getTooltipContentFromPropAndSlot() {
+    if (this.content) {
+      return this.content + this.el.innerHTML;
+    }
+    return this.el.innerHTML;
+  }
   updateProps() {
     this.tippyInstance.setProps({
       interactive: this.interactive,
@@ -86,7 +92,7 @@ export class Tooltip {
   }
   updateTippyContent() {
     this.tippyInstance.setProps({
-      content: this.el.innerHTML
+      content: this.getTooltipContentFromPropAndSlot()
     });
   }
   /**
@@ -279,6 +285,23 @@ export class Tooltip {
       "attribute": "theme",
       "reflect": false,
       "defaultValue": "'wcs'"
+    },
+    "content": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "You can use this property instead of the slot API to affect content in the tooltip.\n\nThis makes it easier to manage the update if the tooltip contains elements that are not mutated when their\ncontent changes. Indeed, if the slot is used, the tooltip is updated only if the structure of the slotted DOM\nchanges (the DOM must be mutated).\n\nThe two APIs are not mutually exclusive, if both are filled in (the prop + the slot) the rendering will first\ndisplay the content of this property and then the slotted elements."
+      },
+      "attribute": "content",
+      "reflect": false
     }
   }; }
   static get methods() { return {
@@ -369,5 +392,8 @@ export class Tooltip {
     }, {
       "propName": "trigger",
       "methodName": "updateProps"
+    }, {
+      "propName": "content",
+      "methodName": "updateTippyContent"
     }]; }
 }