s4y-ui 2.3.1 → 2.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/fesm2022/s4y-ui.mjs +133 -54
  2. package/fesm2022/s4y-ui.mjs.map +1 -1
  3. package/lib/components/forms-kit/form-field-password/form-field-password.component.d.ts +1 -1
  4. package/lib/components/modal/modal.component.d.ts +11 -3
  5. package/lib/components/pagination/index.d.ts +1 -0
  6. package/lib/components/pagination/pagination.interface.d.ts +1 -0
  7. package/lib/components/select/select.component.d.ts +7 -3
  8. package/lib/components/tooltip/index.d.ts +1 -0
  9. package/lib/components/tooltip/tooltip.enums.d.ts +0 -5
  10. package/package.json +1 -1
package/fesm2022/s4y-ui.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as i0 from '@angular/core';
2
- 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';
2
+ 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';
3
3
  import * as i1 from '@angular/common';
4
- import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, NgIf, NgStyle } from '@angular/common';
4
+ import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, DOCUMENT, NgIf, NgStyle } from '@angular/common';
5
5
  import * as i1$1 from '@angular/platform-browser';
6
6
  import { DomSanitizer } from '@angular/platform-browser';
7
7
  import * as i1$2 from '@angular/router';
@@ -445,7 +445,7 @@ class FormFieldPasswordComponent {
445
445
  label = input('Senha');
446
446
  name = input.required();
447
447
  id = input.required();
448
- placeholder = input();
448
+ placeholder = input(this.label());
449
449
  value = '';
450
450
  disabled = false;
451
451
  togglePasswordVisibility() {
@@ -962,11 +962,11 @@ class DrawerComponent {
962
962
  }
963
963
  }
964
964
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
965
- 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] });
965
+ 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] });
966
966
  }
