s4y-ui 2.4.1 → 2.4.2

package/fesm2022/s4y-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, ViewEncapsulation, output, TemplateRef } from '@angular/core';
+import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, ViewEncapsulation, output, effect, Inject, TemplateRef } from '@angular/core';
 import * as i1 from '@angular/common';
-import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, NgIf, NgStyle } from '@angular/common';
+import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, DOCUMENT, NgIf, NgStyle } from '@angular/common';
 import * as i1$1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$2 from '@angular/router';
@@ -962,11 +962,11 @@ class DrawerComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DrawerComponent, isStandalone: true, selector: "s4y-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hasCloseButton: { classPropertyName: "hasCloseButton", publicName: "hasCloseButton", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "document:keydown.escape": "closeOnPressEscapeKey($event)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "@if(isVisible()){\r\n<div\r\n  [@drawerAnimation]=\"{\r\n    value: '',\r\n    params: {\r\n      transformFrom: transformFrom(),\r\n      transformTo: transformTo()\r\n    }\r\n  }\"\r\n  [class.s4y-overlay]=\"backdrop()\"\r\n  (click)=\"onBackdropClick($event)\"\r\n>\r\n  <div\r\n    [style.maxWidth]=\"drawerSize().width\"\r\n    [style.maxHeight]=\"drawerSize().height\"\r\n    [ngClass]=\"{\r\n      's4y-drawer-left': position() === 'left',\r\n      's4y-drawer-right': position() === 'right',\r\n      's4y-drawer-top': position() === 'top',\r\n      's4y-drawer-bottom': position() === 'bottom'\r\n    }\"\r\n    class=\"s4y-drawer-container\"\r\n  >\r\n    <header class=\"s4y-header\">\r\n      @if(headerTemplate) {\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n      }\r\n      <!--  -->\r\n      @else {\r\n      <h3>{{ title() }}</h3>\r\n      @if (hasCloseButton()) {\r\n      <button (click)=\"close()\">&times;</button>\r\n      } }\r\n    </header>\r\n\r\n    <div class=\"s4y-body-content\">\r\n      <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n    </div>\r\n    @if(footerTemplate) {\r\n    <div class=\"s4y-footer-content\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".s4y-overlay{background-color:#000000b3;height:100dvh;width:100dvw;position:fixed;top:0;left:0;z-index:var(--z-index-drawer)}.s4y-drawer-container{position:fixed;width:100%;height:100dvh;display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--gray-300);box-shadow:#00000029 0 1px 4px}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-drawer-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-drawer-container{width:90%}}.s4y-header{padding:1.8rem;display:flex;align-items:center;justify-content:space-between}.s4y-header button{height:100%;display:inline-block;width:2.8rem;font-size:2.2rem}.s4y-body-content{flex-grow:1;overflow-y:auto;padding-bottom:1.8rem}.s4y-drawer-left{left:0}.s4y-drawer-left .s4y-body-content{padding-left:1.8rem}.s4y-drawer-right{right:0}.s4y-drawer-right .s4y-body-content{padding-left:1.8rem}.s4y-drawer-top{top:0;width:100dvw}.s4y-drawer-top .s4y-body-content{padding-left:1.8rem}.s4y-drawer-bottom{width:100dvw;bottom:0}.s4y-drawer-bottom .s4y-body-content{padding-left:1.8rem}.s4y-footer-content{padding:1.8rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [drawerAnimation] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DrawerComponent, isStandalone: true, selector: "s4y-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hasCloseButton: { classPropertyName: "hasCloseButton", publicName: "hasCloseButton", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "document:keydown.escape": "closeOnPressEscapeKey($event)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "@if (isVisible()) {\r\n  <div\r\n    [@drawerAnimation]=\"{\r\n      value: '',\r\n      params: {\r\n        transformFrom: transformFrom(),\r\n        transformTo: transformTo(),\r\n      },\r\n    }\"\r\n    [class.s4y-overlay]=\"backdrop()\"\r\n    (click)=\"onBackdropClick($event)\"\r\n  >\r\n    <div\r\n      [style.maxWidth]=\"drawerSize().width\"\r\n      [style.maxHeight]=\"drawerSize().height\"\r\n      [ngClass]=\"{\r\n        's4y-drawer-left': position() === 'left',\r\n        's4y-drawer-right': position() === 'right',\r\n        's4y-drawer-top': position() === 'top',\r\n        's4y-drawer-bottom': position() === 'bottom',\r\n      }\"\r\n      class=\"s4y-drawer-container\"\r\n    >\r\n      <header class=\"s4y-header\">\r\n        @if (headerTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n        }\r\n        <!--  -->\r\n        @else {\r\n          <p class=\"s4y-header__title\">{{ title() }}</p>\r\n          @if (hasCloseButton()) {\r\n            <button (click)=\"close()\">&times;</button>\r\n          }\r\n        }\r\n      </header>\r\n\r\n      <div class=\"s4y-body-content\">\r\n        <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n      </div>\r\n      @if (footerTemplate) {\r\n        <div class=\"s4y-footer-content\">\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-overlay{background-color:#000000b3;height:100dvh;width:100dvw;position:fixed;top:0;left:0;z-index:var(--z-index-drawer)}.s4y-drawer-container{position:fixed;width:100%;height:100dvh;display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--gray-300);box-shadow:#00000029 0 1px 4px}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-drawer-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-drawer-container{width:90%}}.s4y-header{padding:1.8rem;display:flex;align-items:center;justify-content:space-between}.s4y-header .s4y-header__title{font-size:1.8rem;font-weight:700}.s4y-header button{height:100%;display:inline-block;width:2.8rem;font-size:2.2rem}.s4y-body-content{flex-grow:1;overflow-y:auto;padding-bottom:1.8rem}.s4y-drawer-left{left:0}.s4y-drawer-left .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-right{right:0}.s4y-drawer-right .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-top{top:0;width:100dvw}.s4y-drawer-top .s4y-body-content{padding-left:1.8rem}.s4y-drawer-bottom{width:100dvw;bottom:0}.s4y-drawer-bottom .s4y-body-content{padding-left:1.8rem}.s4y-footer-content{padding:1.8rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [drawerAnimation] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-drawer', imports: [NgClass, NgTemplateOutlet], animations: [drawerAnimation], template: "@if(isVisible()){\r\n<div\r\n  [@drawerAnimation]=\"{\r\n    value: '',\r\n    params: {\r\n      transformFrom: transformFrom(),\r\n      transformTo: transformTo()\r\n    }\r\n  }\"\r\n  [class.s4y-overlay]=\"backdrop()\"\r\n  (click)=\"onBackdropClick($event)\"\r\n>\r\n  <div\r\n    [style.maxWidth]=\"drawerSize().width\"\r\n    [style.maxHeight]=\"drawerSize().height\"\r\n    [ngClass]=\"{\r\n      's4y-drawer-left': position() === 'left',\r\n      's4y-drawer-right': position() === 'right',\r\n      's4y-drawer-top': position() === 'top',\r\n      's4y-drawer-bottom': position() === 'bottom'\r\n    }\"\r\n    class=\"s4y-drawer-container\"\r\n  >\r\n    <header class=\"s4y-header\">\r\n      @if(headerTemplate) {\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n      }\r\n      <!--  -->\r\n      @else {\r\n      <h3>{{ title() }}</h3>\r\n      @if (hasCloseButton()) {\r\n      <button (click)=\"close()\">&times;</button>\r\n      } }\r\n    </header>\r\n\r\n    <div class=\"s4y-body-content\">\r\n      <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n    </div>\r\n    @if(footerTemplate) {\r\n    <div class=\"s4y-footer-content\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".s4y-overlay{background-color:#000000b3;height:100dvh;width:100dvw;position:fixed;top:0;left:0;z-index:var(--z-index-drawer)}.s4y-drawer-container{position:fixed;width:100%;height:100dvh;display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--gray-300);box-shadow:#00000029 0 1px 4px}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-drawer-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-drawer-container{width:90%}}.s4y-header{padding:1.8rem;display:flex;align-items:center;justify-content:space-between}.s4y-header button{height:100%;display:inline-block;width:2.8rem;font-size:2.2rem}.s4y-body-content{flex-grow:1;overflow-y:auto;padding-bottom:1.8rem}.s4y-drawer-left{left:0}.s4y-drawer-left .s4y-body-content{padding-left:1.8rem}.s4y-drawer-right{right:0}.s4y-drawer-right .s4y-body-content{padding-left:1.8rem}.s4y-drawer-top{top:0;width:100dvw}.s4y-drawer-top .s4y-body-content{padding-left:1.8rem}.s4y-drawer-bottom{width:100dvw;bottom:0}.s4y-drawer-bottom .s4y-body-content{padding-left:1.8rem}.s4y-footer-content{padding:1.8rem}\n"] }]
+            args: [{ selector: 's4y-drawer', imports: [NgClass, NgTemplateOutlet], animations: [drawerAnimation], template: "@if (isVisible()) {\r\n  <div\r\n    [@drawerAnimation]=\"{\r\n      value: '',\r\n      params: {\r\n        transformFrom: transformFrom(),\r\n        transformTo: transformTo(),\r\n      },\r\n    }\"\r\n    [class.s4y-overlay]=\"backdrop()\"\r\n    (click)=\"onBackdropClick($event)\"\r\n  >\r\n    <div\r\n      [style.maxWidth]=\"drawerSize().width\"\r\n      [style.maxHeight]=\"drawerSize().height\"\r\n      [ngClass]=\"{\r\n        's4y-drawer-left': position() === 'left',\r\n        's4y-drawer-right': position() === 'right',\r\n        's4y-drawer-top': position() === 'top',\r\n        's4y-drawer-bottom': position() === 'bottom',\r\n      }\"\r\n      class=\"s4y-drawer-container\"\r\n    >\r\n      <header class=\"s4y-header\">\r\n        @if (headerTemplate) {\r\n          <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n        }\r\n        <!--  -->\r\n        @else {\r\n          <p class=\"s4y-header__title\">{{ title() }}</p>\r\n          @if (hasCloseButton()) {\r\n            <button (click)=\"close()\">&times;</button>\r\n          }\r\n        }\r\n      </header>\r\n\r\n      <div class=\"s4y-body-content\">\r\n        <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n      </div>\r\n      @if (footerTemplate) {\r\n        <div class=\"s4y-footer-content\">\r\n          <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-overlay{background-color:#000000b3;height:100dvh;width:100dvw;position:fixed;top:0;left:0;z-index:var(--z-index-drawer)}.s4y-drawer-container{position:fixed;width:100%;height:100dvh;display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--gray-300);box-shadow:#00000029 0 1px 4px}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-drawer-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-drawer-container{width:90%}}.s4y-header{padding:1.8rem;display:flex;align-items:center;justify-content:space-between}.s4y-header .s4y-header__title{font-size:1.8rem;font-weight:700}.s4y-header button{height:100%;display:inline-block;width:2.8rem;font-size:2.2rem}.s4y-body-content{flex-grow:1;overflow-y:auto;padding-bottom:1.8rem}.s4y-drawer-left{left:0}.s4y-drawer-left .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-right{right:0}.s4y-drawer-right .s4y-body-content{padding-left:1.8rem;padding-right:1.8rem}.s4y-drawer-top{top:0;width:100dvw}.s4y-drawer-top .s4y-body-content{padding-left:1.8rem}.s4y-drawer-bottom{width:100dvw;bottom:0}.s4y-drawer-bottom .s4y-body-content{padding-left:1.8rem}.s4y-footer-content{padding:1.8rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { headerTemplate: [{
                 type: ContentChild,
                 args: ['headerTemplate']
@@ -1009,11 +1009,11 @@ class TableComponent {
     errorMessageDefault = input('Não foi possível carregar os dados.');
     emptyMessageDefault = input(' Não encontramos dados para exibir.');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\">\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of data(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 1.4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\">\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of data(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 .4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\">\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of data(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 1.4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"] }]
+            args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\">\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of data(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 .4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"] }]
         }], propDecorators: { rowTemplate: [{
                 type: ContentChild,
                 args: ['rowTemplate']
@@ -1175,10 +1175,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
 const modalFadeCombined = trigger('modalFadeCombined', [
     transition(':enter', [
         group([
-            query('.s4y-backdrop', [
-                style({ opacity: 0 }),
-                animate('200ms ease-out', style({ opacity: 1 })),
-            ]),
+            style({ opacity: 0 }),
+            animate('200ms ease-out', style({ opacity: 1 })),
+            // query('.s4y-backdrop', [
+            //   style({ opacity: 0 }),
+            //   animate('200ms ease-out', style({ opacity: 1 })),
+            // ]),
             query('.s4y-modal-container', [
                 style({ opacity: 0, transform: 'translateY(20px)' }),
                 animate('250ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
@@ -1187,9 +1189,11 @@ const modalFadeCombined = trigger('modalFadeCombined', [
     ]),
     transition(':leave', [
         group([
-            query('.s4y-backdrop', [
-                animate('200ms ease-in', style({ opacity: 0 })),
-            ]),
+            style({ opacity: 1 }),
+            animate('200ms ease-in', style({ opacity: 0 })),
+            // query('.s4y-backdrop', [
+            //   animate('200ms ease-in', style({ opacity: 0 })),
+            // ]),
             query('.s4y-modal-container', [
                 animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' })),
             ]),
@@ -1198,23 +1202,53 @@ const modalFadeCombined = trigger('modalFadeCombined', [
 ]);
 
 class ModalComponent {
+    renderer;
+    document;
     modalHeaderTemplate;
     modalFooterTemplate;
+    scrollableContent = input(true);
+    centeredModal = input(true);
     title = input('Titulo');
     modalStyle = input();
     closeModal = output();
     visible = model(false);
     withHeader = model(true);
+    constructor(renderer, document) {
+        this.renderer = renderer;
+        this.document = document;
+        window.addEventListener('keydown', this.escListener);
+        effect(() => {
+            const visible = this.visible();
+            if (visible) {
+                this.renderer.setStyle(document.body, 'overflow', 'hidden');
+            }
+            else {
+                this.renderer.removeStyle(document.body, 'overflow');
+            }
+        });
+    }
+    ngAfterViewInit() { }
     onClose() {
         this.visible.set(false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeModal: "closeModal", visible: "visibleChange", withHeader: "withHeaderChange" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n  <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n    <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n    <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2>{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"s4y-modal-body\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-modal-backdrop)}.s4y-backdrop{position:fixed;inset:0;background-color:#000000b3}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;max-height:90dvh;min-height:18rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1rem 1.8rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding:1rem 0;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header h2{font-size:2.2rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1;overflow-y:auto;padding:0 1.8rem}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [modalFadeCombined] });
+    escListener = (event) => {
+        if (event.key === 'Escape' && this.visible()) {
+            this.onClose();
+        }
+    };
+    ngOnDestroy() {
+        window.removeEventListener('keydown', this.escListener);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, centeredModal: { classPropertyName: "centeredModal", publicName: "centeredModal", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeModal: "closeModal", visible: "visibleChange", withHeader: "withHeaderChange" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n  <div\r\n    class=\"s4y-modal-wrapper\"\r\n    [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n    [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n    (click)=\"onClose()\"\r\n    @modalFadeCombined\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n      [ngStyle]=\"modalStyle()\"\r\n    >\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"s4y-modal-body\"\r\n        [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding:1rem 0;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [modalFadeCombined] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-modal', imports: [CommonModule], animations: [modalFadeCombined], template: "@if (visible()) {\r\n  <div class=\"s4y-modal-wrapper\" @modalFadeCombined>\r\n    <div class=\"s4y-backdrop\" (click)=\"onClose()\"></div>\r\n    <div class=\"s4y-modal-container\" [ngStyle]=\"modalStyle()\">\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2>{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div class=\"s4y-modal-body\">\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-modal-backdrop)}.s4y-backdrop{position:fixed;inset:0;background-color:#000000b3}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;max-height:90dvh;min-height:18rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1rem 1.8rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding:1rem 0;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header h2{font-size:2.2rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1;overflow-y:auto;padding:0 1.8rem}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}\n"] }]
-        }], propDecorators: { modalHeaderTemplate: [{
+            args: [{ selector: 's4y-modal', imports: [CommonModule], animations: [modalFadeCombined], template: "@if (visible()) {\r\n  <div\r\n    class=\"s4y-modal-wrapper\"\r\n    [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n    [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n    (click)=\"onClose()\"\r\n    @modalFadeCombined\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n      [ngStyle]=\"modalStyle()\"\r\n    >\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"s4y-modal-body\"\r\n        [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding:1rem 0;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { modalHeaderTemplate: [{
                 type: ContentChild,
                 args: ['modalHeaderTemplate']
             }], modalFooterTemplate: [{
@@ -1389,41 +1423,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
         }] });
 
 class PaginationComponent {
-    currentPage = model(1);
+    currentPage = model(0);
     totalResults = input(0);
     rowsPerPageOptions = input([5, 10, 15, 20]);
     rowsPerPage = signal(5);
     onChange = output();
     totalPages = computed(() => Math.ceil(this.totalResults() / this.rowsPerPage()));
     // offset = computed(() => Math.max(0, this.limit() - this.rowsPerPage() + 1));
-    offset = computed(() => this.totalResults() === 0
-        ? 0
-        : (this.currentPage() - 1) * this.rowsPerPage() + 1);
-    limit = computed(() => Math.min(this.rowsPerPage() * this.currentPage(), this.totalResults()));
+    offset = computed(() => this.totalResults() === 0 ? 0 : this.currentPage() * this.rowsPerPage() + 1);
+    limit = computed(() => Math.min((this.currentPage() + 1) * this.rowsPerPage(), this.totalResults()));
     smartPageArray = computed(() => {
         const total = this.totalPages();
         const current = this.currentPage();
         const windowSize = 5;
         const pages = [];
         if (total <= windowSize + 2) {
-            // mostra todas as páginas se for pequeno
-            for (let i = 1; i <= total; i++)
+            for (let i = 0; i < total; i++)
                 pages.push(i);
             return pages;
         }
-        const start = Math.max(2, current - 1);
-        const end = Math.min(total - 1, current + 1);
-        pages.push(1); // sempre mostra a primeira página
-        if (start > 2)
+        const start = Math.max(1, current - 1);
+        const end = Math.min(total - 2, current + 1);
+        pages.push(0); // sempre mostra a primeira página
+        if (start > 1)
             pages.push('...');
         for (let i = start; i <= end; i++) {
             pages.push(i);
         }
-        if (end < total - 1)
+        if (end < total - 2)
             pages.push('...');
-        pages.push(total); // sempre mostra a última página
+        pages.push(total - 1); // última página
         return pages;
     });
+    // limit = computed(() =>
+    //   Math.min(this.rowsPerPage() * this.currentPage(), this.totalResults()),
+    // );
+    // smartPageArray = computed(() => {
+    //   const total = this.totalPages();
+    //   const current = this.currentPage();
+    //   const windowSize = 5;
+    //   const pages: (number | '...')[] = [];
+    //   if (total <= windowSize + 2) {
+    //     // mostra todas as páginas se for pequeno
+    //     for (let i = 1; i <= total; i++) pages.push(i);
+    //     return pages;
+    //   }
+    //   const start = Math.max(2, current - 1);
+    //   const end = Math.min(total - 1, current + 1);
+    //   pages.push(1); // sempre mostra a primeira página
+    //   if (start > 2) pages.push('...');
+    //   for (let i = start; i <= end; i++) {
+    //     pages.push(i);
+    //   }
+    //   if (end < total - 1) pages.push('...');
+    //   pages.push(total); // sempre mostra a última página
+    //   return pages;
+    // });
     // totalPageArr = computed(() => {
     //   let arr: number[] = [];
     //   let calculateTotalPages = this.totalPages() + 1;
@@ -1436,10 +1491,14 @@ class PaginationComponent {
         this.currentPage.set(selectedPage);
         this.emitChangeValue();
     }
-    prevButtonDisabled = computed(() => this.currentPage() <= -1 || this.currentPage() == 1);
-    nextButtonDisabled = computed(() => this.currentPage() == this.totalPages());
+    prevButtonDisabled = computed(() => this.currentPage() <= 0);
+    nextButtonDisabled = computed(() => this.currentPage() >= this.totalPages() - 1);
+    // prevButtonDisabled = computed(
+    //   () => this.currentPage() <= -1 || this.currentPage() == 1,
+    // );
+    // nextButtonDisabled = computed(() => this.currentPage() == this.totalPages());
     prevPage() {
-        if (this.currentPage() <= 1)
+        if (this.currentPage() <= 0)
             return;
         this.currentPage.update((prevValue) => prevValue - 1);
         this.emitChangeValue();
@@ -1454,6 +1513,7 @@ class PaginationComponent {
         const selectElement = event.target;
         const value = Number(selectElement.value);
         this.rowsPerPage.set(value ?? 5);
+        this.currentPage.set(0);
         this.recalcCurrentPage();
     }
     recalcCurrentPage() {
@@ -1477,11 +1537,11 @@ class PaginationComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: PaginationComponent, isStandalone: true, selector: "s4y-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalResults: { classPropertyName: "totalResults", publicName: "totalResults", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"s4y-pagination-container desktop\">\r\n  <div class=\"s4y-pagination-wrapper-view\">\r\n    <select\r\n      [value]=\"rowsPerPage()\"\r\n      (change)=\"selectRowsPerPage($event)\"\r\n      name=\"quantity-view-results\"\r\n      id=\"quantity-view-results\"\r\n    >\r\n      @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n        <option [value]=\"rowsPerPageOption\">\r\n          {{ rowsPerPageOption }}\r\n        </option>\r\n      }\r\n    </select>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-wrapper\">\r\n    <button\r\n      [disabled]=\"prevButtonDisabled()\"\r\n      (click)=\"prevPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n    </button>\r\n\r\n    <div class=\"s4y-pagination-pages\">\r\n      @for (item of smartPageArray(); track $index) {\r\n        <button\r\n          *ngIf=\"item !== '...'; else ellipsis\"\r\n          (click)=\"changePage(item)\"\r\n          [class.selected]=\"item === currentPage()\"\r\n          class=\"s4y-pagination-pages__item\"\r\n        >\r\n          {{ item }}\r\n        </button>\r\n        <ng-template #ellipsis>\r\n          <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n        </ng-template>\r\n      }\r\n\r\n      <!-- @for (item of totalPageArr(); track $index) {\r\n      <button\r\n        (click)=\"changePage(item)\"\r\n        [class.selected]=\"item == currentPage()\"\r\n        class=\"s4y-pagination-pages__item\"\r\n      >\r\n        <p>\r\n          {{ item }}\r\n        </p>\r\n      </button>\r\n    } -->\r\n    </div>\r\n\r\n    <button\r\n      [disabled]=\"nextButtonDisabled()\"\r\n      (click)=\"nextPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-details\">\r\n    <p>\r\n      {{ offset() }}\r\n    </p>\r\n    <span>-</span>\r\n    <p>{{ limit() }}</p>\r\n    <strong>of</strong>\r\n    <p>\r\n      {{ totalResults() }}\r\n    </p>\r\n  </div>\r\n</div>\r\n\r\n<!-- Mobile -->\r\n<div class=\"s4y-pagination-container mobile\">\r\n  <div class=\"flex justify-between align-center\">\r\n    <div class=\"s4y-pagination-wrapper-view\">\r\n      <select\r\n        [value]=\"rowsPerPage()\"\r\n        (change)=\"selectRowsPerPage($event)\"\r\n        name=\"quantity-view-results\"\r\n        id=\"quantity-view-results\"\r\n      >\r\n        @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n          <option [value]=\"rowsPerPageOption\">\r\n            {{ rowsPerPageOption }}\r\n          </option>\r\n        }\r\n      </select>\r\n    </div>\r\n\r\n    <div class=\"s4y-pagination-details\">\r\n      <p>\r\n        {{ offset() }}\r\n      </p>\r\n      <span>-</span>\r\n      <p>{{ limit() }}</p>\r\n      <strong>of</strong>\r\n      <p>\r\n        {{ totalResults() }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-wrapper\">\r\n    <button\r\n      [disabled]=\"prevButtonDisabled()\"\r\n      (click)=\"prevPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n    </button>\r\n\r\n    <div class=\"s4y-pagination-pages\">\r\n      @for (item of smartPageArray(); track $index) {\r\n        <button\r\n          *ngIf=\"item !== '...'; else ellipsis\"\r\n          (click)=\"changePage(item)\"\r\n          [class.selected]=\"item === currentPage()\"\r\n          class=\"s4y-pagination-pages__item\"\r\n        >\r\n          {{ item }}\r\n        </button>\r\n        <ng-template #ellipsis>\r\n          <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n        </ng-template>\r\n      }\r\n\r\n      <!-- @for (item of totalPageArr(); track $index) {\r\n      <button\r\n        (click)=\"changePage(item)\"\r\n        [class.selected]=\"item == currentPage()\"\r\n        class=\"s4y-pagination-pages__item\"\r\n      >\r\n        <p>\r\n          {{ item }}\r\n        </p>\r\n      </button>\r\n    } -->\r\n    </div>\r\n\r\n    <button\r\n      [disabled]=\"nextButtonDisabled()\"\r\n      (click)=\"nextPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #arrowLeft>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowRight>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-pagination-container{display:flex;align-items:center;justify-content:space-between}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}.s4y-pagination-container.desktop{display:none}@media screen and (min-width: 1025px) and (max-width: 1280px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 1281px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-pagination-container.desktop{display:flex}}.s4y-pagination-container.mobile{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container.mobile{display:flex}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container.mobile{display:flex}}.s4y-pagination-container.mobile .flex{width:100%}.s4y-pagination-container.mobile .s4y-pagination-wrapper{justify-content:space-between;width:100%}.s4y-pagination-wrapper{display:flex;align-items:center;gap:1.4rem;font-size:1rem}.s4y-pagination-pages{display:flex;align-items:center;gap:.4rem}.s4y-pagination-pages .s4y-pagination-pages__item{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-pages .s4y-pagination-pages__item:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-pages .s4y-pagination-pages__item.selected{background-color:var(--primary-color);color:#fff}.s4y-pagination-button{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-button:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-button:disabled{pointer-events:none}.s4y-pagination-wrapper-view select{border:1px solid var(--gray-400);border-radius:var(--radius);min-height:34px;width:80px;padding:1.2rem;display:block;font-size:1.4rem}.s4y-pagination-details{display:flex;gap:.6rem;font-size:1.4rem;color:var(--gray-900)}.s4y-pagination-pages__ellipsis{font:bold}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: PaginationComponent, isStandalone: true, selector: "s4y-pagination", inputs: { currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, totalResults: { classPropertyName: "totalResults", publicName: "totalResults", isSignal: true, isRequired: false, transformFunction: null }, rowsPerPageOptions: { classPropertyName: "rowsPerPageOptions", publicName: "rowsPerPageOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentPage: "currentPageChange", onChange: "onChange" }, ngImport: i0, template: "<div class=\"s4y-pagination-container desktop\">\r\n  <div class=\"s4y-pagination-wrapper-view\">\r\n    <select\r\n      [value]=\"rowsPerPage()\"\r\n      (change)=\"selectRowsPerPage($event)\"\r\n      name=\"quantity-view-results\"\r\n      id=\"quantity-view-results\"\r\n    >\r\n      @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n        <option [value]=\"rowsPerPageOption\">\r\n          {{ rowsPerPageOption }}\r\n        </option>\r\n      }\r\n    </select>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-wrapper\">\r\n    <button\r\n      [disabled]=\"prevButtonDisabled()\"\r\n      (click)=\"prevPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n    </button>\r\n\r\n    <div class=\"s4y-pagination-pages\">\r\n      @for (item of smartPageArray(); track $index) {\r\n        <button\r\n          *ngIf=\"item !== '...'; else ellipsis\"\r\n          (click)=\"changePage(item)\"\r\n          [class.selected]=\"item === currentPage()\"\r\n          class=\"s4y-pagination-pages__item\"\r\n        >\r\n          {{ item + 1 }}\r\n        </button>\r\n        <ng-template #ellipsis>\r\n          <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n        </ng-template>\r\n      }\r\n    </div>\r\n\r\n    <button\r\n      [disabled]=\"nextButtonDisabled()\"\r\n      (click)=\"nextPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-details\">\r\n    @if (totalResults() > 0) {\r\n      <p>\r\n        {{ offset() }}\r\n      </p>\r\n      <span>-</span>\r\n      <p>{{ limit() }}</p>\r\n      <strong>of</strong>\r\n      <p>\r\n        {{ totalResults() }}\r\n      </p>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Mobile -->\r\n<div class=\"s4y-pagination-container mobile\">\r\n  <div class=\"flex justify-between align-center\">\r\n    <div class=\"s4y-pagination-wrapper-view\">\r\n      <select\r\n        [value]=\"rowsPerPage()\"\r\n        (change)=\"selectRowsPerPage($event)\"\r\n        name=\"quantity-view-results\"\r\n        id=\"quantity-view-results\"\r\n      >\r\n        @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n          <option [value]=\"rowsPerPageOption\">\r\n            {{ rowsPerPageOption }}\r\n          </option>\r\n        }\r\n      </select>\r\n    </div>\r\n\r\n    <div class=\"s4y-pagination-details\">\r\n      <p>\r\n        {{ offset() }}\r\n      </p>\r\n      <span>-</span>\r\n      <p>{{ limit() }}</p>\r\n      <strong>of</strong>\r\n      <p>\r\n        {{ totalResults() }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-wrapper\">\r\n    <button\r\n      [disabled]=\"prevButtonDisabled()\"\r\n      (click)=\"prevPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n    </button>\r\n\r\n    <div class=\"s4y-pagination-pages\">\r\n      @for (item of smartPageArray(); track $index) {\r\n        <button\r\n          *ngIf=\"item !== '...'; else ellipsis\"\r\n          (click)=\"changePage(item)\"\r\n          [class.selected]=\"item === currentPage()\"\r\n          class=\"s4y-pagination-pages__item\"\r\n        >\r\n          {{ item + 1 }}\r\n        </button>\r\n        <ng-template #ellipsis>\r\n          <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n        </ng-template>\r\n      }\r\n    </div>\r\n\r\n    <button\r\n      [disabled]=\"nextButtonDisabled()\"\r\n      (click)=\"nextPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #arrowLeft>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowRight>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-pagination-container{display:flex;align-items:center;justify-content:space-between}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}.s4y-pagination-container.desktop{display:none}@media screen and (min-width: 1025px) and (max-width: 1280px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 1281px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-pagination-container.desktop{display:flex}}.s4y-pagination-container.mobile{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container.mobile{display:flex}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container.mobile{display:flex}}.s4y-pagination-container.mobile .flex{width:100%}.s4y-pagination-container.mobile .s4y-pagination-wrapper{justify-content:space-between;width:100%}.s4y-pagination-wrapper{display:flex;align-items:center;gap:1.4rem;font-size:1rem}.s4y-pagination-pages{display:flex;align-items:center;gap:.4rem}.s4y-pagination-pages .s4y-pagination-pages__item{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-pages .s4y-pagination-pages__item:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-pages .s4y-pagination-pages__item.selected{background-color:var(--primary-color);color:#fff}.s4y-pagination-button{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-button:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-button:disabled{pointer-events:none}.s4y-pagination-wrapper-view select{border:1px solid var(--gray-400);border-radius:var(--radius);min-height:34px;width:80px;padding:1.2rem;display:block;font-size:1.4rem}.s4y-pagination-details{display:flex;gap:.6rem;font-size:1.4rem;color:var(--gray-900)}.s4y-pagination-pages__ellipsis{font:bold}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-pagination', imports: [NgTemplateOutlet, CommonModule, FormsModule], template: "<div class=\"s4y-pagination-container desktop\">\r\n  <div class=\"s4y-pagination-wrapper-view\">\r\n    <select\r\n      [value]=\"rowsPerPage()\"\r\n      (change)=\"selectRowsPerPage($event)\"\r\n      name=\"quantity-view-results\"\r\n      id=\"quantity-view-results\"\r\n    >\r\n      @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n        <option [value]=\"rowsPerPageOption\">\r\n          {{ rowsPerPageOption }}\r\n        </option>\r\n      }\r\n    </select>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-wrapper\">\r\n    <button\r\n      [disabled]=\"prevButtonDisabled()\"\r\n      (click)=\"prevPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n    </button>\r\n\r\n    <div class=\"s4y-pagination-pages\">\r\n      @for (item of smartPageArray(); track $index) {\r\n        <button\r\n          *ngIf=\"item !== '...'; else ellipsis\"\r\n          (click)=\"changePage(item)\"\r\n          [class.selected]=\"item === currentPage()\"\r\n          class=\"s4y-pagination-pages__item\"\r\n        >\r\n          {{ item }}\r\n        </button>\r\n        <ng-template #ellipsis>\r\n          <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n        </ng-template>\r\n      }\r\n\r\n      <!-- @for (item of totalPageArr(); track $index) {\r\n      <button\r\n        (click)=\"changePage(item)\"\r\n        [class.selected]=\"item == currentPage()\"\r\n        class=\"s4y-pagination-pages__item\"\r\n      >\r\n        <p>\r\n          {{ item }}\r\n        </p>\r\n      </button>\r\n    } -->\r\n    </div>\r\n\r\n    <button\r\n      [disabled]=\"nextButtonDisabled()\"\r\n      (click)=\"nextPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-details\">\r\n    <p>\r\n      {{ offset() }}\r\n    </p>\r\n    <span>-</span>\r\n    <p>{{ limit() }}</p>\r\n    <strong>of</strong>\r\n    <p>\r\n      {{ totalResults() }}\r\n    </p>\r\n  </div>\r\n</div>\r\n\r\n<!-- Mobile -->\r\n<div class=\"s4y-pagination-container mobile\">\r\n  <div class=\"flex justify-between align-center\">\r\n    <div class=\"s4y-pagination-wrapper-view\">\r\n      <select\r\n        [value]=\"rowsPerPage()\"\r\n        (change)=\"selectRowsPerPage($event)\"\r\n        name=\"quantity-view-results\"\r\n        id=\"quantity-view-results\"\r\n      >\r\n        @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n          <option [value]=\"rowsPerPageOption\">\r\n            {{ rowsPerPageOption }}\r\n          </option>\r\n        }\r\n      </select>\r\n    </div>\r\n\r\n    <div class=\"s4y-pagination-details\">\r\n      <p>\r\n        {{ offset() }}\r\n      </p>\r\n      <span>-</span>\r\n      <p>{{ limit() }}</p>\r\n      <strong>of</strong>\r\n      <p>\r\n        {{ totalResults() }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-wrapper\">\r\n    <button\r\n      [disabled]=\"prevButtonDisabled()\"\r\n      (click)=\"prevPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n    </button>\r\n\r\n    <div class=\"s4y-pagination-pages\">\r\n      @for (item of smartPageArray(); track $index) {\r\n        <button\r\n          *ngIf=\"item !== '...'; else ellipsis\"\r\n          (click)=\"changePage(item)\"\r\n          [class.selected]=\"item === currentPage()\"\r\n          class=\"s4y-pagination-pages__item\"\r\n        >\r\n          {{ item }}\r\n        </button>\r\n        <ng-template #ellipsis>\r\n          <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n        </ng-template>\r\n      }\r\n\r\n      <!-- @for (item of totalPageArr(); track $index) {\r\n      <button\r\n        (click)=\"changePage(item)\"\r\n        [class.selected]=\"item == currentPage()\"\r\n        class=\"s4y-pagination-pages__item\"\r\n      >\r\n        <p>\r\n          {{ item }}\r\n        </p>\r\n      </button>\r\n    } -->\r\n    </div>\r\n\r\n    <button\r\n      [disabled]=\"nextButtonDisabled()\"\r\n      (click)=\"nextPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #arrowLeft>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowRight>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-pagination-container{display:flex;align-items:center;justify-content:space-between}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}.s4y-pagination-container.desktop{display:none}@media screen and (min-width: 1025px) and (max-width: 1280px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 1281px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-pagination-container.desktop{display:flex}}.s4y-pagination-container.mobile{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container.mobile{display:flex}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container.mobile{display:flex}}.s4y-pagination-container.mobile .flex{width:100%}.s4y-pagination-container.mobile .s4y-pagination-wrapper{justify-content:space-between;width:100%}.s4y-pagination-wrapper{display:flex;align-items:center;gap:1.4rem;font-size:1rem}.s4y-pagination-pages{display:flex;align-items:center;gap:.4rem}.s4y-pagination-pages .s4y-pagination-pages__item{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-pages .s4y-pagination-pages__item:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-pages .s4y-pagination-pages__item.selected{background-color:var(--primary-color);color:#fff}.s4y-pagination-button{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-button:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-button:disabled{pointer-events:none}.s4y-pagination-wrapper-view select{border:1px solid var(--gray-400);border-radius:var(--radius);min-height:34px;width:80px;padding:1.2rem;display:block;font-size:1.4rem}.s4y-pagination-details{display:flex;gap:.6rem;font-size:1.4rem;color:var(--gray-900)}.s4y-pagination-pages__ellipsis{font:bold}\n"] }]
+            args: [{ selector: 's4y-pagination', imports: [NgTemplateOutlet, CommonModule, FormsModule], template: "<div class=\"s4y-pagination-container desktop\">\r\n  <div class=\"s4y-pagination-wrapper-view\">\r\n    <select\r\n      [value]=\"rowsPerPage()\"\r\n      (change)=\"selectRowsPerPage($event)\"\r\n      name=\"quantity-view-results\"\r\n      id=\"quantity-view-results\"\r\n    >\r\n      @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n        <option [value]=\"rowsPerPageOption\">\r\n          {{ rowsPerPageOption }}\r\n        </option>\r\n      }\r\n    </select>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-wrapper\">\r\n    <button\r\n      [disabled]=\"prevButtonDisabled()\"\r\n      (click)=\"prevPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n    </button>\r\n\r\n    <div class=\"s4y-pagination-pages\">\r\n      @for (item of smartPageArray(); track $index) {\r\n        <button\r\n          *ngIf=\"item !== '...'; else ellipsis\"\r\n          (click)=\"changePage(item)\"\r\n          [class.selected]=\"item === currentPage()\"\r\n          class=\"s4y-pagination-pages__item\"\r\n        >\r\n          {{ item + 1 }}\r\n        </button>\r\n        <ng-template #ellipsis>\r\n          <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n        </ng-template>\r\n      }\r\n    </div>\r\n\r\n    <button\r\n      [disabled]=\"nextButtonDisabled()\"\r\n      (click)=\"nextPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-details\">\r\n    @if (totalResults() > 0) {\r\n      <p>\r\n        {{ offset() }}\r\n      </p>\r\n      <span>-</span>\r\n      <p>{{ limit() }}</p>\r\n      <strong>of</strong>\r\n      <p>\r\n        {{ totalResults() }}\r\n      </p>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<!-- Mobile -->\r\n<div class=\"s4y-pagination-container mobile\">\r\n  <div class=\"flex justify-between align-center\">\r\n    <div class=\"s4y-pagination-wrapper-view\">\r\n      <select\r\n        [value]=\"rowsPerPage()\"\r\n        (change)=\"selectRowsPerPage($event)\"\r\n        name=\"quantity-view-results\"\r\n        id=\"quantity-view-results\"\r\n      >\r\n        @for (rowsPerPageOption of rowsPerPageOptions(); track $index) {\r\n          <option [value]=\"rowsPerPageOption\">\r\n            {{ rowsPerPageOption }}\r\n          </option>\r\n        }\r\n      </select>\r\n    </div>\r\n\r\n    <div class=\"s4y-pagination-details\">\r\n      <p>\r\n        {{ offset() }}\r\n      </p>\r\n      <span>-</span>\r\n      <p>{{ limit() }}</p>\r\n      <strong>of</strong>\r\n      <p>\r\n        {{ totalResults() }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"s4y-pagination-wrapper\">\r\n    <button\r\n      [disabled]=\"prevButtonDisabled()\"\r\n      (click)=\"prevPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowLeft\"></ng-container>\r\n    </button>\r\n\r\n    <div class=\"s4y-pagination-pages\">\r\n      @for (item of smartPageArray(); track $index) {\r\n        <button\r\n          *ngIf=\"item !== '...'; else ellipsis\"\r\n          (click)=\"changePage(item)\"\r\n          [class.selected]=\"item === currentPage()\"\r\n          class=\"s4y-pagination-pages__item\"\r\n        >\r\n          {{ item + 1 }}\r\n        </button>\r\n        <ng-template #ellipsis>\r\n          <span class=\"s4y-pagination-pages__ellipsis\">...</span>\r\n        </ng-template>\r\n      }\r\n    </div>\r\n\r\n    <button\r\n      [disabled]=\"nextButtonDisabled()\"\r\n      (click)=\"nextPage()\"\r\n      type=\"button\"\r\n      class=\"s4y-pagination-button\"\r\n    >\r\n      <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #arrowLeft>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowRight>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M12.1717 12.0005L9.34326 9.17203L10.7575 7.75781L15.0001 12.0005L10.7575 16.2431L9.34326 14.8289L12.1717 12.0005Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-pagination-container{display:flex;align-items:center;justify-content:space-between}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container{flex-direction:column;gap:1.8rem}}.s4y-pagination-container.desktop{display:none}@media screen and (min-width: 1025px) and (max-width: 1280px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 1281px){.s4y-pagination-container.desktop{display:flex}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-pagination-container.desktop{display:flex}}.s4y-pagination-container.mobile{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-pagination-container.mobile{display:flex}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-pagination-container.mobile{display:flex}}.s4y-pagination-container.mobile .flex{width:100%}.s4y-pagination-container.mobile .s4y-pagination-wrapper{justify-content:space-between;width:100%}.s4y-pagination-wrapper{display:flex;align-items:center;gap:1.4rem;font-size:1rem}.s4y-pagination-pages{display:flex;align-items:center;gap:.4rem}.s4y-pagination-pages .s4y-pagination-pages__item{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-pages .s4y-pagination-pages__item:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-pages .s4y-pagination-pages__item.selected{background-color:var(--primary-color);color:#fff}.s4y-pagination-button{border-radius:var(--radius);width:34px;height:34px;border:1px solid transparent;transition:.5s ease}.s4y-pagination-button:hover{border:1px solid var(--gray-200);background-color:var(--gray-200)}.s4y-pagination-button:disabled{pointer-events:none}.s4y-pagination-wrapper-view select{border:1px solid var(--gray-400);border-radius:var(--radius);min-height:34px;width:80px;padding:1.2rem;display:block;font-size:1.4rem}.s4y-pagination-details{display:flex;gap:.6rem;font-size:1.4rem;color:var(--gray-900)}.s4y-pagination-pages__ellipsis{font:bold}\n"] }]
         }] });
 
 const selectAnimation = trigger('selectAnimation', [
@@ -1523,14 +1583,17 @@ class SelectComponent {
     maxScreen = input(false);
     isLoading = input(false);
     hasError = input(false);
-    optionLabel = input('');
     label = input();
     errorMessageDefault = input('Erro ao carregar as opções. Tente novamente mais tarde.');
     emptyMessageDefault = input('Nenhuma opção disponível');
     selectedOption = null;
     onSearch = output();
     options = input([]);
-    transformedOptions = [];
+    transformedOptions = computed(() => this.options().map((option) => ({
+        option,
+        selected: this.isEqual(option, this.selectedValue()),
+    })));
+    selectedValue = signal(null);
     optionTemplate;
     errorTemplate;
     emptyTemplate;
@@ -1541,11 +1604,23 @@ class SelectComponent {
     onChange = (value) => { };
     onTouched = () => { };
     ngOnInit() {
-        this.transformedOptions = this.includeSelectedProperty();
+        // this.transformedOptions = this.includeSelectedProperty();
     }
     writeValue(value) {
-        this.selectedOption = value;
-        console.log(value);
+        // this.transformedOptions = this.includeSelectedProperty();
+        this.selectedValue.set(value);
+        this.markAllUnselected();
+        const matchedOption = this.transformedOptions().find((opt) => this.isEqual(opt.option, value));
+        if (matchedOption) {
+            matchedOption.selected = true;
+            this.selectedOption = matchedOption;
+        }
+        else {
+            this.selectedOption = {
+                option: value,
+                selected: true,
+            };
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -1564,7 +1639,8 @@ class SelectComponent {
         }
         this.isOpened = false;
         this.onTouched();
-        this.onChange(selectedOption);
+        const originalOption = selectedOption?.option ?? selectedOption;
+        this.onChange(originalOption);
     }
     handleSearch(e) {
         const value = e.target.value;
@@ -1572,21 +1648,26 @@ class SelectComponent {
     }
     includeSelectedProperty() {
         return this.options().map((option) => ({
-            ...option,
+            option: option,
             selected: false,
         }));
     }
     markAllUnselected() {
-        this.transformedOptions.forEach((option) => (option['selected'] = false));
+        this.transformedOptions().forEach((option) => (option['selected'] = false));
+    }
+    isEqual(opt1, opt2) {
+        return opt1?.id !== undefined && opt2?.id !== undefined
+            ? opt1.id === opt2.id
+            : JSON.stringify(opt1) === JSON.stringify(opt2); // fallback genérico
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "s4y-select", inputs: { withSearch: { classPropertyName: "withSearch", publicName: "withSearch", isSignal: true, isRequired: false, transformFunction: null }, maxScreen: { classPropertyName: "maxScreen", publicName: "maxScreen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "s4y-select", inputs: { withSearch: { classPropertyName: "withSearch", publicName: "withSearch", isSignal: true, isRequired: false, transformFunction: null }, maxScreen: { classPropertyName: "maxScreen", publicName: "maxScreen", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSearch: "onSearch" }, providers: [
             {
                 multi: true,
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n  class=\"s4y-select-container\"\r\n  [style.maxWidth]=\"widthStyle()\"\r\n  s4yClickOutside\r\n  (clickOutside)=\"isOpened = false\"\r\n>\r\n  <p class=\"s4y-select-label\">\r\n    {{ label() }}\r\n  </p>\r\n\r\n  <div\r\n    class=\"s4y-select-container__wrapper\"\r\n    [class.disabled]=\"isDisabled\"\r\n    (click)=\"isOpened = !isOpened\"\r\n    [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n    tabindex=\"0\"\r\n    aria-controls=\"select-options-container\"\r\n  >\r\n    <div class=\"s4y-select-container__placeholder\">\r\n      @if (selectedOptionTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: selectedOption }\"\r\n        ></ng-container>\r\n      } @else {\r\n        @if (!selectedOption) {\r\n          <p>Selecione...</p>\r\n        } @else {\r\n          <p>{{ selectedOption?.[optionLabel()] }}</p>\r\n        }\r\n      }\r\n    </div>\r\n    @if (isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n    }\r\n    @if (!isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n    }\r\n  </div>\r\n  <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n    <div class=\"s4y-select-options\">\r\n      @if (isLoading()) {\r\n        <div class=\"s4y-select-container__loading\">\r\n          <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n        </div>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <p class=\"s4y-select-options__message\">\r\n            <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n          </p>\r\n        } @else {\r\n          <p class=\"s4y-select-options__message\">\r\n            {{ errorMessageDefault() }}\r\n          </p>\r\n        }\r\n      } @else {\r\n        @if (withSearch()) {\r\n          <div class=\"s4y-select-options__search\">\r\n            <input\r\n              (input)=\"handleSearch($event)\"\r\n              placeholder=\"Pesquisar...\"\r\n              type=\"text\"\r\n              name=\"search-option\"\r\n              id=\"search-option\"\r\n              autocomplete=\"off\"\r\n            />\r\n            <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n          </div>\r\n        }\r\n        <div\r\n          class=\"s4y-select-options__scroll\"\r\n          role=\"listbox\"\r\n          aria-live=\"polite\"\r\n        >\r\n          @for (option of transformedOptions; track $index) {\r\n            <p\r\n              [class.selected]=\"option.selected\"\r\n              class=\"s4y-select-options__item\"\r\n              role=\"option\"\r\n              aria-selected=\"false\"\r\n              tabindex=\"0\"\r\n              (click)=\"setSelectedOption(option)\"\r\n              (keyup.enter)=\"setSelectedOption(option)\"\r\n            >\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  optionTemplate;\r\n                  context: { $implicit: option }\r\n                \"\r\n              ></ng-container>\r\n            </p>\r\n          } @empty {\r\n            @if (emptyTemplate) {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n              </p>\r\n            } @else {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                {{ emptyMessageDefault() }}\r\n              </p>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n  <svg\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;min-height:4.5rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);margin-bottom:.8rem;cursor:pointer}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select__svg,:host.ng-invalid.ng-dirty .s4y-select__svg{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__placeholder,:host.ng-invalid.ng-dirty .s4y-select-container__placeholder{color:var(--danger-color)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[s4yClickOutside]", inputs: ["isVisible"], outputs: ["clickOutside"] }], animations: [selectAnimation] });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n  class=\"s4y-select-container\"\r\n  [style.maxWidth]=\"widthStyle()\"\r\n  s4yClickOutside\r\n  (clickOutside)=\"isOpened = false\"\r\n>\r\n  <p class=\"s4y-select-label\">\r\n    {{ label() }}\r\n  </p>\r\n\r\n  <div\r\n    class=\"s4y-select-container__wrapper\"\r\n    [class.disabled]=\"isDisabled\"\r\n    (click)=\"isOpened = !isOpened\"\r\n    [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n    tabindex=\"0\"\r\n    aria-controls=\"select-options-container\"\r\n  >\r\n    <div class=\"s4y-select-container__placeholder\">\r\n      @if (selectedOptionTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n        ></ng-container>\r\n      } @else {\r\n        @if (!selectedOption) {\r\n          <p>Selecione...</p>\r\n        } @else {\r\n          <p>{{ selectedOption }}</p>\r\n        }\r\n      }\r\n    </div>\r\n    @if (isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n    }\r\n    @if (!isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n    }\r\n  </div>\r\n  <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n    <div class=\"s4y-select-options\">\r\n      @if (isLoading()) {\r\n        <div class=\"s4y-select-container__loading\">\r\n          <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n        </div>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <p class=\"s4y-select-options__message\">\r\n            <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n          </p>\r\n        } @else {\r\n          <p class=\"s4y-select-options__message\">\r\n            {{ errorMessageDefault() }}\r\n          </p>\r\n        }\r\n      } @else {\r\n        @if (withSearch()) {\r\n          <div class=\"s4y-select-options__search\">\r\n            <input\r\n              (input)=\"handleSearch($event)\"\r\n              placeholder=\"Pesquisar...\"\r\n              type=\"text\"\r\n              name=\"search-option\"\r\n              id=\"search-option\"\r\n              autocomplete=\"off\"\r\n            />\r\n            <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n          </div>\r\n        }\r\n        <div\r\n          class=\"s4y-select-options__scroll\"\r\n          role=\"listbox\"\r\n          aria-live=\"polite\"\r\n        >\r\n          @for (option of transformedOptions(); track $index) {\r\n            <p\r\n              [class.selected]=\"option.selected\"\r\n              class=\"s4y-select-options__item\"\r\n              role=\"option\"\r\n              aria-selected=\"false\"\r\n              tabindex=\"0\"\r\n              (click)=\"setSelectedOption(option)\"\r\n              (keyup.enter)=\"setSelectedOption(option)\"\r\n            >\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  optionTemplate;\r\n                  context: { $implicit: option?.option }\r\n                \"\r\n              ></ng-container>\r\n            </p>\r\n          } @empty {\r\n            @if (emptyTemplate) {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n              </p>\r\n            } @else {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                {{ emptyMessageDefault() }}\r\n              </p>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n  <svg\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{margin-bottom:.8rem;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[s4yClickOutside]", inputs: ["isVisible"], outputs: ["clickOutside"] }], animations: [selectAnimation] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -1596,7 +1677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectComponent),
                         },
-                    ], template: "<label\r\n  class=\"s4y-select-container\"\r\n  [style.maxWidth]=\"widthStyle()\"\r\n  s4yClickOutside\r\n  (clickOutside)=\"isOpened = false\"\r\n>\r\n  <p class=\"s4y-select-label\">\r\n    {{ label() }}\r\n  </p>\r\n\r\n  <div\r\n    class=\"s4y-select-container__wrapper\"\r\n    [class.disabled]=\"isDisabled\"\r\n    (click)=\"isOpened = !isOpened\"\r\n    [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n    tabindex=\"0\"\r\n    aria-controls=\"select-options-container\"\r\n  >\r\n    <div class=\"s4y-select-container__placeholder\">\r\n      @if (selectedOptionTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: selectedOption }\"\r\n        ></ng-container>\r\n      } @else {\r\n        @if (!selectedOption) {\r\n          <p>Selecione...</p>\r\n        } @else {\r\n          <p>{{ selectedOption?.[optionLabel()] }}</p>\r\n        }\r\n      }\r\n    </div>\r\n    @if (isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n    }\r\n    @if (!isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n    }\r\n  </div>\r\n  <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n    <div class=\"s4y-select-options\">\r\n      @if (isLoading()) {\r\n        <div class=\"s4y-select-container__loading\">\r\n          <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n        </div>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <p class=\"s4y-select-options__message\">\r\n            <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n          </p>\r\n        } @else {\r\n          <p class=\"s4y-select-options__message\">\r\n            {{ errorMessageDefault() }}\r\n          </p>\r\n        }\r\n      } @else {\r\n        @if (withSearch()) {\r\n          <div class=\"s4y-select-options__search\">\r\n            <input\r\n              (input)=\"handleSearch($event)\"\r\n              placeholder=\"Pesquisar...\"\r\n              type=\"text\"\r\n              name=\"search-option\"\r\n              id=\"search-option\"\r\n              autocomplete=\"off\"\r\n            />\r\n            <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n          </div>\r\n        }\r\n        <div\r\n          class=\"s4y-select-options__scroll\"\r\n          role=\"listbox\"\r\n          aria-live=\"polite\"\r\n        >\r\n          @for (option of transformedOptions; track $index) {\r\n            <p\r\n              [class.selected]=\"option.selected\"\r\n              class=\"s4y-select-options__item\"\r\n              role=\"option\"\r\n              aria-selected=\"false\"\r\n              tabindex=\"0\"\r\n              (click)=\"setSelectedOption(option)\"\r\n              (keyup.enter)=\"setSelectedOption(option)\"\r\n            >\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  optionTemplate;\r\n                  context: { $implicit: option }\r\n                \"\r\n              ></ng-container>\r\n            </p>\r\n          } @empty {\r\n            @if (emptyTemplate) {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n              </p>\r\n            } @else {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                {{ emptyMessageDefault() }}\r\n              </p>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n  <svg\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;min-height:4.5rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);margin-bottom:.8rem;cursor:pointer}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select__svg,:host.ng-invalid.ng-dirty .s4y-select__svg{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__placeholder,:host.ng-invalid.ng-dirty .s4y-select-container__placeholder{color:var(--danger-color)}\n"] }]
+                    ], template: "<label\r\n  class=\"s4y-select-container\"\r\n  [style.maxWidth]=\"widthStyle()\"\r\n  s4yClickOutside\r\n  (clickOutside)=\"isOpened = false\"\r\n>\r\n  <p class=\"s4y-select-label\">\r\n    {{ label() }}\r\n  </p>\r\n\r\n  <div\r\n    class=\"s4y-select-container__wrapper\"\r\n    [class.disabled]=\"isDisabled\"\r\n    (click)=\"isOpened = !isOpened\"\r\n    [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n    tabindex=\"0\"\r\n    aria-controls=\"select-options-container\"\r\n  >\r\n    <div class=\"s4y-select-container__placeholder\">\r\n      @if (selectedOptionTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n        ></ng-container>\r\n      } @else {\r\n        @if (!selectedOption) {\r\n          <p>Selecione...</p>\r\n        } @else {\r\n          <p>{{ selectedOption }}</p>\r\n        }\r\n      }\r\n    </div>\r\n    @if (isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n    }\r\n    @if (!isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n    }\r\n  </div>\r\n  <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n    <div class=\"s4y-select-options\">\r\n      @if (isLoading()) {\r\n        <div class=\"s4y-select-container__loading\">\r\n          <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n        </div>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <p class=\"s4y-select-options__message\">\r\n            <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n          </p>\r\n        } @else {\r\n          <p class=\"s4y-select-options__message\">\r\n            {{ errorMessageDefault() }}\r\n          </p>\r\n        }\r\n      } @else {\r\n        @if (withSearch()) {\r\n          <div class=\"s4y-select-options__search\">\r\n            <input\r\n              (input)=\"handleSearch($event)\"\r\n              placeholder=\"Pesquisar...\"\r\n              type=\"text\"\r\n              name=\"search-option\"\r\n              id=\"search-option\"\r\n              autocomplete=\"off\"\r\n            />\r\n            <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n          </div>\r\n        }\r\n        <div\r\n          class=\"s4y-select-options__scroll\"\r\n          role=\"listbox\"\r\n          aria-live=\"polite\"\r\n        >\r\n          @for (option of transformedOptions(); track $index) {\r\n            <p\r\n              [class.selected]=\"option.selected\"\r\n              class=\"s4y-select-options__item\"\r\n              role=\"option\"\r\n              aria-selected=\"false\"\r\n              tabindex=\"0\"\r\n              (click)=\"setSelectedOption(option)\"\r\n              (keyup.enter)=\"setSelectedOption(option)\"\r\n            >\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  optionTemplate;\r\n                  context: { $implicit: option?.option }\r\n                \"\r\n              ></ng-container>\r\n            </p>\r\n          } @empty {\r\n            @if (emptyTemplate) {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n              </p>\r\n            } @else {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                {{ emptyMessageDefault() }}\r\n              </p>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n  <svg\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{margin-bottom:.8rem;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"] }]
         }], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: ['optionTemplate']