wcs-core 2.5.4 → 2.9.0

package/dist/esm/wcs-editable-field.entry.js

@@ -0,0 +1,221 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b982604a.js';
+
+const editableFieldCss = ":host{display:block}:host .display-none{display:none !important}:host .label{margin-bottom:var(--wcs-base-margin);font-weight:500;font-size:16px;color:var(--wcs-gray-light)}:host .edit-container{display:flex;width:100%}:host .display-container{min-height:24px;white-space:break-spaces;display:flex;justify-content:space-between;align-items:center;background-color:var(--wcs-light);border-radius:var(--wcs-border-radius);font-size:1rem;line-height:1.5;font-weight:500;color:var(--wcs-gray);padding:calc(0.5 * var(--wcs-padding)) var(--wcs-padding);transition:0.175s all;border:solid 1px transparent}:host .display-container wcs-mat-icon{display:none}:host .load-container{white-space:pre;display:flex;justify-content:space-between;background-color:var(--wcs-light);border-radius:var(--wcs-border-radius);font-size:1rem;line-height:1.5;font-weight:500;color:var(--wcs-gray);padding:calc(0.5 * var(--wcs-padding)) var(--wcs-padding);transition:0.175s all;border:solid 1px transparent;align-items:center}:host wcs-spinner{height:16px;width:16px}:host .readonly-icon{fill:var(--wcs-text-medium)}:host([readonly]) .display-container{color:var(--wcs-gray-light)}:host(:not([readonly])) .display-container:hover{color:var(--wcs-primary);cursor:pointer;border:solid 1px var(--wcs-primary)}:host(:not([readonly])) .display-container:hover wcs-mat-icon{display:flex;align-items:center}";
+
+var EditableComponentState;
+(function (EditableComponentState) {
+  EditableComponentState[EditableComponentState["DISPLAY"] = 0] = "DISPLAY";
+  EditableComponentState[EditableComponentState["EDIT"] = 1] = "EDIT";
+  EditableComponentState[EditableComponentState["LOAD"] = 2] = "LOAD";
+})(EditableComponentState || (EditableComponentState = {}));
+let EditableField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcsChange = createEvent(this, "wcsChange", 7);
+    this.currentState = EditableComponentState.DISPLAY;
+    /**
+     * Specifies which component is used for editing
+     */
+    this.type = 'input';
+    /**
+     * Specify whether the field is editable or not
+     */
+    this.readonly = false;
+    /**
+     * Error message displayed under the field if validation failed.
+     */
+    this.errorMsg = null;
+    this.isError = false;
+    this.ignoreNextChangeEvent = false;
+    this.spiedElement = null;
+    this.currentValue = null;
+  }
+  componentWillLoad() {
+    this.currentValue = this.value;
+  }
+  componentDidRender() {
+    const assignedElements = this.el.shadowRoot.querySelector('slot').assignedElements();
+    switch (this.type) {
+      case 'input':
+        this.initWithInput(assignedElements);
+        break;
+      case 'textarea':
+        this.initWithTextArea(assignedElements);
+        break;
+      case 'select':
+        this.initWithSelect(assignedElements);
+        break;
+    }
+  }
+  initWithInput(assignedElements) {
+    const element = assignedElements.filter(x => {
+      return x.tagName === 'WCS-INPUT';
+    })[0];
+    if (!element)
+      throw new Error('You must provide a slotted input element to handle edition');
+    this.spiedElement = element;
+    this.addChangeHandlerForWcsComponents(this.spiedElement);
+    this.spiedElement.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        this.sendCurrentValue();
+      }
+      if (event.key === 'Escape') {
+        this.discardChanges();
+      }
+    });
+  }
+  initWithTextArea(assignedElements) {
+    const element = assignedElements.filter(x => {
+      return x.tagName === 'WCS-TEXTAREA';
+    })[0];
+    if (!element)
+      throw new Error('You must provide a slotted textarea element to handle edition');
+    this.spiedElement = element;
+    this.addChangeHandlerForWcsComponents(this.spiedElement);
+    this.spiedElement.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' && event.ctrlKey) {
+        this.sendCurrentValue();
+      }
+      if (event.key === 'Escape') {
+        this.discardChanges();
+      }
+    });
+  }
+  initWithSelect(assignedElements) {
+    const element = assignedElements.filter(x => {
+      return x.tagName === 'WCS-SELECT';
+    })[0];
+    if (!element)
+      throw new Error('You must provide a slotted select element to handle edition');
+    this.spiedElement = element;
+    this.addChangeHandlerForWcsComponents(this.spiedElement);
+  }
+  /**
+   * This method subscribes the component to the change events produced by the other WCS components
+   * (provided by the user in slot)
+   * @private
+   */
+  addChangeHandlerForWcsComponents(elt) {
+    elt.addEventListener('wcsChange', (event) => {
+      event.stopImmediatePropagation();
+      this.currentValue = event.detail.value;
+      if (this.validateFn) {
+        this.isError = !this.validateFn(this.currentValue);
+      }
+    });
+  }
+  sendCurrentValue() {
+    if (this.currentState === EditableComponentState.EDIT) {
+      if (this.value === this.currentValue) {
+        this.currentState = EditableComponentState.DISPLAY;
+      }
+      else {
+        this.isError = this.validateFn ? !this.validateFn(this.currentValue) : false;
+        if (!this.isError) {
+          this.currentState = EditableComponentState.LOAD;
+          this.wcsChange.emit({
+            newValue: this.currentValue,
+            successHandler: () => this.forceDisplayStateAndValidate(),
+            errorhandler: () => this.errorHandler()
+          });
+        }
+      }
+    }
+  }
+  discardChanges() {
+    this.currentValue = this.value;
+    this.currentState = EditableComponentState.DISPLAY;
+    this.isError = false;
+  }
+  forceDisplayStateAndValidate() {
+    if (this.currentState === EditableComponentState.LOAD) {
+      this.value = this.currentValue;
+      this.currentState = EditableComponentState.DISPLAY;
+    }
+    else {
+      throw new Error('You cannot set display state from ' + EditableComponentState[this.currentState] + ' state');
+    }
+  }
+  onWindowClickEvent(event) {
+    if (!this.clickInsideComponent(event)) {
+      if (this.currentState === EditableComponentState.EDIT) {
+        if (this.isError) {
+          this.discardChanges();
+        }
+        else {
+          this.sendCurrentValue();
+        }
+      }
+    }
+  }
+  clickInsideComponent(event) {
+    return event.x >= this.el.getBoundingClientRect().x && event.x <= this.el.getBoundingClientRect().x + this.el.getBoundingClientRect().width
+      && event.y >= this.el.getBoundingClientRect().y && event.y <= this.el.getBoundingClientRect().y + this.el.getBoundingClientRect().height;
+  }
+  /**
+   * discard changes and force component state to DISPLAY
+   * <br/>
+   * This method must be call when component is in LOAD state
+   */
+  errorHandler() {
+    this.discardChanges();
+  }
+  onValueChange() {
+    this.currentState = EditableComponentState.DISPLAY;
+  }
+  onDisplayContainerClick() {
+    if (this.currentState === EditableComponentState.DISPLAY && this.readonly === false) {
+      this.currentState = EditableComponentState.EDIT;
+      this.ignoreNextChangeEvent = true;
+      this.spiedElement['value'] = this.currentValue;
+      if (this.validateFn) {
+        this.isError = !this.validateFn(this.currentValue);
+      }
+      // We wait until the element is displayed on the page otherwise the focus does not work
+      const DELAY_FOR_RENDER = 20;
+      setTimeout(() => {
+        if (this.type === 'input') {
+          this.spiedElement.setFocus();
+        }
+        else if (this.type === 'textarea') {
+          this.spiedElement.fitContent();
+          this.spiedElement.setFocus();
+        }
+      }, DELAY_FOR_RENDER);
+    }
+  }
+  render() {
+    const { formattedValue, formattedCurrentValue } = this.formatValues();
+    return (h(Host, null, h("div", { class: "label" }, this.label), h("div", { class: 'display-container ' + (this.currentState !== EditableComponentState.DISPLAY ? 'display-none' : ''), onClick: () => this.onDisplayContainerClick() }, formattedValue, h("wcs-mat-icon", { icon: "edit", size: "s" }), this.readonly ? this.getReadonlySvgIcon() : null), h("div", { class: 'load-container ' + (this.currentState !== EditableComponentState.LOAD ? 'display-none' : '') }, formattedCurrentValue, h("wcs-spinner", null)), h("wcs-form-field", { "is-error": this.isError, class: 'edit-container ' + (this.currentState !== EditableComponentState.EDIT ? 'display-none' : '') }, h("slot", null), this.isError && this.errorMsg
+      ? h("wcs-error", null, this.errorMsg)
+      : null)));
+  }
+  getReadonlySvgIcon() {
+    return h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "26", height: "24", viewBox: "0 0 27 25", class: "readonly-icon" }, h("path", { d: "M26.79,25.05H1.21a.73.73,0,0,0,0,1.45H26.79a.73.73,0,0,0,0-1.45Z", transform: "translate(-0.5 -1.5)" }), h("path", { d: "M19.8,8.87h-.61V6.73a5.23,5.23,0,0,0-10.46,0V8.87H8.2a1.63,1.63,0,0,0-1.63,1.62V21.32A1.62,1.62,0,0,0,8.2,22.94H19.8a1.62,1.62,0,0,0,1.63-1.62V10.49A1.63,1.63,0,0,0,19.8,8.87ZM10.93,6.73a3,3,0,1,1,6.06,0V8.87H10.93Zm3,14.15a5,5,0,1,1,5-5A5,5,0,0,1,14,20.88Z", transform: "translate(-0.5 -1.5)" }), h("path", { d: "M14,12.62a3.29,3.29,0,1,0,3.29,3.29A3.29,3.29,0,0,0,14,12.62Zm0,4.75a1.47,1.47,0,1,1,1.47-1.46A1.46,1.46,0,0,1,14,17.37Z", transform: "translate(-0.5 -1.5)" }));
+  }
+  formatValues() {
+    let formattedValue = this.value;
+    let formattedCurrentValue = this.currentValue;
+    if (this.formatFn) {
+      formattedValue = this.formatFn(this.value);
+      formattedCurrentValue = this.formatFn(this.currentValue);
+    }
+    if (Array.isArray(this.value)) {
+      formattedValue = this.value.join(', ');
+    }
+    if (Array.isArray(this.currentValue)) {
+      formattedCurrentValue = this.currentValue.join(', ');
+    }
+    return {
+      formattedValue: (formattedValue ? (h("span", null, formattedValue)) : (h("span", null))),
+      formattedCurrentValue: (formattedCurrentValue ? (h("span", null, formattedCurrentValue)) : (h("span", null)))
+    };
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["onValueChange"]
+  }; }
+};
+EditableField.style = editableFieldCss;
+
+export { EditableField as wcs_editable_field };

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