967
967
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DrawerComponent, decorators: [{
968
968
  type: Component,
969
- 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"] }]
969
+ 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"] }]
970
970
  }], ctorParameters: () => [], propDecorators: { headerTemplate: [{
971
971
  type: ContentChild,
972
972
  args: ['headerTemplate']
@@ -1175,10 +1175,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
1175
1175
  const modalFadeCombined = trigger('modalFadeCombined', [
1176
1176
  transition(':enter', [
1177
1177
  group([
1178
- query('.s4y-backdrop', [
1179
- style({ opacity: 0 }),
1180
- animate('200ms ease-out', style({ opacity: 1 })),
1181
- ]),
1178
+ style({ opacity: 0 }),
1179
+ animate('200ms ease-out', style({ opacity: 1 })),
1180
+ // query('.s4y-backdrop', [
1181
+ // style({ opacity: 0 }),
1182
+ // animate('200ms ease-out', style({ opacity: 1 })),
1183
+ // ]),
1182
1184
  query('.s4y-modal-container', [
1183
1185
  style({ opacity: 0, transform: 'translateY(20px)' }),
1184
1186
  animate('250ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
@@ -1187,9 +1189,11 @@ const modalFadeCombined = trigger('modalFadeCombined', [
1187
1189
  ]),
1188
1190
  transition(':leave', [
1189
1191
  group([
1190
- query('.s4y-backdrop', [
1191
- animate('200ms ease-in', style({ opacity: 0 })),
1192
- ]),
1192
+ style({ opacity: 1 }),
1193
+ animate('200ms ease-in', style({ opacity: 0 })),
1194
+ // query('.s4y-backdrop', [
1195
+ // animate('200ms ease-in', style({ opacity: 0 })),
1196
+ // ]),
1193
1197
  query('.s4y-modal-container', [
1194
1198
  animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' })),
1195
1199
  ]),
@@ -1198,23 +1202,53 @@ const modalFadeCombined = trigger('modalFadeCombined', [
1198
1202
  ]);
1199
1203
 
1200
1204
  class ModalComponent {
1205
+ renderer;
1206
+ document;
1201
1207
  modalHeaderTemplate;
1202
1208
  modalFooterTemplate;
1209
+ scrollableContent = input(true);
1210
+ centeredModal = input(true);
1203
1211
  title = input('Titulo');
1204
1212
  modalStyle = input();
1205
1213
  closeModal = output();
1206
1214
  visible = model(false);
1207
1215
  withHeader = model(true);
1216
+ constructor(renderer, document) {
1217
+ this.renderer = renderer;
1218
+ this.document = document;
1219
+ window.addEventListener('keydown', this.escListener);
1220
+ effect(() => {
1221
+ const visible = this.visible();
1222
+ if (visible) {
1223
+ this.renderer.setStyle(document.body, 'overflow', 'hidden');
1224
+ }
1225
+ else {
1226
+ this.renderer.removeStyle(document.body, 'overflow');
1227
+ }
1228
+ });
1229
+ }
1230
+ ngAfterViewInit() { }
1208
1231
  onClose() {
1209
1232
  this.visible.set(false);
1210
1233
  }
1211
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1212
- 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] });
1234
+ escListener = (event) => {
1235
+ if (event.key === 'Escape' && this.visible()) {
1236
+ this.onClose();
1237
+ }
1238
+ };
1239
+ ngOnDestroy() {
1240
+ window.removeEventListener('keydown', this.escListener);
1241
+ }
1242
+ 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 });
1243
+ 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] });
1213
1244
  }
1214
1245
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
1215
1246
  type: Component,
1216
- 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"] }]
1217
- }], propDecorators: { modalHeaderTemplate: [{
1247
+ 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"] }]
1248
+ }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
1249
+ type: Inject,
1250
+ args: [DOCUMENT]
1251
+ }] }], propDecorators: { modalHeaderTemplate: [{
1218
1252
  type: ContentChild,
1219
1253
  args: ['modalHeaderTemplate']
1220
1254
  }], modalFooterTemplate: [{
@@ -1375,7 +1409,7 @@ class CheckboxComponent {
1375
1409
  useExisting: CheckboxComponent,
1376
1410
  multi: true,
1377
1411
  },
1378
- ], ngImport: i0, template: "<div\r\n class=\"s4y-checkbox-wrapper\"\r\n (click)=\"onToggleCheckbox()\"\r\n [class.disabled]=\"isDisabled\"\r\n>\r\n <input\r\n class=\"s4y-inp-cbx\"\r\n [id]=\"id()\"\r\n [name]=\"name()\"\r\n type=\"checkbox\"\r\n [checked]=\"model()\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n <label class=\"cbx\" [for]=\"id()\"\r\n ><span>\r\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </svg>\r\n </span>\r\n @if (label()) {\r\n <span>\r\n {{ label() }}\r\n </span>\r\n }\r\n </label>\r\n</div>\r\n", styles: [".s4y-checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.s4y-checkbox-wrapper .cbx{margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.s4y-checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0);font-size:1.4rem;color:var(--gray-900)}.s4y-checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:3px;transform:scale(1);vertical-align:middle;border:1px solid #9098a9;transition:all .2s ease}.s4y-checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.s4y-checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--primary-color);display:block;transform:scale(0);opacity:1;border-radius:50%}.s4y-checkbox-wrapper .cbx span:last-child{padding-left:8px}.s4y-checkbox-wrapper .cbx:hover span:first-child{border-color:var(--primary-color)}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child{background:var(--primary-color);border-color:var(--primary-color);animation:wave-46 .4s ease}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave-46{50%{transform:scale(.9)}}.s4y-checkbox-wrapper.disabled .cbx:hover span:first-child{background-color:var(--gray-400)}.s4y-checkbox-wrapper.disabled .s4y-inp-cbx:checked+.cbx span:first-child{background-color:var(--gray-400);border-color:var(--gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
1412
+ ], ngImport: i0, template: "<div\r\n class=\"s4y-checkbox-wrapper\"\r\n (click)=\"onToggleCheckbox()\"\r\n [class.disabled]=\"isDisabled\"\r\n>\r\n <input\r\n class=\"s4y-inp-cbx\"\r\n [id]=\"id()\"\r\n [name]=\"name()\"\r\n type=\"checkbox\"\r\n [checked]=\"model()\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n <label class=\"cbx\" [for]=\"id()\"\r\n ><span>\r\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </svg>\r\n </span>\r\n @if (label()) {\r\n <span>\r\n {{ label() }}\r\n </span>\r\n }\r\n </label>\r\n</div>\r\n", styles: [":host{display:block;width:max-content}.s4y-checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.s4y-checkbox-wrapper .cbx{margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.s4y-checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0);font-size:1.4rem;color:var(--gray-900)}.s4y-checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:3px;transform:scale(1);vertical-align:middle;border:1px solid #9098a9;transition:all .2s ease}.s4y-checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.s4y-checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--primary-color);display:block;transform:scale(0);opacity:1;border-radius:50%}.s4y-checkbox-wrapper .cbx span:last-child{padding-left:8px}.s4y-checkbox-wrapper .cbx:hover span:first-child{border-color:var(--primary-color)}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child{background:var(--primary-color);border-color:var(--primary-color);animation:wave-46 .4s ease}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave-46{50%{transform:scale(.9)}}.s4y-checkbox-wrapper.disabled .cbx:hover span:first-child{background-color:var(--gray-400)}.s4y-checkbox-wrapper.disabled .s4y-inp-cbx:checked+.cbx span:first-child{background-color:var(--gray-400);border-color:var(--gray-400)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }] });
1379
1413
  }
1380
1414
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
1381
1415
  type: Component,
@@ -1385,42 +1419,66 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
1385
1419
  useExisting: CheckboxComponent,
1386
1420
  multi: true,
1387
1421
  },
1388
- ], template: "<div\r\n class=\"s4y-checkbox-wrapper\"\r\n (click)=\"onToggleCheckbox()\"\r\n [class.disabled]=\"isDisabled\"\r\n>\r\n <input\r\n class=\"s4y-inp-cbx\"\r\n [id]=\"id()\"\r\n [name]=\"name()\"\r\n type=\"checkbox\"\r\n [checked]=\"model()\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n <label class=\"cbx\" [for]=\"id()\"\r\n ><span>\r\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </svg>\r\n </span>\r\n @if (label()) {\r\n <span>\r\n {{ label() }}\r\n </span>\r\n }\r\n </label>\r\n</div>\r\n", styles: [".s4y-checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.s4y-checkbox-wrapper .cbx{margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.s4y-checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0);font-size:1.4rem;color:var(--gray-900)}.s4y-checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:3px;transform:scale(1);vertical-align:middle;border:1px solid #9098a9;transition:all .2s ease}.s4y-checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.s4y-checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--primary-color);display:block;transform:scale(0);opacity:1;border-radius:50%}.s4y-checkbox-wrapper .cbx span:last-child{padding-left:8px}.s4y-checkbox-wrapper .cbx:hover span:first-child{border-color:var(--primary-color)}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child{background:var(--primary-color);border-color:var(--primary-color);animation:wave-46 .4s ease}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave-46{50%{transform:scale(.9)}}.s4y-checkbox-wrapper.disabled .cbx:hover span:first-child{background-color:var(--gray-400)}.s4y-checkbox-wrapper.disabled .s4y-inp-cbx:checked+.cbx span:first-child{background-color:var(--gray-400);border-color:var(--gray-400)}\n"] }]
1422
+ ], template: "<div\r\n class=\"s4y-checkbox-wrapper\"\r\n (click)=\"onToggleCheckbox()\"\r\n [class.disabled]=\"isDisabled\"\r\n>\r\n <input\r\n class=\"s4y-inp-cbx\"\r\n [id]=\"id()\"\r\n [name]=\"name()\"\r\n type=\"checkbox\"\r\n [checked]=\"model()\"\r\n [disabled]=\"isDisabled\"\r\n />\r\n <label class=\"cbx\" [for]=\"id()\"\r\n ><span>\r\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\r\n <polyline points=\"1.5 6 4.5 9 10.5 1\"></polyline>\r\n </svg>\r\n </span>\r\n @if (label()) {\r\n <span>\r\n {{ label() }}\r\n </span>\r\n }\r\n </label>\r\n</div>\r\n", styles: [":host{display:block;width:max-content}.s4y-checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.s4y-checkbox-wrapper .cbx{margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.s4y-checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0);font-size:1.4rem;color:var(--gray-900)}.s4y-checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:3px;transform:scale(1);vertical-align:middle;border:1px solid #9098a9;transition:all .2s ease}.s4y-checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.s4y-checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--primary-color);display:block;transform:scale(0);opacity:1;border-radius:50%}.s4y-checkbox-wrapper .cbx span:last-child{padding-left:8px}.s4y-checkbox-wrapper .cbx:hover span:first-child{border-color:var(--primary-color)}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child{background:var(--primary-color);border-color:var(--primary-color);animation:wave-46 .4s ease}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.s4y-checkbox-wrapper .s4y-inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave-46{50%{transform:scale(.9)}}.s4y-checkbox-wrapper.disabled .cbx:hover span:first-child{background-color:var(--gray-400)}.s4y-checkbox-wrapper.disabled .s4y-inp-cbx:checked+.cbx span:first-child{background-color:var(--gray-400);border-color:var(--gray-400)}\n"] }]
1389
1423
  }] });
