s4y-ui 5.0.2 → 5.1.2

package/fesm2022/s4y-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, viewChild, Renderer2, DestroyRef, InjectionToken, Injector } from '@angular/core';
+import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, viewChild, Renderer2, DestroyRef, contentChild, InjectionToken, Injector, afterNextRender } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, DOCUMENT, NgIf, NgStyle } from '@angular/common';
 import * as i1$1 from '@angular/platform-browser';
@@ -132,11 +132,11 @@ class AvatarComponent {
         this.imageError.set(true);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AvatarComponent, isStandalone: true, selector: "s4y-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n  <path\r\n    d=\"M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z\"\r\n  ></path>\r\n</svg>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}:host img{width:100%;height:100%;object-fit:cover;object-position:center}:host.s4y-avatar-sm{width:32px;height:32px}:host.s4y-avatar-md{width:42px;height:42px}:host.s4y-avatar-lg{width:72px;height:72px}:host.s4y-avatar-xl{width:96px;height:96px}:host.s4y-avatar-rounded{border-radius:50%}:host.s4y-avatar-square{border-radius:8px}:host.s4y-avatar-border{border:1px solid var(--primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: AvatarComponent, isStandalone: true, selector: "s4y-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, border: { classPropertyName: "border", publicName: "border", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n    <svg\r\n    viewBox=\"0 0 128 128\"\r\n    width=\"100%\"\r\n    height=\"100%\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    style=\"display:block\"\r\n  >\r\n    <circle cx=\"64\" cy=\"64\" r=\"64\" fill=\"#D9D9D9\" />\r\n\r\n    <circle cx=\"64\" cy=\"48\" r=\"24\" fill=\"#A9AEB3\" />\r\n\r\n    <path\r\n      fill=\"#A9AEB3\"\r\n      d=\"M64 80c-28 0-44 16-44 36v12h88v-12c0-20-16-36-44-36z\"\r\n    />\r\n  </svg>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}:host img{width:100%;height:100%;object-fit:cover;object-position:top center}:host.s4y-avatar-sm{width:32px;height:32px}:host.s4y-avatar-md{width:42px;height:42px}:host.s4y-avatar-lg{width:72px;height:72px}:host.s4y-avatar-xl{width:96px;height:96px}:host.s4y-avatar-rounded{border-radius:50%}:host.s4y-avatar-square{border-radius:8px}:host.s4y-avatar-border{border:1px solid var(--primary-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-avatar', imports: [CommonModule], template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n  <path\r\n    d=\"M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z\"\r\n  ></path>\r\n</svg>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}:host img{width:100%;height:100%;object-fit:cover;object-position:center}:host.s4y-avatar-sm{width:32px;height:32px}:host.s4y-avatar-md{width:42px;height:42px}:host.s4y-avatar-lg{width:72px;height:72px}:host.s4y-avatar-xl{width:96px;height:96px}:host.s4y-avatar-rounded{border-radius:50%}:host.s4y-avatar-square{border-radius:8px}:host.s4y-avatar-border{border:1px solid var(--primary-color)}\n"] }]
