@sankhyalabs/ezui 7.2.1-rc.1 → 7.3.0

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

@@ -1,189 +0,0 @@
-:host {
-  display: block;
-  
-  /*@doc Define a altura do container de imagem.*/
-  --ez-image-input--container-height: 200px;
-  
-  /*@doc Define a largura do container de imagem.*/
-  --ez-image-input--container-width: 280px;
-  
-  /*@doc Define a cor de fundo do container.*/
-  --ez-image-input--background-color: var(--color--gray-80);
-  
-  /*@doc Define a cor da borda do container.*/
-  --ez-image-input--border-color: var(--color--gray-200);
-  
-  /*@doc Define a cor da borda no estado de hover.*/
-  --ez-image-input--border-color-hover: var(--color--ocean-green-600);
-  
-  /*@doc Define a cor da borda quando está sendo arrastado.*/
-  --ez-image-input--border-color-dragging: var(--color--ocean-green-500);
-  
-  /*@doc Define a cor da borda quando está desabilitado.*/
-  --ez-image-input--border-color-disabled: var(--color--gray-200);
-  
-  /*@doc Define a cor do texto do label.*/
-  --ez-image-input--label-color: var(--color--petroleum-900);
-  
-  /*@doc Define a cor do ícone.*/
-  --ez-image-input--icon-color: var(--color--gray-400);
-  
-  /*@doc Define o raio da borda do container.*/
-  --ez-image-input--border-radius: var(--border--radius-24);
-  
-  /*@doc Define a largura da borda.*/
-  --ez-image-input--border-width: 2px;
-  
-  /*@doc Define a cor de fundo do botão de remover.*/
-  --ez-image-input--remove-button-bg: var(--color--red-600);
-  
-  /*@doc Define a cor de fundo do botão de remover no hover.*/
-  --ez-image-input--remove-button-bg-hover: var(--color--red-700);
-  
-  /*@doc Define a cor do ícone do botão de remover.*/
-  --ez-image-input--remove-button-color: var(--color--gray-70);
-
-  /*@doc Define a borda do botão de remover.*/
-  --ez-image-input--remove-button-border: 1px solid var(--color--red-700);
-}
-
-.image-input__container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  height: var(--ez-image-input--container-height);
-  width: var(--ez-image-input--container-width);
-  border: var(--ez-image-input--border-width) dashed var(--ez-image-input--border-color);
-  border-radius: var(--ez-image-input--border-radius);
-  background-color: var(--ez-image-input--background-color);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  overflow: hidden;
-}
-
-.image-input__container:hover:not(.image-input__container--disabled) {
-  border-color: var(--ez-image-input--border-color-hover);
-}
-
-.image-input__container--dragging {
-  border-color: var(--ez-image-input--border-color-dragging);
-  background-color: var(--color--ocean-green-90);
-}
-
-.image-input__container--disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-  border-color: var(--ez-image-input--border-color-disabled);
-}
-
-.image-input__container--has-image {
-  border-style: solid;
-  padding: var(--space--0);
-}
-
-.image-input__file-input {
-  display: none;
-}
-
-.image-input__dropzone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space--16);
-  padding: var(--space--24);
-  text-align: center;
-}
-
-.image-input__dropzone ez-icon {
-  color: var(--ez-image-input--icon-color);
-}
-
-.image-input__label {
-  font-family: var(--font--pattern);
-  font-size: var(--font-size--default);
-  font-weight: var(--font-weight--medium);
-  color: var(--ez-image-input--label-color);
-  line-height: var(--line-height--20);
-}
-
-.image-input__preview {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.image-input__image {
-  height: 100%;
-  object-fit: cover;
-  border-radius: calc(var(--ez-image-input--border-radius) - var(--ez-image-input--border-width));
-}
-
-.image-input__actions {
-  position: absolute;
-  top: var(--space--8);
-  right: var(--space--8);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space--4);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.image-input__container:hover .image-input__actions {
-  opacity: 1;
-}
-
-.image-input__remove-button {
-  --ez-button--background-color: var(--ez-image-input--remove-button-bg);
-  --ez-button--hover--background-color: var(--ez-image-input--remove-button-bg-hover);
-  --ez-button--color: var(--ez-image-input--remove-button-color);
-  --ez-button--border: var(--ez-image-input--remove-button-border);
-  --ez-button--hover--border: var(--ez-image-input--remove-button-border);
-}
-
-.image-input__edit-button {
-  --ez-button--background-color: var(--ez-image-input--edit-button-bg);
-  --ez-button--hover--background-color: var(--ez-image-input--edit-button-bg-hover);
-  --ez-button--color: var(--ez-image-input--edit-button-color);
-  --ez-button--border: var(--ez-image-input--edit-button-border);
-  --ez-button--hover--border: var(--ez-image-input--edit-button-border);
-  --ez-button--left-icon--color: var(--ez-image-input--edit-button-color);
-  --ez-button--right-icon--color: var(--ez-image-input--edit-button-color);
-}
-
-.image-input__popup-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space--16);
-  height: 100%;
-}
-
-.image-input__popup-image {
-  max-width: 100%;
-  max-height: 70vh;
-  object-fit: contain;
-  border-radius: var(--border--radius-8);
-}
-
-.image-input__image {
-  height: 100%;
-  object-fit: cover;
-  border-radius: calc(var(--ez-image-input--border-radius) - var(--ez-image-input--border-width));
-  cursor: pointer;
-  transition: transform 0.2s ease;
-}
-
-.image-input__image:hover {
-  transform: scale(1.02);
-}
-
-ez-skeleton {
-  --skeleton-width: var(--ez-image-input--container-width);
-  --skeleton-height: var(--ez-image-input--container-height);
-}

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

@@ -1,329 +0,0 @@
-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.handleEditImage = (event) => {
-      var _a;
-      event.stopPropagation();
-      (_a = this._inputElem) === null || _a === void 0 ? void 0 : _a.click();
-    };
-    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("div", { class: "image-input__actions" }, 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("ez-button", { class: "image-input__edit-button", variant: "secondary", type: "button", mode: "icon", size: "small", iconName: "edit", onClick: this.handleEditImage, "aria-label": this.i18n('ez-image-input.editImage'), title: this.i18n('ez-image-input.editImage') }))))) : (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-record-navigation/ez-record-navigation.css

@@ -1,51 +0,0 @@
-:host {
-  display: block;
-}
-
-.record-navigation__container {
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  flex-shrink: 1;
-  justify-content: flex-end;
-  flex-wrap: nowrap;
-}
-
-.record-navigation__buttons-container {
-  display: flex;
-  gap: var(--space--8, 8px);
-}
-
-.record-navigation__container-label {
-  font-size: var(--font-size--default, 14px);
-  font-family: var(--font--pattern, 'Roboto');
-  color: var(--color--gray-600, #1C1D22);
-  text-shadow: 0 0 var(--color--gray-500, #494A4E), 0 0 1px transparent;
-  margin-right: var(--space--12, 12px);
-  display: flex;
-  align-items: center;
-}
-
-.record-navigation-contracted {
-  width: 100px;
-}
-
-.record-navigation-expanded {
-  min-width: 150px;
-}
-
-.record-navigation__label {
-  width: 100%;
-  white-space: nowrap;
-}
-
-.record-navigation__divider {
-  width: 3px;
-  height: 15px;
-  background-color: var(--color--gray-300, #C1C2C6);
-  margin-inline: var(--space--8, 8px);
-}
-
-.record-navigation-text-right {
-  flex-direction: row-reverse;
-}