@sankhyalabs/ezui 1.1.4 → 1.1.8

package/dist/collection/components/ez-form/subcomponents/form-metadata.js

@@ -0,0 +1,173 @@
+import { Component, Host, h, Element, Prop } from '@stencil/core';
+import DataUnit from './DataUnit';
+export class FormMetadata {
+  buildField(element) {
+    const label = element.textContent;
+    let name = element.getAttribute("name") || label;
+    let userInterface = element.getAttribute("ui") || "SHORTTEXT";
+    const defaultValue = element.getAttribute("defaultValue");
+    const required = element.getAttribute("required") === "true";
+    const readOnly = element.getAttribute("readonly") === "true";
+    return { name, userInterface, label, defaultValue, required, readOnly };
+  }
+  buildFieldSet(element) {
+    const label = element.getAttribute("label");
+    const fields = Array.from(element.getElementsByTagName('FIELD')).map(f => this.buildField(f));
+    return { label, fields };
+  }
+  fromElements(elements, label, name, dataUnit, many, autoLoad) {
+    const form = {
+      name: name || label,
+      label,
+      autoLoad
+    };
+    if (dataUnit) {
+      form.dataUnit = new DataUnit(dataUnit, many ? 'N' : '1');
+    }
+    Array.from(elements).forEach(child => {
+      const tagName = child.tagName.toUpperCase();
+      switch (tagName) {
+        case 'FIELD':
+          if (!form.items) {
+            form.items = [];
+          }
+          form.items.push(this.buildField(child));
+          break;
+        case 'FIELD-SET':
+          if (!form.items) {
+            form.items = [];
+          }
+          form.items.push(this.buildFieldSet(child));
+          break;
+        case 'SUB-FORM':
+          if (!form.subForms) {
+            form.subForms = [];
+          }
+          const label = child.getAttribute("label") || "Subform " + (form.subForms.length + 1);
+          const name = child.getAttribute("name") || label;
+          form.subForms.push(this.fromElements(child.children, label, name, child.getAttribute("dataunit"), child.hasAttribute("many"), child.getAttribute("autoload") === "true"));
+          break;
+      }
+    });
+    return form;
+  }
+  componentWillLoad() {
+    if (!this.dataunit) {
+      this.dataunit = "dataunit_" + (this.name || this.label || new Date().getTime());
+    }
+    this.metadata = this.fromElements(this._host.children, this.label, this.name, this.dataunit, this.many, this.autoload);
+  }
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "form-metadata"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "dataunit": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "dataunit",
+      "reflect": false
+    },
+    "many": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "many",
+      "reflect": false
+    },
+    "autoload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "autoload",
+      "reflect": false
+    },
+    "metadata": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "Form",
+        "resolved": "Form",
+        "references": {
+          "Form": {
+            "location": "import",
+            "path": "./FormMetadata"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get elementRef() { return "_host"; }
+}

package/dist/collection/components/ez-form/subcomponents/place-holder.js

@@ -0,0 +1,14 @@
+import { Component, Host, h } from '@stencil/core';
+export class PlaceHolder {
+  render() {
+    return h(Host, null);
+  }
+  static get is() { return "place-holder"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["css/place-holder.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["./css/place-holder.css"]
+  }; }
+}

package/dist/collection/components/ez-form/subcomponents/structure/Field.js

@@ -0,0 +1,71 @@
+import { DateUtils } from "@sankhyalabs/core";
+import { h } from "@stencil/core";
+import { DependencyType } from "../FormMetadata";
+function scrollToView(forceScroll, elem) {
+  if (forceScroll) {
+    window.requestAnimationFrame(() => elem.scrollIntoView());
+  }
+}
+export const Field = ({ dataUnit, source, forceScroll }) => {
+  const { name, label, userInterface, properties, required, dependencies } = source;
+  const value = dataUnit.getValue(name) || null;
+  const loadingData = dataUnit.isLoading();
+  const formattedLabel = required ? `* ${label} (obrigatório)` : label;
+  const errorMessage = dataUnit.getErrorMessage(name);
+  const changeFieldHandler = (newValue) => {
+    dataUnit.changeValue(name, newValue);
+  };
+  switch (userInterface) {
+    case 'LONGTEXT':
+      return h("div", { class: "col col--sd-12 padding--small" },
+        h("ez-text-area", { label: formattedLabel, onInput: evt => changeFieldHandler(evt.target['value']), value: value || '', errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }));
+    case 'CHECKBOX':
+      return h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+        h("ez-check", { onInput: evt => changeFieldHandler(evt.target['value']), ref: elem => scrollToView(forceScroll, elem) }));
+    case 'SWITCH':
+      return h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+        h("div", { class: "row" },
+          h("div", { class: "col col--sd-2" },
+            h("ez-check", { mode: "switch", value: value === "S", ref: elem => scrollToView(forceScroll, elem) })),
+          h("div", { class: "col col--sd-10" },
+            h("label", { class: "text text--primary text--medium" }, label))));
+    case 'OPTIONSELECTOR':
+      const optsObj = JSON.parse(properties.find(prop => prop.name === 'options').value);
+      return h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+        h("ez-combo-box", { value: value, label: formattedLabel, onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }, Object.keys(optsObj).map(key => h("option", { value: key }, optsObj[key]))));
+    case 'SEARCH':
+      const context = {};
+      properties.forEach(({ name, value }) => {
+        context[name] = value;
+      });
+      let criteriaList = [];
+      dependencies === null || dependencies === void 0 ? void 0 : dependencies.forEach(dependency => {
+        var _a;
+        if (dependency.type === DependencyType.SEARCHING) {
+          if (((_a = dependency.masterFields) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            let criteria = {
+              expression: dependency.expression,
+              paramNames: [...dependency.masterFields],
+              paramResolver: name => dataUnit.getValue(name)
+            };
+            criteriaList.push(criteria);
+          }
+        }
+      });
+      if (criteriaList.length > 0) {
+        context['CRITERIA'] = criteriaList;
+      }
+      return h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+        h("ez-search", { label: label, onEzChange: (event) => changeFieldHandler(event.target['value']), showvalue: true, value: value, loadexecutor: (argument, callback) => dataUnit.fieldSearchExecutor(argument, context, callback) }));
+    case 'DATE':
+      return h("div", { class: "col col--sd-12 col--tb-3 padding--small" },
+        h("ez-date-input", { label: formattedLabel, enabled: true, value: !value ? null : DateUtils.clearTime(value), onEzChange: (event) => changeFieldHandler(event.target['value']), errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }));
+    //IMAGE, FILE, DATE, DATETIME, ELAPSEDTIME, DECIMALNUMBER, INTEGERNUMBER, PASSWORD, MASKEDTEXT, HTML
+    default:
+      return h("div", { class: "col col--sd-12 col--tb-3 padding--small" }, loadingData
+        ?
+          h("place-holder", null)
+        :
+          h("ez-text-input", { loading: loadingData, label: formattedLabel, onInput: (event) => changeFieldHandler(event.target['value']), value: value, errormessage: errorMessage, ref: elem => scrollToView(forceScroll, elem) }));
+  }
+};