@@ -0,0 +1,132 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b982604a.js';
+
+const errorCss = ":host{margin-top:0.25rem;color:var(--wcs-red)}";
+
+let Label = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { slot: "error" }, h("slot", null)));
+  }
+};
+Label.style = errorCss;
+
+const formFieldCss = ":host{--wcs-form-field-border-radius-left:var(--wcs-border-radius);--wcs-form-field-border-radius-right:var(--wcs-border-radius);display:flex;flex-direction:column}.input-container{display:flex}::slotted(wcs-radio-group){margin-left:var(--wcs-base-margin)}::slotted(wcs-radio-group[mode=option]){margin-left:0}::slotted(wcs-select:not([slot=prefix])){width:100%}::slotted(label){font-weight:500;margin-bottom:8px}:host(.has-prefix){--wcs-input-border-radius-left:0}:host(.has-suffix){--wcs-input-border-radius-right:0}::slotted([slot=prefix]){--wcs-select-border-radius:var(--wcs-border-radius) 0 0 var(--wcs-border-radius);--wcs-select-background-color:var(--wcs-gray-light);--wcs-select-value-color:var(--wcs-white);--wcs-select-placeholder-color:var(--wcs-white);--wcs-select-border-color:var(--wcs-gray-light)}::slotted([slot=suffix]){--wcs-button-border-radius:0 var(--wcs-border-radius) var(--wcs-border-radius) 0}";
+
+let FormField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component
+     */
+    this.isError = false;
+    this.hasPrefix = false;
+    this.hasSuffix = false;
+  }
+  componentWillLoad() {
+    this.hasSuffix = this.el.querySelector('wcs-button') !== null;
+    this.hasPrefix = this.el.querySelector('wcs-select') !== null;
+  }
+  componentDidLoad() {
+    this.initSpiedElement();
+    this.addRequiredMarkerToLabel();
+    this.updateErrorStateOnInput(this.isError);
+  }
+  isErrorChange(newValue) {
+    this.updateErrorStateOnInput(newValue);
+  }
+  updateErrorStateOnInput(newValue) {
+    if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {
+      if (newValue) {
+        this.spiedElement.setAttribute('state', 'error');
+      }
+      else {
+        this.spiedElement.setAttribute('state', 'initial');
+      }
+    }
+  }
+  /**
+   * This function return true if the form field contains an element with tagName matches a value of the types param
+   * @param types
+   * @private
+   */
+  spiedElementIsOfType(...types) {
+    var _a;
+    for (const type of types) {
+      if (((_a = this.spiedElement) === null || _a === void 0 ? void 0 : _a.tagName) === type.toUpperCase())
+        return true;
+    }
+    return false;
+  }
+  addRequiredMarkerToLabel() {
+    var _a;
+    // TODO: deprecate this in favor of the 'required' component attribute
+    const label = this.el.querySelector('wcs-label');
+    this.observer = new MutationObserver(mutations => {
+      var _a;
+      const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];
+      if (requiredAttMutation) {
+        this.updateLabelRequiredFlag((_a = this.spiedElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('required'), label);
+      }
+    });
+    if (this.spiedElement) {
+      this.observer.observe(this.spiedElement, { attributes: true });
+    }
+    const isRequired = (_a = this.spiedElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('required');
+    this.updateLabelRequiredFlag(isRequired, label);
+  }
+  initSpiedElement() {
+    var _a;
+    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];
+    // If the component is used in another web component
+    if (this.spiedElement.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) {
+      // 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).');
+    }
+  }
+  updateLabelRequiredFlag(isRequired, label) {
+    if (isRequired && label) {
+      label.setAttribute('required', 'true');
+    }
+    else if (!isRequired && label) {
+      label.removeAttribute('required');
+    }
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    let classes = '';
+    const isError = this.isError;
+    if (this.hasSuffix) {
+      classes += ' has-suffix';
+    }
+    if (this.hasPrefix) {
+      classes += ' has-prefix';
+    }
+    return (h(Host, { class: classes }, h("slot", { name: "label" }), h("div", { class: "input-container" }, h("slot", { name: "prefix" }), h("slot", { onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { name: "messages" })));
+  }
+  onFormInputSlotChange() {
+    this.initSpiedElement();
+    this.addRequiredMarkerToLabel();
+    this.updateErrorStateOnInput(this.isError);
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "isError": ["isErrorChange"]
+  }; }
+};
+FormField.style = formFieldCss;
+
+export { Label as wcs_error, FormField as wcs_form_field };

