wcs-core 2.5.4 → 2.6.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-icon-color:var(--wcs-text-medium);--wcs-form-field-border-radius-left:var(--wcs-border-radius);--wcs-form-field-border-radius-right:var(--wcs-border-radius);display:inline-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 };