package/dist/collection/components/ez-form/subcomponents/structure/FieldSet.js

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+import { collapseExpandGroup } from "../../store/Form.actions";
+import { selectIsCollapsedFieldSet } from "../../store/Form.selectors";
+import { Field } from "./Field";
+export const FieldSet = ({ store, formName, source, dataUnit }) => {
+  const { label, fields } = source;
+  const fieldSetName = formName + label;
+  let isCollapsed = selectIsCollapsedFieldSet(store.getState(), formName + label);
+  let fieldToScroll;
+  source.fields.forEach((field) => {
+    if (fieldToScroll === undefined) {
+      const fieldError = dataUnit.getErrorMessage(field.name);
+      if (fieldError !== undefined && fieldError !== null && fieldError !== "") {
+        fieldToScroll = field.name;
+      }
+    }
+  });
+  if (fieldToScroll) {
+    isCollapsed = false;
+  }
+  return h("div", { class: "col col--sd-12 padding--small" },
+    h("div", { class: "row margin-top--large" },
+      h("div", { class: "col col--sd-12 align--middle padding-horizontal--medium" },
+        h("ez-collapsable-box", { value: isCollapsed, label: label, onEzChange: () => store.dispatch(collapseExpandGroup(fieldSetName, !isCollapsed)) }),
+        isCollapsed ? null :
+          h("div", { class: "col col--sd-12" }, fields.map(field => h(Field, { source: field, dataUnit: dataUnit, forceScroll: fieldToScroll === field.name }))))));
+};

package/dist/collection/components/ez-form/subcomponents/structure/FormSheet.js

