@sankhyalabs/ezui 7.2.0-rc.13 → 7.2.0-rc.15

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

@@ -12,6 +12,7 @@ import { buildSearch } from "./templates/SearchInput.tpl";
 import { buildRichText } from "./templates/RichText.tpl";
 import { getI18n } from "../../../utils/i18n";
 import { buildImage } from "./templates/ImageInput.tpl";
+import { buildMultiSelectInput } from "./templates/MultiSelectInput.tpl";
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.CHECKBOX, buildCheckBox);
 uiBuilders.set(UserInterface.SWITCH, buildSwitch);
@@ -28,6 +29,7 @@ uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextArea);
 uiBuilders.set(UserInterface.HTML, buildRichText);
 uiBuilders.set(UserInterface.IMAGE, buildImage);
+uiBuilders.set(UserInterface.MULTISELECTOR, buildMultiSelectInput);
 export const fieldBuilder = (field, customUiBuilders = new Map(), context) => {
   const i18n = getI18n();
   const shouldUseClassic = (context === null || context === void 0 ? void 0 : context.formLayout) === FormLayout.CLASSIC_CASCADE ||

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

@@ -0,0 +1,17 @@
+import { h } from "@stencil/core";
+export const buildMultiSelectInput = ({ name, label, readOnly, contextName, canShowError, props }) => {
+  var _a, _b, _c, _d;
+  const rawOptions = props === null || props === void 0 ? void 0 : props.options;
+  let options;
+  if (typeof rawOptions === "string") {
+    const parsed = JSON.parse(rawOptions);
+    options = Object.keys(parsed).map(key => ({ value: key, label: parsed[key], check: false }));
+  }
+  else {
+    options = rawOptions;
+  }
+  // Quando o metadata não informa explicitamente, usamos a lista estática (options)
+  // caso não haja um datasource configurado.
+  const useOptions = (_a = props === null || props === void 0 ? void 0 : props.useOptions) !== null && _a !== void 0 ? _a : (options != undefined && (props === null || props === void 0 ? void 0 : props.dataSource) == undefined);
+  return (h("div", { class: "ez-col ez-col--sd-12" }, h("ez-multi-select-input", { class: "ez-input__no-margin", label: label, "data-field-name": name, "data-context-name": contextName, key: name, enabled: !readOnly, canShowError: canShowError, options: options, dataSource: props === null || props === void 0 ? void 0 : props.dataSource, columnName: (_b = props === null || props === void 0 ? void 0 : props.columnName) !== null && _b !== void 0 ? _b : name, useOptions: useOptions, isTextSearch: (_c = props === null || props === void 0 ? void 0 : props.isTextSearch) !== null && _c !== void 0 ? _c : false, orderSelectedFirst: (_d = props === null || props === void 0 ? void 0 : props.orderSelectedFirst) !== null && _d !== void 0 ? _d : false })));
+};

package/dist/collection/components/ez-grid/subcomponents/filter-column.css

@@ -1,6 +1,10 @@
 .filter-column {
   padding: var(--space--2xs, 8px);
   position: relative;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
 }
 
 .filter-column__header {
@@ -10,6 +14,7 @@
   align-items: center;
   justify-content: space-between;
   height: var(--space--xl, 32px);
+  flex: 0 0 auto;
 }
 
 .filter-column__footer {
@@ -23,6 +28,7 @@
   left: 0;
   padding-top: var(--space--2xs, 8px);
   border-top: var(--border--medium) var(--color--disable-secondary);
+  flex: 0 0 auto;
 }
 
 .filter-column__popover {
@@ -35,4 +41,8 @@
 
 #filter-column-selection-list {
   --ez-multi-selection-default-height: unset;
+  --ez-multi-selection-default-max-height: 100%;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
 }

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

@@ -9,6 +9,15 @@
   flex-shrink: 1;
   flex-wrap: nowrap;
   justify-content: flex-end;
+  position: relative;
+}
+
+ez-popover.cancel-pagination__popover {
+  position: absolute;
+  right: 0;
+  bottom: 100%;
+  width: 0;
+  height: 0;
 }
 
 .pagination__buttons-container {
@@ -72,12 +81,116 @@
 }
 
 .cancel-pagination {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space--12, 12px);