package/dist/esm/wcs-field-content.entry.js

@@ -0,0 +1,12 @@
+import { r as registerInstance, h, H as Host } from './index-b982604a.js';
+
+let FieldContent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { slot: "content" }, h("slot", null)));
+  }
+};
+
+export { FieldContent as wcs_field_content };

package/dist/esm/wcs-field-label.entry.js

@@ -0,0 +1,12 @@
+import { r as registerInstance, h, H as Host } from './index-b982604a.js';
+
+let FieldLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { slot: "label" }, h("slot", null)));
+  }
+};
+
+export { FieldLabel as wcs_field_label };

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

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-b982604a.js';
+
+const fieldCss = ":host{display:flex;flex-direction:column;margin-top:var(--wcs-base-margin);margin-bottom:calc(var(--wcs-base-margin) * 2)}::slotted([slot=label]){font-size:1rem;line-height:1.375;font-weight:500;margin-bottom:calc(var(--wcs-base-margin) / 2);color:var(--wcs-gray-light)}::slotted([slot=content]){font-size:1rem;font-weight:400;color:var(--wcs-gray-light)}";
+
+let Field = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "label" }), h("slot", { name: "content" })));
+  }
+};
+Field.style = fieldCss;
+
+export { Field as wcs_field };

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

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-b982604a.js';
+
+const footerCss = ":host{display:block;width:100%;background-color:var(--wcs-gray);color:white}:host .end{margin-top:calc(2 * var(--wcs-base-margin));width:100%;display:flex;justify-content:space-between;align-items:center}:host .end slot[name=end-left]::slotted(a){color:var(--wcs-text-disabled);text-decoration:none;font-size:14px;font-weight:500;margin-right:35px}:host .end slot[name=end-left]::slotted(a:hover){color:var(--wcs-white)}:host .container{margin:0 auto;max-width:var(--wcs-com-content-max-width);display:flex;flex-direction:column;padding:20px}";
+
+let Footer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "container" }, h("div", null, h("slot", null)), h("div", { class: "end" }, h("div", null, h("slot", { name: "end-left" })), h("div", null, h("slot", { name: "end-right" }))))));
+  }
+};
+Footer.style = footerCss;
+
+export { Footer as wcs_footer };

