@sankhyalabs/ezui 7.1.0-dev.20 → 7.1.0-dev.22

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

@@ -0,0 +1,324 @@
+import { Host, h } from '@stencil/core';
+import { ElementIDUtils } from '@sankhyalabs/core';
+import initI18n from '../../utils/i18n';
+export class EzImageInput {
+  constructor() {
+    this.handleFileSelect = (event) => {
+      const input = event.target;
+      if (input.files && input.files[0]) {
+        this.processFile(input.files[0]);
+      }
+    };
+    this.handleDrop = (event) => {
+      var _a;
+      event.preventDefault();
+      event.stopPropagation();
+      this._isDragging = false;
+      if (!this.enabled)
+        return;
+      const files = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
+      if (files && files[0]) {
+        this.processFile(files[0]);
+      }
+    };
+    this.handleDragOver = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.enabled) {
+        this._isDragging = true;
+      }
+    };
+    this.handleDragLeave = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this._isDragging = false;
+    };
+    this.handleRemoveImage = (event) => {
+      event.stopPropagation();
+      this.value = undefined;
+      this._hasImage = false;
+      if (this._inputElem) {
+        this._inputElem.value = '';
+      }
+      this.ezChange.emit('');
+    };
+    this.handleClickDropZone = () => {
+      var _a;
+      if (this.enabled && !this._hasImage) {
+        (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.click();
+      }
+    };
+    this.handleImageClick = (event) => {
+      event.stopPropagation();
+      if (this._hasImage && this.value) {
+        this._showImagePopup = true;
+      }
+    };
+    this.handlePopupAction = (event) => {
+      const action = event.detail;
+      if (action === 'CANCEL' || action === 'OK') {
+        this.handleClosePopup();
+      }
+    };
+    this.handleClosePopup = () => {
+      this._showImagePopup = false;
+    };
+    this.enabled = true;
+    this.label = undefined;
+    this.name = undefined;
+    this.value = undefined;
+    this.maxFileSize = 20 * 1024 * 1024;
+    this.accept = 'image/*';
+    this.loading = false;
+    this._hasImage = false;
+    this._isDragging = false;
+    this._showImagePopup = false;
+  }
+  onValueChange(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this._hasImage = !!newValue;
+    }
+    if (!newValue && this._inputElem) {
+      this._inputElem.value = '';
+    }
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+    if (this._inputElem) {
+      const dataInfo = { id: 'embedded' };
+      ElementIDUtils.addIDInfo(this._inputElem, 'image-input', dataInfo);
+    }
+  }
+  processFile(file) {
+    // Validar tipo de arquivo
+    if (!file.type.startsWith('image/')) {
+      const errorMsg = this.i18n('ez-image-input.invalidFileType');
+      this.ezError.emit(errorMsg);
+      return;
+    }
+    // Validar tamanho do arquivo
+    if (this.maxFileSize && file.size > this.maxFileSize) {
+      const maxSizeMB = (this.maxFileSize / (1024 * 1024)).toFixed(2);
+      const errorMsg = this.i18n('ez-image-input.fileTooLarge', { maxSize: `${maxSizeMB}MB` });
+      this.ezError.emit(errorMsg);
+      return;
+    }
+    // Converter para base64
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      var _a;
+      const base64 = (_a = e.target) === null || _a === void 0 ? void 0 : _a.result;
+      this.value = base64;
+      this._hasImage = true;
+      this.ezChange.emit(base64);
+    };
+    reader.readAsDataURL(file);
+  }
+  async componentWillLoad() {
+    this.i18n = await initI18n();
+    this._hasImage = !!this.value;
+  }
+  componentDidLoad() {
+    this.addInfoId();
+  }
+  render() {
+    if (this.loading) {
+      return (h(Host, null, h("ez-skeleton", { width: "280px", height: '200px' })));
+    }
+    const dropZoneLabel = this.label || this.i18n('ez-image-input.defaultLabel');
+    return (h(Host, null, h("div", { class: {
+        'image-input__container': true,
+        'image-input__container--disabled': !this.enabled,
+        'image-input__container--dragging': this._isDragging,
+        'image-input__container--has-image': this._hasImage
+      }, "data-enabled": this.enabled.toString(), "data-has-image": this._hasImage.toString(), onClick: this.handleClickDropZone, onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, role: "button", "aria-label": dropZoneLabel, tabindex: this.enabled ? 0 : -1 }, h("input", { ref: (el) => (this._inputElem = el), type: "file", accept: this.accept, name: this.name, disabled: !this.enabled, onChange: this.handleFileSelect, class: "image-input__file-input", "aria-hidden": "true" }), this._hasImage && this.value ? (h("div", { class: "image-input__preview" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__image", onClick: this.handleImageClick }), this.enabled && (h("ez-button", { class: "image-input__remove-button", variant: "primary", type: "button", mode: "icon", size: "small", iconName: "trash-alt", onClick: this.handleRemoveImage, "aria-label": this.i18n('ez-image-input.removeImage'), title: this.i18n('ez-image-input.removeImage') })))) : (h("div", { class: "image-input__dropzone" }, h("ez-icon", { iconName: "image", size: "x-large" }), h("span", { class: "image-input__label" }, dropZoneLabel)))), h("ez-popup", { opened: this._showImagePopup, ezTitle: this.i18n('ez-image-input.imagePreview'), size: "large", heightMode: "auto", onEzPopupAction: this.handlePopupAction, onEzClosePopup: this.handleClosePopup }, h("div", { class: "image-input__popup-content" }, h("img", { src: this.value, alt: this.i18n('ez-image-input.imageAlt'), class: "image-input__popup-image" })))));
+  }
+  static get is() { return "ez-image-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-image-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-image-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "enabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente est\u00E1 habilitado"
+        },
+        "attribute": "enabled",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Label exibido na \u00E1rea de upload"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Nome do componente"
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Valor da imagem em base64"
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "maxFileSize": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define o tamanho m\u00E1ximo do arquivo em bytes (padr\u00E3o: 20MB)"
+        },
+        "attribute": "max-file-size",
+        "reflect": false,
+        "defaultValue": "20 * 1024 * 1024"
+      },
+      "accept": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Tipos de arquivo aceitos"
+        },
+        "attribute": "accept",
+        "reflect": false,
+        "defaultValue": "'image/*'"
+      },
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Define se o componente est\u00E1 em estado de carregamento"
+        },
+        "attribute": "loading",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "_hasImage": {},
+      "_isDragging": {},
+      "_showImagePopup": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ezChange",
+        "name": "ezChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando uma imagem \u00E9 selecionada"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }, {
+        "method": "ezError",
+        "name": "ezError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando ocorre um erro"
+        },
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "value",
+        "methodName": "onValueChange"
+      }];
+  }
+}