@@ -0,0 +1,40 @@
+import { h } from "@stencil/core";
+import { NavigationBar } from "./NavigationBar";
+import { selectCurrentTab, selectVisibleButtons } from "../../store/Form.selectors";
+import { changeTab } from "../../store/Form.actions";
+import { FieldSet } from "./FieldSet";
+import { Field } from "./Field";
+function buildFormItem(source, formName, store, dataUnit) {
+  if ("fields" in source) {
+    return h(FieldSet, { source: source, store: store, formName: formName, dataUnit: dataUnit });
+  }
+  const errorMsg = dataUnit.getErrorMessage(source.name);
+  const forceScroll = errorMsg === undefined || errorMsg === null || errorMsg === "" ? false : true;
+  return h(Field, { source: source, dataUnit: dataUnit, forceScroll: forceScroll });
+}
+export const FormSheet = ({ store, parentName, source, parentDataUnit, dataUnitBuilder }) => {
+  const selectedTab = selectCurrentTab(store.getState(), parentName);
+  const tabs = source.length > 1 ? source.map(form => h("ez-tab", { label: form.label, tabKey: form.name })) : null;
+  const { subForms, items, name } = source[selectedTab];
+  const dataUnit = dataUnitBuilder(source[selectedTab].dataUnit);
+  source[selectedTab].dataUnit = dataUnit;
+  const hasSubForms = subForms && subForms.length > 0;
+  const changeTabHandler = (index) => {
+    store.dispatch(changeTab(parentName, index));
+  };
+  //todos os campos e subformulários precisam estar ligados a um DU
+  const currentDU = dataUnit || parentDataUnit;
+  let buttons = selectVisibleButtons(store.getState());
+  if (currentDU.cardinality === "1") {
+    buttons.addVisible = false;
+    buttons.removeVisible = false;
+    buttons.nextVisible = false;
+    buttons.previousVisible = false;
+  }
+  return h("div", { class: "form-sheet" },
+    tabs ? h("ez-tabselector", { selectedindex: selectedTab, selectedtab: name, onChange: (evt) => changeTabHandler(evt.target.selectedindex) }, tabs) : null,
+    dataUnit ? h(NavigationBar, { dataUnit: dataUnit, buttonProps: buttons }) : null,
+    h("div", { class: "tab__container" },
+      items ? items.map(item => buildFormItem(item, name, store, currentDU)) : null,
+      hasSubForms ? h(FormSheet, { store: store, source: subForms, parentName: name, parentDataUnit: currentDU, dataUnitBuilder: dataUnitBuilder }) : null));
+};

package/dist/collection/components/ez-form/subcomponents/structure/NavigationBar.js

@@ -0,0 +1,27 @@
+import { h } from "@stencil/core";
+function removeHandler(dataUnit) {
+  if (confirm("Tem certeza que deseja Remover?")) {
+    dataUnit.remove();
+  }
+}
+export const NavigationBar = ({ dataUnit: du, buttonProps }) => {
+  if (buttonProps.previousVisible
+    || buttonProps.nextVisible
+    || buttonProps.addVisible
+    || buttonProps.removeVisible
+    || buttonProps.saveVisible
+    || buttonProps.cancelVisible
+    || buttonProps.reloadVisible) {
+    return h("div", { class: "col col--sd-12 align--right" },
+      buttonProps.previousVisible ? h("ez-button", { title: "Registro anterior", mode: "icon", enabled: du.hasPrevious(), onClick: () => du.previous(), image: "/themes/default/images/icons/actions-sprite.svg#previous-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.nextVisible ? h("ez-button", { title: "Pr\u00F3ximo registro", mode: "icon", enabled: du.hasNext(), onClick: () => du.next(), image: "/themes/default/images/icons/actions-sprite.svg#next-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.removeVisible ? h("ez-button", { title: "Remover " + du.unitLabel, mode: "icon", enabled: du.hasCurrentRecord(), onClick: () => removeHandler(du), image: "/themes/default/images/icons/actions-sprite.svg#minus-circle-inverted", class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.addVisible ? h("ez-button", { label: "Criar " + du.unitLabel, onClick: () => du.insert(), class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.reloadVisible ? h("ez-button", { title: "Recarregar", mode: "icon", onClick: () => du.load(), image: "/themes/default/images/icons/actions-sprite.svg#rotate", class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.cancelVisible ? h("ez-button", { label: "Cancelar", enabled: du.hasChanges(), onClick: () => du.cancel(), class: "button--secondary margin-right--medium" }) : null,
+      buttonProps.saveVisible ? h("ez-button", { label: "Salvar", enabled: du.hasChanges(), onClick: () => du.save(), class: "button--primary margin-right--medium" }) : null);
+  }
+  else {
+    return null;
+  }
+};

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

@@ -0,0 +1,37 @@
+:host {
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  fill: var(--color--icon);
+}
+
+.x-small {
+  width: 12px;
+  height: 12px;
+}
+
+.small {
+  width: 16px;
+  height: 16px;
+}
+
+.medium {
+  width: 20px;
+  height: 20px;
+}
+
+.large {
+  width: 24px;
+  height: 24px;
+}
+
+.x-large {
+  width: 30px;
+  height: 30px;
+}

package/dist/collection/components/ez-icon/ez-icon.js

@@ -0,0 +1,56 @@
+import { Component, h, Prop } from '@stencil/core';
+export class EzIcon {
+  constructor() {
+    /*Tamanho do icone*/
+    this.size = 'medium';
+  }
+  render() {
+    return (h("svg", { class: this.size, role: "img" },
+      h("use", { xlinkHref: this.href })));
+  }
+  static get is() { return "ez-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ez-icon.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ez-icon.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": true,
+      "defaultValue": "'medium'"
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "href",
+      "reflect": true
+    }
+  }; }
+}

