s4y-ui 1.0.2 → 1.0.4

package/fesm2022/s4y-ui.mjs

@@ -0,0 +1,1175 @@
+import * as i0 from '@angular/core';
+import { Component, signal, computed, Injectable, inject, ContentChild, input, HostBinding, NgModule, booleanAttribute, model, forwardRef, HostListener, Directive, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgFor, NgIf, NgClass, AsyncPipe, JsonPipe, NgTemplateOutlet } from '@angular/common';
+import * as i1$2 from '@angular/platform-browser';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i1$1 from '@angular/router';
+import { Router, RouterLink, NavigationEnd } from '@angular/router';
+import { NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';
+import { filter, defer, from, throwError } from 'rxjs';
+import { trigger, transition, animate, style, group, query } from '@angular/animations';
+import { catchError, map } from 'rxjs/operators';
+
+class DashboardLayoutComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DashboardLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: DashboardLayoutComponent, isStandalone: false, selector: "s4y-dashboard-layout", ngImport: i0, template: "<div class=\"s4y-dashboard-layout\">\r\n  <ng-content select=\"s4y-aside\"></ng-content>\r\n\r\n  <div class=\"s4y-dashboard-layout__content\">\r\n    <ng-content select=\"s4y-navbar\"></ng-content>\r\n    <ng-content select=\"s4y-dashboard-routes\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".s4y-dashboard-layout{height:100dvh;width:100dvw;display:flex}.s4y-dashboard-layout__content{flex-grow:1;position:relative}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DashboardLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-dashboard-layout', standalone: false, template: "<div class=\"s4y-dashboard-layout\">\r\n  <ng-content select=\"s4y-aside\"></ng-content>\r\n\r\n  <div class=\"s4y-dashboard-layout__content\">\r\n    <ng-content select=\"s4y-navbar\"></ng-content>\r\n    <ng-content select=\"s4y-dashboard-routes\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".s4y-dashboard-layout{height:100dvh;width:100dvw;display:flex}.s4y-dashboard-layout__content{flex-grow:1;position:relative}\n"] }]
+        }] });
+
+class AsideService {
+    _isOpened = signal(true);
+    isOpened = computed(() => this._isOpened());
+    onToggle() {
+        this._isOpened.update((state) => !state);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AsideService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AsideService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AsideService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class NavbarComponent {
+    _asideService = inject(AsideService);
+    actionsTemplate;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: NavbarComponent, isStandalone: false, selector: "s4y-navbar", queries: [{ propertyName: "actionsTemplate", first: true, predicate: ["actionsTemplate"], descendants: true }], ngImport: i0, template: "<nav class=\"s4y-navbar-container\">\r\n  <button (click)=\"_asideService.onToggle()\" class=\"s4y-navbar-container__btn\">\r\n    <ng-container [ngTemplateOutlet]=\"menuIcon\"></ng-container>\r\n  </button>\r\n\r\n  <div class=\"s4y-navbar-container__actions\">\r\n    <ng-container *ngIf=\"actionsTemplate\">\r\n      <ng-container [ngTemplateOutlet]=\"actionsTemplate\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n</nav>\r\n\r\n<ng-template #menuIcon>\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 d=\"M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block;display:flex;align-items:center;justify-content:center}.s4y-navbar-container{display:flex;justify-content:space-between;align-items:center;background-color:#fff;border-bottom:1px solid var(--gray-200);min-height:5.8rem;width:100%;height:var(--nav-height);margin:0 1.4rem;width:calc(100% - 1.4rem)}.s4y-navbar-container__actions{display:flex;gap:1.6rem}.s4y-navbar-container__btn{height:4.2rem;width:4.2rem;border-radius:100%;background-color:var(--gray-200);display:flex;align-items:center;justify-content:center}.s4y-navbar-container__btn svg{width:2.2rem;height:2.2rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NavbarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-navbar', standalone: false, template: "<nav class=\"s4y-navbar-container\">\r\n  <button (click)=\"_asideService.onToggle()\" class=\"s4y-navbar-container__btn\">\r\n    <ng-container [ngTemplateOutlet]=\"menuIcon\"></ng-container>\r\n  </button>\r\n\r\n  <div class=\"s4y-navbar-container__actions\">\r\n    <ng-container *ngIf=\"actionsTemplate\">\r\n      <ng-container [ngTemplateOutlet]=\"actionsTemplate\"></ng-container>\r\n    </ng-container>\r\n  </div>\r\n</nav>\r\n\r\n<ng-template #menuIcon>\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 d=\"M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z\"></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [":host{display:block;display:flex;align-items:center;justify-content:center}.s4y-navbar-container{display:flex;justify-content:space-between;align-items:center;background-color:#fff;border-bottom:1px solid var(--gray-200);min-height:5.8rem;width:100%;height:var(--nav-height);margin:0 1.4rem;width:calc(100% - 1.4rem)}.s4y-navbar-container__actions{display:flex;gap:1.6rem}.s4y-navbar-container__btn{height:4.2rem;width:4.2rem;border-radius:100%;background-color:var(--gray-200);display:flex;align-items:center;justify-content:center}.s4y-navbar-container__btn svg{width:2.2rem;height:2.2rem}\n"] }]
+        }], propDecorators: { actionsTemplate: [{
+                type: ContentChild,
+                args: ['actionsTemplate']
+            }] } });
+
+class S4yAvatarComponent {
+    src = input(undefined); // URL da imagem
+    alt = input('Avatar'); // Texto alternativo
+    size = input('md'); // Tamanho
+    rounded = input(true); // Arredondar ou não
+    border = input(false); // Borda decorativa
+    // Estados internos
+    imageLoaded = signal(false);
+    imageError = signal(false);
+    get hostClasses() {
+        const classes = [];
+        switch (this.size()) {
+            case 'sm':
+                classes.push('s4y-avatar-sm');
+                break;
+            case 'md':
+                classes.push('s4y-avatar-md');
+                break;
+            case 'lg':
+                classes.push('s4y-avatar-lg');
+                break;
+            case 'xl':
+                classes.push('s4y-avatar-xl');
+                break;
+            default:
+                classes.push('s4y-avatar-md');
+        }
+        classes.push(this.rounded() ? 's4y-avatar-rounded' : 's4y-avatar-square');
+        if (this.border()) {
+            classes.push('s4y-avatar-border');
+        }
+        return classes.join(' ');
+    }
+    onLoad() {
+        this.imageLoaded.set(true);
+        this.imageError.set(false);
+    }
+    onError() {
+        this.imageError.set(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: S4yAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: S4yAvatarComponent, 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:block;overflow:hidden;object-fit:cover;object-position:top center;flex-shrink:0}:host.s4y-avatar-sm{width:32px;height:32px;font-size:.75rem}:host.s4y-avatar-md{width:42px;height:42px;font-size:1rem}:host.s4y-avatar-lg{width:72px;height:72px;font-size:1.25rem}:host.s4y-avatar-xl{width:96px;height:96px;font-size:1.5rem}: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.7", ngImport: i0, type: S4yAvatarComponent, 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:block;overflow:hidden;object-fit:cover;object-position:top center;flex-shrink:0}:host.s4y-avatar-sm{width:32px;height:32px;font-size:.75rem}:host.s4y-avatar-md{width:42px;height:42px;font-size:1rem}:host.s4y-avatar-lg{width:72px;height:72px;font-size:1.25rem}:host.s4y-avatar-xl{width:96px;height:96px;font-size:1.5rem}: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']
+            }] } });
+
+class AsideComponent {
+    _asideService = inject(AsideService);
+    router = inject(Router);
+    sanitizer = inject(DomSanitizer);
+    asideService = inject(AsideService);
+    menus = input([]);
+    companyLogoSrc = input('https://vanderson-teste.sirv.com/ChatGPT%20Image%2024%20de%20abr.%20de%202025%2C%2009_37_39%201%20(1).png');
+    companyTitle = input('Solution4You');
+    companyDescription = input('Tecnologia');
+    userImage = input('https://images.unsplash.com/photo-1678286742832-26543bb49959?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+    userName = input('Vanderson Oliveira');
+    userEmail = input('vanderson@example.com');
+    isOpened = this._asideService.isOpened;
+    menuTemplate;
+    headerTemplate;
+    footerTemplate;
+    onToggle(menu) {
+        if (menu.children && menu.children.length > 0) {
+            this.closeOtherMenus(menu);
+            if (!this.isOpened()) {
+                this._asideService.onToggle();
+            }
+            menu.isOpen = !menu.isOpen;
+        }
+        else {
+            this.router.navigate([menu.link]);
+        }
+    }
+    closeOtherMenus(menuToKeepOpen) {
+        this.menus().forEach((menu) => {
+            if (menu !== menuToKeepOpen) {
+                menu.isOpen = false;
+            }
+        });
+    }
+    sanitizeSvg(iconUri) {
+        return this.sanitizer.bypassSecurityTrustHtml(iconUri); // Sanitiza o conteúdo SVG
+    }
+    closeWithClickedOverlay() {
+        this.asideService.onToggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AsideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AsideComponent, isStandalone: false, selector: "s4y-aside", inputs: { menus: { classPropertyName: "menus", publicName: "menus", isSignal: true, isRequired: false, transformFunction: null }, companyLogoSrc: { classPropertyName: "companyLogoSrc", publicName: "companyLogoSrc", isSignal: true, isRequired: false, transformFunction: null }, companyTitle: { classPropertyName: "companyTitle", publicName: "companyTitle", isSignal: true, isRequired: false, transformFunction: null }, companyDescription: { classPropertyName: "companyDescription", publicName: "companyDescription", isSignal: true, isRequired: false, transformFunction: null }, userImage: { classPropertyName: "userImage", publicName: "userImage", isSignal: true, isRequired: false, transformFunction: null }, userName: { classPropertyName: "userName", publicName: "userName", isSignal: true, isRequired: false, transformFunction: null }, userEmail: { classPropertyName: "userEmail", publicName: "userEmail", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-opened": "isOpened()" } }, queries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeWithClickedOverlay()\"></div>\r\n\r\n<aside [attr.data-opened]=\"isOpened()\" class=\"s4y-aside\">\r\n  <div class=\"s4y-aside-header__container\">\r\n    @if (headerTemplate) {\r\n    <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\r\n    } @else {\r\n    <div class=\"s4y-aside-header\">\r\n      <img class=\"s4y-aside-logo\" [src]=\"companyLogoSrc()\" />\r\n      <div class=\"s4y-aside-header__infor\">\r\n        <p class=\"s4y-aside-title\">{{ companyTitle() }}</p>\r\n        <p class=\"s4y-aside-description\">{{ companyDescription() }}</p>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"s4y-aside-body__container\">\r\n    <!-- Body Abaixo -->\r\n    <div class=\"s4y-aside-body-section\">\r\n      @for (menu of menus(); track $index) {\r\n      <div class=\"s4y-aside-body-section__item\">\r\n        <div\r\n          class=\"s4y-aside-body-section-item__infor\"\r\n          [class.active]=\"menu.isOpen\"\r\n          (click)=\"onToggle(menu)\"\r\n        >\r\n          <div\r\n            class=\"s4y-aside-body-section-item-title\"\r\n            [class.closed]=\"!isOpened\"\r\n          >\r\n            @if (menuTemplate) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"menuTemplate; context: { $implicit: menu }\"\r\n            ></ng-container>\r\n            } @else { @if (menu.iconUri) {\r\n            <img [src]=\"menu.iconUri\" alt=\"Icone\" />\r\n            }\r\n            <p>{{ menu.title }}</p>\r\n            }\r\n          </div>\r\n\r\n          @if (menu.children?.length) {\r\n          <!--  -->\r\n          @if (menu.isOpen) {\r\n          <ng-container [ngTemplateOutlet]=\"arrowBottom\"></ng-container>\r\n          } @else {\r\n          <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n          }\r\n          <!--  -->\r\n          }\r\n        </div>\r\n        @if (menu.isOpen) {\r\n        <div class=\"s4y-aside-body-section-item__children\">\r\n          @for (children of menu.children; track $index) {\r\n          <div class=\"s4y-aside-body-section-item-children__item\">\r\n            <a>{{ children.title }}</a>\r\n          </div>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n      <!-- <div class=\"s4y-aside-body-section__scroll\"></div> -->\r\n    </div>\r\n    <!-- Body Acima -->\r\n    <div class=\"s4y-aside-body__user\">\r\n      @if (footerTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\r\n      } @else {\r\n      <s4y-avatar [src]=\"userImage()\"></s4y-avatar>\r\n      <div class=\"s4y-aside-body-user__infor\">\r\n        <p class=\"s4y-aside-body-user_name\">{{ userName() }}</p>\r\n        <p class=\"s4y-aside-body-user_email\">{{ userEmail() }}</p>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</aside>\r\n\r\n<ng-template #arrowRight>\r\n  <span class=\"s4y-aside-arrow\">\r\n    <svg\r\n      width=\"1.8rem\"\r\n      height=\"1.8rem\"\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=\"M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z\"\r\n      ></path>\r\n    </svg>\r\n  </span>\r\n</ng-template>\r\n<ng-template #arrowBottom>\r\n  <span class=\"s4y-aside-arrow\">\r\n    <svg\r\n      width=\"1.8rem\"\r\n      height=\"1.8rem\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\"\r\n    >\r\n      <path\r\n        d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n      ></path>\r\n    </svg>\r\n  </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}.s4y-aside{background-color:var(--primary-color);height:100dvh;overflow-x:hidden;width:8rem;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;transition:.5s ease,padding .5s ease;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside{position:fixed;top:0;left:0;width:80%;z-index:var(--z-index-emergency)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}.s4y-aside-header__container{height:var(--nav-height);position:relative;display:flex;align-items:center;border-bottom:1px solid var(--gray-200);padding:1.4rem 0;margin:0 1.4rem}.s4y-aside-header{display:flex;align-items:center;gap:1.4rem}.s4y-aside-logo{max-width:4rem;max-height:4rem;border-radius:var(--radius);object-fit:cover;border:1px solid var(--gray-300);flex-shrink:0}.s4y-aside-header__infor{display:flex;flex-direction:column;gap:.2}.s4y-aside-title{font-size:1.6rem;font-weight:700;color:var(--gray-100)}.s4y-aside-description{font-size:1.3rem;color:var(--gray-200)}.s4y-aside-body__container{display:flex;flex-direction:column;flex-grow:1}.s4y-aside-body-section{margin:1.8rem 1.4rem 0;flex-grow:1;overflow-y:auto;overflow-x:hidden;padding:1.4rem 0;display:flex;flex-direction:column;gap:.6rem;height:calc(100dvh - 15.4rem)}.s4y-aside-body-section-item__children{font-size:1.4rem;margin:.6rem 0 .6rem 2.2rem;display:flex;flex-direction:column;gap:1rem;color:var(--gray-100)}.s4y-aside-body-section-item__children a{cursor:pointer}.s4y-aside-body-section-item__children a:hover{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item__infor{padding:1rem;display:flex;align-items:center;justify-content:space-between;font-size:1.4rem;gap:.8rem;height:4rem;color:var(--gray-100);cursor:pointer;transition:.5s ease}.s4y-aside-body-section-item__infor:hover{color:#fff;border-radius:var(--radius)}.s4y-aside-body-section-item__infor.active{border-radius:var(--radius);color:#fff}.s4y-aside-body-section-item-title{display:flex;align-items:center;justify-content:center;gap:.8rem}.s4y-aside-body-section-item-title img{width:2.8rem}.s4y-aside-body__user{height:6.8rem;padding:1.4rem 0;margin:0 1.4rem;border-top:1px solid var(--gray-200);display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;gap:1.4rem}.s4y-aside-body-user__image{width:3.8rem;height:3.8rem;border-radius:100%;object-fit:cover;object-position:top center;flex-shrink:0}.s4y-aside-body-user_name{font-size:1.4rem;font-weight:700;color:var(--gray-100)}.s4y-aside-body-user_email{font-size:1.3rem;color:var(--gray-200)}@media screen and (min-width: 320px) and (max-width: 480px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 481px) and (max-width: 767px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 768px) and (max-width: 1024px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 1025px) and (max-width: 1280px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:28rem}}@media screen and (min-width: 1281px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:28rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: S4yAvatarComponent, selector: "s4y-avatar", inputs: ["src", "alt", "size", "rounded", "border"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AsideComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-aside', standalone: false, host: {
+                        '[attr.data-opened]': 'isOpened()',
+                    }, template: "<div class=\"s4y-aside-overlay\" (click)=\"closeWithClickedOverlay()\"></div>\r\n\r\n<aside [attr.data-opened]=\"isOpened()\" class=\"s4y-aside\">\r\n  <div class=\"s4y-aside-header__container\">\r\n    @if (headerTemplate) {\r\n    <ng-container [ngTemplateOutlet]=\"headerTemplate\"></ng-container>\r\n    } @else {\r\n    <div class=\"s4y-aside-header\">\r\n      <img class=\"s4y-aside-logo\" [src]=\"companyLogoSrc()\" />\r\n      <div class=\"s4y-aside-header__infor\">\r\n        <p class=\"s4y-aside-title\">{{ companyTitle() }}</p>\r\n        <p class=\"s4y-aside-description\">{{ companyDescription() }}</p>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"s4y-aside-body__container\">\r\n    <!-- Body Abaixo -->\r\n    <div class=\"s4y-aside-body-section\">\r\n      @for (menu of menus(); track $index) {\r\n      <div class=\"s4y-aside-body-section__item\">\r\n        <div\r\n          class=\"s4y-aside-body-section-item__infor\"\r\n          [class.active]=\"menu.isOpen\"\r\n          (click)=\"onToggle(menu)\"\r\n        >\r\n          <div\r\n            class=\"s4y-aside-body-section-item-title\"\r\n            [class.closed]=\"!isOpened\"\r\n          >\r\n            @if (menuTemplate) {\r\n            <ng-container\r\n              *ngTemplateOutlet=\"menuTemplate; context: { $implicit: menu }\"\r\n            ></ng-container>\r\n            } @else { @if (menu.iconUri) {\r\n            <img [src]=\"menu.iconUri\" alt=\"Icone\" />\r\n            }\r\n            <p>{{ menu.title }}</p>\r\n            }\r\n          </div>\r\n\r\n          @if (menu.children?.length) {\r\n          <!--  -->\r\n          @if (menu.isOpen) {\r\n          <ng-container [ngTemplateOutlet]=\"arrowBottom\"></ng-container>\r\n          } @else {\r\n          <ng-container [ngTemplateOutlet]=\"arrowRight\"></ng-container>\r\n          }\r\n          <!--  -->\r\n          }\r\n        </div>\r\n        @if (menu.isOpen) {\r\n        <div class=\"s4y-aside-body-section-item__children\">\r\n          @for (children of menu.children; track $index) {\r\n          <div class=\"s4y-aside-body-section-item-children__item\">\r\n            <a>{{ children.title }}</a>\r\n          </div>\r\n          }\r\n        </div>\r\n        }\r\n      </div>\r\n      }\r\n      <!-- <div class=\"s4y-aside-body-section__scroll\"></div> -->\r\n    </div>\r\n    <!-- Body Acima -->\r\n    <div class=\"s4y-aside-body__user\">\r\n      @if (footerTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"footerTemplate\"></ng-container>\r\n      } @else {\r\n      <s4y-avatar [src]=\"userImage()\"></s4y-avatar>\r\n      <div class=\"s4y-aside-body-user__infor\">\r\n        <p class=\"s4y-aside-body-user_name\">{{ userName() }}</p>\r\n        <p class=\"s4y-aside-body-user_email\">{{ userEmail() }}</p>\r\n      </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</aside>\r\n\r\n<ng-template #arrowRight>\r\n  <span class=\"s4y-aside-arrow\">\r\n    <svg\r\n      width=\"1.8rem\"\r\n      height=\"1.8rem\"\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=\"M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z\"\r\n      ></path>\r\n    </svg>\r\n  </span>\r\n</ng-template>\r\n<ng-template #arrowBottom>\r\n  <span class=\"s4y-aside-arrow\">\r\n    <svg\r\n      width=\"1.8rem\"\r\n      height=\"1.8rem\"\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"currentColor\"\r\n    >\r\n      <path\r\n        d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n      ></path>\r\n    </svg>\r\n  </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.s4y-aside-overlay{display:none}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside-overlay{position:fixed;display:block;top:0;left:0;width:100vw;height:100vh;background-color:#00000080;z-index:var(--z-index-overlay)}}.s4y-aside{background-color:var(--primary-color);height:100dvh;overflow-x:hidden;width:8rem;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;transition:.5s ease,padding .5s ease;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-aside{position:fixed;top:0;left:0;width:80%;z-index:var(--z-index-emergency)}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-aside{position:fixed;top:0;left:0;width:80%;max-width:32rem;z-index:var(--z-index-emergency)}}.s4y-aside-header__container{height:var(--nav-height);position:relative;display:flex;align-items:center;border-bottom:1px solid var(--gray-200);padding:1.4rem 0;margin:0 1.4rem}.s4y-aside-header{display:flex;align-items:center;gap:1.4rem}.s4y-aside-logo{max-width:4rem;max-height:4rem;border-radius:var(--radius);object-fit:cover;border:1px solid var(--gray-300);flex-shrink:0}.s4y-aside-header__infor{display:flex;flex-direction:column;gap:.2}.s4y-aside-title{font-size:1.6rem;font-weight:700;color:var(--gray-100)}.s4y-aside-description{font-size:1.3rem;color:var(--gray-200)}.s4y-aside-body__container{display:flex;flex-direction:column;flex-grow:1}.s4y-aside-body-section{margin:1.8rem 1.4rem 0;flex-grow:1;overflow-y:auto;overflow-x:hidden;padding:1.4rem 0;display:flex;flex-direction:column;gap:.6rem;height:calc(100dvh - 15.4rem)}.s4y-aside-body-section-item__children{font-size:1.4rem;margin:.6rem 0 .6rem 2.2rem;display:flex;flex-direction:column;gap:1rem;color:var(--gray-100)}.s4y-aside-body-section-item__children a{cursor:pointer}.s4y-aside-body-section-item__children a:hover{text-decoration:underline;color:var(--gray-100)}.s4y-aside-body-section-item__infor{padding:1rem;display:flex;align-items:center;justify-content:space-between;font-size:1.4rem;gap:.8rem;height:4rem;color:var(--gray-100);cursor:pointer;transition:.5s ease}.s4y-aside-body-section-item__infor:hover{color:#fff;border-radius:var(--radius)}.s4y-aside-body-section-item__infor.active{border-radius:var(--radius);color:#fff}.s4y-aside-body-section-item-title{display:flex;align-items:center;justify-content:center;gap:.8rem}.s4y-aside-body-section-item-title img{width:2.8rem}.s4y-aside-body__user{height:6.8rem;padding:1.4rem 0;margin:0 1.4rem;border-top:1px solid var(--gray-200);display:flex;align-items:center;justify-content:flex-start;flex-shrink:0;gap:1.4rem}.s4y-aside-body-user__image{width:3.8rem;height:3.8rem;border-radius:100%;object-fit:cover;object-position:top center;flex-shrink:0}.s4y-aside-body-user_name{font-size:1.4rem;font-weight:700;color:var(--gray-100)}.s4y-aside-body-user_email{font-size:1.3rem;color:var(--gray-200)}@media screen and (min-width: 320px) and (max-width: 480px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 481px) and (max-width: 767px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 768px) and (max-width: 1024px){:host[data-opened=false] .s4y-aside{transform:translate(-100%)}:host[data-opened=false] .s4y-aside-overlay{opacity:0;pointer-events:none}:host[data-opened=true] .s4y-aside{transform:translate(0)}:host[data-opened=true] .s4y-aside-overlay{opacity:1}}@media screen and (min-width: 1025px) and (max-width: 1280px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:28rem}}@media screen and (min-width: 1281px){:host[data-opened=false] .s4y-aside-body-section-item__infor{align-items:center;justify-content:center}:host[data-opened=false] .s4y-aside-body-section-item-title p{display:none}:host[data-opened=false] .s4y-aside-body-section-item__children{display:none}:host[data-opened=false] .s4y-aside-arrow{display:none}:host[data-opened=false] .s4y-aside-header__infor{display:none}:host[data-opened=false] .s4y-aside-body-user__infor{display:none}:host[data-opened=false] .s4y-aside-header__container,:host[data-opened=false] .s4y-aside-body__user{align-items:center;justify-content:center}:host[data-opened=true] .s4y-aside{width:28rem}}\n"] }]
+        }], propDecorators: { menuTemplate: [{
+                type: ContentChild,
+                args: ['menuTemplate']
+            }], headerTemplate: [{
+                type: ContentChild,
+                args: ['headerTemplate']
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: ['footerTemplate']
+            }] } });
+
+class DashboardRoutesComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DashboardRoutesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: DashboardRoutesComponent, isStandalone: false, selector: "s4y-dashboard-routes", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;overflow-y:auto;overflow-x:hidden;height:calc(100dvh - var(--nav-height))}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DashboardRoutesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-dashboard-routes', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{display:block;overflow-y:auto;overflow-x:hidden;height:calc(100dvh - var(--nav-height))}\n"] }]
+        }] });
+
+class DashboardContainerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DashboardContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", 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"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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"] }]
+        }] });
+
+const COMPONENTS$1 = [
+    DashboardLayoutComponent,
+    AsideComponent,
+    NavbarComponent,
+    DashboardRoutesComponent,
+    DashboardContainerComponent,
+];
+class DashboardModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DashboardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: DashboardModule, declarations: [DashboardLayoutComponent,
+            AsideComponent,
+            NavbarComponent,
+            DashboardRoutesComponent,
+            DashboardContainerComponent], imports: [RouterLink, CommonModule, S4yAvatarComponent], exports: [DashboardLayoutComponent,
+            AsideComponent,
+            NavbarComponent,
+            DashboardRoutesComponent,
+            DashboardContainerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DashboardModule, imports: [CommonModule, S4yAvatarComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DashboardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [COMPONENTS$1],
+                    exports: [COMPONENTS$1],
+                    imports: [RouterLink, CommonModule, S4yAvatarComponent],
+                }]
+        }] });
+
+// lib/components/dashboard/index.ts
+
+class ButtonComponent {
+    disabled = input(false);
+    outlined = input(false, { transform: booleanAttribute });
+    loading = input(false);
+    size = input('medium');
+    variant = input('primary');
+    fullWidth = input(false);
+    ngAfterViewInit() { }
+    get isDisabled() {
+        return this.loading() || this.disabled();
+    }
+    variantClass = computed(() => {
+        switch (this.variant()) {
+            case 'primary':
+                return 'btn-primary';
+            case 'secondary':
+                return 'btn-secondary';
+            case 'danger':
+                return 'btn-danger';
+            case 'success':
+                return 'btn-success';
+            case 'info':
+                return 'btn-info';
+            default:
+                return 'btn-primary';
+        }
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "button[s4y-button], a[s4y-button]", 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 } }, 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()", "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;height:4rem;min-width:9.2rem;font-size:1.4rem;font-weight:500;border-radius:var(--radius);padding:.8rem 1.6rem;transition:.5s ease}:host([size=extra-small]){height:2.4rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.2rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:4.8rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host([size=extra-large]){height:5.6rem;min-width:11.6rem;font-size:1.6rem;padding:1.2rem 2.4rem}: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:hover .loader{border:3px 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 .loader{border:3px solid var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-primary.outlined:hover .loader{border:3px solid #fff}: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:hover .loader{border:3px solid var(--secondary-color)}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined .loader{border:3px solid var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-secondary.outlined:hover .loader{border:3px solid #fff}: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:hover .loader{border:3px solid var(--danger-color)}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined .loader{border:3px solid var(--danger-color)}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger.outlined:hover .loader{border:3px solid #fff}: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:hover .loader{border:3px solid var(--success-color)}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined .loader{border:3px solid var(--success-color)}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-success.outlined:hover .loader{border:3px solid #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:hover .loader{border:3px solid var(--infor-color)}:host.btn-info.outlined{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info.outlined .loader{border:3px solid var(--infor-color)}:host.btn-info.outlined:hover{background-color:var(--infor-color);border:1px solid var(--infor-color);color:#fff}:host.btn-info.outlined:hover .loader{border:3px solid #fff}:host.disabled{background-color:#979797;color:#fff;cursor:default;border:1px solid #979797;padding:.8rem 1.6rem}:host.disabled:hover{background-color:#979797;color:#fff;border:1px solid #979797}:host.disabled.outlined{background-color:transparent;color:#979797;border:1px solid #979797;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid #fff;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.7", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[s4y-button], a[s4y-button]', imports: [], template: `
+    @if (loading()) {
+    <div class="loader"></div>
+    } @else {
+    <ng-content></ng-content>
+    }
+  `, standalone: true, host: {
+                        '[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()',
+                    }, styles: [":host.btn-default{display:flex;align-items:center;justify-content:center;gap:.8rem;color:#fff;height:4rem;min-width:9.2rem;font-size:1.4rem;font-weight:500;border-radius:var(--radius);padding:.8rem 1.6rem;transition:.5s ease}:host([size=extra-small]){height:2.4rem;min-width:6.4rem;font-size:1.2rem;padding:.4rem .8rem}:host([size=small]){height:3.2rem;min-width:8rem;font-size:1.3rem;padding:.6rem 1.2rem}:host([size=medium]){height:4rem;min-width:9.2rem;font-size:1.4rem;padding:.8rem 1.6rem}:host([size=large]){height:4.8rem;min-width:10.4rem;font-size:1.5rem;padding:1rem 2rem}:host([size=extra-large]){height:5.6rem;min-width:11.6rem;font-size:1.6rem;padding:1.2rem 2.4rem}: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:hover .loader{border:3px 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 .loader{border:3px solid var(--primary-color)}:host.btn-primary.outlined:hover{color:#fff;background-color:var(--primary-color)}:host.btn-primary.outlined:hover .loader{border:3px solid #fff}: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:hover .loader{border:3px solid var(--secondary-color)}:host.btn-secondary.outlined{border:1px solid var(--secondary-color);background-color:transparent;color:var(--secondary-color)}:host.btn-secondary.outlined .loader{border:3px solid var(--secondary-color)}:host.btn-secondary.outlined:hover{background-color:var(--secondary-color);color:#fff;border:1px solid var(--secondary-color)}:host.btn-secondary.outlined:hover .loader{border:3px solid #fff}: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:hover .loader{border:3px solid var(--danger-color)}:host.btn-danger.outlined{border:1px solid var(--danger-color);color:var(--danger-color);background-color:transparent}:host.btn-danger.outlined .loader{border:3px solid var(--danger-color)}:host.btn-danger.outlined:hover{color:#fff;background-color:var(--danger-color);border:1px solid var(--danger-color)}:host.btn-danger.outlined:hover .loader{border:3px solid #fff}: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:hover .loader{border:3px solid var(--success-color)}:host.btn-success.outlined{border:1px solid var(--success-color);color:var(--success-color);background-color:transparent}:host.btn-success.outlined .loader{border:3px solid var(--success-color)}:host.btn-success.outlined:hover{background-color:var(--success-color);border:1px solid var(--success-color);color:#fff}:host.btn-success.outlined:hover .loader{border:3px solid #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:hover .loader{border:3px solid var(--infor-color)}:host.btn-info.outlined{border:1px solid var(--infor-color);color:var(--infor-color);background-color:transparent}:host.btn-info.outlined .loader{border:3px solid var(--infor-color)}:host.btn-info.outlined:hover{background-color:var(--infor-color);border:1px solid var(--infor-color);color:#fff}:host.btn-info.outlined:hover .loader{border:3px solid #fff}:host.disabled{background-color:#979797;color:#fff;cursor:default;border:1px solid #979797;padding:.8rem 1.6rem}:host.disabled:hover{background-color:#979797;color:#fff;border:1px solid #979797}:host.disabled.outlined{background-color:transparent;color:#979797;border:1px solid #979797;pointer-events:none}.loader{width:16px;aspect-ratio:1;border-radius:50%;border:3px solid #fff;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']
+            }] } });
+
+class FormFieldComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: FormFieldComponent, isStandalone: false, selector: "s4y-form-field", ngImport: i0, template: "<label class=\"form-field\">\r\n  <ng-content select=\"s4y-label\"></ng-content>\r\n  <div class=\"input-wrapper\">\r\n    <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n    <ng-content select=\"input, textarea\"></ng-content>\r\n    <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n  </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: [".form-field{display:flex;flex-direction:column;gap:.8rem}.form-field .input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500)}.form-field:has(input:disabled) .input-wrapper,.form-field:has(textarea:disabled) .input-wrapper{background-color:var(--gray-200)}.form-field:has(input.ng-invalid.ng-touched) .input-wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}.form-field:has(input:focus) .input-wrapper{border:1px solid var(--primary-color)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-form-field', standalone: false, template: "<label class=\"form-field\">\r\n  <ng-content select=\"s4y-label\"></ng-content>\r\n  <div class=\"input-wrapper\">\r\n    <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n    <ng-content select=\"input, textarea\"></ng-content>\r\n    <ng-content select=\"s4y-input-sufix\"></ng-content>\r\n  </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n", styles: [".form-field{display:flex;flex-direction:column;gap:.8rem}.form-field .input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500)}.form-field:has(input:disabled) .input-wrapper,.form-field:has(textarea:disabled) .input-wrapper{background-color:var(--gray-200)}.form-field:has(input.ng-invalid.ng-touched) .input-wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}.form-field:has(input:focus) .input-wrapper{border:1px solid var(--primary-color)}\n"] }]
+        }] });
+
+class InputComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputComponent, isStandalone: false, selector: "input[s4y-input], textarea[s4y-input]", ngImport: i0, template: "<p>input works!</p>\r\n", styles: [":host{background-color:transparent;outline:none;font-size:1.4rem;color:var(--gray-700);width:100%}:host::placeholder{font-size:1.4rem;transition:.3s ease;color:var(--gray-400)}:host:focus::placeholder{opacity:0}:host:disabled{color:#fff}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'input[s4y-input], textarea[s4y-input]', standalone: false, template: "<p>input works!</p>\r\n", styles: [":host{background-color:transparent;outline:none;font-size:1.4rem;color:var(--gray-700);width:100%}:host::placeholder{font-size:1.4rem;transition:.3s ease;color:var(--gray-400)}:host:focus::placeholder{opacity:0}:host:disabled{color:#fff}\n"] }]
+        }] });
+
+class LabelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LabelComponent, isStandalone: false, selector: "s4y-label", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.4rem;max-width:max-content}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LabelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-label', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.4rem;max-width:max-content}\n"] }]
+        }] });
+
+class HintComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: HintComponent, isStandalone: false, selector: "s4y-hint", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.2rem;color:var(--danger-color);margin-top:.8rem;display:block;color:var(--gray-700)}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: HintComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-hint', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.2rem;color:var(--danger-color);margin-top:.8rem;display:block;color:var(--gray-700)}\n"] }]
+        }] });
+
+class ErrorMessageComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ErrorMessageComponent, isStandalone: false, selector: "s4y-error-message", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.2rem;color:var(--danger-color);margin-top:.8rem;display:block;font-weight:500}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ErrorMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-error-message', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{font-size:1.2rem;color:var(--danger-color);margin-top:.8rem;display:block;font-weight:500}\n"] }]
+        }] });
+
+class InputPrefixComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputPrefixComponent, isStandalone: false, selector: "s4y-input-prefix", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{cursor:pointer;width:100%;height:100%;max-width:2rem;max-height:2rem;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputPrefixComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-input-prefix', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{cursor:pointer;width:100%;height:100%;max-width:2rem;max-height:2rem;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none}\n"] }]
+        }] });
+
+class InputSufixComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSufixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputSufixComponent, isStandalone: false, selector: "s4y-input-sufix", ngImport: i0, template: "<ng-content></ng-content>\r\n", styles: [":host{cursor:pointer;width:100%;height:100%;max-width:2rem;max-height:2rem;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSufixComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-input-sufix', standalone: false, template: "<ng-content></ng-content>\r\n", styles: [":host{cursor:pointer;width:100%;height:100%;max-width:2rem;max-height:2rem;display:flex;align-items:center;justify-content:center;background-color:transparent;border:none}\n"] }]
+        }] });
+
+class FormFieldPasswordComponent {
+    type = 'password';
+    label = input('Senha');
+    name = input();
+    id = input();
+    model = model('');
+    value = '';
+    disabled = false;
+    isDisabled = input(false);
+    hasError = model(false);
+    togglePasswordVisibility() {
+        this.type = this.type === 'text' ? 'password' : 'text';
+    }
+    onInput(e) {
+        const value = e.target.value;
+        this.value = value;
+        this.model.set(value);
+        this.onChanged(this.value);
+        this.onTouched();
+        this.hasError.set(false);
+    }
+    onChanged = (value) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.value = value || '';
+    }
+    registerOnChange(fn) {
+        this.onChanged = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormFieldPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: FormFieldPasswordComponent, isStandalone: false, selector: "s4y-form-field-password", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { model: "modelChange", hasError: "hasErrorChange" }, providers: [
+            {
+                multi: true,
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FormFieldPasswordComponent),
+            },
+        ], ngImport: i0, template: "<label class=\"form-field\">\r\n  <s4y-label>\r\n    {{ label() }}\r\n  </s4y-label>\r\n  <div class=\"input-wrapper\" [class.error]=\"hasError()\">\r\n    <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n    <input\r\n      s4y-input\r\n      [value]=\"value\"\r\n      (input)=\"onInput($event)\"\r\n      (blur)=\"onTouched()\"\r\n      [disabled]=\"disabled || isDisabled()\"\r\n      [type]=\"type\"\r\n      [name]=\"name()\"\r\n      [id]=\"id()\"\r\n    />\r\n    <s4y-input-sufix>\r\n      <button\r\n        type=\"button\"\r\n        class=\"shown-password\"\r\n        (click)=\"togglePasswordVisibility()\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"eye\"></ng-container>\r\n      </button>\r\n    </s4y-input-sufix>\r\n  </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n\r\n<!-- Icone cadeado -->\r\n<ng-template #eye>\r\n  <!-- Olho fechado -->\r\n  @if (type == 'password') {\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"\r\n    ></path>\r\n  </svg>\r\n  }\r\n\r\n  <!-- Olho aberto -->\r\n  @if (type == 'text') {\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=\"M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z\"\r\n    ></path>\r\n  </svg>\r\n  }\r\n</ng-template>\r\n", styles: [".form-field{display:flex;flex-direction:column;gap:.8rem}.form-field .input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500)}.form-field:has(input:disabled) .input-wrapper{background-color:var(--gray-200)}:host.ng-invalid.ng-touched .input-wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}.form-field:has(input:focus) .input-wrapper{border:1px solid var(--primary-color)}.shown-password{height:48px;width:48px}.form-field .input-wrapper.error{border:1px solid var(--danger-color);background-color:#fff6f5}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputComponent, selector: "input[s4y-input], textarea[s4y-input]" }, { kind: "component", type: LabelComponent, selector: "s4y-label" }, { kind: "component", type: InputSufixComponent, selector: "s4y-input-sufix" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormFieldPasswordComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-form-field-password', standalone: false, providers: [
+                        {
+                            multi: true,
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FormFieldPasswordComponent),
+                        },
+                    ], template: "<label class=\"form-field\">\r\n  <s4y-label>\r\n    {{ label() }}\r\n  </s4y-label>\r\n  <div class=\"input-wrapper\" [class.error]=\"hasError()\">\r\n    <ng-content select=\"s4y-input-prefix\"></ng-content>\r\n    <input\r\n      s4y-input\r\n      [value]=\"value\"\r\n      (input)=\"onInput($event)\"\r\n      (blur)=\"onTouched()\"\r\n      [disabled]=\"disabled || isDisabled()\"\r\n      [type]=\"type\"\r\n      [name]=\"name()\"\r\n      [id]=\"id()\"\r\n    />\r\n    <s4y-input-sufix>\r\n      <button\r\n        type=\"button\"\r\n        class=\"shown-password\"\r\n        (click)=\"togglePasswordVisibility()\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"eye\"></ng-container>\r\n      </button>\r\n    </s4y-input-sufix>\r\n  </div>\r\n</label>\r\n<ng-content select=\"s4y-hint, s4y-error-message\"></ng-content>\r\n\r\n<!-- Icone cadeado -->\r\n<ng-template #eye>\r\n  <!-- Olho fechado -->\r\n  @if (type == 'password') {\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z\"\r\n    ></path>\r\n  </svg>\r\n  }\r\n\r\n  <!-- Olho aberto -->\r\n  @if (type == 'text') {\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=\"M17.8827 19.2968C16.1814 20.3755 14.1638 21.0002 12.0003 21.0002C6.60812 21.0002 2.12215 17.1204 1.18164 12.0002C1.61832 9.62282 2.81932 7.5129 4.52047 5.93457L1.39366 2.80777L2.80788 1.39355L22.6069 21.1925L21.1927 22.6068L17.8827 19.2968ZM5.9356 7.3497C4.60673 8.56015 3.6378 10.1672 3.22278 12.0002C4.14022 16.0521 7.7646 19.0002 12.0003 19.0002C13.5997 19.0002 15.112 18.5798 16.4243 17.8384L14.396 15.8101C13.7023 16.2472 12.8808 16.5002 12.0003 16.5002C9.51498 16.5002 7.50026 14.4854 7.50026 12.0002C7.50026 11.1196 7.75317 10.2981 8.19031 9.60442L5.9356 7.3497ZM12.9139 14.328L9.67246 11.0866C9.5613 11.3696 9.50026 11.6777 9.50026 12.0002C9.50026 13.3809 10.6196 14.5002 12.0003 14.5002C12.3227 14.5002 12.6309 14.4391 12.9139 14.328ZM20.8068 16.5925L19.376 15.1617C20.0319 14.2268 20.5154 13.1586 20.7777 12.0002C19.8603 7.94818 16.2359 5.00016 12.0003 5.00016C11.1544 5.00016 10.3329 5.11773 9.55249 5.33818L7.97446 3.76015C9.22127 3.26959 10.5793 3.00016 12.0003 3.00016C17.3924 3.00016 21.8784 6.87992 22.8189 12.0002C22.5067 13.6998 21.8038 15.2628 20.8068 16.5925ZM11.7229 7.50857C11.8146 7.50299 11.9071 7.50016 12.0003 7.50016C14.4855 7.50016 16.5003 9.51488 16.5003 12.0002C16.5003 12.0933 16.4974 12.1858 16.4919 12.2775L11.7229 7.50857Z\"\r\n    ></path>\r\n  </svg>\r\n  }\r\n</ng-template>\r\n", styles: [".form-field{display:flex;flex-direction:column;gap:.8rem}.form-field .input-wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500)}.form-field:has(input:disabled) .input-wrapper{background-color:var(--gray-200)}:host.ng-invalid.ng-touched .input-wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}.form-field:has(input:focus) .input-wrapper{border:1px solid var(--primary-color)}.shown-password{height:48px;width:48px}.form-field .input-wrapper.error{border:1px solid var(--danger-color);background-color:#fff6f5}\n"] }]
+        }] });
+
+const COMPONENTS = [
+    FormFieldComponent,
+    InputComponent,
+    LabelComponent,
+    HintComponent,
+    ErrorMessageComponent,
+    InputPrefixComponent,
+    InputSufixComponent,
+    FormFieldPasswordComponent,
+];
+class FormsKitModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormsKitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: FormsKitModule, declarations: [FormFieldComponent,
+            InputComponent,
+            LabelComponent,
+            HintComponent,
+            ErrorMessageComponent,
+            InputPrefixComponent,
+            InputSufixComponent,
+            FormFieldPasswordComponent], imports: [CommonModule], exports: [FormFieldComponent,
+            InputComponent,
+            LabelComponent,
+            HintComponent,
+            ErrorMessageComponent,
+            InputPrefixComponent,
+            InputSufixComponent,
+            FormFieldPasswordComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormsKitModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: FormsKitModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS,
+                    imports: [CommonModule],
+                }]
+        }] });
+
+// lib/components/forms-kit/index.ts
+
+class MaskDirective {
+    el;
+    mask = input(undefined, { alias: 's4yMask' });
+    showMaskType = input(false);
+    control = inject(NgControl, { optional: true });
+    constructor(el) {
+        this.el = el;
+    }
+    ngAfterViewInit() {
+        if (this.showMaskType()) {
+            this._applyPlaceholderMask();
+        }
+    }
+    _applyPlaceholderMask() {
+        const input = this.el.nativeElement;
+        switch (this.mask()) {
+            case 'cep':
+                input.value = this._toCEP(input.value);
+                break;
+            case 'cpf':
+                input.value = this._toCPF(input.value);
+                break;
+            case 'cnpj':
+                input.value = this._toCNPJ(input.value);
+                break;
+            case 'data':
+                input.value = this._toDate(input.value);
+                break;
+            case 'moeda':
+                input.value = this._toCurrency(input.value);
+                break;
+            case 'porcentagem':
+                input.value = this._toPercent(input.value);
+                break;
+            case 'telefone':
+                input.value = this._toMobilePhone(input.value);
+                break;
+            case 'telefone-fixo':
+                input.value = this._toLandlinePhone(input.value);
+                break;
+        }
+    }
+    onFocusOrClick() {
+        const input = this.el.nativeElement;
+        const value = input.value;
+        const templates = {
+            data: '__/__/____',
+            cpf: '___.___.___-__',
+            cnpj: '__.___.___/____-__',
+            cep: '_____-___',
+            moeda: '', // máscara de moeda não precisa de cursor fixo
+            porcentagem: '', // idem
+            telefone: '(__) _____-____',
+            'telefone-fixo': '(__) ____-____',
+        };
+        const template = templates[this.mask()];
+        // Só reposiciona se tiver template definido
+        if (template) {
+            this._setCursorToNextEditable(template, value);
+        }
+    }
+    onInput(e) {
+        const input = this.el.nativeElement;
+        const value = input.value;
+        switch (this.mask()) {
+            case 'data': {
+                const template = '__/__/____';
+                const masked = this._applyMaskTemplate(value, template);
+                input.value = masked;
+                this._setCursorToNextEditable(template, value);
+                break;
+            }
+            case 'cpf': {
+                const template = '___.___.___-__';
+                const masked = this._applyMaskTemplate(value, template);
+                input.value = masked;
+                this._setCursorToNextEditable(template, value);
+                break;
+            }
+            case 'cnpj': {
+                const template = '__.___.___/____-__';
+                const masked = this._applyMaskTemplate(value, template);
+                input.value = masked;
+                this._setCursorToNextEditable(template, value);
+                break;
+            }
+            case 'cep': {
+                const template = '_____-___';
+                const masked = this._applyMaskTemplate(value, template);
+                input.value = masked;
+                this._setCursorToNextEditable(template, value);
+                break;
+            }
+            case 'telefone': {
+                const template = '(__) _____-____';
+                const masked = this._toMobilePhone(value);
+                input.value = masked;
+                this._setCursorToNextEditable(template, value);
+                break;
+            }
+            case 'telefone-fixo': {
+                const template = '(__) ____-____';
+                const masked = this._toLandlinePhone(value);
+                input.value = masked;
+                this._setCursorToNextEditable(template, value);
+                break;
+            }
+            case 'moeda': {
+                input.value = this._toCurrency(value);
+                break;
+            }
+            case 'porcentagem': {
+                input.value = this._toPercent(value);
+                break;
+            }
+        }
+        if (this.control && this.control.control) {
+            this.control.control.setValue(input.value, { emitEvent: false });
+        }
+    }
+    _toDate = (value) => this._applyMaskTemplate(value, '__/__/____');
+    _toCPF = (value) => this._applyMaskTemplate(value, '___.___.___-__');
+    _toCNPJ = (value) => this._applyMaskTemplate(value, '__.___.___/____-__');
+    _toCEP = (value) => this._applyMaskTemplate(value, '_____-___');
+    _toMobilePhone = (value) => this._applyMaskTemplate(value, '(__) _____-____');
+    _toLandlinePhone = (value) => this._applyMaskTemplate(value, '(__) ____-____');
+    _toCurrency = (value) => {
+        // Remove qualquer caractere não numérico
+        const cleaned = value.replace(/\D/g, '');
+        // Se estiver vazio, retorna 0 formatado
+        if (!cleaned)
+            return 'R$ 0,00';
+        const number = parseFloat(cleaned) / 100;
+        return number.toLocaleString('pt-BR', {
+            style: 'currency',
+            currency: 'BRL',
+        });
+    };
+    _toPercent = (value) => {
+        // Remove tudo que não for número
+        const cleaned = value.replace(/\D/g, '');
+        // Limita a 6 dígitos (ex: 999999 → 9999,99%)
+        const limited = cleaned.slice(0, 6);
+        // Garante um valor numérico válido
+        const number = parseFloat(limited || '0') / 100;
+        // Formata com 2 casas decimais e adiciona % manualmente
+        return (number.toLocaleString('pt-BR', {
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+        }) + '%');
+    };
+    _applyMaskTemplate(value, template) {
+        const result = template.split('');
+        let i = 0;
+        for (const digit of value.replace(/\D/g, '')) {
+            while (i < result.length && !['_'].includes(result[i]))
+                i++;
+            if (i < result.length)
+                result[i++] = digit;
+        }
+        return result.join('');
+    }
+    _getCursorPosition(template, digitsCount) {
+        let count = 0;
+        for (let i = 0; i < template.length; i++) {
+            if (template[i].match(/[_\d]/))
+                count++;
+            if (count >= digitsCount)
+                return i + 1;
+        }
+        return template.length;
+    }
+    _setCursorToNextEditable(template, value) {
+        const input = this.el.nativeElement;
+        const digits = value.replace(/\D/g, '');
+        const nextPos = this._getCursorPosition(template, digits.length);
+        setTimeout(() => input.setSelectionRange(nextPos, nextPos));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MaskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: MaskDirective, isStandalone: true, selector: "[s4yMask]", inputs: { mask: { classPropertyName: "mask", publicName: "s4yMask", isSignal: true, isRequired: false, transformFunction: null }, showMaskType: { classPropertyName: "showMaskType", publicName: "showMaskType", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "focus": "onFocusOrClick()", "click": "onFocusOrClick()", "input": "onInput($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: MaskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[s4yMask]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { onFocusOrClick: [{
+                type: HostListener,
+                args: ['focus']
+            }, {
+                type: HostListener,
+                args: ['click']
+            }], onInput: [{
+                type: HostListener,
+                args: ['input', ['$event']]
+            }] } });
+
+class BreadcrumbComponent {
+    router;
+    activatedRoute;
+    breadcrumbs = [];
+    separator = input('/');
+    constructor(router, activatedRoute) {
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+    }
+    ngOnInit() {
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd))
+            .subscribe((event) => {
+            const url = event.urlAfterRedirects;
+            this.breadcrumbs = this.buildBreadcrumb(url);
+        });
+        this.breadcrumbs = this.buildBreadcrumb(this.router.url);
+    }
+    buildBreadcrumb(url) {
+        const segments = url.split('/').filter(Boolean);
+        let path = '';
+        return segments.map((segment) => {
+            path += `/${segment}`;
+            return {
+                url: path,
+                name: this.formatLabel(segment),
+            };
+        });
+    }
+    formatLabel(label) {
+        return label.replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1$1.Router }, { token: i1$1.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: BreadcrumbComponent, isStandalone: true, selector: "s4y-breadcrumb", inputs: { separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav class=\"s4y-breadcrumb\">\r\n  <ng-container *ngFor=\"let crumb of breadcrumbs; let last = last\">\r\n    <a\r\n      *ngIf=\"!last; else lastCrumb\"\r\n      [routerLink]=\"crumb.url\"\r\n      class=\"breadcrumb-link\"\r\n    >\r\n      {{ crumb.name }}\r\n    </a>\r\n    <ng-template #lastCrumb>\r\n      <span class=\"breadcrumb-current\">{{ crumb.name }}</span>\r\n    </ng-template>\r\n    <span *ngIf=\"!last\" class=\"breadcrumb-separator\">{{ separator() }}</span>\r\n  </ng-container>\r\n</nav>\r\n", styles: [".s4y-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;font-size:1.4rem;color:var(--gray-900);gap:.4rem}.s4y-breadcrumb a:hover{text-decoration:underline}.s4y-breadcrumb .breadcrumb-link{text-decoration:none}.s4y-breadcrumb .breadcrumb-link:hover{text-decoration:underline}.s4y-breadcrumb .breadcrumb-current{font-weight:700;color:#222}.s4y-breadcrumb .breadcrumb-separator{margin:0 .25rem;color:#aaa}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-breadcrumb', imports: [NgFor, NgIf, RouterLink], template: "<nav class=\"s4y-breadcrumb\">\r\n  <ng-container *ngFor=\"let crumb of breadcrumbs; let last = last\">\r\n    <a\r\n      *ngIf=\"!last; else lastCrumb\"\r\n      [routerLink]=\"crumb.url\"\r\n      class=\"breadcrumb-link\"\r\n    >\r\n      {{ crumb.name }}\r\n    </a>\r\n    <ng-template #lastCrumb>\r\n      <span class=\"breadcrumb-current\">{{ crumb.name }}</span>\r\n    </ng-template>\r\n    <span *ngIf=\"!last\" class=\"breadcrumb-separator\">{{ separator() }}</span>\r\n  </ng-container>\r\n</nav>\r\n", styles: [".s4y-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;font-size:1.4rem;color:var(--gray-900);gap:.4rem}.s4y-breadcrumb a:hover{text-decoration:underline}.s4y-breadcrumb .breadcrumb-link{text-decoration:none}.s4y-breadcrumb .breadcrumb-link:hover{text-decoration:underline}.s4y-breadcrumb .breadcrumb-current{font-weight:700;color:#222}.s4y-breadcrumb .breadcrumb-separator{margin:0 .25rem;color:#aaa}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.Router }, { type: i1$1.ActivatedRoute }] });
+
+const ToastAnimation = trigger('ToastAnimation', [
+    // TOPO
+    transition('top-left => void, top-right => void', [
+        animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(-20px)' })),
+    ]),
+    transition('void => top-left, void => top-right', [
+        style({ opacity: 0, transform: 'translateY(-20px)' }),
+        animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+    ]),
+    // BOTTOM
+    transition('bottom-left => void, bottom-right => void', [
+        animate('300ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' })),
+    ]),
+    transition('void => bottom-left, void => bottom-right', [
+        style({ opacity: 0, transform: 'translateY(20px)' }),
+        animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
+    ]),
+]);
+
+class ToastService {
+    _toasts = signal([]);
+    toasts = computed(() => this._toasts());
+    add(toast) {
+        const internalId = crypto.randomUUID();
+        const toastWithId = { ...toast, __internalId: internalId };
+        this._toasts.update((list) => [...list, toastWithId]);
+        if (toast.duration && toast.duration > 0) {
+            setTimeout(() => {
+                this.removeByInternalId(internalId);
+            }, toast.duration);
+        }
+    }
+    remove(index) {
+        this._toasts.update((prevState) => {
+            const newToasts = prevState.filter((_, i) => index != i);
+            return newToasts;
+        });
+    }
+    removeByInternalId(id) {
+        this._toasts.update((list) => list.filter((toast) => toast.__internalId !== id));
+    }
+    clearAll() {
+        this._toasts.set([]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastService, decorators: [{
+            type: Injectable
+        }] });
+
+class ToastComponent {
+    _toastService;
+    position = input('top-left');
+    constructor(_toastService) {
+        this._toastService = _toastService;
+    }
+    toasts = computed(() => this._toastService.toasts());
+    isBottomPosition = computed(() => this.position().startsWith('bottom'));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastComponent, deps: [{ token: ToastService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", 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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", 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"] }]
+        }], ctorParameters: () => [{ type: ToastService }] });
+
+// src/app/icon/icon.service.ts
+class SvgService {
+    requests = new Map();
+    getSvgContent(url) {
+        let request = this.requests.get(url);
+        if (!request) {
+            request = fetch(url).then((response) => {
+                if (!response.ok) {
+                    throw new Error(`Erro ao carregar SVG: ${response.statusText}`);
+                }
+                return response.text();
+            });
+            this.requests.set(url, request);
+        }
+        return defer(() => from(request)).pipe(catchError((error) => {
+            console.error('Erro ao carregar SVG:', error);
+            return throwError(() => error);
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SvgService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SvgService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SvgService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+// import { NgIf, NgStyle } from '@angular/common';
+// import { HttpClient } from '@angular/common/http';
+// import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+// import { DomSanitizer } from '@angular/platform-browser';
+// import { SvgService } from './svg.service';
+// @Component({
+//   selector: 's4y-svg',
+//   imports: [NgStyle, NgIf],
+//   templateUrl: './svg.component.html',
+//   styleUrl: './svg.component.scss',
+//   changeDetection: ChangeDetectionStrategy.OnPush,
+// })
+// export class SvgComponent implements OnChanges {
+//   @Input() src!: string;
+//   @Input() mode: 'inline' | 'mask' = 'mask';
+//   @Input() size: string = '24px';
+//   @Input() color: string = 'currentColor';
+//   svgContent: any = '';
+//   maskStyle = '';
+//   constructor(
+//     private http: HttpClient,
+//     private sanitizer: DomSanitizer,
+//     private svgService: SvgService
+//   ) {}
+//   ngOnChanges(changes: SimpleChanges): void {
+//     if (!this.src) return;
+//     if (this.mode === 'inline') {
+//       this.http.get(this.src, { responseType: 'text' }).subscribe((svg) => {
+//         this.svgContent = this.sanitizer.bypassSecurityTrustHtml(svg);
+//       });
+//     } else if (this.mode === 'mask') {
+//       this.maskStyle = `url("${this.src}")`;
+//     }
+//   }
+// }
+// src/app/icon/icon.component.ts
+class SvgComponent {
+    sanitizer;
+    svgService;
+    size = 'default';
+    svgContent;
+    constructor(sanitizer, svgService) {
+        this.sanitizer = sanitizer;
+        this.svgService = svgService;
+    }
+    set src(value) {
+        this.setSvgContent(value);
+    }
+    setSvgContent(src) {
+        this.svgContent = this.svgService
+            .getSvgContent(src)
+            .pipe(map((content) => this.sanitizer.bypassSecurityTrustHtml(content)));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SvgComponent, deps: [{ token: i1$2.DomSanitizer }, { token: SvgService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SvgComponent, isStandalone: true, selector: "s4y-svg", inputs: { size: "size", src: "src" }, host: { properties: { "class": "this.size" } }, ngImport: i0, template: "<!-- <span\r\n  *ngIf=\"mode === 'inline'\"\r\n  class=\"s4y-svg-inline\"\r\n  [innerHTML]=\"svgContent\"\r\n  [ngStyle]=\"{\r\n    width: size,\r\n    height: size,\r\n    color: color\r\n  }\"\r\n></span>\r\n\r\n<span\r\n  *ngIf=\"mode === 'mask'\"\r\n  class=\"s4y-svg-mask\"\r\n  [ngStyle]=\"{\r\n    WebkitMaskImage: maskStyle,\r\n    maskImage: maskStyle,\r\n    width: size,\r\n    height: size,\r\n    backgroundColor: color\r\n  }\"\r\n></span> -->\r\n\r\n<div class=\"icon-inner\" [innerHTML]=\"svgContent | async\"></div>\r\n\r\n{{ svgContent | json }}\r\n", styles: [":host{--icon-font-size: 1em;display:inline-block;width:1em;height:1em;text-align:center;font-size:var(--icon-font-size);contain:strict;fill:currentColor;box-sizing:content-box!important}.icon-inner{display:block;width:100%;height:100%}svg{width:100%;height:100%;max-width:100%;max-height:100%}:host(.small){width:16px;height:16px}:host(.default){width:24px;height:24px}:host(.large){width:32px;height:32px}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SvgComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-svg', imports: [AsyncPipe, JsonPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- <span\r\n  *ngIf=\"mode === 'inline'\"\r\n  class=\"s4y-svg-inline\"\r\n  [innerHTML]=\"svgContent\"\r\n  [ngStyle]=\"{\r\n    width: size,\r\n    height: size,\r\n    color: color\r\n  }\"\r\n></span>\r\n\r\n<span\r\n  *ngIf=\"mode === 'mask'\"\r\n  class=\"s4y-svg-mask\"\r\n  [ngStyle]=\"{\r\n    WebkitMaskImage: maskStyle,\r\n    maskImage: maskStyle,\r\n    width: size,\r\n    height: size,\r\n    backgroundColor: color\r\n  }\"\r\n></span> -->\r\n\r\n<div class=\"icon-inner\" [innerHTML]=\"svgContent | async\"></div>\r\n\r\n{{ svgContent | json }}\r\n", styles: [":host{--icon-font-size: 1em;display:inline-block;width:1em;height:1em;text-align:center;font-size:var(--icon-font-size);contain:strict;fill:currentColor;box-sizing:content-box!important}.icon-inner{display:block;width:100%;height:100%}svg{width:100%;height:100%;max-width:100%;max-height:100%}:host(.small){width:16px;height:16px}:host(.default){width:24px;height:24px}:host(.large){width:32px;height:32px}\n"] }]
+        }], ctorParameters: () => [{ type: i1$2.DomSanitizer }, { type: SvgService }], propDecorators: { size: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class']
+            }], src: [{
+                type: Input
+            }] } });
+
+const drawerAnimation = trigger('drawerAnimation', [
+    transition(':enter', [
+        group([
+            query(':self', [
+                style({ opacity: 0 }),
+                animate('300ms ease-out', style({ opacity: 1 })),
+            ]),
+            query('.s4y-drawer-container', [
+                style({ transform: '{{transformFrom}}' }),
+                animate('300ms ease-out', style({ transform: 'translate(0, 0)' })),
+            ], { optional: true }),
+        ]),
+    ], { params: { transformFrom: 'translateX(100%)' } }),
+    transition(':leave', [
+        group([
+            query(':self', [
+                style({ opacity: 1 }),
+                animate('300ms ease-in', style({ opacity: 0 })),
+            ]),
+            query('.s4y-drawer-container', [
+                style({ transform: 'translate(0, 0)' }),
+                animate('300ms ease-in', style({ transform: '{{transformTo}}' })),
+            ], { optional: true }),
+        ]),
+    ], { params: { transformTo: 'translateX(100%)' } }),
+]);
+
+class DrawerComponent {
+    position = input('right');
+    isOpen = model(false);
+    size = input('medium');
+    backdrop = input(true);
+    closeOnBackdropClick = input(true);
+    hasCloseButton = input(true);
+    title = input('Title');
+    isVisible = computed(() => this.isOpen());
+    headerTemplate;
+    bodyTemplate;
+    footerTemplate;
+    constructor() { }
+    ngOnInit() { }
+    drawerSize = computed(() => {
+        const size = this.size();
+        const position = this.position();
+        let value;
+        switch (size) {
+            case 'small':
+                value = '250px';
+                break;
+            case 'medium':
+                value = '400px';
+                break;
+            case 'large':
+                value = '600px';
+                break;
+            default:
+                value = size;
+        }
+        if (position === 'left' || position === 'right') {
+            return { width: value, height: null };
+        }
+        else {
+            return { width: null, height: value };
+        }
+    });
+    isHorizontal = computed(() => {
+        const pos = this.position();
+        return pos === 'left' || pos === 'right';
+    });
+    isVertical = computed(() => {
+        const pos = this.position();
+        return pos === 'top' || pos === 'bottom';
+    });
+    transformFrom = computed(() => {
+        switch (this.position()) {
+            case 'left':
+                return 'translateX(-100%)';
+            case 'right':
+                return 'translateX(100%)';
+            case 'top':
+                return 'translateY(-100%)';
+            case 'bottom':
+                return 'translateY(100%)';
+            default:
+                return 'translateX(100%)'; // Default: right
+        }
+    });
+    transformTo = computed(() => {
+        switch (this.position()) {
+            case 'left':
+                return 'translateX(-100%)';
+            case 'right':
+                return 'translateX(100%)';
+            case 'top':
+                return 'translateY(-100%)';
+            case 'bottom':
+                return 'translateY(100%)';
+            default:
+                return 'translateX(100%)'; // Default: right
+        }
+    });
+    closeOnPressEscapeKey(event) {
+        this.close();
+    }
+    onBackdropClick(event) {
+        const target = event.target;
+        if (target.classList.contains('s4y-overlay')) {
+            if (this.closeOnBackdropClick() && this.isOpen()) {
+                this.isOpen.set(false);
+            }
+        }
+    }
+    close() {
+        if (this.isOpen()) {
+            this.isOpen.set(false);
+        }
+    }
+    onAnimationDone(event) {
+        if (!this.isOpen()) {
+            this.isOpen.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DrawerComponent, isStandalone: true, selector: "s4y-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdropClick: { classPropertyName: "closeOnBackdropClick", publicName: "closeOnBackdropClick", isSignal: true, isRequired: false, transformFunction: null }, hasCloseButton: { classPropertyName: "hasCloseButton", publicName: "hasCloseButton", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isOpen: "isOpenChange" }, host: { listeners: { "document:keydown.escape": "closeOnPressEscapeKey($event)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "bodyTemplate", first: true, predicate: ["bodyTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "@if(isVisible()){\r\n<div\r\n  [@drawerAnimation]=\"{\r\n    value: '',\r\n    params: {\r\n      transformFrom: transformFrom(),\r\n      transformTo: transformTo()\r\n    }\r\n  }\"\r\n  [class.s4y-overlay]=\"backdrop()\"\r\n  (click)=\"onBackdropClick($event)\"\r\n>\r\n  <div\r\n    [style.maxWidth]=\"drawerSize().width\"\r\n    [style.maxHeight]=\"drawerSize().height\"\r\n    [ngClass]=\"{\r\n      's4y-drawer-left': position() === 'left',\r\n      's4y-drawer-right': position() === 'right',\r\n      's4y-drawer-top': position() === 'top',\r\n      's4y-drawer-bottom': position() === 'bottom'\r\n    }\"\r\n    class=\"s4y-drawer-container\"\r\n  >\r\n    <header class=\"s4y-header\">\r\n      @if(headerTemplate) {\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n      }\r\n      <!--  -->\r\n      @else {\r\n      <h3>{{ title() }}</h3>\r\n      @if (hasCloseButton()) {\r\n      <button (click)=\"close()\">&times;</button>\r\n      } }\r\n    </header>\r\n\r\n    <div class=\"s4y-body-content\">\r\n      <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n    </div>\r\n    @if(footerTemplate) {\r\n    <div class=\"s4y-footer-content\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".s4y-overlay{background-color:#000000b3;height:100dvh;width:100dvw;position:fixed;top:0;left:0;z-index:var(--z-index-drawer)}.s4y-drawer-container{position:fixed;width:100%;height:100dvh;display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--gray-300);box-shadow:#00000029 0 1px 4px}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-drawer-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-drawer-container{width:90%}}.s4y-header{padding:1.8rem;display:flex;align-items:center;justify-content:space-between}.s4y-header button{height:100%;display:inline-block;width:2.8rem;font-size:2.2rem}.s4y-body-content{flex-grow:1;overflow-y:auto;padding-bottom:1.8rem}.s4y-drawer-left{left:0}.s4y-drawer-left .s4y-body-content{padding-left:1.8rem}.s4y-drawer-right{right:0}.s4y-drawer-right .s4y-body-content{padding-left:1.8rem}.s4y-drawer-top{top:0;width:100dvw}.s4y-drawer-top .s4y-body-content{padding-left:1.8rem}.s4y-drawer-bottom{width:100dvw;bottom:0}.s4y-drawer-bottom .s4y-body-content{padding-left:1.8rem}.s4y-footer-content{padding:1.8rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [drawerAnimation] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-drawer', imports: [NgClass, NgTemplateOutlet], animations: [drawerAnimation], template: "@if(isVisible()){\r\n<div\r\n  [@drawerAnimation]=\"{\r\n    value: '',\r\n    params: {\r\n      transformFrom: transformFrom(),\r\n      transformTo: transformTo()\r\n    }\r\n  }\"\r\n  [class.s4y-overlay]=\"backdrop()\"\r\n  (click)=\"onBackdropClick($event)\"\r\n>\r\n  <div\r\n    [style.maxWidth]=\"drawerSize().width\"\r\n    [style.maxHeight]=\"drawerSize().height\"\r\n    [ngClass]=\"{\r\n      's4y-drawer-left': position() === 'left',\r\n      's4y-drawer-right': position() === 'right',\r\n      's4y-drawer-top': position() === 'top',\r\n      's4y-drawer-bottom': position() === 'bottom'\r\n    }\"\r\n    class=\"s4y-drawer-container\"\r\n  >\r\n    <header class=\"s4y-header\">\r\n      @if(headerTemplate) {\r\n      <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n      }\r\n      <!--  -->\r\n      @else {\r\n      <h3>{{ title() }}</h3>\r\n      @if (hasCloseButton()) {\r\n      <button (click)=\"close()\">&times;</button>\r\n      } }\r\n    </header>\r\n\r\n    <div class=\"s4y-body-content\">\r\n      <ng-container *ngTemplateOutlet=\"bodyTemplate\"></ng-container>\r\n    </div>\r\n    @if(footerTemplate) {\r\n    <div class=\"s4y-footer-content\">\r\n      <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".s4y-overlay{background-color:#000000b3;height:100dvh;width:100dvw;position:fixed;top:0;left:0;z-index:var(--z-index-drawer)}.s4y-drawer-container{position:fixed;width:100%;height:100dvh;display:flex;flex-direction:column;background-color:#fff;border:1px solid var(--gray-300);box-shadow:#00000029 0 1px 4px}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-drawer-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-drawer-container{width:90%}}.s4y-header{padding:1.8rem;display:flex;align-items:center;justify-content:space-between}.s4y-header button{height:100%;display:inline-block;width:2.8rem;font-size:2.2rem}.s4y-body-content{flex-grow:1;overflow-y:auto;padding-bottom:1.8rem}.s4y-drawer-left{left:0}.s4y-drawer-left .s4y-body-content{padding-left:1.8rem}.s4y-drawer-right{right:0}.s4y-drawer-right .s4y-body-content{padding-left:1.8rem}.s4y-drawer-top{top:0;width:100dvw}.s4y-drawer-top .s4y-body-content{padding-left:1.8rem}.s4y-drawer-bottom{width:100dvw;bottom:0}.s4y-drawer-bottom .s4y-body-content{padding-left:1.8rem}.s4y-footer-content{padding:1.8rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { headerTemplate: [{
+                type: ContentChild,
+                args: ['headerTemplate']
+            }], bodyTemplate: [{
+                type: ContentChild,
+                args: ['bodyTemplate']
+            }], footerTemplate: [{
+                type: ContentChild,
+                args: ['footerTemplate']
+            }], closeOnPressEscapeKey: [{
+                type: HostListener,
+                args: ['document:keydown.escape', ['$event']]
+            }] } });
+
+class SpinnerComponent {
+    size = input('small');
+    color = input('primary');
+    constructor() { }
+    ngOnInit() { }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SpinnerComponent, isStandalone: true, selector: "s4y-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.size": "size()", "attr.color": "color()" } }, ngImport: i0, template: "\n", styles: [":host{width:48px;height:48px;border:5px solid var(--primary-color);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host[size=small]{width:30px;height:30px;border-bottom-color:transparent;border-width:4px}:host[size=medium]{width:48px;height:48px;border-bottom-color:transparent}:host[size=large]{width:70px;height:70px;border-bottom-color:transparent}:host[color=primary]{border-color:var(--primary-color);border-bottom-color:transparent}:host[color=secondary]{border-color:var(--secondary-color);border-bottom-color:transparent}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-spinner', host: {
+                        '[attr.size]': 'size()',
+                        '[attr.color]': 'color()',
+                    }, template: "\n", styles: [":host{width:48px;height:48px;border:5px solid var(--primary-color);border-bottom-color:transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host[size=small]{width:30px;height:30px;border-bottom-color:transparent;border-width:4px}:host[size=medium]{width:48px;height:48px;border-bottom-color:transparent}:host[size=large]{width:70px;height:70px;border-bottom-color:transparent}:host[color=primary]{border-color:var(--primary-color);border-bottom-color:transparent}:host[color=secondary]{border-color:var(--secondary-color);border-bottom-color:transparent}\n"] }]
+        }], ctorParameters: () => [] });
+
+class TableComponent {
+    headers = input([]);
+    data = input([]);
+    isLoading = input(false);
+    hasError = input(false);
+    rowTemplate;
+    headTemplate;
+    emptyTemplate;
+    errorTemplate;
+    errorMessageDefault = input('Não foi possível carregar os dados.');
+    emptyMessageDefault = input(' Não encontramos dados para exibir.');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\">\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <tr>\r\n        <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{errorMessageDefault()}}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (row of data(); track $index) {\r\n    <tr>\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"rowTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: row }\"\r\n      >\r\n      </ng-container>\r\n    </tr>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{emptyMessageDefault()}}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem}}.s4y-table{border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table{background-color:#00f}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table span{display:flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;font-size:1.2rem}.s4y-table thead{background-color:#eaeaea}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff}.s4y-table tfoot{background-color:#eaeaea}.s4y-table tr{font-size:1.4rem;height:5rem;white-space:nowrap}.s4y-table th,.s4y-table td{text-align:start;padding:0 1.4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\">\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <tr>\r\n        <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n      </tr>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{errorMessageDefault()}}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (row of data(); track $index) {\r\n    <tr>\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"rowTemplate\"\r\n        [ngTemplateOutletContext]=\"{ $implicit: row }\"\r\n      >\r\n      </ng-container>\r\n    </tr>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{emptyMessageDefault()}}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem}}.s4y-table{border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table{background-color:#00f}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table span{display:flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;font-size:1.2rem}.s4y-table thead{background-color:#eaeaea}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff}.s4y-table tfoot{background-color:#eaeaea}.s4y-table tr{font-size:1.4rem;height:5rem;white-space:nowrap}.s4y-table th,.s4y-table td{text-align:start;padding:0 1.4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"] }]
+        }], propDecorators: { rowTemplate: [{
+                type: ContentChild,
+                args: ['rowTemplate']
+            }], headTemplate: [{
+                type: ContentChild,
+                args: ['headTemplate']
+            }], emptyTemplate: [{
+                type: ContentChild,
+                args: ['emptyTemplate']
+            }], errorTemplate: [{
+                type: ContentChild,
+                args: ['errorTemplate']
+            }] } });
+
+class SortTableDirective {
+    el;
+    renderer;
+    s4yColumnName = input(undefined);
+    data = input([]);
+    isSortedAsc = true;
+    icon;
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+    }
+    ngOnInit() { }
+    ngAfterViewInit() {
+        this.icon = this.createIcon();
+        if (this.icon && this.s4yColumnName()) {
+            this.applySortButton();
+        }
+    }
+    createSpanElement() {
+        const span = this.renderer.createElement('span');
+        span.role = 'button';
+        this.renderer.setStyle(span, 'cursor', 'pointer');
+        this.renderer.createText(this.svgIconAsc);
+        return span;
+    }
+    applySortButton() {
+        const thElement = this.el.nativeElement;
+        let thText = this.el.nativeElement.textContent.trim();
+        thElement.textContent = '';
+        /* A div vai agrupar os dois, e espalhar na horizontal */
+        const thContainer = this.renderer.createElement('div');
+        const headerText = this.renderer.createText(thText);
+        const span = this.createSpanElement();
+        this.renderer.appendChild(span, this.icon);
+        this.renderer.appendChild(thContainer, headerText);
+        this.renderer.appendChild(thContainer, span);
+        this.renderer.appendChild(thElement, thContainer);
+        this.applyStyleInThContainer(thContainer);
+        this.renderer.listen(span, 'click', () => this.toggleSort());
+    }
+    toggleSort() {
+        this.isSortedAsc = !this.isSortedAsc;
+        this.updateSortIcon();
+        this.sortColumnData();
+    }
+    createIcon() {
+        const icon = this.renderer.createElement('svg');
+        this.renderer.setProperty(icon, 'innerHTML', this.svgIconAsc);
+        return icon;
+    }
+    sortColumnData() {
+        const columnName = this.s4yColumnName();
+        const data = this.data();
+        if (columnName && columnName.trim() !== '' && data.length > 0) {
+            data.sort((a, b) => {
+                const columnA = a[columnName];
+                const columnB = b[columnName];
+                if (columnA < columnB) {
+                    return this.isSortedAsc ? -1 : 1;
+                }
+                if (columnA > columnB) {
+                    return this.isSortedAsc ? 1 : -1;
+                }
+                return 0;
+            });
+            this.updateSortIcon();
+            this.applySortedClass();
+            console.log('Dados ordenados:', data); // Dados ordenados no console
+        }
+        else {
+            console.error('Nome da coluna não definido ou inválido!');
+        }
+    }
+    applySortedClass() {
+        const thElements = this.el.nativeElement
+            .closest('table')
+            .querySelectorAll('th');
+        const tdElements = this.el.nativeElement
+            .closest('table')
+            .querySelectorAll('td');
+        const thElement = this.el.nativeElement;
+        const isAlreadySorted = thElement.classList.contains('sorted');
+        if (isAlreadySorted) {
+            thElements.forEach((th) => {
+                this.renderer.removeClass(th, 'sorted');
+            });
+            tdElements.forEach((td) => {
+                this.renderer.removeClass(td, 'sorted');
+            });
+            return;
+        }
+        thElements.forEach((th) => {
+            this.renderer.removeClass(th, 'sorted');
+        });
+        tdElements.forEach((td) => {
+            this.renderer.removeClass(td, 'sorted');
+        });
+        this.renderer.addClass(thElement, 'sorted');
+        const columnIndex = Array.from(thElements).indexOf(thElement);
+        const trElements = this.el.nativeElement
+            .closest('table')
+            .querySelectorAll('tr');
+        trElements.forEach((tr) => {
+            const td = tr.children[columnIndex];
+            if (td) {
+                this.renderer.addClass(td, 'sorted');
+            }
+        });
+    }
+    applyStyleInThContainer(thContainer) {
+        this.renderer.setStyle(thContainer, 'display', 'flex');
+        this.renderer.setStyle(thContainer, 'justify-content', 'space-between');
+        this.renderer.setStyle(thContainer, 'align-items', 'center');
+    }
+    updateSortIcon() {
+        let iconSvg = this.isSortedAsc ? this.svgIconAsc : this.svgIconDesc;
+        this.renderer.setProperty(this.icon, 'innerHTML', iconSvg);
+    }
+    svgIconAsc = `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    width="1.8rem"
+    height="1.8rem"
+  >
+    <path
+      d="M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z"
+    ></path>
+  </svg>`;
+    svgIconDesc = `<svg xmlns="http://www.w3.org/2000/svg"
+      width="1.8rem"
+      height="1.8rem"
+      viewBox="0 0 24 24"
+    fill="currentColor"><path d="M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM21.9999 8L17.9999 3L13.9999 8H16.9999V21H18.9999V8H21.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z"></path></svg>`;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SortTableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: SortTableDirective, isStandalone: true, selector: "[s4ySortTable]", inputs: { s4yColumnName: { classPropertyName: "s4yColumnName", publicName: "s4yColumnName", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SortTableDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[s4ySortTable]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }] });
+
+/*
+ * Public API Surface of s4y-components
+ */
+// Exporta tudo do index.ts de cada pasta
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AsideComponent, BreadcrumbComponent, ButtonComponent, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, MaskDirective, NavbarComponent, S4yAvatarComponent, SortTableDirective, SpinnerComponent, SvgComponent, SvgService, TableComponent, ToastComponent, ToastService };
+//# sourceMappingURL=s4y-ui.mjs.map