1390
1424
 
1391
1425
  class PaginationComponent {
1392
- currentPage = model(1);
1426
+ currentPage = model(0);
1393
1427
  totalResults = input(0);
1394
1428
  rowsPerPageOptions = input([5, 10, 15, 20]);
1395
1429
  rowsPerPage = signal(5);
1396
1430
  onChange = output();
1397
1431
  totalPages = computed(() => Math.ceil(this.totalResults() / this.rowsPerPage()));
1398
- offset = computed(() => Math.max(0, this.limit() - this.rowsPerPage() + 1));
1399
- limit = computed(() => Math.min(this.rowsPerPage() * this.currentPage(), this.totalResults()));
1432
+ // offset = computed(() => Math.max(0, this.limit() - this.rowsPerPage() + 1));
1433
+ offset = computed(() => this.totalResults() === 0 ? 0 : this.currentPage() * this.rowsPerPage() + 1);
1434
+ limit = computed(() => Math.min((this.currentPage() + 1) * this.rowsPerPage(), this.totalResults()));
1400
1435
  smartPageArray = computed(() => {
1401
1436
  const total = this.totalPages();
1402
1437
  const current = this.currentPage();
1403
1438
  const windowSize = 5;
1404
1439
  const pages = [];
1405
1440
  if (total <= windowSize + 2) {
1406
- // mostra todas as páginas se for pequeno
1407
- for (let i = 1; i <= total; i++)
1441
+ for (let i = 0; i < total; i++)
1408
1442
  pages.push(i);
1409
1443
  return pages;
1410
1444
  }
1411
- const start = Math.max(2, current - 1);
1412
- const end = Math.min(total - 1, current + 1);
1413
- pages.push(1); // sempre mostra a primeira página
1414
- if (start > 2)
1445
+ const start = Math.max(1, current - 1);
1446
+ const end = Math.min(total - 2, current + 1);
1447
+ pages.push(0); // sempre mostra a primeira página
1448
+ if (start > 1)
1415
1449
  pages.push('...');
1416
1450
  for (let i = start; i <= end; i++) {
1417
1451
  pages.push(i);
1418
1452
  }
1419
- if (end < total - 1)
1453
+ if (end < total - 2)
1420
1454
  pages.push('...');
1421
- pages.push(total); // sempre mostra a última página
1455
+ pages.push(total - 1); // última página
1422
1456
  return pages;
1423
1457
  });
1458
+ // limit = computed(() =>
1459
+ // Math.min(this.rowsPerPage() * this.currentPage(), this.totalResults()),
1460
+ // );
1461
+ // smartPageArray = computed(() => {
1462
+ // const total = this.totalPages();
1463
+ // const current = this.currentPage();
1464
+ // const windowSize = 5;
1465
+ // const pages: (number | '...')[] = [];
1466
+ // if (total <= windowSize + 2) {
1467
+ // // mostra todas as páginas se for pequeno
1468
+ // for (let i = 1; i <= total; i++) pages.push(i);
1469
+ // return pages;
1470
+ // }
1471
+ // const start = Math.max(2, current - 1);
1472
+ // const end = Math.min(total - 1, current + 1);
1473
+ // pages.push(1); // sempre mostra a primeira página
1474
+ // if (start > 2) pages.push('...');
1475
+ // for (let i = start; i <= end; i++) {
1476
+ // pages.push(i);
1477
+ // }
1478
+ // if (end < total - 1) pages.push('...');
1479
+ // pages.push(total); // sempre mostra a última página
1480
+ // return pages;
1481
+ // });
1424
1482
  // totalPageArr = computed(() => {
1425
1483
  // let arr: number[] = [];
1426
1484
  // let calculateTotalPages = this.totalPages() + 1;
@@ -1433,10 +1491,14 @@ class PaginationComponent {
1433
1491
  this.currentPage.set(selectedPage);
1434
1492
  this.emitChangeValue();
1435
1493
  }
1436
- prevButtonDisabled = computed(() => this.currentPage() <= -1 || this.currentPage() == 1);
1437
- nextButtonDisabled = computed(() => this.currentPage() == this.totalPages());
1494
+ prevButtonDisabled = computed(() => this.currentPage() <= 0);
1495
+ nextButtonDisabled = computed(() => this.currentPage() >= this.totalPages() - 1);
1496
+ // prevButtonDisabled = computed(
1497
+ // () => this.currentPage() <= -1 || this.currentPage() == 1,
1498
+ // );
1499
+ // nextButtonDisabled = computed(() => this.currentPage() == this.totalPages());
1438
1500
  prevPage() {
1439
- if (this.currentPage() <= 1)
1501
+ if (this.currentPage() <= 0)
1440
1502
  return;
1441
1503
  this.currentPage.update((prevValue) => prevValue - 1);
1442
1504
  this.emitChangeValue();
@@ -1451,6 +1513,7 @@ class PaginationComponent {
1451
1513
  const selectElement = event.target;
1452
1514
  const value = Number(selectElement.value);
1453
1515
  this.rowsPerPage.set(value ?? 5);
1516
+ this.currentPage.set(0);
1454
1517
  this.recalcCurrentPage();
1455
1518
  }
1456
1519
  recalcCurrentPage() {
@@ -1470,14 +1533,15 @@ class PaginationComponent {
1470
1533
  limit: this.limit(),
1471
1534
  offset: this.offset(),
1472
1535
  totalPages: this.totalPages(),
1536
+ rowsPerPage: this.rowsPerPage(),
1473
1537
  });
1474
1538
  }
1475
1539
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1476
- 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-200);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"] }] });
1540
+ 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"] }] });
1477
1541
  }