+  gap: var(--space--16, 16px);
+  min-width: 304px;
+  max-width: 180px;
+  transition: min-width 220ms cubic-bezier(0.4, 0, 0.2, 1),
+              max-width 220ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+
+.cancel-pagination--expanded {
+  min-width: 304px;
+}
+
+.cancel-pagination__expanded {
+  animation: cancel-pagination-fade-in 220ms cubic-bezier(0.4, 0, 0.2, 1) 60ms both;
+}
+
+@keyframes cancel-pagination-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.cancel-pagination__trigger {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: space-between;
-  gap: var(--space--4, 4px);
-  padding: var(--space--8, 8px);
+  gap: var(--space--16, 16px);
+  padding: var(--space--4, 4px);
+  border-radius: var(--border-radius--small, 4px);
+  cursor: pointer;
+  outline: none;
+}
+
+.cancel-pagination__trigger:focus-visible {
+  box-shadow: 0 0 0 2px var(--color--ocean-green-600, #008561);
+}
+
+.cancel-pagination__trigger--expanded {
+  cursor: default;
+  padding-bottom: var(--space--4, 4px);
+}
+
+.cancel-pagination__divider {
+  border: 0;
+  border-top: 1px solid var(--color--petroleum-100, #C8CCD3);
+  width: 100%;
+}
+
+.cancel-pagination__label {
+  color: var(--color--petroleum-700, #2E3742);
+  font-size: var(--font-size--medium, 16px);
+  font-weight: var(--font-weight--semi-bold, 600);
+  font-family: var(--font--pattern, 'Roboto');
+  white-space: nowrap;
+}
+
+.cancel-pagination__expanded {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space--8, 8px);
+}
+
+.cancel-pagination__message {
+  color: var(--color--petroleum-500, #4A5567);
+  font-size: var(--font-size--default, 14px);
+  font-family: var(--font--pattern, 'Roboto');
+  font-weight: var(--font-weight--regular, 400);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.cancel-pagination__question {
+  color: var(--color--petroleum-700, #2E3742);
+  font-size: var(--font-size--default, 14px);
+  font-family: var(--font--pattern, 'Roboto');
+  font-weight: var(--font-weight--semi-bold, 600);
+  margin-top: 16px;
+  margin-bottom: 8px;
+}
+
+.cancel-pagination__checkbox {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space--8, 8px);
+  color: var(--color--petroleum-700, #2E3742);
+  font-size: var(--font-size--default, 14px);
+  font-family: var(--font--pattern, 'Roboto');
+  cursor: pointer;
+}
+
+.cancel-pagination__checkbox input[type="checkbox"] {
+  cursor: pointer;
+  accent-color: var(--color--ocean-green-600, #008561);
+}
+
+.cancel-pagination__actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: var(--space--8, 8px);
+  padding-top: var(--space--4, 4px);
 }
 
 .spin {
@@ -85,6 +198,8 @@
   animation-duration: 5000ms;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
+
+  --ez-icon--color: var(--color--ocean-green-600, #008561);
 }
 
 @keyframes spin {
@@ -97,15 +212,6 @@
   }
 }
 
-.cancel-pagination-btn {
-  color: var(--color--red-600, #BD0025);
-  font-size: var(--font-size--medium, 16px);
-  font-weight: var(--font-weight--semi-bold, 600);
-  font-family: var(--font--pattern, 'Roboto');
-  text-wrap: nowrap;
-  cursor: pointer;
-}
-
 .pagination-text-right {
   flex-direction: row-reverse;
 }

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

@@ -1,12 +1,39 @@
 import { Host, h } from '@stencil/core';
 import initI18n from '../../utils/i18n';
 import { Action, ElementIDUtils } from '@sankhyalabs/core';
+import { ASK_CANCEL_PAGINATION_EVENT, } from './ez-grid-pagination.model';
 export class EzGridPagination {
   constructor() {
     this._dataUnitInitialized = false;
+    this._pendingResolve = null;
+    this._collapseTimeout = null;
+    this._suppressedUntilNextAsk = false;
+    this._hoverEnabled = false;
+    this.handleLoadAllChange = (event) => {
+      const target = event.target;
+      this.loadAll = target.checked;
+    };
+    this.handleAskCancelPagination = (event) => {
+      const detail = event.detail;
+      if (!detail || !this.dataUnit)
+        return;
+      if (detail.dataUnitName !== this.dataUnit.name)
+        return;
+      this.resolvePending('CONTINUE');
+      this._pendingResolve = detail.resolve;
+      this._suppressedUntilNextAsk = false;
+      this._hoverEnabled = true;
+      this.loadAll = false;
+      const popover = this._cancelPaginationPopoverElement;
+      if (popover && !popover.opened && typeof popover.showAbove === 'function') {
+        popover.showAbove({ bottom: '4px', right: '4px' });
+      }
+    };
     this.paginationInfo = undefined;
     this.leftButtonDisabled = undefined;
     this.rightButtonDisabled = undefined;
+    this.expanded = false;
+    this.loadAll = false;
     this.paginationCounterMode = 'auto';
     this.dataUnit = undefined;
     this.paginationTextPosition = 'left';
@@ -94,22 +121,54 @@ export class EzGridPagination {
     this.setStatusButtonPagination();
     this.pageChange.emit(direction);
   }
-  async handleCancelPagination() {
-    var _a;
+  resolvePending(response) {
+    if (!this._pendingResolve)
+      return;
+    const resolve = this._pendingResolve;
+    this._pendingResolve = null;
+    resolve(response);
+  }
+  async handleCancelAction() {
     if (!this.dataUnit)
       return;
     this.dataUnit.cancelPagination = true;
-    await ((_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide());
+    this.resolvePending('CANCEL');
+    this._suppressedUntilNextAsk = true;
+    this.collapse();
+    const popover = this._cancelPaginationPopoverElement;
+    if (popover && typeof popover.hide === 'function') {
+      await popover.hide();
+    }
+  }
+  async handleContinueAction() {
+    const response = this.loadAll ? 'LOAD_ALL' : 'CONTINUE';
+    this.resolvePending(response);
+    this._suppressedUntilNextAsk = true;
+    this.loadAll = false;
+    this.collapse();
+    const popover = this._cancelPaginationPopoverElement;
+    if (popover && typeof popover.hide === 'function') {
+      await popover.hide();
+    }
   }
   handleShowCancelPagination() {
-    var _a, _b, _c;
+    const popover = this._cancelPaginationPopoverElement;
     if (!this.hasToShowCancelPagination()) {
-      (_a = this._cancelPaginationPopoverElement) === null || _a === void 0 ? void 0 : _a.hide();
+      if (this._pendingResolve)
+        return;
+      if (popover && typeof popover.hide === 'function')
+        popover.hide();
+      this._hoverEnabled = false;
+      this.collapse();
       return;
     }
-    if ((_b = this._cancelPaginationPopoverElement) === null || _b === void 0 ? void 0 : _b.opened)
+    if (this._suppressedUntilNextAsk)
       return;
-    (_c = this._cancelPaginationPopoverElement) === null || _c === void 0 ? void 0 : _c.show('15px');
+    if (popover === null || popover === void 0 ? void 0 : popover.opened)
+      return;
+    if (popover && typeof popover.showAbove === 'function') {
+      popover.showAbove({ bottom: '4px', right: '4px' });
+    }
   }
   hasToShowCancelPagination() {
     if (!this.dataUnit || !this.paginationInfo)
@@ -117,6 +176,30 @@ export class EzGridPagination {
     const hasMore = this.paginationInfo.total === undefined;
     return !this.dataUnit.cancelPagination && hasMore && this.paginationInfo.count > this.dataUnit.pageSize;
   }
+  expand() {
+    if (!this._hoverEnabled)
+      return;
+    if (this._collapseTimeout) {
+      clearTimeout(this._collapseTimeout);
+      this._collapseTimeout = null;
+    }
+    this.expanded = true;
+  }
+  collapse() {
+    if (this._collapseTimeout) {
+      clearTimeout(this._collapseTimeout);
+      this._collapseTimeout = null;
+    }
+    this.expanded = false;
+  }
+  scheduleCollapse() {
+    if (this._collapseTimeout)
+      clearTimeout(this._collapseTimeout);
+    this._collapseTimeout = setTimeout(() => {
+      this._collapseTimeout = null;
+      this.expanded = false;
+    }, 120);
+  }
   setPaginationInfo() {
     if (!this.dataUnit) {
       this.paginationInfo = null;
@@ -169,10 +252,21 @@ export class EzGridPagination {
       ElementIDUtils.addIDInfo(this._element);
     }
   }
+  renderCollapsedTrigger() {
+    return (h("div", { class: "cancel-pagination__trigger" }, h("ez-icon", { iconName: "sync", size: "x-large", class: "spin" }), h("span", { class: "cancel-pagination__label" }, this.i18n('ez-grid-pagination.paginationLabel'))));
+  }
+  renderExpandedContent() {
+    return (h("div", { class: "cancel-pagination__expanded", role: "group", "aria-label": this.i18n('ez-grid-pagination.paginationLabel') }, h("div", { class: "cancel-pagination__trigger cancel-pagination__trigger--expanded" }, h("ez-icon", { iconName: "ellipsis-circle", size: "large", class: "spin" }), h("span", { class: "cancel-pagination__label" }, this.i18n('ez-grid-pagination.paginationLabel'))), h("hr", { class: "cancel-pagination__divider", "aria-hidden": "true" }), h("p", { class: "cancel-pagination__message" }, this.i18n('ez-grid-pagination.largeLoad.line1')), h("p", { class: "cancel-pagination__message" }, this.i18n('ez-grid-pagination.largeLoad.line2')), h("p", { class: "cancel-pagination__question" }, this.i18n('ez-grid-pagination.largeLoad.line3')), h("label", { class: "cancel-pagination__checkbox" }, h("input", { type: "checkbox", checked: this.loadAll, onChange: this.handleLoadAllChange }), h("span", null, this.i18n('ez-grid-pagination.largeLoad.loadAll'))), h("div", { class: "cancel-pagination__actions" }, h("ez-button", { class: "cancel-pagination__continue-btn", label: this.i18n('ez-grid-pagination.largeLoad.continue'), size: "small", onClick: () => this.handleContinueAction() }), h("ez-button", { class: "cancel-pagination__cancel-btn ez-button--primary", label: this.i18n('ez-grid-pagination.largeLoad.cancel'), size: "small", onClick: () => this.handleCancelAction() }))));
+  }
   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')))));
+    return (h("ez-popover", { class: "cancel-pagination__popover", ref: (element) => (this._cancelPaginationPopoverElement = element), "overlay-type": "none", autoClose: false }, h("div", { class: {
+        'cancel-pagination': true,
+        'cancel-pagination--expanded': this.expanded,
+      }, onMouseEnter: () => this.expand(), onMouseLeave: () => this.scheduleCollapse() }, this.expanded ? this.renderExpandedContent() : this.renderCollapsedTrigger())));
   }
   async connectedCallback() {
+    this._askCancelListenerBound = this.handleAskCancelPagination.bind(this);
+    document.addEventListener(ASK_CANCEL_PAGINATION_EVENT, this._askCancelListenerBound);
     this.i18n = await initI18n();
     this.initializeDataUnit();
   }
@@ -180,6 +274,15 @@ export class EzGridPagination {
     this.addInfoId();
   }
   disconnectedCallback() {
+    if (this._askCancelListenerBound) {
+      document.removeEventListener(ASK_CANCEL_PAGINATION_EVENT, this._askCancelListenerBound);
+      this._askCancelListenerBound = undefined;
+    }
+    if (this._collapseTimeout) {
+      clearTimeout(this._collapseTimeout);
+      this._collapseTimeout = null;
+    }
+    this.resolvePending('CONTINUE');
     if (this.dataUnit && this._dataUnitInitialized && this._dataUnitObserverBound) {
       this.dataUnit.unsubscribe(this._dataUnitObserverBound);
     }
@@ -307,7 +410,9 @@ export class EzGridPagination {
     return {
       "paginationInfo": {},
       "leftButtonDisabled": {},
-      "rightButtonDisabled": {}
+      "rightButtonDisabled": {},
+      "expanded": {},
+      "loadAll": {}
     };
   }
   static get events() {
@@ -326,7 +431,8 @@ export class EzGridPagination {
           "resolved": "\"next\" | \"previous\"",
           "references": {
             "PageChangeDirection": {
-              "location": "local"
+              "location": "import",
+              "path": "./ez-grid-pagination.model"
             }
           }
         }

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

@@ -0,0 +1 @@
+export const ASK_CANCEL_PAGINATION_EVENT = 'ez-grid-pagination:ask-cancel';