@sankhyalabs/ezui 7.2.0-dev.1 → 7.2.0-dev.11

package/dist/collection/components/ez-grid-pagination/ez-grid-pagination.js

@@ -0,0 +1,410 @@
+import { Host, h } from '@stencil/core';
+import initI18n from '../../utils/i18n';
+import { Action, ElementIDUtils } from '@sankhyalabs/core';
+export class EzGridPagination {
+  constructor() {
+    this._dataUnitInitialized = false;
+    this.paginationInfo = undefined;
+    this.leftButtonDisabled = undefined;
+    this.rightButtonDisabled = undefined;
+    this.paginationCounterMode = 'auto';
+    this.dataUnit = undefined;
+    this.paginationTextPosition = 'left';
+    this.buttonsSize = 'large';
+  }
+  /**
+   * Navega para a página anterior.
+   */
+  async previousPage() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.previousPage();
+    this.handlePageChange('previous');
+  }
+  /**
+   * Navega para a próxima página.
+   */
+  async nextPage() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.nextPage();
+    this.handlePageChange('next');
+  }
+  /**
+   * Navega para a primeira página.
+   */
+  async firstPage() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.gotoPage(0);
+    this.handlePageChange('previous');
+  }
+  /**
+   * Navega para a primeira página.
+   */
+  async lastPage() {
+    if (!this.dataUnit) {
+      return;
+    }
+    await this.dataUnit.gotoPage(this.getTotalPages() - 1);
+    this.handlePageChange('next');
+  }
+  onDataUnitChange() {
+    this.initializeDataUnit();
+  }
+  shouldPresentPaginationLabel() {
+    return this.paginationCounterMode !== 'hidden';
+  }
+  getRemainingPageLabel() {
+    var _a;
+    if (!this.paginationInfo)
+      return '';
+    return `${this.paginationInfo.total == undefined
+      ? this.i18n('ez-grid-pagination.remainingPageLabel', { count: ((_a = this.paginationInfo.count) !== null && _a !== void 0 ? _a : 0) + 1 })
+      : this.i18n('ez-grid-pagination.remainingTotalLabel', { total: this.paginationInfo.total, count: this.paginationInfo.count })}`;
+  }
+  getActualPageLabel() {
+    var _a, _b;
+    if (!this.paginationInfo)
+      return '0-0';
+    return `${(_a = this.paginationInfo.firstRecord) !== null && _a !== void 0 ? _a : 0} - ${(_b = this.paginationInfo.lastRecord) !== null && _b !== void 0 ? _b : 0}`;
+  }
+  getPaginationCount() {
+    var _a;
+    if (!this.paginationInfo || !this.dataUnit)
+      return '0-0';
+    const currentPage = ((_a = this.paginationInfo.currentPage) !== null && _a !== void 0 ? _a : 0) + 1;
+    let totalPages = this.getTotalPages();
+    return this.i18n('ez-grid-pagination.pageCounter', { currentPage, totalPages });
+  }
+  getTotalPages() {
+    var _a;
+    if (this.paginationInfo.total !== undefined) {
+      return Math.ceil(this.paginationInfo.total / this.dataUnit.pageSize);
+    }
+    else {
+      return Math.ceil(((_a = this.paginationInfo.count) !== null && _a !== void 0 ? _a : 0) / this.dataUnit.pageSize);
+    }
+  }
+  handlePageChange(direction) {
+    this.setPaginationInfo();
+    this.setStatusButtonPagination();
+    this.pageChange.emit(direction);
+  }
+  async handleCancelPagination() {
+    var _a;
+    if (!this.dataUnit)
+      return;
+    this.dataUnit.cancelPagination = true;
+    await ((_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide());
+  }
+  handleShowCancelPagination() {
+    var _a, _b, _c;
+    if (!this.hasToShowCancelPagination()) {
+      (_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide();
+      return;
+    }
+    if ((_b = this._cancelPaginationPopoverElement) === null || _b === void 0 ? void 0 : _b.opened)
+      return;
+    (_c = this._cancelPaginationPopoverElement) === null || _c === void 0 ? void 0 : _c.show('15px');
+  }
+  hasToShowCancelPagination() {
+    if (!this.dataUnit || !this.paginationInfo)
+      return false;
+    const hasMore = this.paginationInfo.total === undefined;
+    return !this.dataUnit.cancelPagination && hasMore && this.paginationInfo.count > this.dataUnit.pageSize;
+  }
+  setPaginationInfo() {
+    if (!this.dataUnit) {
+      this.paginationInfo = null;
+      return;
+    }
+    this.paginationInfo = this.dataUnit.getPaginationInfo() || null;
+  }
+  dataUnitObserver(action) {
+    switch (action.type) {
+      case Action.PAGINATION_UPDATED:
+        this.setPaginationInfo();
+        this.setStatusButtonPagination();
+        this.handleShowCancelPagination();
+        break;
+      case Action.DATA_LOADED:
+        this.setPaginationInfo();
+        break;
+      default:
+        break;
+    }
+  }
+  getLeftButtonDisabledStatus() {
+    var _a, _b;
+    if (!this.dataUnit)
+      return true;
+    return ((_b = (_a = this.paginationInfo) === null || _a === void 0 ? void 0 : _a.currentPage) !== null && _b !== void 0 ? _b : 0) <= 0;
+  }
+  getRightButtonDisabledStatus() {
+    var _a;
+    if (!this.dataUnit)
+      return true;
+    return !((_a = this.paginationInfo) === null || _a === void 0 ? void 0 : _a.hasMore);
+  }
+  setStatusButtonPagination() {
+    this.leftButtonDisabled = this.getLeftButtonDisabledStatus();
+    this.rightButtonDisabled = this.getRightButtonDisabledStatus();
+  }
+  initializeDataUnit() {
+    if (!this.dataUnit || this._dataUnitInitialized) {
+      return;
+    }
+    this.setPaginationInfo();
+    this.setStatusButtonPagination();
+    this._dataUnitObserverBound = this.dataUnitObserver.bind(this);
+    this.dataUnit.subscribe(this._dataUnitObserverBound);
+    this._dataUnitInitialized = true;
+  }
+  addInfoId() {
+    if (this._element) {
+      ElementIDUtils.addIDInfo(this._element);
+    }
+  }
+  renderCancelPagination() {
+    return (h("ez-popover", { ref: (element) => (this._cancelPaginationPopoverElement = element), "overlay-type": "none", autoClose: false }, h("div", { class: 'cancel-pagination' }, h("ez-icon", { iconName: "sync", size: "x-large", class: "spin" }), h("span", { onClick: () => this.handleCancelPagination(), class: 'cancel-pagination-btn' }, this.i18n('ez-grid-pagination.cancelPagination')))));
+  }
+  async connectedCallback() {
+    this.i18n = await initI18n();
+    this.initializeDataUnit();
+  }
+  componentDidLoad() {
+    this.addInfoId();
+  }
+  disconnectedCallback() {
+    if (this.dataUnit && this._dataUnitInitialized && this._dataUnitObserverBound) {
+      this.dataUnit.unsubscribe(this._dataUnitObserverBound);
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { id: 'grid-pagination--container', class: {
+        'pagination__container': true,
+        'pagination-expanded': this.paginationCounterMode !== 'hidden',
+        'pagination-contracted': this.paginationCounterMode === 'hidden',
+        'pagination-text-right': this.paginationTextPosition === 'right',
+      } }, h("div", { id: "grid-pagination--page-navigator", class: "pagination__page-navigator" }, h("div", { id: 'grid-pagination--row-summary-panel', class: "pagination__row-summary-panel" }, h("span", { class: "pagination__label", "aria-live": "polite", "aria-atomic": "true", title: `${this.getActualPageLabel()} ${this.getRemainingPageLabel()}` }, this.shouldPresentPaginationLabel() && this.getActualPageLabel(), this.shouldPresentPaginationLabel() && this.getRemainingPageLabel())), this.renderCancelPagination(), h("div", { id: 'grid-pagination--page-summary-panel', class: {
+        'pagination__page-summary-panel': true,
+        'pagination__container': true,
+        'pagination-expanded': this.paginationCounterMode !== 'hidden',
+        'pagination-contracted': this.paginationCounterMode === 'hidden',
+        'pagination-text-right': this.paginationTextPosition === 'right',
+      } }, h("div", { id: 'grid-pagination--first-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.leftButtonDisabled
+      } }, h("ez-tooltip", { message: this.i18n('ez-grid-pagination.firstPage') }, h("ez-icon", { size: this.buttonsSize, iconName: "dual-chevron-left", onClick: () => !this.leftButtonDisabled && this.firstPage() }))), h("div", { id: 'grid-pagination--previous-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.leftButtonDisabled
+      } }, h("ez-tooltip", { message: this.i18n('ez-grid-pagination.previousPage') }, h("ez-icon", { size: this.buttonsSize, iconName: "chevron-left", onClick: () => !this.leftButtonDisabled && this.previousPage() }))), h("div", { class: "pagination__container-label" }, h("span", { class: "pagination__label", "aria-live": "polite", "aria-atomic": "true", title: `${this.getActualPageLabel()} ${this.getRemainingPageLabel()}` }, this.shouldPresentPaginationLabel() && this.getPaginationCount())), h("div", { id: 'grid-pagination--next-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.rightButtonDisabled
+      } }, h("ez-tooltip", { message: this.i18n('ez-grid-pagination.nextPage') }, h("ez-icon", { size: this.buttonsSize, iconName: "chevron-right", onClick: () => !this.rightButtonDisabled && this.nextPage() }))), h("div", { id: 'grid-pagination--last-tooltip', class: {
+        'pagination__buttons-container': true,
+        'disabled': this.rightButtonDisabled
+      } }, h("ez-tooltip", { message: this.i18n('ez-grid-pagination.lastPage') }, h("ez-icon", { size: this.buttonsSize, iconName: "dual-chevron-right", onClick: () => !this.rightButtonDisabled && this.lastPage() }))))))));
+  }
+  static get is() { return "ez-grid-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ez-grid-pagination.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ez-grid-pagination.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "paginationCounterMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'show' | 'hidden' | 'auto'",
+          "resolved": "\"auto\" | \"hidden\" | \"show\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [{
+              "name": "default",
+              "text": "'auto'"
+            }],
+          "text": "Define a visibilidade do contador de pagina\u00E7\u00E3o.\n- `show`: Sempre exibe o contador (ex: \"1-10 de 100\")\n- `hidden`: Oculta o contador (exibe apenas os bot\u00F5es)\n- `auto`: Exibe/oculta baseado no espa\u00E7o dispon\u00EDvel (responsivo)"
+        },
+        "attribute": "pagination-counter-mode",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      },
+      "dataUnit": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "DataUnit",
+          "resolved": "DataUnit",
+          "references": {
+            "DataUnit": {
+              "location": "import",
+              "path": "@sankhyalabs/core"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "DataUnit associada \u00E0 grid."
+        }
+      },
+      "paginationTextPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'left' | 'right'",
+          "resolved": "\"left\" | \"right\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o texto da pagina\u00E7\u00E3o \u00E0 esquerda ou \u00E0 direita."
+        },
+        "attribute": "pagination-text-position",
+        "reflect": false,
+        "defaultValue": "'left'"
+      },
+      "buttonsSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'x-small' | 'small' | 'medium' | 'large'",
+          "resolved": "\"large\" | \"medium\" | \"small\" | \"x-small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Define o modo de visualiza\u00E7\u00E3o atual da grid."
+        },
+        "attribute": "buttons-size",
+        "reflect": false,
+        "defaultValue": "'large'"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "paginationInfo": {},
+      "leftButtonDisabled": {},
+      "rightButtonDisabled": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "pageChange",
+        "name": "pageChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Evento disparado quando a p\u00E1gina \u00E9 alterada."
+        },
+        "complexType": {
+          "original": "PageChangeDirection",
+          "resolved": "\"next\" | \"previous\"",
+          "references": {
+            "PageChangeDirection": {
+              "location": "local"
+            }
+          }
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "previousPage": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Navega para a p\u00E1gina anterior.",
+          "tags": []
+        }
+      },
+      "nextPage": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Navega para a pr\u00F3xima p\u00E1gina.",
+          "tags": []
+        }
+      },
+      "firstPage": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Navega para a primeira p\u00E1gina.",
+          "tags": []
+        }
+      },
+      "lastPage": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Navega para a primeira p\u00E1gina.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "_element"; }
+  static get watchers() {
+    return [{
+        "propName": "dataUnit",
+        "methodName": "onDataUnitChange"
+      }];
+  }
+}

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

