@sankhyalabs/ezui 7.2.0-dev.2 → 7.2.0-dev.20

package/dist/collection/collection-manifest.json

@@ -50,6 +50,7 @@
     "./components/ez-form-view/ez-form-view.js",
     "./components/ez-form-view/custom-input/ez-custom-form-input.js",
     "./components/ez-grid/ez-grid.js",
+    "./components/ez-grid-pagination/ez-grid-pagination.js",
     "./components/ez-grid-view/ez-grid-view.js",
     "./components/ez-guide-navigator/ez-guide-navigator.js",
     "./components/ez-icon/ez-icon.js",
@@ -65,6 +66,7 @@
     "./components/ez-popover-plus/subcomponent/ez-popover-core.js",
     "./components/ez-popup/ez-popup.js",
     "./components/ez-progress-bar/ez-progress-bar.js",
+    "./components/ez-record-navigation/ez-record-navigation.js",
     "./components/ez-rich-text/ez-rich-text.js",
     "./components/ez-rich-text/ez-link-builder/ez-link-builder.js",
     "./components/ez-rich-text/ez-rich-toolbar/ez-rich-toolbar.js",
@@ -218,6 +220,11 @@
         "ez-grid"
       ]
     },
+    {
+      "components": [
+        "ez-grid-pagination"
+      ]
+    },
     {
       "components": [
         "ez-grid-view"

package/dist/collection/components/ez-classic-combo-box/ez-classic-combo-box.js

@@ -110,12 +110,13 @@ export class EzClassicComboBox {
     this.filterOptions('');
   }
   async valueChanged(newValue, oldValue) {
+    var _a;
     if (this.compareOptionValues(newValue, oldValue)) {
       return;
     }
     if (newValue) {
       this.value = this.getFullOption(newValue);
-      this.inputValue = this.value.label;
+      this.inputValue = (_a = this.value) === null || _a === void 0 ? void 0 : _a.label;
       this.setHighlightedIndexToValue();
     }
     else {

package/dist/collection/components/ez-classic-date-input/ez-classic-date-input.js

@@ -175,7 +175,7 @@ export class EzClassicDateInput {
   }
   render() {
     ElementIDUtils.addIDInfoIfNotExists(this._elem, 'input');
-    return (h(Host, null, h("ez-classic-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (elem) => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), restrict: "0123456789/", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, size: this.size, canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder, required: this.required, leftIconName: "calendar", leftIconClickable: this.enabled, onIconClick: () => { var _a; return (_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput); }, onEzChange: (event) => event.stopPropagation() }), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', "data-element-id": this._elem.getAttribute("data-element-id"), onEzVisibilityChange: (event) => event.stopPropagation() }, h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => this.handleChangeCalendar(event), value: this.value }))));
+    return (h(Host, null, h("ez-classic-input", { "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), ref: (elem) => this._textInput = elem, "data-slave-mode": "true", label: this.label, onBlur: () => this.handleBlur(), onInput: (evt) => this.handleInput(evt), mask: "##/##/####", enabled: this.enabled, errorMessage: this.errorMessage, mode: this.mode, size: this.size, canShowError: this.canShowError, alternativePlaceholder: this.alternativePlaceholder, required: this.required, leftIconName: "calendar", leftIconClickable: this.enabled, onIconClick: () => { var _a; return (_a = this._popover) === null || _a === void 0 ? void 0 : _a.showUnder(this._textInput); }, onEzChange: (event) => event.stopPropagation() }), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this._textInput, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', "data-element-id": this._elem.getAttribute("data-element-id"), onEzVisibilityChange: (event) => event.stopPropagation() }, h("ez-calendar", { ref: elem => this._calendar = elem, "data-element-id": ElementIDUtils.getInternalIDInfo("calendar"), onEzChange: (event) => this.handleChangeCalendar(event), value: this.value }))));
   }
   static get is() { return "ez-classic-date-input"; }
   static get encapsulation() { return "shadow"; }

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

@@ -107,12 +107,57 @@ export class EzClassicInput {
     const cleanValue = this._maskFormatter.removeMask(formattedValue);
     return { formattedValue, cleanValue };
   }
+  isDataChar(char) {
+    return /[a-zA-Z0-9]/.test(char);
+  }
+  countDataCharsBefore(value, pos) {
+    let count = 0;
+    for (let i = 0; i < pos && i < value.length; i++) {
+      if (this.isDataChar(value[i]))
+        count++;
+    }
+    return count;
+  }
+  skipLeadingSeparators(value, pos) {
+    while (pos < value.length && !this.isDataChar(value[pos])) {
+      pos++;
+    }
+    return pos;
+  }
+  findPositionAfterDataChars(formattedValue, targetCount) {
+    let count = 0;
+    for (let i = 0; i <= formattedValue.length; i++) {
+      if (count === targetCount) {
+        return this.skipLeadingSeparators(formattedValue, i);
+      }
+      if (i < formattedValue.length && this.isDataChar(formattedValue[i])) {
+        count++;
+      }
+    }
+    return formattedValue.length;
+  }
+  getCursorPositionAfterFormat(rawValue, formattedValue, cursorPos) {
+    const dataCharCount = this.countDataCharsBefore(rawValue, cursorPos);
+    return this.findPositionAfterDataChars(formattedValue, dataCharCount);
+  }
+  restoreCursorSelection(inputElement, rawValue, formattedValue, savedStart, savedEnd) {
+    const newStart = this.getCursorPositionAfterFormat(rawValue, formattedValue, savedStart);
+    const newEnd = savedStart === savedEnd
+      ? newStart
+      : this.getCursorPositionAfterFormat(rawValue, formattedValue, savedEnd);
+    inputElement.setSelectionRange(newStart, newEnd);
+  }
   updateInputValue(inputElement, formattedValue, cleanValue) {
+    const rawValue = inputElement.value;
+    const savedStart = inputElement.selectionStart;
+    const savedEnd = inputElement.selectionEnd;
     inputElement.value = formattedValue;
+    if (savedStart !== null && savedEnd !== null) {
+      this.restoreCursorSelection(inputElement, rawValue, formattedValue, savedStart, savedEnd);
+    }
     this._internalValueChange = true;
     this.value = cleanValue;
-    const emitValue = this.emitMaskedValue ? formattedValue : cleanValue;
-    this.ezChange.emit(emitValue);
+    this.ezChange.emit(this.emitMaskedValue ? formattedValue : cleanValue);
   }
   updateInputValueWithoutMask(inputValue) {
     this._internalValueChange = true;

package/dist/collection/components/ez-classic-input/utils/maskFormatter.js

@@ -6,6 +6,7 @@ export class MaskFormatter {
       'U': (char) => /[a-zA-Z]/.test(char),
       'L': (char) => /[a-zA-Z]/.test(char),
       'A': (char) => /[a-zA-Z0-9]/.test(char),
+      'Z': (char) => /[a-zA-Z0-9]/.test(char),
       '?': (char) => /[a-zA-Z]/.test(char),
       '*': () => true
     };
@@ -35,7 +36,7 @@ export class MaskFormatter {
       }
       if (this.maskChars[maskChar]) {
         if (this.maskChars[maskChar](inputChar)) {
-          if (maskChar === 'U') {
+          if (maskChar === 'U' || maskChar === 'Z') {
             formattedValue += inputChar.toUpperCase();
           }
           else if (maskChar === 'L') {

package/dist/collection/components/ez-classic-search-plus/ez-classic-search-plus.css

@@ -86,6 +86,9 @@
   /*@doc Define a largura da barra de rolagem do componente.*/
   --ez-classic-search__scrollbar--width: var(--space--medium, 12px);
 
+  /*@doc Define a cor do texto de ajuda do input.*/
+  --ez-classic-input--helptext-color: var(--color--ocean-green-1000, #00281D);
+
   /***************
      host style  
   ***************/
@@ -96,6 +99,7 @@
 
   /*public*/
   width: var(--ez-classic-search--width);
+  font-family: var(--font--pattern, Arial, sans-serif);
 }
 
 ez-icon {
@@ -403,4 +407,22 @@ ez-classic-input:hover .btn__close, ez-c-input:focus .btn__close {
   color: var(--color--red-600, #BD0025);
   margin-left: var(--space--4, 4px);
   vertical-align: top;
+}
+
+.ez-classic-search-plus__error-container {
+  display: flex;
+  flex-grow: 1;
+  gap: 3px;
+  overflow: hidden;
+}
+
+.ez-classic-search-plus__error-container span {
+  font-size: var(--font-size--xsmall, 10px);
+  line-height: var(--line-height--16, 16px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  animation: ez-helptext-fadein 0.3s ease;
+
+  /* public */
+  color: var(--ez-classic-input--helptext-color);
 }

package/dist/collection/components/ez-classic-search-plus/ez-classic-search-plus.js

@@ -38,6 +38,8 @@ export class EzClassicSearchPlus {
     this.searchDescriptionIsOpen = false;
     this.visibleOptions = undefined;
     this.showLoading = true;
+    this.canShowClearButton = false;
+    this.isHoveringDescription = false;
   }
   async observeValue(newValue, oldValue) {
     var _a;
@@ -51,11 +53,11 @@ export class EzClassicSearchPlus {
       return;
     }
     if (newNormalizedValue === undefined) {
-      this.codeValue = undefined;
-      this.descriptionValue = undefined;
+      this.clearSearch();
       this.ezChange.emit(undefined);
       return;
     }
+    this.canShowClearButton = this.getClearButtonStatus();
     this.codeValue = newNormalizedValue;
     try {
       this.descriptionValue = await this.normalizeCodeToDescriptionValue(newValue);
@@ -149,12 +151,14 @@ export class EzClassicSearchPlus {
     }
   }
   clearSearch() {
-    this.value = null;
-    this.codeValue = null;
-    this.descriptionValue = null;
+    this._textInputCodeValue.value = null;
     if (!this.hideDescriptionInput) {
       this._textInputDescriptionValue.value = null;
     }
+    this.value = null;
+    this.codeValue = null;
+    this.descriptionValue = null;
+    this.canShowClearButton = false;
   }
   async normalizeCodeToDescriptionValue(valueToNormalize) {
     if (!valueToNormalize) {
@@ -198,7 +202,7 @@ export class EzClassicSearchPlus {
   }
   async loadDescriptionValueByCode(codeValue) {
     if (!this.optionLoader) {
-      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
+      console.warn(this.i18n("ez-classic-search-plus.optionLoaderNotDefined"));
       return "";
     }
     try {
@@ -228,7 +232,7 @@ export class EzClassicSearchPlus {
   }
   async loadAdvancedSearch() {
     if (!this.optionLoader) {
-      console.warn(this.i18n("ez-search-plus.optionLoaderNotDefined"));
+      console.warn(this.i18n("ez-classic-search-plus.optionLoaderNotDefined"));
       return;
     }
     const searchArgument = { mode: SearchMode.ADVANCED, argument: "" };
@@ -255,6 +259,7 @@ export class EzClassicSearchPlus {
       this._popover.showUnder(this.el);
     }
     const argument = event.target.value;
+    this.canShowClearButton = this.getClearButtonStatus();
     await this.debounceLoaderOptions(argument);
   }
   async debounceLoaderOptions(argument) {
@@ -373,15 +378,23 @@ export class EzClassicSearchPlus {
     event.stopPropagation();
     this.searchDescriptionIsOpen = event.detail;
   }
-  render() {
+  getClearButtonStatus() {
     var _a, _b;
+    if (this.ensureClearButtonVisible) {
+      return true;
+    }
+    if (((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) || ((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value)) {
+      return true;
+    }
+    return !!this.value;
+  }
+  render() {
     ElementIDUtils.addIDInfoIfNotExists(this.el, 'input');
-    const canShowClearButton = !this.ensureClearButtonVisible && (!this.value && !((_a = this._textInputCodeValue) === null || _a === void 0 ? void 0 : _a.value) && !((_b = this._textInputDescriptionValue) === null || _b === void 0 ? void 0 : _b.value));
     return (h(Host, null, h("div", { class: "ez-classic-search-plus__wrapper" }, h("div", { class: "ez-classic-search-plus__label-container" }, h("label", { title: this.label }, this.label), this.required && h("span", { class: "required-indicator" }, "*")), h("div", { class: "ez-classic-search-plus__container" }, h("ez-classic-input", { ref: (elem) => this._textInputCodeValue = elem, class: {
         "ez-classic-search-plus__code-input": !this.hideDescriptionInput,
         "ez-classic-search-plus__code-input-no-border": !this.hideDescriptionInput,
         "ez-classic-search-plus__code-input-full": this.hideDescriptionInput
-      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, size: this.size, label: null, errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus(), leftIconName: "search", leftIconClickable: this.enabled, onIconClick: () => this.handleSearchClick(), onEzChange: (event) => event.stopPropagation() }), !this.hideDescriptionInput && (h("div", { class: "description-input-container" }, h("ez-classic-input", { ref: (elem) => this._textInputDescriptionValue = elem, tabIndex: -1, class: { "ez-classic-search-plus__text-input": true }, "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: null, errorMessage: this.errorMessage, size: this.size, value: this.descriptionValue, onInput: (event) => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus(), rightIconName: canShowClearButton ? "close" : null, rightIconClickable: this.enabled, onIconClick: () => this.clearSearch(), onEzChange: (event) => event.stopPropagation() }), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event), "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-classic-search-result-list", { ref: (ref) => this._classicSearchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) }))))))));
+      }, "data-element-id": ElementIDUtils.getInternalIDInfo("codeInput"), "data-slave-mode": "true", enabled: !this.disableCodeInput && this.enabled, size: this.size, label: null, errorMessage: this.hideDescriptionInput ? this.errorMessage : "", value: this.codeValue, onFocusout: () => this.handleCodeInputFocusOut(), onFocus: () => this.handleCodeInputFocus(), leftIconName: "search", leftIconClickable: this.enabled, onIconClick: () => this.handleSearchClick(), onEzChange: (event) => event.stopPropagation(), state: this.errorMessage && this.canShowError ? "error" : "default" }), !this.hideDescriptionInput && (h("div", { class: "description-input-container", onMouseEnter: () => this.isHoveringDescription = true, onMouseLeave: () => this.isHoveringDescription = false }, h("ez-classic-input", { ref: (elem) => this._textInputDescriptionValue = elem, tabIndex: -1, class: { "ez-classic-search-plus__text-input": true }, "data-element-id": ElementIDUtils.getInternalIDInfo("textInput"), "data-slave-mode": "true", enabled: !this.disableDescriptionInput && this.enabled, label: null, size: this.size, value: this.descriptionValue, onInput: (event) => this.handleTextInputChangeHandler(event), onFocus: () => this.handleDescriptionInputFocus(), rightIconName: this.canShowClearButton && this.isHoveringDescription ? "close" : null, rightIconClickable: this.enabled, onIconClick: () => this.clearSearch(), onEzChange: (event) => event.stopPropagation(), rightIconTooltip: this.i18n("ez-classic-search-plus.clearValue"), state: this.errorMessage && this.canShowError ? "error" : "default" }), h("ez-popover-plus", { ref: elem => this._popover = elem, anchorElement: this.el, autoClose: true, boxWidth: 'fit-content', overlayType: 'none', useAnchorSize: true, onEzVisibilityChange: (event) => this.handleOnEzVisibilityChange(event), "data-element-id": this.el.getAttribute("data-element-id") }, h("ez-classic-search-result-list", { ref: (ref) => this._classicSearchList = ref, showLoading: this.showLoading, visibleOptions: this.visibleOptions, value: this.value, showOptionValue: this.showOptionValue, onChangeValue: (evt) => this.handleSelectItem(evt) }))))), h("div", { class: "ez-classic-search-plus__error-container" }, h("span", null, this.errorMessage)))));
   }
   static get is() { return "ez-classic-search-plus"; }
   static get encapsulation() { return "shadow"; }
@@ -859,7 +872,9 @@ export class EzClassicSearchPlus {
       "isLoadingDescription": {},
       "searchDescriptionIsOpen": {},
       "visibleOptions": {},
-      "showLoading": {}
+      "showLoading": {},
+      "canShowClearButton": {},
+      "isHoveringDescription": {}
     };
   }
   static get events() {

package/dist/collection/components/ez-classic-time-input/ez-classic-time-input.js

@@ -161,7 +161,7 @@ export class EzClassicTimeInput {
       value: this._viewValue,
       enabled: this.enabled,
       label: this.label,
-      restrict: "0123456789:",
+      mask: this.showSeconds ? "##:##:##" : "##:##",
       onBlur: () => this.handleBlur(),
       onInput: () => this.handleInput(),
       errorMessage: this.errorMessage,
@@ -169,7 +169,8 @@ export class EzClassicTimeInput {
       size: this.size,
       canShowError: this.canShowError,
       alternativePlaceholder: this.alternativePlaceholder,
-      required: this.required
+      required: this.required,
+      onEzChange: (event) => event.stopPropagation()
     };
     return (h(Host, null, h("ez-classic-input", Object.assign({}, inputProps, { leftIconName: "timer-outline" }))));
   }

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

@@ -3,7 +3,7 @@
   /*@doc Define a posição do componente.*/
   --ez-dropdown--z-index: var(--more-visible, 2);
   /*@doc Define o espaçamento interno do componente.*/
-  --ez-dropdown--padding: var(--space--small, 6px);
+  --ez-dropdown--padding: var(--space--16, 16px);
   /*@doc Define a sombra externa do componente.*/
   --ez-dropdown--box-shadow: var(--shadow--medium, 0px 8px 24px rgba(0, 38, 111, 0.1));
   /*@doc Define o raio da borda do componente.*/

package/dist/collection/components/ez-empty-card/ez-empty-card.js

@@ -16,7 +16,7 @@ export class EzEmptyCard {
     }
   }
   render() {
-    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}px` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}px` } : {}));
+    const customStyleVars = Object.assign(Object.assign({}, (this.height ? { '--ez-empty-card--custom-height': `${this.height}${typeof this.height == "number" ? 'px' : ''}` } : {})), (this.width ? { '--ez-empty-card--custom-width': `${this.width}${typeof this.width == "number" ? 'px' : ''}` } : {}));
     return (h(Host, { style: customStyleVars }, h("div", { ref: element => this._container = element, class: `card_container ${this.color}` }, h("slot", null))));
   }
   static get is() { return "ez-empty-card"; }
@@ -52,11 +52,11 @@ export class EzEmptyCard {
         "defaultValue": "\"default\""
       },
       "height": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,
@@ -69,11 +69,11 @@ export class EzEmptyCard {
         "reflect": true
       },
       "width": {
-        "type": "number",
+        "type": "any",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "number | string",
+          "resolved": "number | string",
           "references": {}
         },
         "required": false,

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

@@ -48,6 +48,7 @@ export default class AgGridController {
     this.DEFAULT_FONT_SIZE_HTML5 = 32;
     this.DEFAULT_ICON_SIZE = 40;
     this.DEFAULT_MAX_SIZE = 300;
+    this.MULTI_VALUES_PROP = '__multiValues';
     this._menuItems = [];
     this._idAttribName = '__record__id__';
     this._gridConfig = [];
@@ -126,21 +127,24 @@ export default class AgGridController {
         const params = [];
         let isNullIncluded;
         checkedOptions.forEach(option => {
-          const paramName = `PARAM_${column}_${params.length + 1}`;
-          params.push({
-            dataType: dataType === DataType.OBJECT ? DataType.TEXT : dataType,
-            name: paramName,
-            value: option.value,
-          });
-          if (option.value == undefined) {
-            isNullIncluded = true;
-          }
-          else {
-            if (placeholders.length > 0) {
-              placeholders = placeholders + ',';
+          const optionValues = this.resolveColumnFilterValues(option);
+          optionValues.forEach(value => {
+            const paramName = `PARAM_${column}_${params.length + 1}`;
+            params.push({
+              dataType: dataType === DataType.OBJECT ? DataType.TEXT : dataType,
+              name: paramName,
+              value,
+            });
+            if (value == undefined) {
+              isNullIncluded = true;
             }
-            placeholders = `${placeholders}:${paramName}`;
-          }
+            else {
+              if (placeholders.length > 0) {
+                placeholders = placeholders + ',';
+              }
+              placeholders = `${placeholders}:${paramName}`;
+            }
+          });
         });
         return {
           name: `${DISTINCT_FILTER_NAME_PREFIX}${column}`,
@@ -162,6 +166,13 @@ export default class AgGridController {
     }
     return `${columnExpression} in (${placeholders})`;
   }
+  resolveColumnFilterValues(option) {
+    const multiValues = option === null || option === void 0 ? void 0 : option[this.MULTI_VALUES_PROP];
+    if (Array.isArray(multiValues) && multiValues.length > 0) {
+      return multiValues;
+    }
+    return [option.value];
+  }
   initDatagrid(container, options) {
     var _a;
     this._options = options;

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

@@ -59,10 +59,8 @@
   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);
+  border-radius: var(--border--radius-12, 12px) var(--border--radius-12, 12px) 0 0;
 }
 
 .grid__container.no-scroll{
@@ -142,30 +140,10 @@
   padding: 0;
 }
 
-.grid-header__pagination{
-  justify-content: flex-end;
-  flex-wrap: nowrap;
-  flex-shrink: 1;
-  flex-grow: 1;
-}
-
-.grid-header__pagination-label {
-  width: 100%;
-  white-space: nowrap
-}
-
 .overflowed {
   display: none;
 }
 
-.pagination-contracted {
-  width: 100px;
-}
-
-.pagination-expanded{
-  min-width: 150px;
-}
-
 .left__header-contracted {
   width: auto;
 }
@@ -176,41 +154,4 @@
 
 .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);
-  }
 }