s4y-ui 4.4.0 → 4.6.0

package/fesm2022/s4y-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren } from '@angular/core';
+import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, AsyncPipe, JsonPipe, NgClass, NgTemplateOutlet, DOCUMENT, NgIf, NgStyle } from '@angular/common';
 import * as i1$1 from '@angular/platform-browser';
@@ -7,10 +7,14 @@ import { DomSanitizer } from '@angular/platform-browser';
 import * as i1$2 from '@angular/router';
 import { Router, RouterModule, GuardsCheckEnd } from '@angular/router';
 import { catchError, map, filter } from 'rxjs/operators';
-import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil } from 'rxjs';
+import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil, Subscription, filter as filter$1, fromEvent } from 'rxjs';
+import * as i1$3 from '@angular/cdk/scrolling';
+import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
 import { trigger, transition, animate, style, group, query, state } from '@angular/animations';
+import { Overlay } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
 
 class DashboardLayoutComponent {
     asideTemplate;
@@ -300,11 +304,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class DashboardRoutesComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DashboardRoutesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DashboardRoutesComponent, isStandalone: false, selector: "s4y-dashboard-routes", ngImport: i0, template: "<div class=\"s4y-dashboard-routes-container\" cdkScrollable>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".s4y-dashboard-routes-container{display:block;overflow-y:auto;overflow-x:hidden;height:calc(100dvh - var(--nav-height))}\n"], dependencies: [{ kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", 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"] }]
+            args: [{ selector: 's4y-dashboard-routes', standalone: false, host: {}, template: "<div class=\"s4y-dashboard-routes-container\" cdkScrollable>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [".s4y-dashboard-routes-container{display:block;overflow-y:auto;overflow-x:hidden;height:calc(100dvh - var(--nav-height))}\n"] }]
         }] });
 
 class DashboardContainerComponent {
@@ -329,19 +333,32 @@ class DashboardModule {
             AsideComponent,
             NavbarComponent,
             DashboardRoutesComponent,
-            DashboardContainerComponent], imports: [RouterModule, CommonModule, AvatarComponent, SvgComponent], exports: [DashboardLayoutComponent,
+            DashboardContainerComponent], imports: [RouterModule,
+            CommonModule,
+            AvatarComponent,
+            SvgComponent,
+            CdkScrollableModule], exports: [DashboardLayoutComponent,
             AsideComponent,
             NavbarComponent,
             DashboardRoutesComponent,
             DashboardContainerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DashboardModule, imports: [RouterModule, CommonModule, AvatarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DashboardModule, imports: [RouterModule,
+            CommonModule,
+            AvatarComponent,
+            CdkScrollableModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DashboardModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENTS$1],
                     exports: [COMPONENTS$1],
-                    imports: [RouterModule, CommonModule, AvatarComponent, SvgComponent],
+                    imports: [
+                        RouterModule,
+                        CommonModule,
+                        AvatarComponent,
+                        SvgComponent,
+                        CdkScrollableModule,
+                    ],
                 }]
         }] });
 
@@ -1041,8 +1058,6 @@ class TableComponent {
     sortFunction = output();
     sortField = input(null);
     sortOrder = input('none');
-    // voltar a direction ao mudar de coluna -- OK
-    // deixar o usuário pre preencher a coluna
     sortedData = computed(() => {
         let originalData = [...this.data()];
         const sortBy = this.sortBy();
@@ -1088,11 +1103,11 @@ class TableComponent {
     constructor() { }
     ngAfterViewInit() { }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 }, customSort: { classPropertyName: "customSort", publicName: "customSort", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", 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 }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", 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 } }, outputs: { sortFunction: "sortFunction" }, 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 }, { propertyName: "customEmptyTemplate", first: true, predicate: ["customEmptyTemplate"], descendants: true }, { propertyName: "customErrorTemplate", first: true, predicate: ["customErrorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\">\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else if (customErrorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></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 (item of sortedData(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else if (customEmptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></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;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", 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 }, customSort: { classPropertyName: "customSort", publicName: "customSort", isSignal: true, isRequired: false, transformFunction: null }, sortField: { classPropertyName: "sortField", publicName: "sortField", isSignal: true, isRequired: false, transformFunction: null }, sortOrder: { classPropertyName: "sortOrder", publicName: "sortOrder", 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 }, tableStyle: { classPropertyName: "tableStyle", publicName: "tableStyle", 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 } }, outputs: { sortFunction: "sortFunction" }, 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 }, { propertyName: "customEmptyTemplate", first: true, predicate: ["customEmptyTemplate"], descendants: true }, { propertyName: "customErrorTemplate", first: true, predicate: ["customErrorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\" cdkScrollable>\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else if (customErrorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></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 (item of sortedData(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else if (customEmptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></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;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "ngmodule", type: CdkScrollableModule }, { kind: "directive", type: i1$3.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\">\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else if (customErrorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></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 (item of sortedData(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else if (customEmptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></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;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"] }]