+            args: [{ selector: 's4y-avatar', imports: [CommonModule], template: "@if (src()) {\r\n<img [src]=\"src()\" [alt]=\"alt()\" />\r\n\r\n}@else {\r\n    <svg\r\n    viewBox=\"0 0 128 128\"\r\n    width=\"100%\"\r\n    height=\"100%\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    style=\"display:block\"\r\n  >\r\n    <circle cx=\"64\" cy=\"64\" r=\"64\" fill=\"#D9D9D9\" />\r\n\r\n    <circle cx=\"64\" cy=\"48\" r=\"24\" fill=\"#A9AEB3\" />\r\n\r\n    <path\r\n      fill=\"#A9AEB3\"\r\n      d=\"M64 80c-28 0-44 16-44 36v12h88v-12c0-20-16-36-44-36z\"\r\n    />\r\n  </svg>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}:host img{width:100%;height:100%;object-fit:cover;object-position:top center}:host.s4y-avatar-sm{width:32px;height:32px}:host.s4y-avatar-md{width:42px;height:42px}:host.s4y-avatar-lg{width:72px;height:72px}:host.s4y-avatar-xl{width:96px;height:96px}:host.s4y-avatar-rounded{border-radius:50%}:host.s4y-avatar-square{border-radius:8px}:host.s4y-avatar-border{border:1px solid var(--primary-color)}\n"] }]
         }], propDecorators: { hostClasses: [{
                 type: HostBinding,
                 args: ['class']
@@ -314,11 +314,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class DashboardContainerComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DashboardContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DashboardContainerComponent, isStandalone: false, selector: "s4y-dashboard-container", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 4rem 3.2rem;min-height:100%}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DashboardContainerComponent, isStandalone: false, selector: "s4y-dashboard-container", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 1.4rem 3.2rem;min-height:100%}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DashboardContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-dashboard-container', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 4rem 3.2rem;min-height:100%}\n"] }]
+            args: [{ selector: 's4y-dashboard-container', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;padding:1.4rem 1.4rem 3.2rem;min-height:100%}\n"] }]
         }] });
 
 const COMPONENTS$1 = [
@@ -370,6 +370,7 @@ class ButtonComponent {
     outlined = input(false, { transform: booleanAttribute });
     loading = input(false);
     size = input('medium');
+    roundend = input(true);
     variant = input('primary');
     fullWidth = input(false);
     iconAligned = input(true);
@@ -396,13 +397,13 @@ class ButtonComponent {
         }
     });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "button[s4yButton], a[s4yButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconAligned: { classPropertyName: "iconAligned", publicName: "iconAligned", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.btn-default": "true", "class.loading": "loading()", "attr.size": "size()", "attr.variant": "variant()", "style.width": "fullWidth() ? \"100%\" : null", "class.outlined": "outlined()", "class.disabled": "disabled()", "class": "variantClass()", "class.icon-centered": "iconAligned()", "disabled": "this.isDisabled" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ButtonComponent, isStandalone: true, selector: "button[s4yButton], a[s4yButton]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, roundend: { classPropertyName: "roundend", publicName: "roundend", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconAligned: { classPropertyName: "iconAligned", publicName: "iconAligned", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.btn-default": "true", "class.loading": "loading()", "attr.size": "size()", "attr.variant": "variant()", "style.width": "fullWidth() ? \"100%\" : null", "class.outlined": "outlined()", "class.disabled": "disabled()", "class": "variantClass()", "class.icon-centered": "iconAligned()", "class.rounded": "roundend()", "disabled": "this.isDisabled" } }, ngImport: i0, template: `
     @if (loading()) {
       <div class="loader"></div>
     } @else {
       <ng-content></ng-content>
     }
-  `, isInline: true, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;font-size:1.4rem;font-weight:500;border-radius:var(--radius);padding:.8rem 1.6rem;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .1s ease;white-space:nowrap}:host.btn-default:focus-visible{outline:0;transform:scale(1.04)}:host.btn-default:not(.icon-centered){justify-content:space-between}:host([size=extra-small]){height:2.8rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.6rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4.6rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:5.6rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host.btn-primary{background-color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary.outlined{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-secondary{background-color:var(--secondary-color);border:1px solid var(--secondary-color)}:host.btn-secondary:hover{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-danger{background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger:hover{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-success{background-color:var(--success-color);border:1px solid var(--success-color)}:host.btn-success:hover{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-info{background-color:var(--infor-color);border:1px solid var(--infor-color)}:host.btn-info:hover{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info.outlined{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info.outlined:hover{background-color:var(--infor-color);border:1px solid var(--infor-color);color:#fff}:host.btn-gray{border:1px solid var(--gray-400);background-color:var(--gray-200);color:var(--gray-800);font-weight:500}:host.btn-gray:hover{border:1px solid var(--gray-500);background-color:var(--gray-100);color:var(--gray-900)}:host.btn-gray.outlined{border:1px solid var(--gray-600);color:var(--gray-700);background-color:transparent}:host.btn-gray.outlined:hover{background-color:var(--gray-600);color:#fff}:host.disabled{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);cursor:not-allowed;padding:.8rem 1.6rem;opacity:.7}:host.disabled:hover,:host.disabled:active,:host.disabled:focus{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);box-shadow:none}:host.disabled.outlined{background-color:transparent;color:var(--gray-400);border:1px solid var(--gray-400);cursor:not-allowed;opacity:.6;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid currentColor;animation:l20-1 .8s infinite linear alternate,l20-2 1.6s infinite linear}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}\n"] });
+  `, isInline: true, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;font-size:1.4rem;font-weight:500;padding:.8rem 1.6rem;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .1s ease;white-space:nowrap}:host.rounded{border-radius:var(--radius)}:host.btn-default:focus-visible{outline:0;transform:scale(1.04)}:host.btn-default:not(.icon-centered){justify-content:space-between}:host([size=extra-small]){height:2.8rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.6rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4.6rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:5.6rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host.btn-primary{background-color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary.outlined{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-secondary{background-color:var(--secondary-color);border:1px solid var(--secondary-color)}:host.btn-secondary:hover{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-danger{background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger:hover{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-success{background-color:var(--success-color);border:1px solid var(--success-color)}:host.btn-success:hover{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-info{background-color:var(--info-color);border:1px solid var(--info-color)}:host.btn-info:hover{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined:hover{background-color:var(--info-color);border:1px solid var(--info-color);color:#fff}:host.btn-gray{border:1px solid var(--gray-400);background-color:var(--gray-200);color:var(--gray-800);font-weight:500}:host.btn-gray:hover{border:1px solid var(--gray-500);background-color:var(--gray-100);color:var(--gray-900)}:host.btn-gray.outlined{border:1px solid var(--gray-600);color:var(--gray-700);background-color:transparent}:host.btn-gray.outlined:hover{background-color:var(--gray-600);color:#fff}:host.disabled{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);cursor:not-allowed;padding:.8rem 1.6rem;opacity:.7}:host.disabled:hover,:host.disabled:active,:host.disabled:focus{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);box-shadow:none}:host.disabled.outlined{background-color:transparent;color:var(--gray-400);border:1px solid var(--gray-400);cursor:not-allowed;opacity:.6;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid currentColor;animation:l20-1 .8s infinite linear alternate,l20-2 1.6s infinite linear}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -422,7 +423,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         '[class.disabled]': 'disabled()',
                         '[class]': 'variantClass()',
                         '[class.icon-centered]': 'iconAligned()',
-                    }, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;font-size:1.4rem;font-weight:500;border-radius:var(--radius);padding:.8rem 1.6rem;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .1s ease;white-space:nowrap}:host.btn-default:focus-visible{outline:0;transform:scale(1.04)}:host.btn-default:not(.icon-centered){justify-content:space-between}:host([size=extra-small]){height:2.8rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.6rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4.6rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:5.6rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host.btn-primary{background-color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary.outlined{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-secondary{background-color:var(--secondary-color);border:1px solid var(--secondary-color)}:host.btn-secondary:hover{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-danger{background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger:hover{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-success{background-color:var(--success-color);border:1px solid var(--success-color)}:host.btn-success:hover{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-info{background-color:var(--infor-color);border:1px solid var(--infor-color)}:host.btn-info:hover{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info.outlined{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info.outlined:hover{background-color:var(--infor-color);border:1px solid var(--infor-color);color:#fff}:host.btn-gray{border:1px solid var(--gray-400);background-color:var(--gray-200);color:var(--gray-800);font-weight:500}:host.btn-gray:hover{border:1px solid var(--gray-500);background-color:var(--gray-100);color:var(--gray-900)}:host.btn-gray.outlined{border:1px solid var(--gray-600);color:var(--gray-700);background-color:transparent}:host.btn-gray.outlined:hover{background-color:var(--gray-600);color:#fff}:host.disabled{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);cursor:not-allowed;padding:.8rem 1.6rem;opacity:.7}:host.disabled:hover,:host.disabled:active,:host.disabled:focus{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);box-shadow:none}:host.disabled.outlined{background-color:transparent;color:var(--gray-400);border:1px solid var(--gray-400);cursor:not-allowed;opacity:.6;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid currentColor;animation:l20-1 .8s infinite linear alternate,l20-2 1.6s infinite linear}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}\n"] }]
+                        '[class.rounded]': 'roundend()',
+                    }, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;font-size:1.4rem;font-weight:500;padding:.8rem 1.6rem;transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .1s ease;white-space:nowrap}:host.rounded{border-radius:var(--radius)}:host.btn-default:focus-visible{outline:0;transform:scale(1.04)}:host.btn-default:not(.icon-centered){justify-content:space-between}:host([size=extra-small]){height:2.8rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.6rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4.6rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:5.6rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host.btn-primary{background-color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary:hover{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}:host.btn-primary.outlined{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-secondary{background-color:var(--secondary-color);border:1px solid var(--secondary-color)}:host.btn-secondary:hover{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-danger{background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger:hover{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-success{background-color:var(--success-color);border:1px solid var(--success-color)}:host.btn-success:hover{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-info{background-color:var(--info-color);border:1px solid var(--info-color)}:host.btn-info:hover{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined{border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host.btn-info.outlined:hover{background-color:var(--info-color);border:1px solid var(--info-color);color:#fff}:host.btn-gray{border:1px solid var(--gray-400);background-color:var(--gray-200);color:var(--gray-800);font-weight:500}:host.btn-gray:hover{border:1px solid var(--gray-500);background-color:var(--gray-100);color:var(--gray-900)}:host.btn-gray.outlined{border:1px solid var(--gray-600);color:var(--gray-700);background-color:transparent}:host.btn-gray.outlined:hover{background-color:var(--gray-600);color:#fff}:host.disabled{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);cursor:not-allowed;padding:.8rem 1.6rem;opacity:.7}:host.disabled:hover,:host.disabled:active,:host.disabled:focus{background-color:var(--gray-400);color:var(--gray-200);border:1px solid var(--gray-400);box-shadow:none}:host.disabled.outlined{background-color:transparent;color:var(--gray-400);border:1px solid var(--gray-400);cursor:not-allowed;opacity:.6;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid currentColor;animation:l20-1 .8s infinite linear alternate,l20-2 1.6s infinite linear}@keyframes l20-1{0%{clip-path:polygon(50% 50%,0 0,50% 0%,50% 0%,50% 0%,50% 0%,50% 0%)}12.5%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 0%,100% 0%,100% 0%)}25%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,100% 100%,100% 100%)}50%{clip-path:polygon(50% 50%,0 0,50% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}62.5%{clip-path:polygon(50% 50%,100% 0,100% 0%,100% 0%,100% 100%,50% 100%,0% 100%)}75%{clip-path:polygon(50% 50%,100% 100%,100% 100%,100% 100%,100% 100%,50% 100%,0% 100%)}to{clip-path:polygon(50% 50%,50% 100%,50% 100%,50% 100%,50% 100%,50% 100%,0% 100%)}}@keyframes l20-2{0%{transform:scaleY(1) rotate(0)}49.99%{transform:scaleY(1) rotate(135deg)}50%{transform:scaleY(-1) rotate(0)}to{transform:scaleY(-1) rotate(-135deg)}}\n"] }]
         }], propDecorators: { isDisabled: [{
                 type: HostBinding,
                 args: ['disabled']
@@ -887,11 +889,11 @@ class ToastComponent {
     toasts = computed(() => this._toastService.toasts());
     isBottomPosition = computed(() => this.position().startsWith('bottom'));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToastComponent, isStandalone: true, selector: "s4y-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n  @for (toast of toasts(); track $index; let i = $index) {\r\n  <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n    <div class=\"s4y-toast-item_content\">\r\n      <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n          <path\r\n            d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n          ></path>\r\n        </svg>\r\n      </div>\r\n      <p class=\"s4y-toast-item_message\">\r\n        {{ toast.message }}\r\n      </p>\r\n    </div>\r\n    <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n      &times;\r\n    </button>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-container{width:90%;margin:0}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-container{width:90%;margin:0}}.s4y-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start;justify-content:flex-start}.s4y-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end;justify-content:flex-start}.s4y-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-item{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.4rem;gap:1.2rem;position:relative;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;background-color:#fff;border:1px solid var(--gray-100);width:100%}.s4y-toast-item .s4y-toast-item_content{flex-grow:1;display:flex;align-items:center;gap:1.4rem}.s4y-toast-item .s4y-toast-item_message{color:var(--gray-900);font-size:1.4rem;font-weight:500}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}.s4y-toast-item .s4y-toast-item_icon{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;color:#fff;border-radius:var(--radius);flex-shrink:0}.s4y-toast-item .s4y-toast-item_icon.success{background-color:var(--success-color)}.s4y-toast-item .s4y-toast-item_icon.error{background-color:var(--danger-color)}.s4y-toast-item .s4y-toast-item_icon.warning{background-color:var(--warning-color)}.s4y-toast-item .s4y-toast-item_icon.info{background-color:var(--infor-color)}.s4y-toast-item .s4y-toast-item_close{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;border-radius:var(--radius);font-size:1.8rem;cursor:pointer;transition:.5s ease;color:var(--gray-900)}.s4y-toast-item .s4y-toast-item_close:hover{background-color:var(--gray-100)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [ToastAnimation] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ToastComponent, isStandalone: true, selector: "s4y-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n  @for (toast of toasts(); track $index; let i = $index) {\r\n  <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n    <div class=\"s4y-toast-item_content\">\r\n      <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n          <path\r\n            d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n          ></path>\r\n        </svg>\r\n      </div>\r\n      <p class=\"s4y-toast-item_message\">\r\n        {{ toast.message }}\r\n      </p>\r\n    </div>\r\n    <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n      &times;\r\n    </button>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-container{width:90%;margin:0}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-container{width:90%;margin:0}}.s4y-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start;justify-content:flex-start}.s4y-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end;justify-content:flex-start}.s4y-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-item{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.4rem;gap:1.2rem;position:relative;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;background-color:#fff;border:1px solid var(--gray-100);width:100%}.s4y-toast-item .s4y-toast-item_content{flex-grow:1;display:flex;align-items:center;gap:1.4rem}.s4y-toast-item .s4y-toast-item_message{color:var(--gray-900);font-size:1.4rem;font-weight:500}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}.s4y-toast-item .s4y-toast-item_icon{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;color:#fff;border-radius:var(--radius);flex-shrink:0}.s4y-toast-item .s4y-toast-item_icon.success{background-color:var(--success-color)}.s4y-toast-item .s4y-toast-item_icon.error{background-color:var(--danger-color)}.s4y-toast-item .s4y-toast-item_icon.warning{background-color:var(--warning-color)}.s4y-toast-item .s4y-toast-item_icon.info{background-color:var(--info-color)}.s4y-toast-item .s4y-toast-item_close{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;border-radius:var(--radius);font-size:1.8rem;cursor:pointer;transition:.5s ease;color:var(--gray-900)}.s4y-toast-item .s4y-toast-item_close:hover{background-color:var(--gray-100)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [ToastAnimation] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-toast', imports: [NgClass], animations: [ToastAnimation], template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n  @for (toast of toasts(); track $index; let i = $index) {\r\n  <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n    <div class=\"s4y-toast-item_content\">\r\n      <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n          <path\r\n            d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n          ></path>\r\n        </svg>\r\n      </div>\r\n      <p class=\"s4y-toast-item_message\">\r\n        {{ toast.message }}\r\n      </p>\r\n    </div>\r\n    <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n      &times;\r\n    </button>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-container{width:90%;margin:0}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-container{width:90%;margin:0}}.s4y-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start;justify-content:flex-start}.s4y-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end;justify-content:flex-start}.s4y-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-item{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.4rem;gap:1.2rem;position:relative;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;background-color:#fff;border:1px solid var(--gray-100);width:100%}.s4y-toast-item .s4y-toast-item_content{flex-grow:1;display:flex;align-items:center;gap:1.4rem}.s4y-toast-item .s4y-toast-item_message{color:var(--gray-900);font-size:1.4rem;font-weight:500}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}.s4y-toast-item .s4y-toast-item_icon{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;color:#fff;border-radius:var(--radius);flex-shrink:0}.s4y-toast-item .s4y-toast-item_icon.success{background-color:var(--success-color)}.s4y-toast-item .s4y-toast-item_icon.error{background-color:var(--danger-color)}.s4y-toast-item .s4y-toast-item_icon.warning{background-color:var(--warning-color)}.s4y-toast-item .s4y-toast-item_icon.info{background-color:var(--infor-color)}.s4y-toast-item .s4y-toast-item_close{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;border-radius:var(--radius);font-size:1.8rem;cursor:pointer;transition:.5s ease;color:var(--gray-900)}.s4y-toast-item .s4y-toast-item_close:hover{background-color:var(--gray-100)}\n"] }]
+            args: [{ selector: 's4y-toast', imports: [NgClass], animations: [ToastAnimation], template: "<!-- Ajustar os icones -->\r\n\r\n<div class=\"s4y-toast-container\" [ngClass]=\"position()\">\r\n  @for (toast of toasts(); track $index; let i = $index) {\r\n  <div class=\"s4y-toast-item\" [@ToastAnimation]=\"position()\">\r\n    <div class=\"s4y-toast-item_content\">\r\n      <div class=\"s4y-toast-item_icon {{ toast.type }}\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"#fff\">\r\n          <path\r\n            d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n          ></path>\r\n        </svg>\r\n      </div>\r\n      <p class=\"s4y-toast-item_message\">\r\n        {{ toast.message }}\r\n      </p>\r\n    </div>\r\n    <button (click)=\"_toastService.remove(i)\" class=\"s4y-toast-item_close\">\r\n      &times;\r\n    </button>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".s4y-toast-container{display:flex;flex-direction:column;gap:1.4rem;position:fixed;width:100%;margin:1.8rem;min-width:280px;max-width:480px;z-index:var(--z-index-toast)}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-container{width:90%;margin:0}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-container{width:90%;margin:0}}.s4y-toast-container.top-left{top:1rem;left:1rem;align-items:flex-start;justify-content:flex-start}.s4y-toast-container.top-right{top:1rem;right:1rem;align-items:flex-end;justify-content:flex-start}.s4y-toast-container.bottom-left{bottom:1rem;left:1rem;align-items:flex-start;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-container.bottom-right{bottom:1rem;right:1rem;align-items:flex-end;justify-content:flex-end;flex-direction:column-reverse}.s4y-toast-item{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.4rem;gap:1.2rem;position:relative;box-shadow:#00000005 0 1px 3px,#1b1f2326 0 0 0 1px;background-color:#fff;border:1px solid var(--gray-100);width:100%}.s4y-toast-item .s4y-toast-item_content{flex-grow:1;display:flex;align-items:center;gap:1.4rem}.s4y-toast-item .s4y-toast-item_message{color:var(--gray-900);font-size:1.4rem;font-weight:500}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-toast-item .s4y-toast-item_message{font-size:1.2rem}}.s4y-toast-item .s4y-toast-item_icon{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;color:#fff;border-radius:var(--radius);flex-shrink:0}.s4y-toast-item .s4y-toast-item_icon.success{background-color:var(--success-color)}.s4y-toast-item .s4y-toast-item_icon.error{background-color:var(--danger-color)}.s4y-toast-item .s4y-toast-item_icon.warning{background-color:var(--warning-color)}.s4y-toast-item .s4y-toast-item_icon.info{background-color:var(--info-color)}.s4y-toast-item .s4y-toast-item_close{display:flex;align-items:center;width:4rem;padding:.8rem;justify-content:center;border-radius:var(--radius);font-size:1.8rem;cursor:pointer;transition:.5s ease;color:var(--gray-900)}.s4y-toast-item .s4y-toast-item_close:hover{background-color:var(--gray-100)}\n"] }]
         }], ctorParameters: () => [{ type: ToastService }] });
 
 const drawerAnimation = trigger('drawerAnimation', [
@@ -1508,7 +1510,7 @@ class ModalConfirmationComponent {
         this.modalConfirmationService.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalConfirmationComponent, isStandalone: true, selector: "s4y-modal-confirmation", inputs: { modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], 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 (iconTemplate) {\r\n        <div class=\"s4y-modal-icon\">\r\n          <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n      <div class=\"s4y-modal-header\">\r\n        <h3>{{ modalConfigs().title }}</h3>\r\n        <p>\r\n          {{ modalConfigs().message }}\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"s4y-modal-body\">\r\n        <button\r\n          (click)=\"onCancel()\"\r\n          s4yButton\r\n          [variant]=\"buttonCancelProps().variant ?? 'danger'\"\r\n          [outlined]=\"buttonCancelProps().outlined ?? true\"\r\n          [fullWidth]=\"true\"\r\n        >\r\n          {{ buttonCancelProps().text }}\r\n        </button>\r\n        <button\r\n          (click)=\"onConfirm()\"\r\n          s4yButton\r\n          [variant]=\"buttonConfirmProps().variant ?? 'danger'\"\r\n          [outlined]=\"buttonConfirmProps().outlined ?? false\"\r\n          [fullWidth]=\"true\"\r\n        >\r\n          {{ buttonConfirmProps().text }}\r\n        </button>\r\n      </div>\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-emergency)}.s4y-backdrop{position:fixed;inset:0;background-color:#000c;backdrop-filter:blur(4px)}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:350px;max-height:90dvh;min-height:14rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 1.8rem 3rem;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-icon{text-align:center;display:grid;place-items:center}.s4y-modal-header{padding:1rem 0;flex-shrink:0;align-items:center;justify-content:space-between;display:flex;flex-direction:column;gap:.4rem;margin-bottom:2.8rem}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header h3{color:var(--primary-color);font-size:1.8rem;text-align:center}.s4y-modal-header p{font-size:1.4rem;text-align:center}.s4y-modal-body{flex-grow:1;overflow-y:auto;display:flex;align-items:center;gap:1.4rem}.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"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "variant", "fullWidth", "iconAligned"] }], animations: [modalFadeCombined] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalConfirmationComponent, isStandalone: true, selector: "s4y-modal-confirmation", inputs: { modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "iconTemplate", first: true, predicate: ["iconTemplate"], 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 (iconTemplate) {\r\n        <div class=\"s4y-modal-icon\">\r\n          <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n      <div class=\"s4y-modal-header\">\r\n        <h3>{{ modalConfigs().title }}</h3>\r\n        <p>\r\n          {{ modalConfigs().message }}\r\n        </p>\r\n      </div>\r\n\r\n      <div class=\"s4y-modal-body\">\r\n        <button\r\n          (click)=\"onCancel()\"\r\n          s4yButton\r\n          [variant]=\"buttonCancelProps().variant ?? 'danger'\"\r\n          [outlined]=\"buttonCancelProps().outlined ?? true\"\r\n          [fullWidth]=\"true\"\r\n        >\r\n          {{ buttonCancelProps().text }}\r\n        </button>\r\n        <button\r\n          (click)=\"onConfirm()\"\r\n          s4yButton\r\n          [variant]=\"buttonConfirmProps().variant ?? 'danger'\"\r\n          [outlined]=\"buttonConfirmProps().outlined ?? false\"\r\n          [fullWidth]=\"true\"\r\n        >\r\n          {{ buttonConfirmProps().text }}\r\n        </button>\r\n      </div>\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-emergency)}.s4y-backdrop{position:fixed;inset:0;background-color:#000c;backdrop-filter:blur(4px)}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:350px;max-height:90dvh;min-height:14rem;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 1.8rem 3rem;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-icon{text-align:center;display:grid;place-items:center}.s4y-modal-header{padding:1rem 0;flex-shrink:0;align-items:center;justify-content:space-between;display:flex;flex-direction:column;gap:.4rem;margin-bottom:2.8rem}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header h3{color:var(--primary-color);font-size:1.8rem;text-align:center}.s4y-modal-header p{font-size:1.4rem;text-align:center}.s4y-modal-body{flex-grow:1;overflow-y:auto;display:flex;align-items:center;gap:1.4rem}.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"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "roundend", "variant", "fullWidth", "iconAligned"] }], animations: [modalFadeCombined] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalConfirmationComponent, decorators: [{
             type: Component,
@@ -1519,12 +1521,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             }] } });
 
 class SearchBarComponent {
+    size = input('md');
+    iconPosition = input('left');
+    showIcon = input(true);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: SearchBarComponent, isStandalone: true, selector: "s4y-search-bar", ngImport: i0, template: "<label class=\"s4y-search-bar-container\">\r\n  <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n  <ng-content select=\"input[s4ySearchBar]\"></ng-content>\r\n</label>\r\n\r\n<ng-template #searchIcon>\r\n  <span class=\"s4y-search-bar__icon\">\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=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z\"\r\n      ></path>\r\n    </svg>\r\n  </span>\r\n</ng-template>\r\n", styles: [".s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.4rem;max-width:60rem;border-radius:9rem;gap:1.2rem;background-color:transparent;border:1px solid var(--gray-500);transition:.5s ease;background-color:#fff;box-shadow:var(--shadow-default)}.s4y-search-bar-container input{width:100%;min-height:4.5rem;font-size:1.4rem;background-color:transparent;border:none;outline:none;color:var(--primary-color)}.s4y-search-bar-container:focus-within{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);border:1px solid var(--primary-color)}.s4y-search-bar-container input::placeholder{transition:.5s ease;color:var(--gray-900)}.s4y-search-bar-container .s4y-search-bar__icon{display:block;width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0}.s4y-search-bar-container:focus-within{border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SearchBarComponent, isStandalone: true, selector: "s4y-search-bar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\r\n  [attr.data-size]=\"size()\"\r\n  class=\"s4y-search-bar-container\"\r\n  [class.s4y-search-bar--icon-right]=\"iconPosition() === 'right'\"\r\n>\r\n  @if (showIcon()) {\r\n    <ng-container>\r\n      <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  <ng-content select=\"input[s4ySearchBar]\"></ng-content>\r\n</label>\r\n\r\n<ng-template #searchIcon>\r\n  <span class=\"s4y-search-bar__icon\">\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=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z\"\r\n      ></path>\r\n    </svg>\r\n  </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.4rem;max-width:60rem;border-radius:var(--radius);gap:1.2rem;background-color:#fff;border:1px solid var(--gray-500);box-shadow:var(--shadow-default);transition:.3s ease}.s4y-search-bar-container input{width:100%;background-color:transparent;border:none;outline:none;color:var(--primary-color);transition:.3s ease}.s4y-search-bar-container input::placeholder{color:var(--gray-900);transition:opacity .3s ease,transform .3s ease}.s4y-search-bar-container:focus-within{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0;transform:translate(4px)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container .s4y-search-bar__icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0;transition:.3s ease}.s4y-search-bar-container.s4y-search-bar--icon-right{flex-direction:row-reverse}.s4y-search-bar-container[data-size=xs]{height:2.8rem;padding:0 .8rem;gap:.6rem}.s4y-search-bar-container[data-size=xs] input{font-size:1.1rem}.s4y-search-bar-container[data-size=xs] input::placeholder{font-size:1.1rem;letter-spacing:.2px}.s4y-search-bar-container[data-size=xs] .s4y-search-bar__icon{width:1.4rem;height:1.4rem}.s4y-search-bar-container[data-size=sm]{height:3.6rem;padding:0 1rem}.s4y-search-bar-container[data-size=sm] input{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] input::placeholder{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] .s4y-search-bar__icon{width:1.8rem;height:1.8rem}.s4y-search-bar-container[data-size=md]{min-height:4.6rem}.s4y-search-bar-container[data-size=md] input{font-size:1.4rem}.s4y-search-bar-container[data-size=md] input::placeholder{font-size:1.4rem}.s4y-search-bar-container[data-size=lg]{height:5.6rem}.s4y-search-bar-container[data-size=lg] input{font-size:1.6rem}.s4y-search-bar-container[data-size=lg] input::placeholder{font-size:1.6rem}.s4y-search-bar-container[data-size=xl]{height:6.2rem}.s4y-search-bar-container[data-size=xl] input{font-size:1.8rem}.s4y-search-bar-container[data-size=xl] input::placeholder{font-size:1.8rem;letter-spacing:.3px}.s4y-search-bar-container[data-size=xl] .s4y-search-bar__icon{width:3rem;height:3rem}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-search-bar', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<label class=\"s4y-search-bar-container\">\r\n  <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n  <ng-content select=\"input[s4ySearchBar]\"></ng-content>\r\n</label>\r\n\r\n<ng-template #searchIcon>\r\n  <span class=\"s4y-search-bar__icon\">\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=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z\"\r\n      ></path>\r\n    </svg>\r\n  </span>\r\n</ng-template>\r\n", styles: [".s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.4rem;max-width:60rem;border-radius:9rem;gap:1.2rem;background-color:transparent;border:1px solid var(--gray-500);transition:.5s ease;background-color:#fff;box-shadow:var(--shadow-default)}.s4y-search-bar-container input{width:100%;min-height:4.5rem;font-size:1.4rem;background-color:transparent;border:none;outline:none;color:var(--primary-color)}.s4y-search-bar-container:focus-within{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);border:1px solid var(--primary-color)}.s4y-search-bar-container input::placeholder{transition:.5s ease;color:var(--gray-900)}.s4y-search-bar-container .s4y-search-bar__icon{display:block;width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0}.s4y-search-bar-container:focus-within{border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0}\n"] }]
+            args: [{ selector: 's4y-search-bar', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<label\r\n  [attr.data-size]=\"size()\"\r\n  class=\"s4y-search-bar-container\"\r\n  [class.s4y-search-bar--icon-right]=\"iconPosition() === 'right'\"\r\n>\r\n  @if (showIcon()) {\r\n    <ng-container>\r\n      <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n    </ng-container>\r\n  }\r\n  <ng-content select=\"input[s4ySearchBar]\"></ng-content>\r\n</label>\r\n\r\n<ng-template #searchIcon>\r\n  <span class=\"s4y-search-bar__icon\">\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=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z\"\r\n      ></path>\r\n    </svg>\r\n  </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-search-bar-container{display:flex;align-items:center;justify-content:flex-start;padding:0 1.4rem;max-width:60rem;border-radius:var(--radius);gap:1.2rem;background-color:#fff;border:1px solid var(--gray-500);box-shadow:var(--shadow-default);transition:.3s ease}.s4y-search-bar-container input{width:100%;background-color:transparent;border:none;outline:none;color:var(--primary-color);transition:.3s ease}.s4y-search-bar-container input::placeholder{color:var(--gray-900);transition:opacity .3s ease,transform .3s ease}.s4y-search-bar-container:focus-within{box-shadow:0 0 0 3px rgba(var(--primary-rgb),.2);border:1px solid var(--primary-color)}.s4y-search-bar-container:focus-within input::placeholder{opacity:0;transform:translate(4px)}.s4y-search-bar-container:focus-within .s4y-search-bar__icon{color:var(--primary-color)}.s4y-search-bar-container .s4y-search-bar__icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;flex-shrink:0;transition:.3s ease}.s4y-search-bar-container.s4y-search-bar--icon-right{flex-direction:row-reverse}.s4y-search-bar-container[data-size=xs]{height:2.8rem;padding:0 .8rem;gap:.6rem}.s4y-search-bar-container[data-size=xs] input{font-size:1.1rem}.s4y-search-bar-container[data-size=xs] input::placeholder{font-size:1.1rem;letter-spacing:.2px}.s4y-search-bar-container[data-size=xs] .s4y-search-bar__icon{width:1.4rem;height:1.4rem}.s4y-search-bar-container[data-size=sm]{height:3.6rem;padding:0 1rem}.s4y-search-bar-container[data-size=sm] input{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] input::placeholder{font-size:1.25rem}.s4y-search-bar-container[data-size=sm] .s4y-search-bar__icon{width:1.8rem;height:1.8rem}.s4y-search-bar-container[data-size=md]{min-height:4.6rem}.s4y-search-bar-container[data-size=md] input{font-size:1.4rem}.s4y-search-bar-container[data-size=md] input::placeholder{font-size:1.4rem}.s4y-search-bar-container[data-size=lg]{height:5.6rem}.s4y-search-bar-container[data-size=lg] input{font-size:1.6rem}.s4y-search-bar-container[data-size=lg] input::placeholder{font-size:1.6rem}.s4y-search-bar-container[data-size=xl]{height:6.2rem}.s4y-search-bar-container[data-size=xl] input{font-size:1.8rem}.s4y-search-bar-container[data-size=xl] input::placeholder{font-size:1.8rem;letter-spacing:.3px}.s4y-search-bar-container[data-size=xl] .s4y-search-bar__icon{width:3rem;height:3rem}\n"] }]
         }] });
 
 class ToggleComponent {
@@ -3363,6 +3368,205 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
             args: [{ selector: 'img[s4yImage]', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, styles: [".s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}.s4y-img-overlay{background-color:#0009;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;transition:.3s ease;opacity:0;display:flex;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [] });
 
+class DynamicTooltipComponent {
+    text = "";
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DynamicTooltipComponent, isStandalone: true, selector: "s4y-dynamic-tooltip", ngImport: i0, template: "<div class=\"s4y-tooltip-container\">\r\n  <p>\r\n    {{ text }}\r\n  </p>\r\n</div>\r\n", styles: [".s4y-tooltip-container{font-size:1.2rem;background-color:#fff;display:block;padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow-default);height:fit-content;width:fit-content;border:1px solid var(--gray-200);position:relative;max-width:24rem}.s4y-tooltip-container p{line-height:150%}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-dynamic-tooltip', imports: [], template: "<div class=\"s4y-tooltip-container\">\r\n  <p>\r\n    {{ text }}\r\n  </p>\r\n</div>\r\n", styles: [".s4y-tooltip-container{font-size:1.2rem;background-color:#fff;display:block;padding:1.2rem;border-radius:var(--radius);box-shadow:var(--shadow-default);height:fit-content;width:fit-content;border:1px solid var(--gray-200);position:relative;max-width:24rem}.s4y-tooltip-container p{line-height:150%}\n"] }]
+        }] });
+
+class DynamicTooltipDirective {
+    overlay = inject(Overlay);
+    elRef = inject((ElementRef));
+    overlayRef;
+    tooltipContent = input.required({
+        alias: 's4yDynamicTooltip',
+    });
+    placement = input('top');
+    tooltipPortal = new ComponentPortal(DynamicTooltipComponent);
+    onOverlayEnter;
+    onOverlayLeave;
+    constructor() {
+        console.log(this.host);
+    }
+    get host() {
+        return this.elRef.nativeElement;
+    }
+    shown() {
+        this.overlayRef?.dispose();
+        this.overlayRef = this.createOverlay();
+        const compRef = this.overlayRef.attach(this.tooltipPortal);
+        compRef.instance.text = this.tooltipContent();
+        this.overlayRef.updatePosition();
+        this.bindOverlayHoverGuards();
+    }
+    hide(e) {
+        // Se o mouse saiu do host indo PARA o overlay, não fecha
+        const next = e.relatedTarget;
+        if (next && this.overlayRef?.overlayElement.contains(next))
+            return;
+        this.dispose();
+    }
+    bindOverlayHoverGuards() {
+        if (!this.overlayRef)
+            return;
+        const overlayEl = this.overlayRef.overlayElement;
+        // remove listeners antigos (se existirem)
+        this.unbindOverlayHoverGuards();
+        this.onOverlayEnter = () => {
+            // não faz nada, apenas impede fechamento “por acidente”
+        };
+        this.onOverlayLeave = (e) => {
+            // Se saiu do overlay indo PARA o host, não fecha
+            const next = e.relatedTarget;
+            if (next && this.elRef.nativeElement.contains(next))
+                return;
+            this.dispose();
+        };
+        overlayEl.addEventListener('mouseenter', this.onOverlayEnter);
+        overlayEl.addEventListener('mouseleave', this.onOverlayLeave);
+    }
+    unbindOverlayHoverGuards() {
+        if (!this.overlayRef)
+            return;
+        const overlayEl = this.overlayRef.overlayElement;
+        if (this.onOverlayEnter)
+            overlayEl.removeEventListener('mouseenter', this.onOverlayEnter);
+        if (this.onOverlayLeave)
+            overlayEl.removeEventListener('mouseleave', this.onOverlayLeave);
+        this.onOverlayEnter = undefined;
+        this.onOverlayLeave = undefined;
+    }
+    createOverlay() {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.elRef)
+            .withFlexibleDimensions(false)
+            .withPush(true)
+            .withViewportMargin(8)
+            .withPositions(this.getPositionsByPlacement(this.placement()));
+        return this.overlay.create({
+            hasBackdrop: false,
+            disposeOnNavigation: true,
+            scrollStrategy: this.overlay.scrollStrategies.close(),
+            positionStrategy,
+            panelClass: 's4y-tooltip-panel',
+        });
+    }
+    getPositionsByPlacement(p) {
+        const gap = 8;
+        const map = {
+            top: [
+                {
+                    originX: 'center',
+                    originY: 'top',
+                    overlayX: 'center',
+                    overlayY: 'bottom',
+                    offsetY: -gap,
+                },
+                {
+                    originX: 'center',
+                    originY: 'bottom',
+                    overlayX: 'center',
+                    overlayY: 'top',
+                    offsetY: gap,
+                },
+            ],
+            bottom: [
+                {
+                    originX: 'center',
+                    originY: 'bottom',
+                    overlayX: 'center',
+                    overlayY: 'top',
+                    offsetY: gap,
+                },
+                {
+                    originX: 'center',
+                    originY: 'top',
+                    overlayX: 'center',
+                    overlayY: 'bottom',
+                    offsetY: -gap,
+                },
+            ],
+            left: [
+                {
+                    originX: 'start',
+                    originY: 'center',
+                    overlayX: 'end',
+                    overlayY: 'center',
+                    offsetX: -gap,
+                },
+                {
+                    originX: 'end',
+                    originY: 'center',
+                    overlayX: 'start',
+                    overlayY: 'center',
+                    offsetX: gap,
+                },
+            ],
+            right: [
+                {
+                    originX: 'end',
+                    originY: 'center',
+                    overlayX: 'start',
+                    overlayY: 'center',
+                    offsetX: gap,
+                },
+                {
+                    originX: 'start',
+                    originY: 'center',
+                    overlayX: 'end',
+                    overlayY: 'center',
+                    offsetX: -gap,
+                },
+            ],
+        };
+        return map[p];
+    }
+    dispose() {
+        this.unbindOverlayHoverGuards();
+        this.overlayRef?.dispose();
+        this.overlayRef = undefined;
+    }
+    ngOnDestroy() {
+        this.dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: DynamicTooltipDirective, isStandalone: true, selector: "[s4yDynamicTooltip]", inputs: { tooltipContent: { classPropertyName: "tooltipContent", publicName: "s4yDynamicTooltip", isSignal: true, isRequired: true, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "shown()", "mouseleave": "hide($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[s4yDynamicTooltip]',
+                }]
+        }], ctorParameters: () => [], propDecorators: { shown: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], hide: [{
+                type: HostListener,
+                args: ['mouseleave', ['$event']]
+            }] } });
+
+class SummaryCardComponent {
+    props = input({
+        withFooter: false,
+        withIcon: false,
+        withTooltip: false,
+        iconSize: 18,
+        iconBackgroundColor: '#4b5563',
+    });
+    footerTpl = contentChild('footerTpl');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SummaryCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SummaryCardComponent, isStandalone: true, selector: "s4y-summary-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footerTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@let summaryProps = props();\r\n\r\n<div class=\"s4y-summary-card-header\">\r\n  <div class=\"s4y-summary-card-header__content\">\r\n    <p class=\"small-text-regular gray-7\">\r\n      {{ summaryProps.label }}\r\n    </p>\r\n\r\n    @if (summaryProps.withTooltip) {\r\n      <svg\r\n        [s4yDynamicTooltip]=\"summaryProps.tooltipContent ?? ''\"\r\n        [placement]=\"summaryProps.tooltipPlacement ?? 'right'\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"currentColor\"\r\n        width=\"14\"\r\n        height=\"14\"\r\n      >\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n        ></path>\r\n      </svg>\r\n    }\r\n  </div>\r\n  @let showIcon = summaryProps.withIcon && !!summaryProps.iconUri;\r\n\r\n  @if (showIcon) {\r\n    <div\r\n      class=\"s4y-summary-card-icon\"\r\n      [style.background]=\"summaryProps.iconBackgroundColor ?? '#4b5563'\"\r\n    >\r\n      <s4y-svg\r\n        [size]=\"summaryProps.iconSize ?? 18\"\r\n        [color]=\"summaryProps.iconColor || '#fff'\"\r\n        [src]=\"summaryProps.iconUri\"\r\n      ></s4y-svg>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"s4y-summary-card-body\">\r\n  <p class=\"medium-text-bold gray-9\">\r\n    {{ summaryProps.value }}\r\n  </p>\r\n</div>\r\n\r\n@let footerTemplate = footerTpl();\r\n\r\n@if (summaryProps.withFooter && footerTemplate) {\r\n  <div class=\"s4y-summary-card-footer\">\r\n    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n  </div>\r\n}\r\n", styles: [":host{display:block;background-color:#fff;border-radius:var(--radius);padding:1.4rem;min-width:21.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);width:fit-content}.s4y-summary-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2.6rem}.s4y-summary-card-icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:var(--radius);padding:.3rem}.s4y-summary-card-body{margin:.4rem 0}.s4y-summary-card-footer{padding-top:.8rem;border-top:1px solid var(--gray-300);font-size:1.4rem;color:var(--gray-900)}.s4y-summary-card-header__content{display:flex;gap:.4rem;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: DynamicTooltipDirective, selector: "[s4yDynamicTooltip]", inputs: ["s4yDynamicTooltip", "placement"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SummaryCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-summary-card', imports: [SvgComponent, NgTemplateOutlet, DynamicTooltipDirective], template: "@let summaryProps = props();\r\n\r\n<div class=\"s4y-summary-card-header\">\r\n  <div class=\"s4y-summary-card-header__content\">\r\n    <p class=\"small-text-regular gray-7\">\r\n      {{ summaryProps.label }}\r\n    </p>\r\n\r\n    @if (summaryProps.withTooltip) {\r\n      <svg\r\n        [s4yDynamicTooltip]=\"summaryProps.tooltipContent ?? ''\"\r\n        [placement]=\"summaryProps.tooltipPlacement ?? 'right'\"\r\n        xmlns=\"http://www.w3.org/2000/svg\"\r\n        viewBox=\"0 0 24 24\"\r\n        fill=\"currentColor\"\r\n        width=\"14\"\r\n        height=\"14\"\r\n      >\r\n        <path\r\n          d=\"M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z\"\r\n        ></path>\r\n      </svg>\r\n    }\r\n  </div>\r\n  @let showIcon = summaryProps.withIcon && !!summaryProps.iconUri;\r\n\r\n  @if (showIcon) {\r\n    <div\r\n      class=\"s4y-summary-card-icon\"\r\n      [style.background]=\"summaryProps.iconBackgroundColor ?? '#4b5563'\"\r\n    >\r\n      <s4y-svg\r\n        [size]=\"summaryProps.iconSize ?? 18\"\r\n        [color]=\"summaryProps.iconColor || '#fff'\"\r\n        [src]=\"summaryProps.iconUri\"\r\n      ></s4y-svg>\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<div class=\"s4y-summary-card-body\">\r\n  <p class=\"medium-text-bold gray-9\">\r\n    {{ summaryProps.value }}\r\n  </p>\r\n</div>\r\n\r\n@let footerTemplate = footerTpl();\r\n\r\n@if (summaryProps.withFooter && footerTemplate) {\r\n  <div class=\"s4y-summary-card-footer\">\r\n    <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n  </div>\r\n}\r\n", styles: [":host{display:block;background-color:#fff;border-radius:var(--radius);padding:1.4rem;min-width:21.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);width:fit-content}.s4y-summary-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2.6rem}.s4y-summary-card-icon{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:var(--radius);padding:.3rem}.s4y-summary-card-body{margin:.4rem 0}.s4y-summary-card-footer{padding-top:.8rem;border-top:1px solid var(--gray-300);font-size:1.4rem;color:var(--gray-900)}.s4y-summary-card-header__content{display:flex;gap:.4rem;flex-shrink:0}\n"] }]
+        }] });
+
 const selectMultiAnim = trigger('selectMultiAnim', [
     // entra
     transition(':enter', [
@@ -3812,7 +4016,7 @@ class DynamicDialogComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: DynamicDialogRef }, { token: DYNAMIC_DIALOG_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicDialogComponent, isStandalone: true, selector: "s4y-dynamic-dialog", inputs: { contentPortal: "contentPortal", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", contentTemplate: "contentTemplate", templateContext: "templateContext" }, host: { attributes: { "role": "dialog", "aria-modal": "true", "tabindex": "-1" }, properties: { "attr.aria-labelledby": "'s4y-dialog-title'" }, classAttribute: "s4y-dialog" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n  @if (headerTemplate) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"headerTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    </header>\r\n  } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n      <p class=\"s4y-dialog-header__description\">\r\n        {{ dialogOptions?.description }}\r\n      </p>\r\n    </header>\r\n  }\r\n\r\n  @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n    <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n      &times;\r\n    </button>\r\n  }\r\n\r\n  <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n    @if (contentTemplate) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"contentTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    } @else {\r\n      <ng-template\r\n        cdkPortalOutlet\r\n        [cdkPortalOutlet]=\"contentPortal\"\r\n      ></ng-template>\r\n    }\r\n  </section>\r\n\r\n  @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n  @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n  @if (!(dialogOptions?.hideFooter ?? false)) {\r\n    <footer\r\n      class=\"flex gap-1 s4y-dialog__footer\"\r\n      [ngStyle]=\"dialogOptions?.footerStyle\"\r\n    >\r\n      @if (footerTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"footerTemplate\"\r\n          [ngTemplateOutletContext]=\"templateContext\"\r\n        >\r\n        </ng-container>\r\n      } @else {\r\n        @if (cancelBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onCancel()\"\r\n            [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n            [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n            [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n            [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n          </button>\r\n        }\r\n        @if (okBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onOk()\"\r\n            [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n            [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n            [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n            [size]=\"okBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ okBtnOptions?.text ?? \"Ok\" }}\r\n          </button>\r\n        }\r\n      }\r\n    </footer>\r\n  }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-dialog__footer{flex-direction:column-reverse}.s4y-dialog__footer button{width:100%}}.s4y-dialog-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-dialog-header__description{font-size:2rem;font-size:1.4rem;font-weight:400;color:var(--gray-700)}.s4y-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto}.s4y-dialog-close-btn{padding:0rem 1.4rem;cursor:pointer;font-size:2rem;position:absolute;right:0;top:0;transition:.5 ease}.s4y-dialog-close-btn:hover{background-color:var(--gray-200);border-radius:var(--radius)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicDialogComponent, isStandalone: true, selector: "s4y-dynamic-dialog", inputs: { contentPortal: "contentPortal", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", contentTemplate: "contentTemplate", templateContext: "templateContext" }, host: { attributes: { "role": "dialog", "aria-modal": "true", "tabindex": "-1" }, properties: { "attr.aria-labelledby": "'s4y-dialog-title'" }, classAttribute: "s4y-dialog" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n  @if (headerTemplate) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"headerTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    </header>\r\n  } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n      <p class=\"s4y-dialog-header__description\">\r\n        {{ dialogOptions?.description }}\r\n      </p>\r\n    </header>\r\n  }\r\n\r\n  @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n    <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n      &times;\r\n    </button>\r\n  }\r\n\r\n  <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n    @if (contentTemplate) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"contentTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    } @else {\r\n      <ng-template\r\n        cdkPortalOutlet\r\n        [cdkPortalOutlet]=\"contentPortal\"\r\n      ></ng-template>\r\n    }\r\n  </section>\r\n\r\n  @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n  @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n  @if (!(dialogOptions?.hideFooter ?? false)) {\r\n    <footer\r\n      class=\"flex gap-1 s4y-dialog__footer\"\r\n      [ngStyle]=\"dialogOptions?.footerStyle\"\r\n    >\r\n      @if (footerTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"footerTemplate\"\r\n          [ngTemplateOutletContext]=\"templateContext\"\r\n        >\r\n        </ng-container>\r\n      } @else {\r\n        @if (cancelBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onCancel()\"\r\n            [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n            [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n            [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n            [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n          </button>\r\n        }\r\n        @if (okBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onOk()\"\r\n            [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n            [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n            [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n            [size]=\"okBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ okBtnOptions?.text ?? \"Ok\" }}\r\n          </button>\r\n        }\r\n      }\r\n    </footer>\r\n  }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-dialog__footer{flex-direction:column-reverse}.s4y-dialog__footer button{width:100%}}.s4y-dialog-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-dialog-header__description{font-size:2rem;font-size:1.4rem;font-weight:400;color:var(--gray-700)}.s4y-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto}.s4y-dialog-close-btn{padding:0rem 1.4rem;cursor:pointer;font-size:2rem;position:absolute;right:0;top:0;transition:.5 ease}.s4y-dialog-close-btn:hover{background-color:var(--gray-200);border-radius:var(--radius)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "roundend", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogComponent, decorators: [{
             type: Component,
@@ -4034,8 +4238,8 @@ class RatingComponent {
     count = input(5);
     size = input('md');
     sizePx = computed(() => {
-        const v = this.size();
-        return typeof v === 'number' ? v : (SIZE_MAP[v] ?? SIZE_MAP.md);
+        const size = this.size();
+        return typeof size === 'number' ? size : (SIZE_MAP[size] ?? SIZE_MAP.md);
     });
     allowHalf = input(false);
     readOnly = input(false);
@@ -4262,6 +4466,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ['mouseleave']
             }] } });
 
+class TagComponent {
+    injector = inject(Injector);
+    editInput = viewChild('editInput');
+    size = input('md');
+    severity = input('primary');
+    value = model('');
+    outlined = input(false);
+    withShadow = input(true);
+    editable = input(false);
+    isEditing = signal(false);
+    editStart = output();
+    editEnd = output();
+    class = computed(() => {
+        let baseClass = '';
+        switch (this.severity()) {
+            case 'success':
+                baseClass = 'tag-success';
+                break;
+            case 'error':
+                baseClass = 'tag-error';
+                break;
+            case 'info':
+                baseClass = 'tag-info';
+                break;
+            case 'warning':
+                baseClass = 'tag-warning';
+                break;
+            case 'neutral':
+                baseClass = 'tag-neutral';
+                break;
+            case 'primary':
+                baseClass = 'tag-primary';
+                break;
+            case 'secondary':
+                baseClass = 'tag-secondary';
+                break;
+            case 'finished':
+                baseClass = 'tag-finished';
+                break;
+            default:
+                baseClass = 'tag-primary';
+        }
+        const outline = this.outlined() ? ' outlined' : '';
+        return `${baseClass}${outline} ${this.sizeClass()}`;
+    });
+    sizeClass = computed(() => {
+        switch (this.size()) {
+            case 'xs':
+                return 'size-xs';
+            case 'sm':
+                return 'size-sm';
+            case 'md':
+                return 'size-md';
+            case 'lg':
+                return 'size-lg';
+            case 'xl':
+                return 'size-xl';
+            default:
+                return 'size-md';
+        }
+    });
+    constructor() {
+        effect(() => {
+            if (this.isEditing()) {
+                afterNextRender(() => {
+                    const el = this.editInput()?.nativeElement;
+                    if (el) {
+                        el.focus();
+                        // el.select();
+                    }
+                }, { injector: this.injector });
+            }
+        });
+    }
+    shadow = computed(() => this.withShadow() ? '  box-shadow: var(--shadow-default);' : null);
+    onDblClick(_) {
+        this.startEdit();
+    }
+    startEdit() {
+        if (!this.editable())
+            return;
+        if (!this.isEditing()) {
+            this.isEditing.set(true);
+            this.editStart.emit();
+        }
+    }
+    stopEdit(commit = true) {
+        if (this.isEditing()) {
+            this.isEditing.set(false);
+            this.editEnd.emit();
+        }
+    }
+    setValue(event) {
+        const value = event.target.value;
+        this.value.set(value);
+    }
+    onKeydown(event) {
+        if (!this.editable())
+            return;
+        if (event.key === 'Enter' && !this.isEditing()) {
+            event.preventDefault();
+            this.startEdit();
+        }
+        else if (event.key === 'Escape' && this.isEditing()) {
+            event.preventDefault();
+            this.stopEdit(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TagComponent, isStandalone: true, selector: "s4y-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, withShadow: { classPropertyName: "withShadow", publicName: "withShadow", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", editStart: "editStart", editEnd: "editEnd" }, host: { attributes: { "role": "button", "tabindex": "0" }, listeners: { "dblclick": "onDblClick($event)" }, properties: { "style.fontWeight": "\"500\"", "style.boxShadow": "shadow()", "class": "class()", "attr.aria-label": "editable() ? \"Editar tag\" : null" } }, viewQueries: [{ propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], ngImport: i0, template: "\r\n@if (!isEditing()) {\r\n  <p (keydown)=\"onKeydown($event)\">\r\n    {{ value() }}\r\n  </p>\r\n\r\n  <ng-content select=\"[icon]\"></ng-content>\r\n} @else {\r\n  <input\r\n    type=\"text\"\r\n    [value]=\"value()\"\r\n    (blur)=\"stopEdit()\"\r\n    (keydown.enter)=\"stopEdit()\"\r\n    (keydown.escape)=\"stopEdit(false)\"\r\n    (input)=\"setValue($event)\"\r\n    autofocus\r\n    #editInput\r\n  />\r\n}\r\n\r\n\r\n", styles: [":host{background-color:#fff;font-size:1.2rem;border-radius:var(--radius);width:fit-content;padding:.4rem .8rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-shrink:0;border:1px solid transparent}:host(.size-xs){font-size:1rem;padding:.2rem .4rem;gap:.3rem}:host(.size-sm){font-size:1.2rem;padding:.25rem .55rem;gap:.4rem}:host(.size-md){font-size:1.4rem;padding:.3rem .7rem;gap:.5rem}:host(.size-lg){font-size:1.6rem;padding:.4rem .9rem;gap:.6rem}:host(.size-xl){font-size:1.8rem;padding:.5rem 1.1rem;gap:.7rem}:host(.tag-primary){background:var(--primary-color);color:#fff}:host(.tag-secondary){background:var(--secondary-color);color:#fff}:host(.tag-success){background:var(--success-color);color:#fff}:host(.tag-error){background:var(--danger-color);color:#fff}:host(.tag-warning){background:var(--warning-color);color:#fff}:host(.tag-info){background:var(--info-color);color:#fff}:host(.tag-neutral){background-color:var(--gray-500);border:1px solid var(--gray-500);color:#fff}:host(.tag-finished){color:#fff;background:var(--success-color)}:host(.tag-primary.outlined){border:1px solid var(--primary-color);color:var(--primary-color);background-color:transparent}:host(.tag-success.outlined){color:var(--success-color);background-color:transparent;border:1px solid var(--success-color)}:host(.tag-secondary.outlined){border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host(.tag-neutral.outlined){background-color:transparent;border:1px solid var(--gray-500);color:var(--gray-500)}:host(.tag-error.outlined){border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host(.tag-finished.outlined){border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host(.tag-info.outlined){border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host(.tag-warning.outlined){background-color:transparent;border:1px solid var(--warning-color);color:var(--warning-color)}input{background-color:transparent;width:100%}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-tag', imports: [], host: {
+                        '[style.fontWeight]': '"500"',
+                        '[style.boxShadow]': 'shadow()',
+                        '[class]': 'class()',
+                        '(dblclick)': 'onDblClick($event)',
+                        role: 'button',
+                        '[attr.aria-label]': 'editable() ? "Editar tag" : null',
+                        tabindex: '0',
+                    }, template: "\r\n@if (!isEditing()) {\r\n  <p (keydown)=\"onKeydown($event)\">\r\n    {{ value() }}\r\n  </p>\r\n\r\n  <ng-content select=\"[icon]\"></ng-content>\r\n} @else {\r\n  <input\r\n    type=\"text\"\r\n    [value]=\"value()\"\r\n    (blur)=\"stopEdit()\"\r\n    (keydown.enter)=\"stopEdit()\"\r\n    (keydown.escape)=\"stopEdit(false)\"\r\n    (input)=\"setValue($event)\"\r\n    autofocus\r\n    #editInput\r\n  />\r\n}\r\n\r\n\r\n", styles: [":host{background-color:#fff;font-size:1.2rem;border-radius:var(--radius);width:fit-content;padding:.4rem .8rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-shrink:0;border:1px solid transparent}:host(.size-xs){font-size:1rem;padding:.2rem .4rem;gap:.3rem}:host(.size-sm){font-size:1.2rem;padding:.25rem .55rem;gap:.4rem}:host(.size-md){font-size:1.4rem;padding:.3rem .7rem;gap:.5rem}:host(.size-lg){font-size:1.6rem;padding:.4rem .9rem;gap:.6rem}:host(.size-xl){font-size:1.8rem;padding:.5rem 1.1rem;gap:.7rem}:host(.tag-primary){background:var(--primary-color);color:#fff}:host(.tag-secondary){background:var(--secondary-color);color:#fff}:host(.tag-success){background:var(--success-color);color:#fff}:host(.tag-error){background:var(--danger-color);color:#fff}:host(.tag-warning){background:var(--warning-color);color:#fff}:host(.tag-info){background:var(--info-color);color:#fff}:host(.tag-neutral){background-color:var(--gray-500);border:1px solid var(--gray-500);color:#fff}:host(.tag-finished){color:#fff;background:var(--success-color)}:host(.tag-primary.outlined){border:1px solid var(--primary-color);color:var(--primary-color);background-color:transparent}:host(.tag-success.outlined){color:var(--success-color);background-color:transparent;border:1px solid var(--success-color)}:host(.tag-secondary.outlined){border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}:host(.tag-neutral.outlined){background-color:transparent;border:1px solid var(--gray-500);color:var(--gray-500)}:host(.tag-error.outlined){border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host(.tag-finished.outlined){border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host(.tag-info.outlined){border:1px solid var(--info-color);color:var(--info-color);background-color:transparent}:host(.tag-warning.outlined){background-color:transparent;border:1px solid var(--warning-color);color:var(--warning-color)}input{background-color:transparent;width:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
 /*
  * Public API Surface of s4y-components
  */
@@ -4271,5 +4599,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, DynamicLoadingGlobalService, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
+export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, DynamicLoadingGlobalService, DynamicTooltipDirective, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SummaryCardComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, TagComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
 //# sourceMappingURL=s4y-ui.mjs.map