@sankhyalabs/ezui 5.22.0-dev.14 → 5.22.0-dev.140

package/dist/collection/components/ez-grid/controller/ag-grid/components/EzGridCustomCellEditor.js

@@ -1,6 +1,8 @@
 import { HTMLBuilder } from "@sankhyalabs/core";
 import { CustomEditorSource } from "../../../../../utils/customEditor/interfaces/ICustomEditor";
 import EzCellEditor from "../editor/EzCellEditor";
+import { getViewPortHeight } from "../editor/GridEditorUtils";
+import FocusResolver from "../../../../../utils/FocusResolver";
 export default class EzGridCustomCellEditor extends EzCellEditor {
   init(params) {
     var _a, _b;
@@ -11,6 +13,8 @@ export default class EzGridCustomCellEditor extends EzCellEditor {
     this._defaultGui = this.getDefaultGui();
     const fieldMetadata = super.getFieldMetadata();
     this._params = {
+      cellPossition: getViewPortHeight(params.eGridCell),
+      eGridCell: params.eGridCell,
       value: params.value,
       charPress: params.charPress,
       currentEditor: this._defaultGui,
@@ -48,12 +52,24 @@ export default class EzGridCustomCellEditor extends EzCellEditor {
       const element = HTMLBuilder.parseElement(editorElement);
       return element;
     }
+    this._customGui = editorElement;
     return editorElement;
   }
   setValue(value) {
     this._value = value;
   }
   getValue() {
+    var _a, _b;
+    if ((_a = this._customGui) === null || _a === void 0 ? void 0 : _a.getValue)
+      return this._customGui.getValue();
+    if ((_b = this._customGui) === null || _b === void 0 ? void 0 : _b.hasAttribute('value'))
+      return this._customGui.value;
     return this._value;
   }
+  afterGuiAttached() {
+    this.focusIn();
+  }
+  focusIn() {
+    FocusResolver.resolveFocus(this._customGui);
+  }
 }

package/dist/collection/components/ez-grid/controller/ag-grid/components/EzGridCustomHeader.js

@@ -6,7 +6,7 @@ export class EzGridCustomHeader {
     this.element.classList.add('ag-cell-label-container');
     this.element.setAttribute('title', (_a = this.params.tooltip) !== null && _a !== void 0 ? _a : '');
     this.element.innerHTML = `
-          <div class='ez-flex ez-flex--justify-between'>
+          <div id='filter-column-${agParams.column.getColId()}-${agParams.context.dataUnit.dataUnitId}' class='ez-flex ez-flex--justify-between'>
             <i id='ez-grid-filter-icon' class='ez-icon-filter' style='color:#008561'></i>        
             <i id='ez-grid-menu-icon' class='ez-icon-dots-vertical'></i>        
           </div>

package/dist/collection/components/ez-grid/controller/ag-grid/editor/EzCellEditor.js

@@ -4,6 +4,7 @@ import { buildTextAreaInput, buildTextInput } from "./templates/TextInput.tpl";
 import { buildDate, buildDateTime, buildTime } from "./templates/DateInput.tpl";
 import { buildDecimal, buildInteger } from "./templates/NumberInput.tpl";
 import { buildComboBox, buildSwitch } from "./templates/ComboBox.tpl";
+import { buildSearchPlus } from "./templates/SearchPlus.tpl";
 import { buildSearch } from "./templates/Search.tpl";
 const uiBuilders = new Map();
 uiBuilders.set(UserInterface.DATE, buildDate);
@@ -16,6 +17,7 @@ uiBuilders.set(UserInterface.CHECKBOX, buildSwitch);
 uiBuilders.set(UserInterface.OPTIONSELECTOR, buildComboBox);
 uiBuilders.set(UserInterface.LONGTEXT, buildTextAreaInput);
 uiBuilders.set(UserInterface.SEARCH, buildSearch);
+uiBuilders.set(UserInterface.SEARCHPLUS, buildSearchPlus);
 export default class EzCellEditor {
   init(params) {
     this._rowData = params.data;
@@ -44,6 +46,14 @@ export default class EzCellEditor {
   getValue() {
     return this._gui.valueGetter != undefined ? this._gui.valueGetter() : this._gui.value;
   }
+  setGuiValue(value) {
+    if (this._gui.valueSetter != undefined) {
+      this._gui.valueSetter(value);
+    }
+    else {
+      this._gui.value = value;
+    }
+  }
   isPopup() {
     return this._gui.isPopUp;
   }

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/ComboBox.tpl.js

@@ -17,7 +17,9 @@ export const buildComboBox = ({ required, props, eGridCell }) => {
         mode="slim"
     />`);
   combo.options = options;
+  combo.stopPropagateEnterKeyEvent = true;
   combo.listOptionsPosition = { verticalPosition: 29, bottomLimit: getViewPortHeight(eGridCell), hardPosition: true };
+  combo.autoFocus = true;
   return combo;
 };
 export const buildSwitch = (fieldMetadata) => {

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/DateInput.tpl.js

@@ -7,6 +7,7 @@ export const buildDate = () => {
             data-is-fixed="true"
         />`);
   dateInput.valueGetter = () => dateInput.getValueAsync();
+  dateInput.autoFocus = true;
   return dateInput;
 };
 export const buildTime = ({ readOnly }) => {

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/NumberInput.tpl.js

@@ -17,5 +17,6 @@ function buildNumeric(readOnly, precision, prettyPrecision) {
         mode="slim"
     />`);
   input.valueGetter = () => input.getValueAsync();
+  input.autoFocus = true;
   return input;
 }

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/Search.tpl.js

@@ -1,6 +1,8 @@
 import { ApplicationContext, HTMLBuilder } from '@sankhyalabs/core';
 import { getViewPortHeight } from '../GridEditorUtils';
+import { StringUtils } from "@sankhyalabs/core";
 export const buildSearch = ({ name, required, readOnly, eGridCell, dataUnit }) => {
+  var _a;
   const ezSearch = HTMLBuilder.parseElement(`<ez-search
           class="ez-grid grid_editor"
           mode="slim"
@@ -8,9 +10,14 @@ export const buildSearch = ({ name, required, readOnly, eGridCell, dataUnit }) =
           enabled=${!readOnly}
     />`);
   const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__OPTION__LOADER__");
+  const metadata = dataUnit.getField(name);
   ezSearch.optionLoader = (argument) => loader(argument, name, dataUnit);
-  ezSearch.fromGrid = true;
+  ezSearch.ensureClearButtonVisible = true;
+  ezSearch.suppressPreLoad = true;
   ezSearch.listOptionsPosition = { verticalPosition: 29, bottomLimit: getViewPortHeight(eGridCell), hardPosition: true };
+  ezSearch.stopPropagateEnterKeyEvent = true;
+  ezSearch.ignoreLimitCharsToSearch = StringUtils.getBooleanValue((_a = metadata === null || metadata === void 0 ? void 0 : metadata.properties) === null || _a === void 0 ? void 0 : _a.ignoreLimitCharsToSearch);
+  ezSearch.autoFocus = true;
   ezSearch.valueGetter = () => ezSearch.getValueAsync();
   return ezSearch;
 };

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/SearchPlus.tpl.js

@@ -0,0 +1,15 @@
+import { ApplicationContext, HTMLBuilder } from '@sankhyalabs/core';
+export const buildSearchPlus = ({ name, required, readOnly, dataUnit }) => {
+  const ezSearch = HTMLBuilder.parseElement(`<ez-search-plus
+          class="ez-grid grid_editor"
+          mode="slim"
+          suppress-empty-option=${required}
+          enabled=${!readOnly}
+          hide-description-input=${true}
+    />`);
+  const loader = ApplicationContext.getContextValue("__EZUI__SEARCH__PLUS__OPTION__LOADER__");
+  ezSearch.optionLoader = (argument) => loader(argument, name, dataUnit);
+  ezSearch.autoFocus = true;
+  ezSearch.valueGetter = () => ezSearch.getValueAsync();
+  return ezSearch;
+};

package/dist/collection/components/ez-grid/controller/ag-grid/editor/templates/TextInput.tpl.js

@@ -2,12 +2,14 @@ import { HTMLBuilder } from "@sankhyalabs/core";
 const MINIMIUM_WIDTH_TEXTAREA = 210;
 const PADDING_VALUE_TEXTAREA = 12;
 export const buildTextInput = ({ name, contextName }) => {
-  return HTMLBuilder.parseElement(`<ez-text-input
+  const textInput = HTMLBuilder.parseElement(`<ez-text-input
         class="ez-grid grid_editor"
         data-field-name=${name}
         data-context-name=${contextName}
         mode="slim"
     />`);
+  textInput.autoFocus = true;
+  return textInput;
 };
 export const buildTextAreaInput = ({ eGridCell, editionManager }) => {
   const element = HTMLBuilder.parseElement(`<ez-text-area
@@ -17,6 +19,7 @@ export const buildTextAreaInput = ({ eGridCell, editionManager }) => {
   element.addEventListener('keydown', event => handlePressEnterEvent(event, element, editionManager));
   setElementInitialWidth(eGridCell, element);
   element.isPopUp = true;
+  element.autoFocus = true;
   return element;
 };
 function setElementInitialWidth(eGridCell, element) {

package/dist/collection/components/ez-grid/controller/ag-grid/test/constants/GridEditionMock.js

@@ -36,5 +36,7 @@ export function buildOptions(dataUnit) {
     serverURL: '',
     statusResolver: {},
     useEnterLikeTab: true,
+    enableContinuousInsert: false,
+    enableGridInsert: false,
   });
 }

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

@@ -11,9 +11,19 @@
   /*@doc Define o z-index do componente selection counter.*/
   --ez-grid__selection-counter--z-index: var(--visible, 1);
   /*@doc Define o sombreamento usado como borda.*/
-  --ez-grid__container--shadow: 0 0 16px 0 rgb(0 38 111 / 12%);
+  --ez-grid__container--shadow: var(--shadow);
   /*@doc Define altura mínima da grid */
   --ez-grid--min-height: 300px;
+  /*@doc Define o outline usado como borda.*/
+  --ez-grid__container--shadow--outline: var(--shadow--outline) var(--color--strokes);
+  /*@doc Define a sombra do header.*/
+  --ez-grid__header--shadow: var(--shadow--xsmall);
+  /*@doc Define o outline usado como borda do header.*/
+  --ez-grid__header--shadow--outline: var(--shadow--outline) var(--color--strokes);
+  /*@doc Define o outline do header.*/
+  --ez-grid__header--outline: none;
+  /*@doc Define a borda do header.*/
+  --ez-grid__header--border: none;
 
   min-height: var(--ez-grid--min-height);
 }
@@ -27,15 +37,47 @@
   background-color: var(--ez-grid__header--background-color, #FFF);
 }
 
-.grid__container {
-  /*private*/
+.grid-header.shadow-mode {
+  box-shadow: var(--ez-grid__header--shadow);
+  border: var(--ez-grid__header--border);
+  outline: var(--ez-grid__header--outline);
+}
+
+.grid-header.outline-mode {
+  box-shadow: var(--ez-grid__header--shadow--outline);
+  border: var(--ez-grid__header--border);
+  outline: var(--ez-grid__header--outline);
+}
+
+.header-overlay {
   padding-top: 15px;
   margin-top: -12px;
+}
+
+.grid__container {
+  /*private*/
   outline: none;
 
   /*public*/
   box-shadow: var(--ez-grid__container--shadow);
   background-color: var(--ez-grid__header--background-color);
+  border: var(--border--small) var(--color--strokes);
+  border-radius: var(--border--radius-small);
+}
+
+.grid__container.no-scroll{
+  width: 100vw;
+}
+
+:host(:not([no-header])) .grid__container {
+  border: none;
+}
+
+.grid__container.outline-mode {
+  /*public*/
+  box-shadow: var(--ez-grid__container--shadow--outline);
+  border: none;
+  outline: none;
 }
 
 .grid-header__popover {
@@ -47,6 +89,8 @@
   /*private*/
   display: flex;
   align-items: center;
+  flex-grow: 1;
+  flex-shrink: 1;
 }
 
 .grid-header__position {
@@ -99,14 +143,10 @@
 }
 
 .grid-header__pagination{
-  width: 30%;
-  min-width: 100px;
   justify-content: flex-end;
-  flex-wrap: wrap;
-}
-
-.grid-header__left-container{
-  width: 70%
+  flex-wrap: nowrap;
+  flex-shrink: 1;
+  flex-grow: 1;
 }
 
 .grid-header__pagination-label {
@@ -117,3 +157,60 @@
 .overflowed {
   display: none;
 }
+
+.pagination-contracted {
+  width: 100px;
+}
+
+.pagination-expanded{
+  min-width: 150px;
+}
+
+.left__header-contracted {
+  width: auto;
+}
+
+.left__header-expanded{
+  flex-grow: 1;
+}
+
+.grid__footer{
+  background-color: var(--background--xlight, #FFF);
+  border-radius: 0 0 var(--border--radius-medium) var(--border--radius-medium);
+  box-shadow: var(--shadow--small);
+}
+
+.cancel-pagination{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  padding: 8px;
+  width: 180px;
+}
+
+.cancel-pagination-btn{
+  color: var(--color--error);
+  font-size: var(--text--medium);
+  font-weight: var(--text-weight--large);
+  font-family: var(--font-pattern, Roboto);
+  text-wrap: nowrap;
+  cursor: pointer;
+}
+
+.spin {
+  animation-name: spin;
+  animation-duration: 5000ms;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+@keyframes spin {
+  from {
+    transform:rotate(0deg);
+  }
+  to {
+    transform:rotate(360deg);
+  }
+}