package/dist/collection/components/ez-label-chip/ez-label-chip.css

@@ -0,0 +1,117 @@
+:host {
+  /* dimensions */
+  --lc--height: 36px;
+  --lc--width: 100%;
+  --lc__icon--width: 48px;
+  /* general */
+  --lc--border-radius: var(--border--radius-large, 24px);
+  --lc--font-size: var(--text--medium, 14px);
+  --lc--font-family: var(--font-pattern, Arial);
+  --lc--font-weight: var(--text-weight--large, 500);
+  --lc--space--medium: var(--space--medium, 6px);
+  --lc__border: 1px solid;
+  --lc__border-color-strokes: var(--color--strokes, #DCE0E8);
+  /* label */
+  --lc__label--title--primary: var(--title--primary, #919191);
+  --lc__label--color-primary: var(--color--primary, #008561);
+  --lc__label-color--disable-secondary: var(--color--disable-secondary, #F2F5F8);
+  --lc__label--background-color: #0085610F;
+  --lc__label__default--background-color--hover: var(--color--primary-200, #f2faf8);
+  --lc__label__default--border-color--hover: var(--color--primary-600, #007a5a);
+  --lc__label--text--disabled: var(--text--disable, #AFB6C0);
+  --lc__label--text--primary: var(--text--primary, #626e82);
+  /* message box */
+  --lc__message_box--font-size: var(--text--small, 12px);
+  --lc__message_box--info--color: var(--color--success, #22085d);
+  --lc__message_box--error--color: var(--color--error, #FF0000);
+  /***************
+     host style  
+  ***************/
+  /*public*/
+  width: 100%;
+}
+
+.padding-right--small {
+  padding-right: var(--lc--space--medium);
+}
+
+.padding-left--small {
+  padding-left: var(--lc--space--medium);
+}
+
+.label__container {
+  /*private*/
+  width: fit-content;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  align-items: center;
+  align-self: center;
+  color: var(--lc__label--title--primary);
+  fill: var(--lc__label--title--primary);
+  border: var(--lc__border);
+  border-radius: var(--lc--border-radius);
+  border-color: var( --lc__border-color-strokes);
+  padding-right: var(--space--large, 12px);
+  padding-left: var(--space--large, 12px);
+}
+
+.label__container:hover {
+  border-color:  var(--lc__label__default--border-color--hover);
+  background-color: var(--lc__label__default--background-color--hover);
+}
+
+.label__container--active {
+  /*private*/
+  width: fit-content;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  align-items: center;
+  align-self: center;
+  border: var(--lc__border);
+  border-radius: var(--lc--border-radius);
+  padding-right: var(--space--large, 12px);
+  padding-left: var(--space--large, 12px);
+  fill: var(--lc__label--color-primary);
+  color: var(--lc__label--color-primary);
+  border-color: var(--lc__label--background-color);
+  background-color: var(--lc__label--background-color);
+}
+
+
+.label__container--disabled {
+  width: fit-content;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  align-items: center;
+  align-self: center;
+  border: var(--lc__border);
+  border-color: var(--lc__label-color--disable-secondary);
+  border-radius: var(--lc--border-radius);
+  padding-right: var(--space--large, 12px);
+  padding-left: var(--space--large, 12px);
+  fill: var(--lc__label--text--disabled);
+  color: var(--lc__label--text--disabled);
+  background-color: var(--lc__label-color--disable-secondary);
+}
+
+label {
+  /*private*/
+  display: flex;
+  align-items: center;
+  width: calc(100% - var(--lc__icon--width));
+  width: fit-content;
+  font-weight: var(--text-weight--large, 600);
+  cursor: pointer;
+  /*public*/
+  height: var(--lc--height);
+  font-family: var(--lc--font-family);
+  font-size: var(--lc--font-size);
+}
+
+.label__icon {
+  display: flex;
+  cursor: pointer;
+}