package/dist/esm/wcs-galactic-menu.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b982604a.js';
+import { a as clickInsideElement } from './helpers-e2993152.js';
+import { c as createPopper } from './popper-5f42e560.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)}";
+
+let Galactic = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.showPopoverMenu = false;
+  }
+  componentDidLoad() {
+    this.menu = this.el.shadowRoot.getElementById('toggle-menu-icon');
+    this.tooltip = this.el.shadowRoot.getElementById('menu');
+    this.popper = createPopper(this.menu, this.tooltip, {
+      placement: 'bottom-end',
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 8]
+          }
+        }
+      ]
+    });
+  }
+  onWindowClickEvent(event) {
+    if (clickInsideElement(event, this.tooltip) || clickInsideElement(event, this.menu)) {
+      return;
+    }
+    else {
+      if (this.showPopoverMenu) {
+        this.toogleMenu();
+      }
+    }
+  }
+  toogleMenu() {
+    this.showPopoverMenu = !this.showPopoverMenu;
+  }
+  componentDidRender() {
+    if (this.popper) {
+      this.popper.update();
+    }
+  }
+  render() {
+    return (h(Host, null, h("span", null, this.text), h("wcs-mat-icon", { id: "toggle-menu-icon", icon: "more_horiz", size: "m", onClick: _ => {
+        this.toogleMenu();
+      } }), h("span", { id: "menu", "data-show": this.showPopoverMenu }, h("div", { id: "arrow", "data-popper-arrow": true }), h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+Galactic.style = galacticMenuCss;
+
+export { Galactic as wcs_galactic_menu };

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

@@ -0,0 +1,37 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b982604a.js';
+
+const galacticCss = ":host{display:block;background-color:var(--wcs-gray)}.container{height:32px;align-items:center;justify-content:space-between;color:var(--wcs-white);font-size:14px;display:flex;max-width:var(--wcs-com-content-max-width);margin:0 auto}.container #sncf-logo{height:32px;margin-right:20px}.container .container-left{display:flex;align-items:center}";
+
+let Galactic = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.show = false;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "container" }, h("div", { class: "container-left" }, h("img", { src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "Logo SNCF" }), h("span", null, this.text)), h("div", { class: "menu" }, h("slot", null)))));
+  }
+  get el() { return getElement(this); }
+};
+const SNCF_BASE64_SVG_LOGO = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVy' +
+  'c2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5' +
+  'rIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iU1ZHX0dSQURJRU5UIiBncmFkaW' +
+  'VudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIxNiIgeDI9IjMxLjk1OTMiIHkyPSIxNiI+DQoJCTxzdG9wICBvZmZzZXQ9IjAiIHN0e' +
+  'WxlPSJzdG9wLWNvbG9yOiM4MzJGNzAiLz4NCgkJPHN0b3AgIG9mZnNldD0iMC4yNDcyIiBzdHlsZT0ic3RvcC1jb2xvcjojQUMyODdDIi8+DQoJCTxz' +
+  'dG9wICBvZmZzZXQ9IjAuODE0NiIgc3R5bGU9InN0b3AtY29sb3I6I0RGMjUzMCIvPg0KCQk8c3RvcCAgb2Zmc2V0PSIxIiBzdHlsZT0ic3RvcC1jb2x' +
+  'vcjojREYyNTMwIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cGF0aCBmaWxsPSJ1cmwoI1NWR19HUkFESUVOVCkiIGQ9Ik0wLjYsNy43QzAuMiw3Lj' +
+  'csMCw3LjgsMCw4LjJ2MTUuN2MwLDAuMywwLjIsMC41LDAuNSwwLjVoMjhjMC4zLDAsMC41LDAsMC42LTAuNGMwLDAsMi44LTguOSwyLjktOSBjMC4xL' +
+  'TAuMywwLTAuNS0wLjMtMC43QzIyLjYsOC41LDguOSw3LjYsMi44LDcuNkMxLjksNy42LDEuMSw3LjYsMC42LDcuN3oiLz4NCgk8cGF0aCBmaWxsPSIj' +
+  'RkZGRkZGIiBkPSJNNi40LDE3LjdjLTEtMC41LTEuNy0wLjgtMS42LTEuM0M1LDE1LjgsNi4xLDE1LjYsNywxNS42YzAuNSwwLDAuOCwwLjEsMS4yLDA' +
+  'uMmwwLjMtMS4xIGMtMC41LTAuMS0wLjgtMC4xLTEuNC0wLjFjLTEuOSwwLTMuNiwwLjUtNCwxLjZjLTAuNSwxLjMsMC45LDIsMi4yLDIuNmMxLDAuNS' +
+  'wxLjgsMC45LDEuNSwxLjVjLTAuMiwwLjUtMC45LDAuNy0yLDAuNyBjLTAuOSwwLTItMC4zLTIuOS0wLjdsLTAuNSwxLjFjMC42LDAuMywyLDAuNywzL' +
+  'jEsMC43YzIuMSwwLDMuNS0wLjUsNC4xLTEuN0M5LjMsMTkuMSw3LjcsMTguMyw2LjQsMTcuN3oiLz4NCgk8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJN' +
+  'OS4zLDE5LjZDOS4zLDE5LjcsOS4zLDE5LjcsOS4zLDE5LjZjMC4xLDAsMC4xLDAsMC4xLDBjMCwwLDEtMy4yLDEtMy4yYzEuMSwxLjUsMi4xLDMuNSw' +
+  'yLjcsNS42aDEuNyBsMC45LTIuN2MwLDAsMCwwLDAuMSwwYzAsMCwwLDAsMC4xLDBjMC4zLDEuNywxLjksMi44LDQuMywyLjhjMS41LDAsMi45LTAuNC' +
+  'wzLjItMC42bDAuOS0yLjhoMy40bDAuMy0xLjFoLTMuNGwwLjYtMS44aDQuMSBsMC40LTEuMWgtNS43bC0xLjksNi4xYy0wLjQsMC4xLTAuOSwwLjItM' +
+  'S41LDAuMmMtMS4xLDAtMi4xLTAuMy0yLjYtMC45Yy0wLjQtMC41LTAuNS0xLTAuNC0xLjdjMC4yLTEuNiwxLjgtMi42LDMuOC0yLjYgYzAuNCwwLDAu' +
+  'OSwwLDEuMywwLjFsMC40LTEuMmMtMC41LTAuMS0xLjEtMC4xLTEuNy0wLjFjLTEuOCwwLTMuNCwwLjYtNC40LDEuN2MwLDAtMC4xLDAtMC4xLDBjMCw' +
+  'wLTAuMSwwLDAsMGwwLjUtMS42aC0xLjUgTDE0LDE5LjhjLTAuNS0xLjUtMS42LTMuNS0yLjktNS4xSDkuNWwtMS4yLDMuN0M4LjksMTguOCw5LjEsMT' +
+  'kuMiw5LjMsMTkuNnoiLz4NCjwvc3ZnPg0K';
+Galactic.style = galacticCss;
+
+export { Galactic as wcs_galactic };