package/dist/collection/components/ez-rich-text/ez-rich-text.js

@@ -9,7 +9,7 @@ export class EzRichText {
     this.historyIndex = -1;
     this.previewMode = false;
     this.showPreview = true;
-    this.value = '';
+    this.value = undefined;
     this.label = undefined;
     this.mode = "regular";
     this.enabled = true;
@@ -313,8 +313,7 @@ export class EzRichText {
           "text": "Define o valor HTML do campo."
         },
         "attribute": "value",
-        "reflect": true,
-        "defaultValue": "''"
+        "reflect": true
       },
       "label": {
         "type": "string",

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { ElementIDUtils, MaskFormatter } from "@sankhyalabs/core";
+import { ElementIDUtils, MaskFormatter as CoreMaskFormatter, MaskFormatter } from '@sankhyalabs/core';
 export class EzTextInput {
   constructor() {
     this._isOverflowing = false;
@@ -113,6 +113,42 @@ export class EzTextInput {
       this._inputElem.classList.add("input__slim--noborder");
     }
   }
+  buildMaskFormatter() {
+    if (this.mask) {
+      const maskToBuilder = this.getMaskToBuilder();
+      this._maskFormatter = maskToBuilder ? new MaskFormatter(maskToBuilder) : undefined;
+    }
+  }
+  getMaskToBuilder() {
+    if (this.mask === 'cgc_cpf') {
+      return this.getCGCCpfMask();
+    }
+    if (this.mask === 'phone') {
+      return this.getPhoneMask();
+    }
+    if (this.mask in CoreMaskFormatter.DEFAULT_MASKS) {
+      return CoreMaskFormatter.DEFAULT_MASKS[this.mask];
+    }
+    return this.mask;
+  }
+  getPhoneMask() {
+    if (this.value && this.value.length === 10) {
+      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone : undefined;
+    }
+    if (this.value && this.value.length === 11) {
+      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.phone_mobile : undefined;
+    }
+    return undefined;
+  }
+  getCGCCpfMask() {
+    if (this.value && this.value.length === 11) {
+      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.cpf : undefined;
+    }
+    if (this.value && this.value.length === 14) {
+      return MaskFormatter.DEFAULT_MASKS ? MaskFormatter.DEFAULT_MASKS.cnpj : undefined;
+    }
+    return undefined;
+  }
   //---------------------------------------------
   // Public methods
   //---------------------------------------------
@@ -336,6 +372,7 @@ export class EzTextInput {
   }
   componentDidRender() {
     this.adjustFloatingLabel();
+    this.buildMaskFormatter();
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._hostElement, 'input');

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

@@ -250,8 +250,8 @@ export default class DataBinder {
     }
   }
   bindSearchOptionsLoader(fieldName, field) {
-    if ((field.nodeName === "EZ-SEARCH" || field.nodeName === "EZ-SEARCH-PLUS") && field["optionLoader"] == undefined) {
-      const isSearchPlus = field.nodeName === "EZ-SEARCH-PLUS";
+    if ((field.nodeName === "EZ-SEARCH" || field.nodeName === "EZ-CLASSIC-SEARCH" || field.nodeName === "EZ-SEARCH-PLUS" || field.nodeName === "EZ-CLASSIC-SEARCH-PLUS") && field["optionLoader"] == undefined) {
+      const isSearchPlus = (field.nodeName === "EZ-SEARCH-PLUS" || field.nodeName === "EZ-CLASSIC-SEARCH-PLUS");
       const loader = isSearchPlus ? ApplicationContext.getContextValue("__EZUI__SEARCH__PLUS__OPTION__LOADER__") : ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
       if (loader) {
         field["optionLoader"] = (arg, ctxOptions) => {

package/dist/collection/utils/form/interfaces/FormLayout.js

@@ -1,5 +1,7 @@
 export var FormLayout;
 (function (FormLayout) {
   FormLayout[FormLayout["CASCADE"] = 0] = "CASCADE";
-  FormLayout[FormLayout["SIDE_BY_SIDE"] = 1] = "SIDE_BY_SIDE";
+  FormLayout[FormLayout["CLASSIC_CASCADE"] = 1] = "CLASSIC_CASCADE";
+  FormLayout[FormLayout["SIDE_BY_SIDE"] = 2] = "SIDE_BY_SIDE";
+  FormLayout[FormLayout["CLASSIC_SIDE_BY_SIDE"] = 3] = "CLASSIC_SIDE_BY_SIDE";
 })(FormLayout || (FormLayout = {}));

package/dist/collection/utils/i18n/locales/en-us.js

@@ -30,6 +30,14 @@ export default {
       uploadErrorTitle: "Uploading file",
       uploadingMessage: "Files are being uploaded. Please wait for completion or cancel the upload."
     },
+    "ez-image-input": {
+      defaultLabel: "Upload Image",
+      imageAlt: "Uploaded image",
+      removeImage: "Remove image",
+      invalidFileType: "The selected file is not a valid image.",
+      fileTooLarge: "The image must be less than {{maxSize}}.",
+      imagePreview: "Image Preview",
+    },
     "ez-calendar": {
       month: {
         0: "January",
@@ -252,6 +260,16 @@ export default {
       optionLoaderNotDefined: "optionLoader not defined",
       defaultCodeLabel: "Code",
     },
+    "ez-classic-search": {
+      emptyList: "No results found",
+      emptySearch: "No results for {{field}} found",
+      showMore: "Show more"
+    },
+    "ez-classic-search-plus": {
+      emptyList: "No results found",
+      optionLoaderNotDefined: "optionLoader not defined",
+      defaultCodeLabel: "Code",
+    },
     "ez-sortable-list": {
       emptyMessage: "No items in the list",
       entityLabel: "item",

package/dist/collection/utils/i18n/locales/es-es.js

@@ -30,6 +30,14 @@ export default {
       uploadErrorTitle: "Subiendo archivo",
       uploadingMessage: "Se están subiendo archivos. Por favor, espere a que se complete o cancele la subida.",
     },
+    "ez-image-input": {
+      defaultLabel: "Subir Imagen",
+      imageAlt: "Imagen cargada",
+      removeImage: "Eliminar imagen",
+      invalidFileType: "El archivo seleccionado no es una imagen válida.",
+      fileTooLarge: "La imagen debe tener menos de {{maxSize}}.",
+      imagePreview: "Vista Previa de Imagen",
+    },
     "ez-calendar": {
       month: {
         0: "Enero",
@@ -252,6 +260,16 @@ export default {
       optionLoaderNotDefined: "optionLoader no definido",
       defaultCodeLabel: "Cód.",
     },
+    "ez-classic-search": {
+      emptyList: "No se encontraron resultados",
+      emptySearch: "No se encontraron resultados de {{field}}",
+      showMore: "Mostrar más"
+    },
+    "ez-classic-search-plus": {
+      emptyList: "No se encontraron resultados",
+      optionLoaderNotDefined: "optionLoader no definido",
+      defaultCodeLabel: "Cód.",
+    },
     "ez-sortable-list": {
       emptyMessage: "No hay elementos en la lista",
       entityLabel: "elemento",

package/dist/collection/utils/i18n/locales/pt-br.js

@@ -30,6 +30,14 @@ export default {
       uploadErrorTitle: "Enviando arquivo",
       uploadingMessage: "Há arquivos sendo enviados. Por favor aguarde a conclusão ou cancele o envio.",
     },
+    "ez-image-input": {
+      defaultLabel: "Enviar Imagem",
+      imageAlt: "Imagem carregada",
+      removeImage: "Remover imagem",
+      invalidFileType: "O arquivo selecionado não é uma imagem válida.",
+      fileTooLarge: "A imagem deve ter menos de {{maxSize}}.",
+      imagePreview: "Visualizar Imagem",
+    },
     "ez-calendar": {
       month: {
         0: "Janeiro",
@@ -252,6 +260,16 @@ export default {
       optionLoaderNotDefined: "optionLoader não definido",
       defaultCodeLabel: "Cód.",
     },
+    "ez-classic-search": {
+      emptyList: "Nenhum resultado encontrado",
+      emptySearch: "Nenhum resultado de {{field}} encontrado",
+      showMore: "Mostrar mais"
+    },
+    "ez-classic-search-plus": {
+      emptyList: "Nenhum resultado encontrado",
+      optionLoaderNotDefined: "optionLoader não definido",
+      defaultCodeLabel: "Cód.",
+    },
     "ez-sortable-list": {
       emptyMessage: "Nenhum item na lista",
       entityLabel: "item",

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

@@ -2,6 +2,12 @@
 
 import type { Components, JSX } from "../types/components";
 
+interface ClassicSearchList extends Components.ClassicSearchList, HTMLElement {}
+export const ClassicSearchList: {
+  prototype: ClassicSearchList;
+  new (): ClassicSearchList;
+};
+
 interface EzActionsButton extends Components.EzActionsButton, HTMLElement {}
 export const EzActionsButton: {
   prototype: EzActionsButton;
@@ -86,18 +92,60 @@ export const EzClassicComboBox: {
   new (): EzClassicComboBox;
 };
 
+interface EzClassicDateInput extends Components.EzClassicDateInput, HTMLElement {}
+export const EzClassicDateInput: {
+  prototype: EzClassicDateInput;
+  new (): EzClassicDateInput;
+};
+
+interface EzClassicDateTimeInput extends Components.EzClassicDateTimeInput, HTMLElement {}
+export const EzClassicDateTimeInput: {
+  prototype: EzClassicDateTimeInput;
+  new (): EzClassicDateTimeInput;
+};
+
 interface EzClassicInput extends Components.EzClassicInput, HTMLElement {}
 export const EzClassicInput: {
   prototype: EzClassicInput;
   new (): EzClassicInput;
 };
 
+interface EzClassicNumberInput extends Components.EzClassicNumberInput, HTMLElement {}
+export const EzClassicNumberInput: {
+  prototype: EzClassicNumberInput;
+  new (): EzClassicNumberInput;
+};
+
+interface EzClassicSearch extends Components.EzClassicSearch, HTMLElement {}
+export const EzClassicSearch: {
+  prototype: EzClassicSearch;
+  new (): EzClassicSearch;
+};
+
+interface EzClassicSearchPlus extends Components.EzClassicSearchPlus, HTMLElement {}
+export const EzClassicSearchPlus: {
+  prototype: EzClassicSearchPlus;
+  new (): EzClassicSearchPlus;
+};
+
+interface EzClassicSearchResultList extends Components.EzClassicSearchResultList, HTMLElement {}
+export const EzClassicSearchResultList: {
+  prototype: EzClassicSearchResultList;
+  new (): EzClassicSearchResultList;
+};
+
 interface EzClassicTextArea extends Components.EzClassicTextArea, HTMLElement {}
 export const EzClassicTextArea: {
   prototype: EzClassicTextArea;
   new (): EzClassicTextArea;
 };
 
+interface EzClassicTimeInput extends Components.EzClassicTimeInput, HTMLElement {}
+export const EzClassicTimeInput: {
+  prototype: EzClassicTimeInput;
+  new (): EzClassicTimeInput;
+};
+
 interface EzCollapsibleBox extends Components.EzCollapsibleBox, HTMLElement {}
 export const EzCollapsibleBox: {
   prototype: EzCollapsibleBox;
@@ -206,6 +254,12 @@ export const EzIcon: {
   new (): EzIcon;
 };
 
+interface EzImageInput extends Components.EzImageInput, HTMLElement {}
+export const EzImageInput: {
+  prototype: EzImageInput;
+  new (): EzImageInput;
+};
+
 interface EzLinkBuilder extends Components.EzLinkBuilder, HTMLElement {}
 export const EzLinkBuilder: {
   prototype: EzLinkBuilder;