wcs-core 2.10.0 → 2.12.1

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

@@ -4,15 +4,37 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3cb9d725.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}";
+const comNavCss = ":host{display:block;position:relative;height:75px;border-bottom:solid 1px var(--wcs-text-light)}:host .container{margin:0 calc(3 * var(--wcs-base-margin));height:100%;display:flex;align-items:center;flex-direction:row;justify-content:space-between}:host .container-left{display:flex;height:100%;align-items:center;flex-direction:row}:host .container-right{display:flex;align-items:center}:host .app-name{font-weight:400;font-size:1.5rem;line-height:1.25;color:var(--wcs-gray)}:host .menu-bar{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%;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}: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}}";
 
 let ComNav = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    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 (index.h(index.Host, null, index.h("div", { class: "container" }, index.h("div", { class: "container-left" }, index.h("div", { class: "app-name" }, this.appName, index.h("slot", { name: "app-name" })), index.h("div", { class: "menu-bar" }, index.h("slot", null))), index.h("div", null, index.h("slot", { name: "actions" })))));
+    return (index.h(index.Host, null, index.h("div", { class: "container" }, index.h("div", { class: "container-left" }, index.h("div", { class: "app-name" }, this.appName, index.h("slot", { name: "app-name" })), index.h("div", { class: "menu-bar" }, this.currentActiveSizing === 'desktop' ? index.h("slot", null) : null)), index.h("div", { class: "container-right" }, index.h("slot", { name: "actions" }), index.h("span", { id: "mobile-menu-icon", "data-mobile-open": this.mobileMenuOpen, onClick: () => this.mobileMenuIconClick() }))), index.h("div", { class: "mobile-overlay", "data-mobile-open": this.mobileMenuOpen }, this.currentActiveSizing === 'mobile' ? index.h("slot", null) : null)));
   }
+  get el() { return index.getElement(this); }
 };
 ComNav.style = comNavCss;
 

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

@@ -5,7 +5,7 @@ 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 popper = require('./popper-8cf375ec.js');
 
 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}";
 
@@ -43,7 +43,9 @@ let Dropdown = class {
         }
       ]
     });
-    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/cjs/wcs-galactic-menu.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3cb9d725.js');
 const helpers = require('./helpers-6abce594.js');
-const popper = require('./popper-5777994b.js');
+const popper = require('./popper-8cf375ec.js');
 
 const galacticMenuCss = "#menu{background-color:var(--wcs-gray);color:white;display:none;padding:var(--wcs-padding)}#menu[data-show]{display:block;z-index:9999}#menu[data-popper-placement^=top]>#arrow{bottom:-4px}#menu[data-popper-placement^=bottom]>#arrow{top:-4px}#menu[data-popper-placement^=left]>#arrow{right:-4px}#menu[data-popper-placement^=right]>#arrow{left:-4px}:host{display:flex;align-items:center;height:32px;padding-left:var(--wcs-padding);background-color:var(--wcs-gray-light)}#toggle-menu-icon{cursor:pointer;padding:0 var(--wcs-padding);user-select:none}#arrow,#arrow::before{position:absolute;width:8px;height:8px;background:inherit}#arrow{visibility:hidden}#arrow::before{visibility:visible;content:\"\";transform:rotate(45deg)}";
 

package/dist/cjs/wcs-horizontal-stepper.cjs.entry.js

@@ -45,16 +45,19 @@ let HorizontalStepper = class {
     }
   }
   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/cjs/wcs-mat-icon.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3cb9d725.js');
 
-const matIconCss = ":host{display:inline-block}:host .size-s{font-size:18px}:host .size-m{font-size:24px}:host .size-l{font-size:36px}:host .size-xl{font-size:48px}";
+const matIconCss = ":host{display:flex;flex-direction:column;justify-content:center}:host .size-s{font-size:18px}:host .size-m{font-size:24px}:host .size-l{font-size:36px}:host .size-xl{font-size:48px}";
 
 let MatIcon = class {
   constructor(hostRef) {

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-3cb9d725.js');
 
-const modalCss = "wcs-modal{--saas-fix-modal:rgba(var(--wcs-black), 0.5);z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none}wcs-modal[show]{display:block;width:100%;height:100%;opacity:1;display:block}wcs-modal[without-backdrop] .wcs-modal-backdrop{display:none}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)}.wcs-modal-container{position:fixed;top:50%;left:50%;box-sizing:border-box;max-width:100%;transform:translate(-50%, -50%);pointer-events:auto;background-color:#fff;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;align-items:center;justify-content:space-between}.wcs-modal-header h5{font-size:24px;font-weight:400;margin:0}.wcs-modal-content{font-weight:400;font-size:16px}.wcs-modal-actions{margin-top:20px;float:right}";
+const modalCss = "wcs-modal{z-index:999;position:fixed;top:0;bottom:0;left:0;right:0;display:none;background:rgba(0, 0, 0, 0.4)}wcs-modal[show]{display:flex;height:100vh;width:100vw;align-items:center;justify-content:center}wcs-modal[without-backdrop]{background-color:unset}wcs-modal[without-backdrop] .wcs-modal-container{border:solid 1px var(--wcs-text-light)}.wcs-modal-container{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;z-index:20000;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;align-items:center;justify-content:space-between}.wcs-modal-header h5{font-size:24px;font-weight:400;margin:0}.wcs-modal-content{font-weight:400;font-size:16px;overflow-y:auto}.wcs-modal-actions{margin-top:20px;display:flex;justify-content:flex-end}";
 
 let Modal = class {
   constructor(hostRef) {
@@ -28,9 +28,13 @@ let Modal = class {
      * 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 (index.h(index.Host, null, index.h("div", { class: "wcs-modal-backdrop" }), index.h("div", { class: "wcs-modal-container", "data-size": this.size }, index.h("div", { class: "wcs-modal-header" }, index.h("h5", null, index.h("slot", { name: "header" })), this.showCloseButton && (index.h("wcs-button", { shape: "round", mode: "clear", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) }, index.h("i", { class: "material-icons" }, "close")))), index.h("div", { class: "wcs-modal-content" }, index.h("slot", null)), index.h("div", { class: "wcs-modal-actions" }, index.h("slot", { name: "actions" })))));
+    return (index.h(index.Host, null, index.h("div", { class: "wcs-modal-container", "data-size": this.size }, index.h("div", { class: "wcs-modal-header" }, index.h("h5", null, index.h("slot", { name: "header" })), this.showCloseButton && (index.h("wcs-button", { shape: "round", mode: "clear", class: "wcs-dark", onClick: ($event) => this.onCloseButtonClick($event) }, index.h("wcs-mat-icon", { icon: "close" })))), index.h("div", { class: "wcs-modal-content" }, index.h("slot", null)), !this.hideActions && (index.h("div", { class: "wcs-modal-actions" }, index.h("slot", { name: "actions" }))))));
   }
   onKeyDown(event) {
     if (this.showCloseButton && event.key === 'Escape') {