package/dist/esm/wcs-grid-column.entry.js

@@ -0,0 +1,73 @@
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-b982604a.js';
+
+const GridSortArrow = ({ state }) => (h("svg", { style: { marginLeft: 'auto' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" },
+  h("style", { type: "text/css" }, `
+            .arrow-group {
+                transform-origin: 50% 51%;
+                transition: transform 175ms ease-in-out;
+            }
+            .arrow{
+                transition: fill 175ms ease-in-out;
+                fill: var(--wcs-text-light);
+            }
+            .asc {
+                transform: scaleY(1) translateY(-6px);
+            }
+            .desc {
+                transform: scaleY(-1) translateY(-6px);
+            }
+            .active {
+                fill: var(--wcs-primary);
+            }
+
+        `),
+  h("g", { fill: "none", class: 'asc arrow-group' },
+    h("path", { class: (state === 'asc' ? 'active' : '') + ' arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }),
+    h("path", { d: "M0 0h24v24H0z", fill: "none" })),
+  h("g", { fill: "none", class: 'desc arrow-group' },
+    h("path", { class: (state === 'desc' ? 'active' : '') + ' arrow', d: "M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" }),
+    h("path", { d: "M0 0h24v24H0z", fill: "none" }))));
+
+const gridColumnCss = ":host{--wcs-grid-column-border-left:solid 1px var(--wcs-text-light);display:contents}:host th{color:var(--wcs-gray-dark);background-color:var(--wcs-light);border-left:var(--wcs-grid-column-border-left);padding:calc(var(--wcs-padding) / 2) var(--wcs-padding);text-align:left}:host th .grid-column-th-content{display:inline-flex;flex-direction:row}:host th .grid-column-th-content span{user-select:none}:host .pointer{cursor:pointer}:host([sort-order=asc]) img{transform:scaleY(1)}:host([sort-order=desc]) img{transform:scaleY(-1)}:host([sort-order=none]) img{display:none}:host([sort-order=none]) th:hover img{display:inline-block}:host([hidden]){display:none !important}";
+
+let GridColumn = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.wcsSortChange = createEvent(this, "wcsSortChange", 7);
+    this.wcsHiddenChange = createEvent(this, "wcsHiddenChange", 7);
+    this.sort = false;
+    this.sortOrder = 'none';
+    this.customCells = false;
+    this.hidden = false;
+  }
+  parseMyObjectProp(newValue) {
+    this.wcsHiddenChange.emit(newValue);
+  }
+  sortOrderChange(_) {
+    this.emitSortConfig();
+  }
+  emitSortConfig() {
+    if (!this.sort)
+      return;
+    this.wcsSortChange.emit({
+      column: this.el,
+      order: this.sortOrder,
+      sortFn: this.sortFn
+    });
+  }
+  render() {
+    return (h(Host, { onClick: this.onSortClick.bind(this), slot: "grid-column" }, h("th", { style: { width: this.width }, class: this.sort ? 'pointer' : '' }, h("div", { class: "grid-column-th-content" }, h("span", null, this.name), 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';
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "hidden": ["parseMyObjectProp"],
+    "sortOrder": ["sortOrderChange"]
+  }; }
+};
+GridColumn.style = gridColumnCss;
+
+export { GridColumn as wcs_grid_column };

package/dist/esm/wcs-grid-custom-cell.entry.js

@@ -0,0 +1,12 @@
+import { r as registerInstance, h, H as Host } from './index-b982604a.js';
+
+let GridCustomCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { slot: this.columnId + '-' + this.rowId }, h("slot", null)));
+  }
+};
+
+export { GridCustomCell as wcs_grid_custom_cell };

package/dist/esm/wcs-grid-pagination.entry.js

@@ -1,4 +1,4 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-c619b1fa.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-b982604a.js';
 
 const GridPaginationArrow = ({ active, order, double = false }) => (h("svg", { style: { marginLeft: 'auto', cursor: 'pointer' }, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "20", viewBox: "0 0 24 20" },
   h("style", { type: "text/css" }, `
@@ -34,15 +34,15 @@ const GridPaginationArrow = ({ active, order, double = false }) => (h("svg", { s
 
 const gridPaginationCss = ":host{display:block;border-style:solid none none;border-width:1px;border-color:var(--wcs-text-light)}.container{display:grid;grid-template-columns:auto auto auto;justify-content:space-between;color:var(--wcs-text-medium)}.available-page-sizes{width:auto}.page-management,.page-size,.items-count{display:flex;align-items:center}.pagination-arrow{display:flex}";
 
-const GridPagination = class {
+let GridPagination = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.wcsGridPaginationChange = createEvent(this, "wcsGridPaginationChange", 7);
     this.availablePageSizes = [10, 20, 50];
-    this.currentPage = 1;
+    this.currentPage = 0;
     this.pageSize = this.availablePageSizes[0];
     this.itemsCount = 0;
-    this.pageCount = 0;
+    this.pageCount = 1;
   }
   lastPage() {
     this.currentPage = this.pageCount - 1;