1478
1542
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, decorators: [{
1479
1543
  type: Component,
1480
- 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-200);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"] }]
1544
+ 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"] }]
1481
1545
  }] });
1482
1546
 
1483
1547
  const selectAnimation = trigger('selectAnimation', [
@@ -1519,14 +1583,17 @@ class SelectComponent {
1519
1583
  maxScreen = input(false);
1520
1584
  isLoading = input(false);
1521
1585
  hasError = input(false);
1522
- optionLabel = input('');
1523
1586
  label = input();
1524
1587
  errorMessageDefault = input('Erro ao carregar as opções. Tente novamente mais tarde.');
1525
1588
  emptyMessageDefault = input('Nenhuma opção disponível');
1526
1589
  selectedOption = null;
1527
1590
  onSearch = output();
1528
1591
  options = input([]);
1529
- transformedOptions = [];
1592
+ transformedOptions = computed(() => this.options().map((option) => ({
1593
+ option,
1594
+ selected: this.isEqual(option, this.selectedValue()),
1595
+ })));
1596
+ selectedValue = signal(null);
1530
1597
  optionTemplate;
1531
1598
  errorTemplate;
1532
1599
  emptyTemplate;
@@ -1537,11 +1604,23 @@ class SelectComponent {
1537
1604
  onChange = (value) => { };
1538
1605
  onTouched = () => { };
1539
1606
  ngOnInit() {
1540
- this.transformedOptions = this.includeSelectedProperty();
1607
+ // this.transformedOptions = this.includeSelectedProperty();
1541
1608
  }
1542
1609
  writeValue(value) {
1543
- this.selectedOption = value;
1544
- console.log(value);
1610
+ // this.transformedOptions = this.includeSelectedProperty();
1611
+ this.selectedValue.set(value);
1612
+ this.markAllUnselected();
1613
+ const matchedOption = this.transformedOptions().find((opt) => this.isEqual(opt.option, value));
1614
+ if (matchedOption) {
1615
+ matchedOption.selected = true;
1616
+ this.selectedOption = matchedOption;
1617
+ }
1618
+ else {
1619
+ this.selectedOption = {
1620
+ option: value,
1621
+ selected: true,
1622
+ };
1623
+ }
1545
1624
  }
1546
1625
  registerOnChange(fn) {
1547
1626
  this.onChange = fn;
@@ -1560,7 +1639,8 @@ class SelectComponent {
1560
1639
  }
1561
1640
  this.isOpened = false;
1562
1641
  this.onTouched();
1563
- this.onChange(selectedOption);
1642
+ const originalOption = selectedOption?.option ?? selectedOption;
1643
+ this.onChange(originalOption);
1564
1644
  }
1565
1645
  handleSearch(e) {
1566
1646
  const value = e.target.value;
@@ -1568,21 +1648,26 @@ class SelectComponent {
1568
1648
  }
1569
1649
  includeSelectedProperty() {
1570
1650
  return this.options().map((option) => ({
1571
- ...option,
1651
+ option: option,
1572
1652
  selected: false,
1573
1653
  }));
1574
1654
  }
1575
1655
  markAllUnselected() {
1576
- this.transformedOptions.forEach((option) => (option['selected'] = false));
1656
+ this.transformedOptions().forEach((option) => (option['selected'] = false));
1657
+ }
1658
+ isEqual(opt1, opt2) {
1659
+ return opt1?.id !== undefined && opt2?.id !== undefined
1660
+ ? opt1.id === opt2.id
1661
+ : JSON.stringify(opt1) === JSON.stringify(opt2); // fallback genérico
1577
1662
  }
1578
1663
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1579
- 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: [
1664
+ 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: [
1580
1665
  {
1581
1666
  multi: true,
1582
1667
  provide: NG_VALUE_ACCESSOR,
1583
1668
  useExisting: forwardRef(() => SelectComponent),
1584
1669
  },
1585
- ], 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] });
1670
+ ], 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] });
1586
1671
  }