+            args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent, CdkScrollableModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\" [ngStyle]=\"tableStyle()\" cdkScrollable>\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else if (customErrorTemplate) {\r\n          <ng-container [ngTemplateOutlet]=\"customErrorTemplate\"></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 (item of sortedData(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else if (customEmptyTemplate) {\r\n      <ng-container [ngTemplateOutlet]=\"customEmptyTemplate\"></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;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-300);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table thead th{transition:.2s ease}.s4y-table tbody tr{background-color:#fff;font-size:1.3rem;font-weight:400;height:5rem;border-bottom:1px solid var(--gray-300)}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 1.4rem}.s4y-table td,.s4y-table th{padding:0 1.4rem}.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"] }]
         }], ctorParameters: () => [], propDecorators: { rowTemplate: [{
                 type: ContentChild,
                 args: ['rowTemplate']
@@ -1348,7 +1363,7 @@ const modalFadeCombined = trigger('modalFadeCombined', [
             query('.s4y-modal-container', [
                 style({ opacity: 0, transform: 'translateY(20px)' }),
                 animate('250ms ease-out', style({ opacity: 1, transform: 'translateY(0)' })),
-            ]),
+            ], { optional: true }),
         ]),
     ]),
     transition(':leave', [
@@ -1360,7 +1375,7 @@ const modalFadeCombined = trigger('modalFadeCombined', [
             // ]),
             query('.s4y-modal-container', [
                 animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(20px)' })),
-            ]),
+            ], { optional: true }),
         ]),
     ]),
 ]);
@@ -1374,7 +1389,7 @@ class ModalComponent {
     centeredModal = input(true);
     title = input('Titulo');
     modalStyle = input();
-    visible = input(false);
+    visible = model(false);
     requestClose = output();
     withHeader = input(true);
     constructor(renderer, document) {
@@ -1392,6 +1407,7 @@ class ModalComponent {
         });
     }
     onClose() {
+        this.visible.set(false);
         this.requestClose.emit(false);
     }
     ngAfterViewInit() { }
