@sankhyalabs/ezui 5.21.4 → 5.22.0-dev.10

package/dist/collection/components/ez-sidebar-navigator/ez-sidebar-navigator.js

@@ -0,0 +1,293 @@
+import { h, Host } from "@stencil/core";
+import { ElementIDUtils } from "@sankhyalabs/core";
+import { EzScrollDirection } from "../ez-scroller/EzScrollDirection";
+import { ModeMenuEnum, SizeMenuEnum, TypeMenuEnum } from "./interfaces";
+import { MESSAGES } from './messages/constants';
+export class EzSidebarNavigator {
+  constructor() {
+    this.handleToggleSidebar = () => {
+      this.open = !this.open;
+    };
+    this.handleToggleMode = () => {
+      this.mode = this.mode === ModeMenuEnum.FIXED ? ModeMenuEnum.FLOAT : ModeMenuEnum.FIXED;
+      this.ezChangeMode.emit(this.mode);
+    };
+    this.type = TypeMenuEnum.DYNAMIC;
+    this.mode = ModeMenuEnum.FLOAT;
+    this.size = SizeMenuEnum.SMALL;
+    this.isResponsive = false;
+    this.titleMenu = "";
+    this.showCollapseMenu = true;
+    this.showFixedButton = true;
+    this.open = false;
+  }
+  /**
+  * Método para fixar/desafixar o menu, emitindo o evento ezChangeMode.
+  */
+  async changeModeMenu() {
+    if (this.type === TypeMenuEnum.DYNAMIC) {
+      this.handleToggleMode();
+    }
+  }
+  /**
+  * Método para fechar o menu automaticamente após uma ação, fluxo, etc.
+  */
+  async closeSidebar() {
+    this.open = false;
+  }
+  /**
+  * Método para abrir o menu automaticamente após uma ação, fluxo, etc.
+  */
+  async openSidebar() {
+    this.open = true;
+  }
+  componentDidLoad() {
+    if (this.type === TypeMenuEnum.FIXED) {
+      this.mode = ModeMenuEnum.FIXED;
+      this.open = true;
+    }
+  }
+  render() {
+    ElementIDUtils.addIDInfoIfNotExists(this._element);
+    return (h(Host, null, h("ez-sidebar-button", { class: this.open ? "hidden" : "", onEzClick: this.mode === ModeMenuEnum.FIXED ? this.handleToggleSidebar : undefined, onMouseEnter: this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined, "aria-controls": "navigator", "aria-expanded": this.open, "data-element-id": ElementIDUtils.getInternalIDInfo("openButton") }), this.open ? (h("aside", { tabIndex: -1, id: "navigator", class: `ez-col ez-col--sd-12 ez-col--tb-3 ez-sidebar-navigator ${this.mode === ModeMenuEnum.FLOAT ? 'dynamic' : 'fixed'} ${this.isResponsive ? 'responsive' : this.size} ${!this.open ? "hidden" : "show"}`, "data-element-id": ElementIDUtils.getInternalIDInfo("sidebar"), onMouseLeave: this.type !== TypeMenuEnum.FIXED && this.mode === ModeMenuEnum.FLOAT ? this.handleToggleSidebar : undefined }, h("header", { class: "ez-sidebar-navigator__header" }, h("slot", { name: "start" }), this.titleMenu !== '' && (h("div", { class: "ez-sidebar-navigator__title", title: this.titleMenu }, this.titleMenu)), !this.titleMenu && (h("slot", { name: "content" })), h("div", { class: "ez-sidebar-navigator__end" }, h("slot", { name: "end" }), (this.type === TypeMenuEnum.DYNAMIC && this.showFixedButton) && (h("ez-button", { onClick: this.handleToggleMode, mode: "icon", size: "small", iconName: this.mode === ModeMenuEnum.FIXED ? "un-pin" : "push-pin", title: this.mode === ModeMenuEnum.FIXED ? MESSAGES.UN_PIN_MENU : MESSAGES.PUSH_PIN_MENU, "aria-label": this.mode === ModeMenuEnum.FIXED ? MESSAGES.UN_PIN_MENU : MESSAGES.PUSH_PIN_MENU, "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("pinButton") })), (this.mode === ModeMenuEnum.FIXED && this.showCollapseMenu) && (h("ez-button", { onClick: this.handleToggleSidebar, class: "inverted", mode: "icon", size: "small", iconName: "show_menu", title: MESSAGES.HIDE_MENU, "aria-label": MESSAGES.HIDE_MENU, "aria-controls": "navigator", "data-element-id": ElementIDUtils.getInternalIDInfo("closeButton") })))), this.titleMenu && (h("slot", { name: "content" })), h("ez-scroller", { class: "ez-sidebar-navigator__content", direction: EzScrollDirection.VERTICAL, activeShadow: true }, h("slot", null)), h("footer", { class: "ez-sidebar-navigator__footer" }, h("slot", { name: "footer" }))))
+      : undefined));
+  }
+  static get is() { return "ez-sidebar-navigator"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-sidebar-navigator.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-sidebar-navigator.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TypeMenuEnum",
+          "resolved": "TypeMenuEnum.DYNAMIC | TypeMenuEnum.FIXED | TypeMenuEnum.FLOAT",
+          "references": {
+            "TypeMenuEnum": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tipo do menu (float, fixed ou dynamic (livre))."
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "TypeMenuEnum.DYNAMIC"
+      },
+      "mode": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "ModeMenuEnum",
+          "resolved": "ModeMenuEnum.FIXED | ModeMenuEnum.FLOAT",
+          "references": {
+            "ModeMenuEnum": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o menu ser\u00E1 do tipo FIXED ou FLOAT."
+        },
+        "attribute": "mode",
+        "reflect": false,
+        "defaultValue": "ModeMenuEnum.FLOAT"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "SizeMenuEnum",
+          "resolved": "SizeMenuEnum.LARGE | SizeMenuEnum.MEDIUM | SizeMenuEnum.SMALL",
+          "references": {
+            "SizeMenuEnum": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho do menu (small, medium, large)."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "SizeMenuEnum.SMALL"
+      },
+      "isResponsive": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se ter\u00E1 responsividade, Controle dever\u00E1 ser pelo CSS."
+        },
+        "attribute": "is-responsive",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "titleMenu": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o t\u00EDtulo do Sidebar Navigator"
+        },
+        "attribute": "title-menu",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "showCollapseMenu": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o bot\u00E3o de \"Recolher Menu\" ser\u00E1 exibido"
+        },
+        "attribute": "show-collapse-menu",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "showFixedButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define se o bot\u00E3o de \"Fixar Menu\" ser\u00E1 exibido"
+        },
+        "attribute": "show-fixed-button",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChangeMode",
+        "name": "ezChangeMode",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento emitido sempre que o modo (FLOAT ou FIXED) do menu for alterado.."
+        },
+        "complexType": {
+          "original": "ModeMenuEnum",
+          "resolved": "ModeMenuEnum.FIXED | ModeMenuEnum.FLOAT",
+          "references": {
+            "ModeMenuEnum": {
+              "location": "import",
+              "path": "./interfaces"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "changeModeMenu": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo para fixar/desafixar o menu, emitindo o evento ezChangeMode.",
+          "tags": []
+        }
+      },
+      "closeSidebar": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo para fechar o menu automaticamente ap\u00F3s uma a\u00E7\u00E3o, fluxo, etc.",
+          "tags": []
+        }
+      },
+      "openSidebar": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "M\u00E9todo para abrir o menu automaticamente ap\u00F3s uma a\u00E7\u00E3o, fluxo, etc.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+}

package/dist/collection/components/ez-sidebar-navigator/interfaces/ModeMenuEnum.js

@@ -0,0 +1,5 @@
+export var ModeMenuEnum;
+(function (ModeMenuEnum) {
+  ModeMenuEnum["FLOAT"] = "float";
+  ModeMenuEnum["FIXED"] = "fixed";
+})(ModeMenuEnum || (ModeMenuEnum = {}));

package/dist/collection/components/ez-sidebar-navigator/interfaces/SizeMenuEnum.js

@@ -0,0 +1,6 @@
+export var SizeMenuEnum;
+(function (SizeMenuEnum) {
+  SizeMenuEnum["SMALL"] = "sm";
+  SizeMenuEnum["MEDIUM"] = "md";
+  SizeMenuEnum["LARGE"] = "lg";
+})(SizeMenuEnum || (SizeMenuEnum = {}));

package/dist/collection/components/ez-sidebar-navigator/interfaces/TypeMenuEnum.js

@@ -0,0 +1,6 @@
+export var TypeMenuEnum;
+(function (TypeMenuEnum) {
+  TypeMenuEnum["FLOAT"] = "float";
+  TypeMenuEnum["FIXED"] = "fixed";
+  TypeMenuEnum["DYNAMIC"] = "dynamic";
+})(TypeMenuEnum || (TypeMenuEnum = {}));

package/dist/collection/components/ez-sidebar-navigator/interfaces/index.js

@@ -0,0 +1,3 @@
+export * from './ModeMenuEnum';
+export * from './SizeMenuEnum';
+export * from './TypeMenuEnum';

package/dist/collection/components/ez-sidebar-navigator/messages/constants.js

@@ -0,0 +1,5 @@
+export const MESSAGES = {
+  HIDE_MENU: 'Ocultar menu',
+  UN_PIN_MENU: 'Desafixar menu',
+  PUSH_PIN_MENU: 'Fixar menu',
+};

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

@@ -67,11 +67,17 @@ export class EzTabselector {
       this.processesTabs();
     }
   }
-  handleTabClick(tab) {
+  async goToTab(tabIndex, silent = false) {
+    const tab = this._processedTabs.find(tab => tab.index === tabIndex);
+    this.handleTabClick(tab, !silent);
+  }
+  handleTabClick(tab, emitChange = true) {
     this.selectedIndex = tab.index;
     this._focusedIndex = undefined;
     this.selectedTab = tab.tabKey;
-    this.ezChange.emit(tab);
+    if (emitChange) {
+      this.ezChange.emit(tab);
+    }
     this.setFocusedBtn(false, tab.index);
   }
   componentWillLoad() {
@@ -316,6 +322,32 @@ export class EzTabselector {
         }
       }];
   }
+  static get methods() {
+    return {
+      "goToTab": {
+        "complexType": {
+          "signature": "(tabIndex: number, silent?: boolean) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "_hostElem"; }
   static get watchers() {
     return [{

package/dist/collection/utils/customEditor/interfaces/ICustomEditor.js

@@ -0,0 +1,5 @@
+export var CustomEditorSource;
+(function (CustomEditorSource) {
+  CustomEditorSource["GRID"] = "GRID";
+  CustomEditorSource["FORM"] = "FORM";
+})(CustomEditorSource || (CustomEditorSource = {}));

package/dist/collection/utils/customEditor/interfaces/ICustomEditorInfo.js

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

package/dist/collection/utils/customRender/interfaces/ICustomRender.js

@@ -0,0 +1,5 @@
+export var CustomRenderSource;
+(function (CustomRenderSource) {
+  CustomRenderSource["GRID"] = "GRID";
+  CustomRenderSource["FORM"] = "FORM";
+})(CustomRenderSource || (CustomRenderSource = {}));

package/dist/collection/utils/customRender/interfaces/ICustomRenderInfo.js

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

package/dist/collection/utils/form/DataBinder.js

@@ -1,4 +1,4 @@
-import { ApplicationContext, Action, WaitingChangeException, DataUnitAction } from "@sankhyalabs/core";
+import { ApplicationContext, Action, WaitingChangeException, DataUnitAction, StringUtils } from "@sankhyalabs/core";
 import { RecordValidationProcessor } from "../validators/recordvalidator/RecordValidationProcessor";
 export default class DataBinder {
   constructor(dataUnit) {
@@ -30,11 +30,22 @@ export default class DataBinder {
           break;
       }
     };
+    this._uuid = StringUtils.generateUUID();
     this._fields = new Map();
     this._dataUnit = dataUnit;
     this.applyDefaultValues();
     this._dataUnit.subscribe(this.onDataUnitEvent);
     this._dataUnit.addInterceptor(this);
+    this.setContextDataBinder(dataUnit);
+  }
+  get dataBinderId() {
+    return this._uuid;
+  }
+  setContextDataBinder(dataUnit) {
+    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    const dataBinders = [...(dataBindersByDataUnit.get(dataUnit.dataUnitId) || []), this];
+    dataBindersByDataUnit.set(dataUnit.dataUnitId, dataBinders);
+    ApplicationContext.setContextValue("__DATABINDER_BY_DATAUNIT__", dataBindersByDataUnit);
   }
   applyDefaultValues() {
     const recordIds = (this._dataUnit.getAddedRecords() || []).map(r => r.__record__id__);
@@ -61,9 +72,17 @@ export default class DataBinder {
       getMessageForField: field => this.getErrorMessage(field)
     }, recordsValidator);
   }
+  disconnectDataUnit() {
+    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    const dataBinders = dataBindersByDataUnit.get(this._dataUnit.dataUnitId);
+    const dataBindersFiltered = dataBinders.filter((dataBinder) => dataBinder.dataBinderId !== this.dataBinderId);
+    dataBindersByDataUnit.set(this._dataUnit.dataUnitId, dataBindersFiltered);
+    ApplicationContext.setContextValue("__DATABINDER_BY_DATAUNIT__", dataBindersByDataUnit);
+  }
   onDisconnectedCallback() {
     this._dataUnit.unsubscribe(this.onDataUnitEvent);
     this._dataUnit.removeInterceptor(this);
+    this.disconnectDataUnit();
   }
   getCurrentRecordId() {
     const record = this._dataUnit.getSelectedRecord();
@@ -110,6 +129,17 @@ export default class DataBinder {
   validate() {
     return this._recordValidatorProcessor.validate();
   }
+  static async validateByDataunit(dataUnit) {
+    try {
+      const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__");
+      const dataBinders = dataBindersByDataUnit.get(dataUnit.dataUnitId) || [];
+      await Promise.all(dataBinders.map((dataBinder) => dataBinder.validate()));
+      return true;
+    }
+    catch (_a) {
+      return false;
+    }
+  }
   updateErrorMessage(fieldName, field, message) {
     if (message == undefined) {
       message = this._dataUnit.getInvalidMessage(this.getCurrentRecordId(), fieldName);

package/dist/collection/utils/form/test/DataBinder.test.js

@@ -1,9 +1,46 @@
-import { DataUnit } from "@sankhyalabs/core";
+import { ApplicationContext, DataUnit } from "@sankhyalabs/core";
 import DataBinder from "../DataBinder";
+import { metadataTest } from "./resources/metadataTest";
 describe('DataBinder', () => {
+  let dataBinder;
+  let dataUnit;
+  beforeEach(() => {
+    dataUnit = new DataUnit();
+    dataUnit.metadata = metadataTest;
+    dataUnit.addRecord();
+    dataUnit.selectFirst();
+    dataBinder = new DataBinder(dataUnit);
+  });
   it('constructor', async () => {
-    const du = new DataUnit();
-    const db = new DataBinder(du);
-    expect(db).toBeTruthy();
+    expect(dataBinder).toBeTruthy();
+  });
+  it('ApplicationContext should be filled', () => {
+    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    expect(dataBindersByDataUnit.get(dataUnit.dataUnitId).length).toBeGreaterThan(0);
+  });
+  it('ApplicationContext should be filled with two binders', () => {
+    new DataBinder(dataUnit);
+    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    expect(dataBindersByDataUnit.get(dataUnit.dataUnitId).length).toBe(2);
+  });
+  it('should be invalid for empty fields', async () => {
+    const isValid = await DataBinder.validateByDataunit(dataUnit);
+    dataBinder['_recordValidatorProcessor'] = {
+      validate: () => Promise.reject(),
+    };
+    expect(isValid).toBe(false);
+  });
+  it('should be valid for filled fields', async () => {
+    await dataUnit.setFieldValue('NAME', 'João');
+    dataBinder['_recordValidatorProcessor'] = {
+      validate: () => Promise.resolve(),
+    };
+    const isValid = await DataBinder.validateByDataunit(dataUnit);
+    expect(isValid).toBe(true);
+  });
+  it('should be remove dataBinder on disconnected', async () => {
+    dataBinder.onDisconnectedCallback();
+    const dataBindersByDataUnit = ApplicationContext.getContextValue("__DATABINDER_BY_DATAUNIT__") || new Map();
+    expect(dataBindersByDataUnit.get(dataUnit.dataUnitId).length).toBe(0);
   });
 });

package/dist/collection/utils/form/test/resources/metadataTest.js

@@ -0,0 +1,15 @@
+import { DataType, UserInterface } from "@sankhyalabs/core";
+export const metadataTest = {
+  "name": "clients",
+  "label": "clients",
+  "fields": [
+    {
+      "name": "NAME",
+      "label": "Nome",
+      "dataType": DataType.TEXT,
+      "userInterface": UserInterface.SHORTTEXT,
+      "readOnly": false,
+      "required": true
+    },
+  ]
+};

package/dist/collection/utils/index.js

@@ -4,3 +4,5 @@ export { DialogType } from '../components/ez-dialog/DialogType';
 export { CheckMode } from '../components/ez-check/CheckMode';
 export { FormMetadata } from './form/FormMetadata';
 export { default as DataBinder } from './form/DataBinder';
+export { CustomEditorSource } from './customEditor/interfaces/ICustomEditor';
+export { CustomRenderSource } from './customRender/interfaces/ICustomRender';

package/dist/custom-elements/index.d.ts

@@ -56,6 +56,12 @@ export const EzCardItem: {
   new (): EzCardItem;
 };
 
+interface EzChart extends Components.EzChart, HTMLElement {}
+export const EzChart: {
+  prototype: EzChart;
+  new (): EzChart;
+};
+
 interface EzCheck extends Components.EzCheck, HTMLElement {}
 export const EzCheck: {
   prototype: EzCheck;
@@ -80,6 +86,12 @@ export const EzComboBox: {
   new (): EzComboBox;
 };
 
+interface EzCustomFormInput extends Components.EzCustomFormInput, HTMLElement {}
+export const EzCustomFormInput: {
+  prototype: EzCustomFormInput;
+  new (): EzCustomFormInput;
+};
+
 interface EzDateInput extends Components.EzDateInput, HTMLElement {}
 export const EzDateInput: {
   prototype: EzDateInput;
@@ -218,6 +230,12 @@ export const EzSidebarButton: {
   new (): EzSidebarButton;
 };
 
+interface EzSidebarNavigator extends Components.EzSidebarNavigator, HTMLElement {}
+export const EzSidebarNavigator: {
+  prototype: EzSidebarNavigator;
+  new (): EzSidebarNavigator;
+};
+
 interface EzSkeleton extends Components.EzSkeleton, HTMLElement {}
 export const EzSkeleton: {
   prototype: EzSkeleton;