@@ -1433,25 +1433,25 @@ svg {
 
 .x-small--font {
   font-size: var(--font-size--small, 12px);
-  line-height: var(--line-height--16, 16px);
+  line-height: var(--line-height--12, 12px);
 }
 
 .small--font {
   font-size: var(--font-size--medium, 16px);
-  line-height: var(--line-height--20, 20px);
+  line-height: var(--line-height--16, 16px);
 }
 
 .medium--font {
   font-size: var(--font-size--xlarge, 20px);
-  line-height: var(--line-height--24, 24px);
+  line-height: var(--line-height--20, 20px);
 }
 
 .large--font {
   font-size: var(--font-size--xxxlarge, 24px);
-  line-height: var(--line-height--28, 28px);
+  line-height: var(--line-height--24, 24px);
 }
 
 .x-large--font {
   font-size: var(--font-size--6xlarge, 30px);
-  line-height: var(--line-height--34, 34px);
+  line-height: var(--line-height--30, 30px);
 }

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

@@ -123,7 +123,22 @@
   border-radius: calc(var(--ez-image-input--border-radius) - var(--ez-image-input--border-width));
 }
 
-ez-button {
+.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);
@@ -131,13 +146,14 @@ ez-button {
   --ez-button--hover--border: var(--ez-image-input--remove-button-border);
 }
 
-.image-input__remove-button {
-  position: absolute;
-  top: var(--space--8);
-  right: var(--space--8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.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 {

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

@@ -42,6 +42,11 @@ export class EzImageInput {
       }
       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) {
@@ -133,7 +138,7 @@ export class EzImageInput {
         '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" })))));
+      }, "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"; }

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

@@ -89,7 +89,6 @@ export class EzPopup {
   }
   componentDidRender() {
     this.manageOverlay();
-    this.popUpFocus();
   }
   handleAutoClose(event) {
     if (!this.opened || !this._popupRef || !this.autoClose) {

package/dist/collection/components/ez-record-navigation/ez-record-navigation.css

@@ -0,0 +1,51 @@
+: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;
+}