@@ -1404,7 +1420,7 @@ class ModalComponent {
         window.removeEventListener('keydown', this.escListener);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, centeredModal: { classPropertyName: "centeredModal", publicName: "centeredModal", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { requestClose: "requestClose" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n  <div\r\n    class=\"s4y-modal-wrapper\"\r\n    [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n    [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n    (click)=\"onClose()\"\r\n    @modalFadeCombined\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n      [ngStyle]=\"modalStyle()\"\r\n    >\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"s4y-modal-body\"\r\n        [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding-bottom:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [modalFadeCombined] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, centeredModal: { classPropertyName: "centeredModal", publicName: "centeredModal", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", requestClose: "requestClose" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n  <div\r\n    class=\"s4y-modal-wrapper\"\r\n    [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n    [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n    (click)=\"onClose()\"\r\n    @modalFadeCombined\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n      [ngStyle]=\"modalStyle()\"\r\n    >\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"s4y-modal-body\"\r\n        [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding-bottom:1rem;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [modalFadeCombined] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -2883,6 +2899,293 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }] } });
 
+class PopoverPanelComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PopoverPanelComponent, isStandalone: true, selector: "s4y-popover-panel", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{z-index:5;padding:1.4rem;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-300);top:2.9rem;right:0;min-width:14rem;background:#fff;width:fit-content;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-popover-panel', imports: [], template: `<ng-content />`, styles: [":host{z-index:5;padding:1.4rem;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-300);top:2.9rem;right:0;min-width:14rem;background:#fff;width:fit-content;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] }]
+        }] });
+
+class PopoverTriggerDirective {
+    overlay = inject(Overlay);
+    host = inject((ElementRef));
+    vcr = inject(ViewContainerRef);
+    overlayRef;
+    subs = new Subscription();
+    menuTrigger = input(null, {
+        alias: 's4yPopoverTrigger',
+    });
+    menuContext = input(null, { alias: 's4yPopoverTriggerContext' });
+    menuPosition = input('bottom-right', {
+        alias: 's4yPopoverPosition',
+    });
+    popoverOffsetX = input(0, { alias: 's4yPopoverOffsetX' });
+    popoverOffsetY = input(4, { alias: 's4yPopoverOffsetY' });
+    fade = input(true, { alias: 's4yPopoverFade' });
+    fadeDuration = input(140, { alias: 's4yPopoverFadeDuration' });
+    constructor() { }
+    toggle() {
+        if (this.overlayRef?.hasAttached()) {
+            this.close();
+            return;
+        }
+        this.open();
+    }
+    open() {
+        const tpl = this.menuTrigger();
+        if (!tpl)
+            return;
+        const positions = this.buildPositions(this.menuPosition(), this.popoverOffsetX(), this.popoverOffsetY());
+        if (!this.overlayRef) {
+            const positionStrategy = this.overlay
+                .position()
+                .flexibleConnectedTo(this.host)
+                .withFlexibleDimensions(false)
+                .withPush(true)
+                .withGrowAfterOpen(true)
+                .withPositions(positions);
+            this.overlayRef = this.overlay.create({
+                positionStrategy,
+                hasBackdrop: false, // deixa scrollar tabela
+                panelClass: ['s4y-dropdown-panel', 's4y-popover-fade'],
+                scrollStrategy: this.overlay.scrollStrategies.close(),
+            });
+            // fecha no clique no backdrop
+            this.subs.add(this.overlayRef.backdropClick().subscribe(() => this.close()));
+            // fecha quando o overlay é detachado
+            this.subs.add(this.overlayRef.detachments().subscribe(() => this.cleanup()));
+            // fecha no ESC enquanto focado dentro do painel
+            this.subs.add(this.overlayRef
+                .keydownEvents()
+                .pipe(filter$1((e) => e.key === 'Escape'))
+                .subscribe(() => this.close()));
+            // fecha ao clicar fora (sem backdrop)
+            this.subs.add(fromEvent(document, 'mousedown')
+                .pipe(filter$1((ev) => {
+                const t = ev.target;
+                const inside = this.overlayRef.overlayElement.contains(t) ||
+                    this.host.nativeElement.contains(t);
+                return !inside;
+            }))
+                .subscribe(() => this.close()));
+        }
+        else {
+            const strategy = this.overlayRef.getConfig()
+                .positionStrategy;
+            strategy.withPositions(positions);
+            this.overlayRef.updatePosition();
+        }
+        const portal = new TemplatePortal(tpl, this.vcr, {
+            $implicit: this.menuContext(),
+            row: this.menuContext(),
+        });
+        this.overlayRef.attach(portal);
+        const el = this.overlayRef.overlayElement;
+        el.style.setProperty('--s4y-popover-fade-duration', `${this.fadeDuration()}ms`);
+        // animação de ENTRADA
+        if (this.fade()) {
+            // estado inicial já é opaco=0 (via CSS). Força reflow e aplica "enter".
+            el.classList.remove('leave');
+            // força reflow pra garantir a transição
+            void el.offsetWidth;
+            el.classList.add('enter');
+        }
+        // acessibilidade: foco no primeiro botão/item do menu
+        queueMicrotask(() => {
+            const first = this.overlayRef.overlayElement.querySelector('button,[href],[tabindex]:not([tabindex="-1"])');
+            first?.focus();
+        });
+    }
+    async close() {
+        if (!this.overlayRef?.hasAttached())
+            return;
+        const el = this.overlayRef.overlayElement;
+        if (this.fade()) {
+            // troca enter -> leave e espera transição terminar
+            el.classList.remove('enter');
+            el.classList.add('leave');
+            await this.waitTransitionEnd(el, this.fadeDuration());
+        }
+        this.overlayRef.detach();
+    }
+    waitTransitionEnd(el, maxMs) {
+        return new Promise((resolve) => {
+            let done = false;
+            const off = () => {
+                if (done)
+                    return;
+                done = true;
+                el.removeEventListener('transitionend', onEnd);
+                resolve();
+            };
+            const onEnd = (e) => {
+                // garante que veio do opacity/transform do próprio elemento
+                if (e.target === el)
+                    off();
+            };
+            el.addEventListener('transitionend', onEnd, { once: true });
+            // fallback se o evento não disparar
+            setTimeout(off, maxMs + 50);
+        });
+    }
+    cleanup() {
+        const el = this.overlayRef?.overlayElement;
+        if (el) {
+            el.classList.remove('enter', 'leave');
+        }
+    }
+    buildPositions(preset, ox, oy) {
+        // helpers
+        const P = (originX, originY, overlayX, overlayY, offsetX = 0, offsetY = 0) => ({
+            originX,
+            originY,
+            overlayX,
+            overlayY,
+            offsetX,
+            offsetY,
+        });
+        // presets principais
+        const map = {
+            // TOP
+            'top-left': [
+                P('start', 'top', 'start', 'bottom', ox, -oy),
+                P('start', 'bottom', 'start', 'top', ox, oy),
+                P('end', 'top', 'end', 'bottom', ox, -oy),
+                P('center', 'top', 'center', 'bottom', ox, -oy),
+            ],
+            'top-center': [
+                P('center', 'top', 'center', 'bottom', ox, -oy),
+                P('center', 'bottom', 'center', 'top', ox, oy),
+                P('start', 'top', 'start', 'bottom', ox, -oy),
+                P('end', 'top', 'end', 'bottom', ox, -oy),
+            ],
+            'top-right': [
+                P('end', 'top', 'end', 'bottom', ox, -oy),
+                P('end', 'bottom', 'end', 'top', ox, oy),
+                P('start', 'top', 'start', 'bottom', ox, -oy),
+                P('center', 'top', 'center', 'bottom', ox, -oy),
+            ],
+            // BOTTOM
+            'bottom-left': [
+                P('start', 'bottom', 'start', 'top', ox, oy),
+                P('start', 'top', 'start', 'bottom', ox, -oy),
+                P('end', 'bottom', 'end', 'top', ox, oy),
+                P('center', 'bottom', 'center', 'top', ox, oy),
+            ],
+            'bottom-center': [
+                P('center', 'bottom', 'center', 'top', ox, oy),
+                P('center', 'top', 'center', 'bottom', ox, -oy),
+                P('start', 'bottom', 'start', 'top', ox, oy),
+                P('end', 'bottom', 'end', 'top', ox, oy),
+            ],
+            'bottom-right': [
+                P('end', 'bottom', 'end', 'top', ox, oy),
+                P('end', 'top', 'end', 'bottom', ox, -oy),
+                P('start', 'bottom', 'start', 'top', ox, oy),
+                P('center', 'bottom', 'center', 'top', ox, oy),
+            ],
+            // LEFT
+            'left-top': [
+                P('start', 'top', 'end', 'top', -ox, oy),
+                P('start', 'center', 'end', 'center', -ox, 0),
+                P('start', 'bottom', 'end', 'bottom', -ox, -oy),
+                P('end', 'top', 'start', 'top', ox, oy), // fallback espelha para direita
+            ],
+            'left-center': [
+                P('start', 'center', 'end', 'center', -ox, 0),
+                P('start', 'top', 'end', 'top', -ox, oy),
+                P('start', 'bottom', 'end', 'bottom', -ox, -oy),
+                P('end', 'center', 'start', 'center', ox, 0),
+            ],
+            'left-bottom': [
+                P('start', 'bottom', 'end', 'bottom', -ox, -oy),
+                P('start', 'center', 'end', 'center', -ox, 0),
+                P('start', 'top', 'end', 'top', -ox, oy),
+                P('end', 'bottom', 'start', 'bottom', ox, -oy),
+            ],
+            // RIGHT
+            'right-top': [
+                P('end', 'top', 'start', 'top', ox, oy),
+                P('end', 'center', 'start', 'center', ox, 0),
+                P('end', 'bottom', 'start', 'bottom', ox, -oy),
+                P('start', 'top', 'end', 'top', -ox, oy), // fallback espelha para esquerda
+            ],
+            'right-center': [
+                P('end', 'center', 'start', 'center', ox, 0),
+                P('end', 'top', 'start', 'top', ox, oy),
+                P('end', 'bottom', 'start', 'bottom', ox, -oy),
+                P('start', 'center', 'end', 'center', -ox, 0),
+            ],
+            'right-bottom': [
+                P('end', 'bottom', 'start', 'bottom', ox, -oy),
+                P('end', 'center', 'start', 'center', ox, 0),
+                P('end', 'top', 'start', 'top', ox, oy),
+                P('start', 'bottom', 'end', 'bottom', -ox, -oy),
+            ],
+        };
+        return map[preset] ?? map['bottom-left'];
+    }
+    ngOnDestroy() {
+        this.close();
+        this.subs.unsubscribe();
+        this.overlayRef?.dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.15", type: PopoverTriggerDirective, isStandalone: true, selector: "[s4yPopoverTrigger]", inputs: { menuTrigger: { classPropertyName: "menuTrigger", publicName: "s4yPopoverTrigger", isSignal: true, isRequired: false, transformFunction: null }, menuContext: { classPropertyName: "menuContext", publicName: "s4yPopoverTriggerContext", isSignal: true, isRequired: false, transformFunction: null }, menuPosition: { classPropertyName: "menuPosition", publicName: "s4yPopoverPosition", isSignal: true, isRequired: false, transformFunction: null }, popoverOffsetX: { classPropertyName: "popoverOffsetX", publicName: "s4yPopoverOffsetX", isSignal: true, isRequired: false, transformFunction: null }, popoverOffsetY: { classPropertyName: "popoverOffsetY", publicName: "s4yPopoverOffsetY", isSignal: true, isRequired: false, transformFunction: null }, fade: { classPropertyName: "fade", publicName: "s4yPopoverFade", isSignal: true, isRequired: false, transformFunction: null }, fadeDuration: { classPropertyName: "fadeDuration", publicName: "s4yPopoverFadeDuration", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "toggle()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PopoverTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[s4yPopoverTrigger]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { toggle: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class MenuComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: MenuComponent, isStandalone: true, selector: "s4y-menu", ngImport: i0, template: '<ng-content/>', isInline: true, styles: [":host{z-index:5;padding:1.4rem;background-color:#fff;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);top:2.9rem;right:0;min-width:14rem;max-width:240px;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-menu', imports: [], template: '<ng-content/>', styles: [":host{z-index:5;padding:1.4rem;background-color:#fff;border-radius:var(--radius);font-size:1.4rem;box-shadow:var(--shadow-default);border:1px solid var(--gray-400);top:2.9rem;right:0;min-width:14rem;max-width:240px;display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}\n"] }]
+        }] });
+
+class MenuItemComponent {
+    iconUri = input();
+    imageUri = input();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: MenuItemComponent, isStandalone: true, selector: "button[s4yMenuItem], a[s4yMenuItem]", inputs: { iconUri: { classPropertyName: "iconUri", publicName: "iconUri", isSignal: true, isRequired: false, transformFunction: null }, imageUri: { classPropertyName: "imageUri", publicName: "imageUri", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-label": "Mais informa\u00E7\u00F5es" } }, ngImport: i0, template: `
+    @if (iconUri()) {
+      <s4y-svg [size]="18" [src]="iconUri()"></s4y-svg>
+    }
+
+    @if (imageUri()) {
+      <img [src]="imageUri()" alt="icon" width="18" height="18" />
+    }
+    <ng-content></ng-content>
+  `, isInline: true, styles: [":host{display:flex;align-items:center;justify-content:flex-start;gap:.8rem;padding:0 .4rem;min-height:4rem;width:100%;&:hover{text-decoration:underline}}\n"], dependencies: [{ kind: "component", type: SvgComponent, selector: "s4y-svg", inputs: ["src", "color", "size"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[s4yMenuItem], a[s4yMenuItem]', standalone: true, imports: [SvgComponent], template: `
+    @if (iconUri()) {
+      <s4y-svg [size]="18" [src]="iconUri()"></s4y-svg>
+    }
+
+    @if (imageUri()) {
+      <img [src]="imageUri()" alt="icon" width="18" height="18" />
+    }
+    <ng-content></ng-content>
+  `, host: {
+                        'aria-label': 'Mais informações',
+                    }, styles: [":host{display:flex;align-items:center;justify-content:flex-start;gap:.8rem;padding:0 .4rem;min-height:4rem;width:100%;&:hover{text-decoration:underline}}\n"] }]
+        }] });
+
 /*
  * Public API Surface of s4y-components
  */
@@ -2892,5 +3195,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, RadioComponent, SearchBarComponent, SelectComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, sidebarRightAnimation };
+export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, SearchBarComponent, SelectComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
 //# sourceMappingURL=s4y-ui.mjs.map