1587
1672
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
1588
1673
  type: Component,
@@ -1592,7 +1677,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
1592
1677
  provide: NG_VALUE_ACCESSOR,
1593
1678
  useExisting: forwardRef(() => SelectComponent),
1594
1679
  },
1595
- ], 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"] }]
1680
+ ], 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"] }]
1596
1681
  }], propDecorators: { optionTemplate: [{
1597
1682
  type: ContentChild,
1598
1683
  args: ['optionTemplate']
@@ -1712,12 +1797,6 @@ var TooltipPosition;
1712
1797
  TooltipPosition["DYNAMIC"] = "dynamic";
1713
1798
  TooltipPosition["DEFAULT"] = "above";
1714
1799
  })(TooltipPosition || (TooltipPosition = {}));
1715
- var TooltipTheme;
1716
- (function (TooltipTheme) {
1717
- TooltipTheme["DARK"] = "dark";
1718
- TooltipTheme["LIGHT"] = "light";
1719
- TooltipTheme["DEFAULT"] = "dark";
1720
- })(TooltipTheme || (TooltipTheme = {}));
1721
1800
 
1722
1801
  class TooltipComponent {
1723
1802
  position = TooltipPosition.DEFAULT;
@@ -1728,11 +1807,11 @@ class TooltipComponent {
1728
1807
  constructor() { }
1729
1808
  ngOnInit() { }
1730
1809
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1731
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: false, selector: "s4y-tooltip", ngImport: i0, template: "<div\r\n class=\"tooltip {{ 'tooltip--' + position }}\"\r\n [class.tooltip--visible]=\"visible\"\r\n [style.left]=\"left + 'px'\"\r\n [style.top]=\"top + 'px'\"\r\n>\r\n {{ tooltip }}\r\n</div>\r\n", styles: [".tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;font-family:Arial;padding:3px 6px;font-size:13px;opacity:0}.tooltip:before{content:\"\";width:0;height:0;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--light:before{border:5px solid white}.tooltip--dark{background-color:#000;color:#fff}.tooltip--dark:before{border:5px solid black}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-bottom:7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"] });
1810
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: false, selector: "s4y-tooltip", ngImport: i0, template: "<div\r\n class=\"tooltip {{ 'tooltip--' + position }}\"\r\n [class.tooltip--visible]=\"visible\"\r\n [style.left]=\"left + 'px'\"\r\n [style.top]=\"top + 'px'\"\r\n>\r\n {{ tooltip }}\r\n</div>\r\n", styles: [".tooltip{position:fixed;background-color:var(--gray-100);color:var(--gray-900);border:1px solid var(--gray-300);box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:4px;font-family:Arial;padding:3px 6px;font-size:12px;width:max-content;opacity:0}.tooltip:before{content:\"\";width:0;height:0;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--light:before{border:5px solid white}.tooltip--dark{background-color:#000;color:#fff}.tooltip--dark:before{border:5px solid black}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-bottom:7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"] });
1732
1811
  }
