@sankhyalabs/ezui 5.22.0-dev.9 → 5.22.0-dev.91

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

@@ -124,14 +124,19 @@ export class EzDropdown {
     }
     return groupItems.map((item) => {
       var _a;
-      return (item.type !== "divider"
-        ? h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item) }, this.itemBuilder
-          ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
-          : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
-          !isLockedLevels &&
-          hasChildren &&
-          h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel)))
-        : h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
+      switch (item.type) {
+        case "loading":
+          return (h("div", { class: "ez-dropdown__item" }, h("ez-skeleton", { width: '200px' })));
+        case "divider":
+          return (h("hr", Object.assign({ class: "ez-dropdown__divider" }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownDivider`) })));
+        case "item":
+          return (h("div", Object.assign({ ref: (ref) => this._itemList[item.id] = ref, class: "ez-dropdown__item", "data-level": level }, { [ElementIDUtils.DATA_ELEMENT_ID_ATTRIBUTE_NAME]: ElementIDUtils.getInternalIDInfo(`${item.id}_ezDropdownItem`) }), h("div", { class: "ez-dropdown__item-content", onClick: (evt) => this.onItemClick(evt, item), onMouseOver: (evt) => this.onShowSubmenu(evt, item), onMouseEnter: () => this.ezHover.emit(item) }, this.itemBuilder
+            ? this.getContainerItemBuilder(item, level, isLockedLevels, hasIcon, hasChildren)
+            : this.defaultItemBuilder(item, isLockedLevels, hasIcon, hasChildren)), ((_a = item.children) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+            !isLockedLevels &&
+            hasChildren &&
+            h("div", { ref: (ref) => this._submenuList.push(ref), class: "ez-dropdown__submenu ez-dropdown__submenu--hide" }, this.renderDropdown(item.children, counterLevel))));
+      }
     });
   }
   renderDropdown(branchItems = this.items, level = 1) {
@@ -370,6 +375,26 @@ export class EzDropdown {
           "resolved": "void",
           "references": {}
         }
+      }, {
+        "method": "ezHover",
+        "name": "ezHover",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitido quando ocorrer o ponteiro do mouse \u00E9 colocado sobre um item."
+        },
+        "complexType": {
+          "original": "IDropdownItem",
+          "resolved": "IDropdownItem",
+          "references": {
+            "IDropdownItem": {
+              "location": "import",
+              "path": "./structure/DropdownItem"
+            }
+          }
+        }
       }];
   }
   static get elementRef() { return "_element"; }

package/dist/collection/components/ez-filter-input/ez-filter-input.css

@@ -1,4 +1,4 @@
 :host {
   display: block;
   width: 100%;
-}
+}

package/dist/collection/components/ez-filter-input/ez-filter-input.js

@@ -21,6 +21,7 @@ export class EzFilterInput {
     this.mode = "regular";
     this.asyncSearch = false;
     this.canShowError = true;
+    this.autoFocus = false;
   }
   observeLabel() {
     if (this._textInput) {
@@ -41,8 +42,8 @@ export class EzFilterInput {
   /**
    * Aplica o foco no campo.
    */
-  async setFocus() {
-    this._textInput.setFocus();
+  async setFocus(options) {
+    this._textInput.setFocus(options);
   }
   /**
    * Remove o foco do campo.
@@ -95,6 +96,11 @@ export class EzFilterInput {
   }
   componentDidLoad() {
     CSSVarsUtils.applyVarsTextInput(this._elem, this._textInput);
+    if (this.autoFocus) {
+      requestAnimationFrame(() => {
+        this.setFocus({ selectText: true });
+      });
+    }
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
@@ -253,6 +259,24 @@ export class EzFilterInput {
         "attribute": "can-show-error",
         "reflect": true,
         "defaultValue": "true"
+      },
+      "autoFocus": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Se true o campo de texto receber\u00E1 o foco ao ser renderizado."
+        },
+        "attribute": "auto-focus",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }
@@ -308,11 +332,18 @@ export class EzFilterInput {
     return {
       "setFocus": {
         "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
+          "signature": "(options?: TFocusOptions) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "TFocusOptions": {
+              "location": "import",
+              "path": "../ez-text-input/ez-text-input"
             }
           },
           "return": "Promise<void>"

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

@@ -94,6 +94,7 @@ export class EzForm {
     if (this.dataUnit === undefined) {
       this.dataUnit = new DataUnit("ez-form");
     }
+    this.dataUnit.unsubscribe(this.onDataUnitAction);
     this.dataUnit.subscribe(this.onDataUnitAction);
     this._dataBinder = new DataBinder(this.dataUnit);
     this._store = createStore(formReducer);

package/dist/collection/components/ez-form-view/custom-input/ez-custom-form-input.js

@@ -1,6 +1,6 @@
 import { h, Host } from '@stencil/core';
 import { CustomEditorSource } from '../../../utils/customEditor/interfaces/ICustomEditor';
-import { HTMLBuilder, StringUtils } from '@sankhyalabs/core';
+import { HTMLBuilder, ObjectUtils, StringUtils } from '@sankhyalabs/core';
 export class EzCustomFormInput {
   constructor() {
     this.gui = undefined;
@@ -32,8 +32,31 @@ export class EzCustomFormInput {
     var _a, _b;
     return ((_b = (_a = this.gui) === null || _a === void 0 ? void 0 : _a["isInvalid"]) === null || _b === void 0 ? void 0 : _b.call(_a)) || false;
   }
+  watchValue() {
+    this.handleValue(this.gui);
+  }
+  watchCustomEditor() {
+    this.getContent();
+  }
+  watchFormViewField(newValue, oldValue) {
+    if (!ObjectUtils.equals(newValue, oldValue))
+      this.getContent();
+  }
+  watchDetailContext() {
+    this.getContent();
+  }
+  watchBuilderFallback() {
+    this.getContent();
+  }
+  watchSelectedRecord(newValue, oldValue) {
+    const newRecordId = newValue === null || newValue === void 0 ? void 0 : newValue['__record__id__'];
+    const oldRecordId = oldValue === null || oldValue === void 0 ? void 0 : oldValue['__record__id__'];
+    if (newRecordId !== oldRecordId) {
+      this.getContent();
+    }
+  }
   getContent() {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     const fieldProps = new Map();
     for (const prop in this.formViewField.props) {
       fieldProps.set(prop, this.formViewField.props[prop]);
@@ -71,9 +94,8 @@ export class EzCustomFormInput {
     if (typeof gui === 'string') {
       gui = HTMLBuilder.parseElement(gui);
     }
-    if (this.value) {
-      gui.setAttribute('value', typeof this.value === 'object' ? this.value.value : this.value);
-    }
+    const value = (_e = (_d = (_c = this.value) === null || _c === void 0 ? void 0 : _c.value) !== null && _d !== void 0 ? _d : this.value) !== null && _e !== void 0 ? _e : '';
+    gui.setAttribute('value', value);
     this.gui = h("div", { key: StringUtils.generateUUID(), ref: el => el && el.appendChild(gui) });
   }
   setValue(value) {
@@ -89,7 +111,7 @@ export class EzCustomFormInput {
       child.$attrs$.value = this.value;
     });
   }
-  componentWillRender() {
+  componentWillLoad() {
     this.getContent();
   }
   render() {
@@ -275,4 +297,25 @@ export class EzCustomFormInput {
       }
     };
   }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "watchValue"
+      }, {
+        "propName": "customEditor",
+        "methodName": "watchCustomEditor"
+      }, {
+        "propName": "formViewField",
+        "methodName": "watchFormViewField"
+      }, {
+        "propName": "detailContext",
+        "methodName": "watchDetailContext"
+      }, {
+        "propName": "builderFallback",
+        "methodName": "watchBuilderFallback"
+      }, {
+        "propName": "selectedRecord",
+        "methodName": "watchSelectedRecord"
+      }];
+  }
 }

package/dist/collection/components/ez-form-view/ez-form-view.css

@@ -6,13 +6,16 @@
   /*@doc Define o tamanho mínimo dos itens do formulário.*/
   --ez-form-view__item--min-width: 220px;
   /*@doc Define o espaçamento entre itens do formulário.*/
-  --ez-form-view__item--sapce-width: 5px;
+  --ez-form-view__item--width: var(--space--small);
+  /*@doc Define o padding do formulário.*/
+  --ez-form-view__item--padding: var(--space--small);
 }
 
 .form-view__content{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--ez-form-view__item--min-width), 1fr));
-  gap: var(--ez-form-view__item--sapce-width);
+  gap: var(--ez-form-view__item--width);
+  padding-inline: var(--ez-form-view__item--padding);
   width: 100%;
 }
 

package/dist/collection/components/ez-form-view/fieldbuilder/FieldBuilder.js

@@ -2,7 +2,7 @@ import { UserInterface } from "@sankhyalabs/core";
 import { REQUIRED_INFO } from "../../../utils/constants";
 import { buildCheckBox, buildSwitch } from "./templates/CheckBox.tpl";
 import { buildComboBox } from "./templates/ComboBox.tpl";
-import { buildDate, buildTime, buildDateTime } from "./templates/DateInput.tpl";
+import { buildDate, buildTime, buildDateTime, buildTimeSeconds } from "./templates/DateInput.tpl";
 import { buildFile } from "./templates/FileInput.tpl";
 import { buildDecimal, buildInteger } from "./templates/NumberInput.tpl";
 import { buildSearch } from "./templates/SearchInput.tpl";
@@ -14,6 +14,7 @@ uiBuilders.set(UserInterface.SWITCH, buildSwitch);
 uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
 uiBuilders.set(UserInterface.DATE, buildDate);
 uiBuilders.set(UserInterface.TIME, buildTime);
+uiBuilders.set(UserInterface.ELAPSEDTIME, buildTimeSeconds);
 uiBuilders.set(UserInterface.DATETIME, buildDateTime);
 uiBuilders.set(UserInterface.FILE, buildFile);
 uiBuilders.set(UserInterface.DECIMALNUMBER, buildDecimal);

package/dist/collection/components/ez-form-view/fieldbuilder/templates/CheckBox.tpl.js

@@ -7,5 +7,5 @@ export const buildCheckBox = (field) => {
   return buildField(field.name, field.label, field.readOnly, field.contextName, false);
 };
 function buildField(fieldName, fieldLabel, readOnly, contextName, switchMode) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-horizontal--small ez-padding-bottom--large" }, h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
+  return (h("div", { class: "ez-col ez-col--sd-12 ez-align--middle ez-padding-bottom--large" }, h("ez-check", { enabled: !readOnly, label: fieldLabel, mode: switchMode ? CheckMode.SWITCH : CheckMode.REGULAR, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName })));
 }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/ComboBox.tpl.js

@@ -9,5 +9,5 @@ export const buildComboBox = ({ name, label, readOnly, required, props, contextN
   else {
     options = prop;
   }
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-combo-box", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-combo-box", { class: "ez-input__no-margin", enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, options: options, canShowError: canShowError })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/DateInput.tpl.js

@@ -1,10 +1,14 @@
 import { h } from "@stencil/core";
 export const buildDate = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-date-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-date-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
 };
-export const buildTime = ({ name, label, readOnly, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-time-input", { enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError })));
+export const buildTime = ({ name, label, readOnly, canShowError, props }) => {
+  var _a;
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, "show-seconds": (_a = props === null || props === void 0 ? void 0 : props.showSeconds) !== null && _a !== void 0 ? _a : false })));
+};
+export const buildTimeSeconds = ({ name, label, readOnly, canShowError }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, key: name, canShowError: canShowError, showSeconds: true })));
 };
 export const buildDateTime = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-date-time-input", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-date-time-input", { class: "ez-input__no-margin", enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/FileInput.tpl.js

@@ -9,5 +9,5 @@ export const buildFile = ({ name, label, readOnly, contextName, props }) => {
       INTERNAL_FILENAME: props.INTERNAL_FILENAME
     })),
   });
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-upload", Object.assign({ enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, key: name }, uploadProps))));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/NumberInput.tpl.js

@@ -9,5 +9,5 @@ export const buildInteger = ({ name, label, readOnly, contextName, canShowError
   return buildNumeric(name, label, readOnly, 0, 0, contextName, canShowError);
 };
 function buildNumeric(fieldName, fieldLabel, readOnly, precision, prettyPrecision, contextName, canShowError) {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-number-input", { enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-number-input", { class: "ez-input__no-margin", enabled: !readOnly, label: fieldLabel, precision: precision, prettyPrecision: prettyPrecision, "data-field-name": fieldName, "data-context-name": contextName, key: fieldName, canShowError: canShowError })));
 }

package/dist/collection/components/ez-form-view/fieldbuilder/templates/SearchInput.tpl.js

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
-export const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-search", { enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader })));
+export const buildSearch = ({ name, label, readOnly, required, contextName, canShowError, optionLoader, props }) => {
+  var _a;
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-search", { class: "ez-input__no-margin", enabled: !readOnly, suppressEmptyOption: required, label: label, "data-field-name": name, "data-context-name": contextName, key: name, canShowError: canShowError, optionLoader: optionLoader, ignoreLimitCharsToSearch: (_a = props.ignoreLimitCharsToSearch) !== null && _a !== void 0 ? _a : false })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextArea.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
 export const buildTextArea = ({ name, label, readOnly, contextName, rows, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small", key: name }, h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
+  return (h("div", { class: "ez-col ez-col--sd-12", key: name }, h("ez-text-area", { enabled: !readOnly, label: label, "data-field-name": name, "data-context-name": contextName, rows: rows, canShowError: canShowError })));
 };

package/dist/collection/components/ez-form-view/fieldbuilder/templates/TextInput.tpl.js

@@ -1,4 +1,4 @@
 import { h } from "@stencil/core";
-export const buildTextInput = ({ name, label, readOnly, contextName, canShowError }) => {
-  return (h("div", { class: "ez-col ez-col--sd-12 ez-padding-horizontal--small" }, h("ez-text-input", { label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError })));
+export const buildTextInput = ({ name, label, readOnly, contextName, canShowError, props }) => {
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-text-input", { class: "ez-input__no-margin", label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, mask: props === null || props === void 0 ? void 0 : props.mask, "clean-value-mask": props === null || props === void 0 ? void 0 : props.cleanValueMask })));
 };