1733
1812
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
1734
1813
  type: Component,
1735
- args: [{ selector: 's4y-tooltip', standalone: false, template: "<div\r\n class=\"tooltip {{ 'tooltip--' + position }}\"\r\n [class.tooltip--visible]=\"visible\"\r\n [style.left]=\"left + 'px'\"\r\n [style.top]=\"top + 'px'\"\r\n>\r\n {{ tooltip }}\r\n</div>\r\n", styles: [".tooltip{position:fixed;background-color:#000;border-radius:4px;color:#fff;font-family:Arial;padding:3px 6px;font-size:13px;opacity:0}.tooltip:before{content:\"\";width:0;height:0;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--light:before{border:5px solid white}.tooltip--dark{background-color:#000;color:#fff}.tooltip--dark:before{border:5px solid black}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-bottom:7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"] }]
1814
+ args: [{ selector: 's4y-tooltip', standalone: false, template: "<div\r\n class=\"tooltip {{ 'tooltip--' + position }}\"\r\n [class.tooltip--visible]=\"visible\"\r\n [style.left]=\"left + 'px'\"\r\n [style.top]=\"top + 'px'\"\r\n>\r\n {{ tooltip }}\r\n</div>\r\n", styles: [".tooltip{position:fixed;background-color:var(--gray-100);color:var(--gray-900);border:1px solid var(--gray-300);box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;border-radius:4px;font-family:Arial;padding:3px 6px;font-size:12px;width:max-content;opacity:0}.tooltip:before{content:\"\";width:0;height:0;position:absolute}.tooltip--visible{opacity:1;transition:opacity .3s}.tooltip--light{background-color:#fff;color:#000}.tooltip--light:before{border:5px solid white}.tooltip--dark{background-color:#000;color:#fff}.tooltip--dark:before{border:5px solid black}.tooltip--below{transform:translate(-50%);margin-top:7px}.tooltip--below:before{border-left-color:transparent;border-right-color:transparent;border-top:none;left:calc(50% - 5px);top:-5px}.tooltip--above{transform:translate(-50%,-100%);margin-bottom:7px}.tooltip--above:before{border-left-color:transparent;border-right-color:transparent;border-bottom:none;left:calc(50% - 5px);bottom:-5px}.tooltip--left{transform:translate(calc(-100% - 7px),-50%)}.tooltip--left:before{border-top-color:transparent;border-bottom-color:transparent;border-right:none;right:-5px;top:calc(50% - 5px)}.tooltip--right{transform:translateY(-50%);margin-left:7px}.tooltip--right:before{border-top-color:transparent;border-bottom-color:transparent;border-left:none;left:-5px;top:calc(50% - 5px)}.tooltip--dynamic{margin-left:20px}.tooltip--dynamic:before{display:none}\n"] }]
1736
1815
  }], ctorParameters: () => [] });
1737
1816
 
1738
1817
  class TooltipDirective {
@@ -2360,5 +2439,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
2360
2439
  * Generated bundle index. Do not edit.
2361
2440
  */
2362
2441
 
2363
- export { AsideComponent, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, MaskDirective, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, RadioComponent, SearchBarComponent, SelectComponent, SliderComponent, SortTableDirective, SpinnerComponent, SvgComponent, SvgService, TableComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule };
2442
+ export { AsideComponent, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, MaskDirective, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, RadioComponent, SearchBarComponent, SelectComponent, SliderComponent, SortTableDirective, SpinnerComponent, SvgComponent, SvgService, TableComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition };
2364
2443
  //# sourceMappingURL=s4y-ui.mjs.map