s4y-ui 2.4.2 → 2.5.2

package/fesm2022/s4y-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, ViewEncapsulation, output, effect, Inject, TemplateRef } from '@angular/core';
+import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, ViewEncapsulation, output, effect, Inject, TemplateRef, ViewChild, ContentChildren } 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,10 @@ 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 } from 'rxjs';
+import { defer, from, throwError, BehaviorSubject, map as map$1, Subject, takeUntil } from 'rxjs';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, NgControl, FormsModule } from '@angular/forms';
-import { trigger, transition, animate, style, group, query } from '@angular/animations';
+import { trigger, transition, animate, style, group, query, state } from '@angular/animations';
 
 class DashboardLayoutComponent {
     asideTemplate;
@@ -1009,11 +1009,11 @@ class TableComponent {
     errorMessageDefault = input('Não foi possível carregar os dados.');
     emptyMessageDefault = input(' Não encontramos dados para exibir.');
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\">\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of data(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 .4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TableComponent, isStandalone: true, selector: "s4y-table", inputs: { headers: { classPropertyName: "headers", publicName: "headers", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, errorMessageDefault: { classPropertyName: "errorMessageDefault", publicName: "errorMessageDefault", isSignal: true, isRequired: false, transformFunction: null }, emptyMessageDefault: { classPropertyName: "emptyMessageDefault", publicName: "emptyMessageDefault", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "rowTemplate", first: true, predicate: ["rowTemplate"], descendants: true }, { propertyName: "headTemplate", first: true, predicate: ["headTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"s4y-table-container\">\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of data(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 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      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of data(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 .4rem}.s4y-table th.sorted{background-color:var(--primary-color);color:#fff}.s4y-table td.sorted{background-color:var(--gray-200)}.s4y-table tr.empty-content,.s4y-table tr.loading,.s4y-table tr.error{border:none}.s4y-table tr.empty-content td,.s4y-table tr.loading td,.s4y-table tr.error td{text-align:center;height:28rem;background-color:transparent;color:var(--gray-900);font-weight:700;border:none}\n"] }]
+            args: [{ selector: 's4y-table', imports: [CommonModule, SpinnerComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-table-container\">\r\n  <table class=\"s4y-table\">\r\n    <thead>\r\n      <ng-container [ngTemplateOutlet]=\"headTemplate\"></ng-container>\r\n    </thead>\r\n    <tbody>\r\n      @if (isLoading()) {\r\n        <tr class=\"loading\">\r\n          <td [colSpan]=\"headers().length\">\r\n            <s4y-spinner></s4y-spinner>\r\n          </td>\r\n        </tr>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n            </td>\r\n          </tr>\r\n        } @else {\r\n          <tr class=\"error\">\r\n            <td [colSpan]=\"headers().length\">\r\n              {{ errorMessageDefault() }}\r\n            </td>\r\n          </tr>\r\n        }\r\n      } @else {\r\n        <ng-container [ngTemplateOutlet]=\"tableContent\"></ng-container>\r\n      }\r\n    </tbody>\r\n  </table>\r\n</div>\r\n\r\n<ng-template #SortIcon>\r\n  <svg\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M4.86885 11H2.6665L6 3H8L11.3334 11H9.13113L8.7213 10H5.27869L4.86885 11ZM6.09836 8H7.90163L7 5.8L6.09836 8ZM18.9999 16V3H16.9999V16H13.9999L17.9999 21L21.9999 16H18.9999ZM10.9999 13H2.99992V15H7.85414L2.99992 19V21H10.9999V19H6.14605L10.9999 15V13Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #tableContent>\r\n  @for (item of data(); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"rowTemplate\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: item, idx: $index }\"\r\n    >\r\n    </ng-container>\r\n  } @empty {\r\n    @if (emptyTemplate) {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n        </td>\r\n      </tr>\r\n    } @else {\r\n      <tr class=\"empty-content\">\r\n        <td [colSpan]=\"headers().length\">\r\n          {{ emptyMessageDefault() }}\r\n        </td>\r\n      </tr>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".s4y-table-container{overflow:auto;min-height:30rem}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table-container{width:90dvw;padding-bottom:1.4rem;margin:0 auto}}.s4y-table{border:1px solid var(--gray-200);border-collapse:collapse;width:100%}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-table tr{white-space:nowrap}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-table tr{white-space:nowrap}}.s4y-table .s4y-table-head-th__content{display:flex;justify-content:space-between}.s4y-table thead{background-color:#eaeaea}.s4y-table thead tr{font-size:1.3rem;height:5rem;font-weight:700}.s4y-table tbody tr{border-bottom:1px solid var(--gray-400);background-color:#fff;font-size:1.3rem;line-height:5rem;font-weight:400}.s4y-table tfoot{background-color:#eaeaea}.s4y-table th,.s4y-table td{text-align:start;padding:0 .4rem}.s4y-table td:first-child,.s4y-table td:last-child,.s4y-table th:first-child,.s4y-table th:last-child{padding:0 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']
@@ -1240,11 +1240,11 @@ class ModalComponent {
         window.removeEventListener('keydown', this.escListener);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, centeredModal: { classPropertyName: "centeredModal", publicName: "centeredModal", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeModal: "closeModal", visible: "visibleChange", withHeader: "withHeaderChange" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n  <div\r\n    class=\"s4y-modal-wrapper\"\r\n    [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n    [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n    (click)=\"onClose()\"\r\n    @modalFadeCombined\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n      [ngStyle]=\"modalStyle()\"\r\n    >\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"s4y-modal-body\"\r\n        [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding:1rem 0;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [modalFadeCombined] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "s4y-modal", inputs: { scrollableContent: { classPropertyName: "scrollableContent", publicName: "scrollableContent", isSignal: true, isRequired: false, transformFunction: null }, centeredModal: { classPropertyName: "centeredModal", publicName: "centeredModal", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, modalStyle: { classPropertyName: "modalStyle", publicName: "modalStyle", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, withHeader: { classPropertyName: "withHeader", publicName: "withHeader", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeModal: "closeModal", visible: "visibleChange", withHeader: "withHeaderChange" }, queries: [{ propertyName: "modalHeaderTemplate", first: true, predicate: ["modalHeaderTemplate"], descendants: true }, { propertyName: "modalFooterTemplate", first: true, predicate: ["modalFooterTemplate"], descendants: true }], ngImport: i0, template: "@if (visible()) {\r\n  <div\r\n    class=\"s4y-modal-wrapper\"\r\n    [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n    [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n    (click)=\"onClose()\"\r\n    @modalFadeCombined\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n      [ngStyle]=\"modalStyle()\"\r\n    >\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"s4y-modal-body\"\r\n        [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding-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.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's4y-modal', imports: [CommonModule], animations: [modalFadeCombined], template: "@if (visible()) {\r\n  <div\r\n    class=\"s4y-modal-wrapper\"\r\n    [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n    [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n    (click)=\"onClose()\"\r\n    @modalFadeCombined\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n      [ngStyle]=\"modalStyle()\"\r\n    >\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"s4y-modal-body\"\r\n        [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding:1rem 0;flex-shrink:0;display:flex;align-items:center;justify-content:space-between}.s4y-modal-header button{padding:.6rem 1.2rem;font-size:1.8rem;cursor:pointer}.s4y-modal-header .s4y-modal-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-modal-body{flex-grow:1}.s4y-modal-footer{padding:1rem 0;flex-shrink:0}.s4y-modal-body__scrollable-content{overflow-y:auto}.s4y-modal-container__scrollable-content{max-height:90dvh;min-height:18rem}\n"] }]
+            args: [{ selector: 's4y-modal', imports: [CommonModule], animations: [modalFadeCombined], template: "@if (visible()) {\r\n  <div\r\n    class=\"s4y-modal-wrapper\"\r\n    [class.s4y-modal-wrapper-with-scrollable]=\"!scrollableContent()\"\r\n    [class.s4y-modal-wrapper-centered]=\"centeredModal()\"\r\n    (click)=\"onClose()\"\r\n    @modalFadeCombined\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\r\n      (click)=\"$event.stopPropagation()\"\r\n      [class.s4y-modal-container__scrollable-content]=\"scrollableContent()\"\r\n      [ngStyle]=\"modalStyle()\"\r\n    >\r\n      @if (modalHeaderTemplate) {\r\n        <ng-container [ngTemplateOutlet]=\"modalHeaderTemplate\"></ng-container>\r\n      }\r\n      @if (!modalHeaderTemplate && withHeader()) {\r\n        <div class=\"s4y-modal-header\">\r\n          <h2 class=\"s4y-modal-header__title\">{{ title() }}</h2>\r\n          <button role=\"button\" (click)=\"onClose()\">\r\n            <p>&times;</p>\r\n          </button>\r\n        </div>\r\n      }\r\n\r\n      <div\r\n        class=\"s4y-modal-body\"\r\n        [class.s4y-modal-body__scrollable-content]=\"scrollableContent()\"\r\n      >\r\n        <ng-content></ng-content>\r\n      </div>\r\n      @if (modalFooterTemplate) {\r\n        <div class=\"s4y-modal-footer\">\r\n          <ng-container [ngTemplateOutlet]=\"modalFooterTemplate\"></ng-container>\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".s4y-modal-wrapper{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;z-index:var(--z-index-modal-backdrop);padding:3.8rem;background-color:#000000b3}.s4y-modal-wrapper.s4y-modal-wrapper-with-scrollable{overflow-y:auto;-webkit-overflow-scrolling:auto}.s4y-modal-wrapper.s4y-modal-wrapper-centered{align-items:center;justify-content:center}.s4y-modal-container{background:#fff;width:100%;min-width:300px;max-width:500px;border-radius:var(--radius);z-index:var(--z-index-modal);box-shadow:0 4px 12px #0003;animation:fadeInUp .3s ease;padding:1.8rem 2rem 2.2rem;display:flex;flex-direction:column}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-modal-container{width:90%}}@media screen and (min-width: 481px) and (max-width: 767px){.s4y-modal-container{width:90%}}@media screen and (min-width: 768px) and (max-width: 1024px){.s4y-modal-container{width:90%}}.s4y-modal-header{padding-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"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -2430,6 +2430,187 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 type: Input
             }] } });
 
+class StepComponent {
+    root;
+    value;
+    title;
+    description;
+    isLast = false;
+    selected = false;
+    disabled = false;
+    isCompleted = false;
+    stepClicked = new EventEmitter();
+    linear = false;
+    onClick() {
+        if (!this.disabled) {
+            this.stepClicked.emit(this.value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: StepComponent, isStandalone: false, selector: "s4y-step", inputs: { value: "value", title: "title", description: "description", isLast: "isLast", selected: "selected", disabled: "disabled", isCompleted: "isCompleted" }, viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, static: true }], ngImport: i0, template: "<button\r\n  (click)=\"onClick()\"\r\n  [class.last-step]=\"isLast\"\r\n  #root\r\n  role=\"button\"\r\n  type=\"button\"\r\n  class=\"s4y-step-container\"\r\n  [disabled]=\"disabled\"\r\n  [class.selected]=\"selected || isCompleted\"\r\n  [class.future-step]=\"linear && !isCompleted && !selected\"\r\n>\r\n  <div class=\"s4y-step-information\">\r\n    <div class=\"s4y-step-information__icon\">\r\n      <ng-container *ngIf=\"isCompleted; else showValue\"> \u2714 </ng-container>\r\n      <ng-template #showValue>{{ value }}</ng-template>\r\n    </div>\r\n    <div class=\"s4y-step-information__line\"></div>\r\n  </div>\r\n  <div class=\"s4y-step-content\">\r\n    <p class=\"s4y-step-content__title\">{{ title }}</p>\r\n    @if (description) {\r\n      <p class=\"s4y-step-content__description\">\r\n        {{ description }}\r\n      </p>\r\n    }\r\n  </div>\r\n</button>\r\n", styles: [":host{display:block;width:100%}.s4y-step-container{text-align:start;-webkit-user-select:text;user-select:text;display:block;width:100%}.s4y-step-container .s4y-step-information{display:flex;align-items:center;justify-content:center;gap:2.4rem}.s4y-step-container .s4y-step-information .s4y-step-information__icon{transition:.5s ease;height:2rem;width:2rem;border-radius:50px;font-size:1.2rem;color:#fff;flex-shrink:0;border:1px solid var(--gray-600);color:var(--gray-600);display:flex;align-items:center;justify-content:center}.s4y-step-container .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--gray-200);height:2px;flex-grow:1}.s4y-step-container .s4y-step-content{margin:1rem 0}.s4y-step-container .s4y-step-content .s4y-step-content__title{font-size:1.4rem;font-weight:700;color:var(--gray-900)}.s4y-step-container .s4y-step-content .s4y-step-content__description{font-size:1.4rem;color:var(--gray-600)}.s4y-step-container.disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.4}.s4y-step-container.last-step .s4y-step-information{align-items:flex-start;justify-content:flex-start}.s4y-step-container.last-step .s4y-step-information .s4y-step-information__line{display:none}.s4y-step-container.selected .s4y-step-information .s4y-step-information__icon{transition:.5s ease;background-color:var(--primary-color);color:#fff}.s4y-step-container.selected .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--primary-color)}.s4y-step-container.future-step{opacity:.4;cursor:default;pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-step', standalone: false, template: "<button\r\n  (click)=\"onClick()\"\r\n  [class.last-step]=\"isLast\"\r\n  #root\r\n  role=\"button\"\r\n  type=\"button\"\r\n  class=\"s4y-step-container\"\r\n  [disabled]=\"disabled\"\r\n  [class.selected]=\"selected || isCompleted\"\r\n  [class.future-step]=\"linear && !isCompleted && !selected\"\r\n>\r\n  <div class=\"s4y-step-information\">\r\n    <div class=\"s4y-step-information__icon\">\r\n      <ng-container *ngIf=\"isCompleted; else showValue\"> \u2714 </ng-container>\r\n      <ng-template #showValue>{{ value }}</ng-template>\r\n    </div>\r\n    <div class=\"s4y-step-information__line\"></div>\r\n  </div>\r\n  <div class=\"s4y-step-content\">\r\n    <p class=\"s4y-step-content__title\">{{ title }}</p>\r\n    @if (description) {\r\n      <p class=\"s4y-step-content__description\">\r\n        {{ description }}\r\n      </p>\r\n    }\r\n  </div>\r\n</button>\r\n", styles: [":host{display:block;width:100%}.s4y-step-container{text-align:start;-webkit-user-select:text;user-select:text;display:block;width:100%}.s4y-step-container .s4y-step-information{display:flex;align-items:center;justify-content:center;gap:2.4rem}.s4y-step-container .s4y-step-information .s4y-step-information__icon{transition:.5s ease;height:2rem;width:2rem;border-radius:50px;font-size:1.2rem;color:#fff;flex-shrink:0;border:1px solid var(--gray-600);color:var(--gray-600);display:flex;align-items:center;justify-content:center}.s4y-step-container .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--gray-200);height:2px;flex-grow:1}.s4y-step-container .s4y-step-content{margin:1rem 0}.s4y-step-container .s4y-step-content .s4y-step-content__title{font-size:1.4rem;font-weight:700;color:var(--gray-900)}.s4y-step-container .s4y-step-content .s4y-step-content__description{font-size:1.4rem;color:var(--gray-600)}.s4y-step-container.disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.4}.s4y-step-container.last-step .s4y-step-information{align-items:flex-start;justify-content:flex-start}.s4y-step-container.last-step .s4y-step-information .s4y-step-information__line{display:none}.s4y-step-container.selected .s4y-step-information .s4y-step-information__icon{transition:.5s ease;background-color:var(--primary-color);color:#fff}.s4y-step-container.selected .s4y-step-information .s4y-step-information__line{transition:.5s ease;background-color:var(--primary-color)}.s4y-step-container.future-step{opacity:.4;cursor:default;pointer-events:none}\n"] }]
+        }], propDecorators: { root: [{
+                type: ViewChild,
+                args: ['root', { static: true }]
+            }], value: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], isLast: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], isCompleted: [{
+                type: Input
+            }] } });
+
+const stepperAnimation = trigger('stepperAnimation', [
+    state('left', style({ transform: 'translateX(-100%)', opacity: 0 })),
+    state('center', style({ transform: 'translateX(0)', opacity: 1 })),
+    state('right', style({ transform: 'translateX(100%)', opacity: 0 })),
+    transition('left => center', [animate('300ms ease-out')]),
+    transition('right => center', [animate('300ms ease-out')]),
+    transition('center => left', [animate('300ms ease-in')]),
+    transition('center => right', [animate('300ms ease-in')]),
+]);
+
+class StepPanelComponent {
+    stepperComponent;
+    root;
+    value = 1;
+    visible = false;
+    constructor(stepperComponent) {
+        this.stepperComponent = stepperComponent;
+    }
+    templatePanel;
+    animationState = 'right';
+    canNavigateTo(value) {
+        this.stepperComponent.setSelected(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepPanelComponent, deps: [{ token: StepperComponent }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: StepPanelComponent, isStandalone: false, selector: "s4y-step-panel", inputs: { value: "value", visible: "visible" }, queries: [{ propertyName: "templatePanel", first: true, predicate: ["templatePanel"], descendants: true }], viewQueries: [{ propertyName: "root", first: true, predicate: ["root"], descendants: true, static: true }], ngImport: i0, template: "<!-- <div\r\n  class=\"s4y-step-panel-container\"\r\n  #root\r\n  [@stepperAnimation]=\"animationState\"\r\n>\r\n  @if (visible) {\r\n    <ng-content></ng-content>\r\n  }\r\n</div> -->\r\n<!-- Angular mais novo @for nao tem tanto suporte para as animacoes -->\r\n\r\n<div\r\n  [@stepperAnimation]=\"animationState\"\r\n  class=\"s4y-step-panel-container\"\r\n  *ngIf=\"visible\"\r\n  #root\r\n>\r\n  <ng-contaner\r\n    [ngTemplateOutlet]=\"templatePanel\"\r\n    [ngTemplateOutletContext]=\"{ canNavigateTo: canNavigateTo.bind(this) }\"\r\n  ></ng-contaner>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [stepperAnimation] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-step-panel', standalone: false, animations: [stepperAnimation], template: "<!-- <div\r\n  class=\"s4y-step-panel-container\"\r\n  #root\r\n  [@stepperAnimation]=\"animationState\"\r\n>\r\n  @if (visible) {\r\n    <ng-content></ng-content>\r\n  }\r\n</div> -->\r\n<!-- Angular mais novo @for nao tem tanto suporte para as animacoes -->\r\n\r\n<div\r\n  [@stepperAnimation]=\"animationState\"\r\n  class=\"s4y-step-panel-container\"\r\n  *ngIf=\"visible\"\r\n  #root\r\n>\r\n  <ng-contaner\r\n    [ngTemplateOutlet]=\"templatePanel\"\r\n    [ngTemplateOutletContext]=\"{ canNavigateTo: canNavigateTo.bind(this) }\"\r\n  ></ng-contaner>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [{ type: StepperComponent }], propDecorators: { root: [{
+                type: ViewChild,
+                args: ['root', { static: true }]
+            }], value: [{
+                type: Input,
+                args: [{ required: true }]
+            }], visible: [{
+                type: Input
+            }], templatePanel: [{
+                type: ContentChild,
+                args: ['templatePanel']
+            }] } });
+
+class StepperComponent {
+    cdk;
+    onDestroy$ = new Subject();
+    steps;
+    stepsPanel;
+    linear = false;
+    isTabsNavigate = true;
+    selectedStepValue;
+    previousStepValue = 1;
+    maxStepCompleted = 1;
+    constructor(cdk) {
+        this.cdk = cdk;
+    }
+    ngOnInit() { }
+    ngAfterContentInit() {
+        if (!this.steps || this.steps.length === 0)
+            return;
+        this.initializerStepSelected();
+        this.onDestroy$.next();
+        this.steps.forEach((step) => {
+            step.isLast = false;
+            step.stepClicked.pipe(takeUntil(this.onDestroy$)).subscribe((value) => {
+                const isBlockedByLinear = this.linear && value > this.maxStepCompleted;
+                const isBlockedByTabSetting = !this.isTabsNavigate;
+                if (isBlockedByLinear || isBlockedByTabSetting) {
+                    return;
+                }
+                this.setSelected(value);
+            });
+        });
+        this.steps.last.isLast = true;
+    }
+    initializerStepSelected() {
+        this.setSelected(this.steps.first?.value ?? 1);
+    }
+    setSelected(value) {
+        this.steps.forEach((step) => {
+            step.linear = this.linear;
+            step.selected = step.value === value;
+            step.isCompleted = step.value < value;
+            step.disabled =
+                (this.linear && step.value > this.maxStepCompleted) ||
+                    !this.isTabsNavigate;
+        });
+        this.stepsPanel.forEach((panel) => {
+            if (panel.value === value) {
+                panel.visible = true;
+                if (value > this.previousStepValue) {
+                    panel.animationState = 'right'; // entrando da direita
+                }
+                else if (value < this.previousStepValue) {
+                    panel.animationState = 'left'; // entrando da esquerda
+                }
+                setTimeout(() => (panel.animationState = 'center'), 0);
+            }
+            else {
+                panel.visible = false;
+            }
+        });
+        this.maxStepCompleted = Math.max(this.maxStepCompleted, value);
+        this.previousStepValue = value;
+    }
+    ngOnDestroy() {
+        this.onDestroy$.next();
+        this.onDestroy$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: StepperComponent, isStandalone: false, selector: "s4y-stepper", inputs: { linear: "linear", isTabsNavigate: "isTabsNavigate" }, queries: [{ propertyName: "steps", predicate: StepComponent }, { propertyName: "stepsPanel", predicate: StepPanelComponent, descendants: true }], ngImport: i0, template: "<div class=\"s4y-stepper-container\">\r\n  <div class=\"s4y-stepper-container__header\">\r\n    <ng-content select=\"s4y-step\"></ng-content>\r\n  </div>\r\n  <div class=\"s4y-stepper-container__body\">\r\n    <ng-content select=\"s4y-step-panel\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.s4y-stepper-container{width:max-content;min-height:10.2rem;width:100%;padding:1.4rem}.s4y-stepper-container .s4y-stepper-container__header{display:flex;align-items:center;justify-content:center;gap:2.4rem}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-stepper', standalone: false, template: "<div class=\"s4y-stepper-container\">\r\n  <div class=\"s4y-stepper-container__header\">\r\n    <ng-content select=\"s4y-step\"></ng-content>\r\n  </div>\r\n  <div class=\"s4y-stepper-container__body\">\r\n    <ng-content select=\"s4y-step-panel\"></ng-content>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.s4y-stepper-container{width:max-content;min-height:10.2rem;width:100%;padding:1.4rem}.s4y-stepper-container .s4y-stepper-container__header{display:flex;align-items:center;justify-content:center;gap:2.4rem}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { steps: [{
+                type: ContentChildren,
+                args: [StepComponent]
+            }], stepsPanel: [{
+                type: ContentChildren,
+                args: [StepPanelComponent, { descendants: true }]
+            }], linear: [{
+                type: Input
+            }], isTabsNavigate: [{
+                type: Input
+            }] } });
+
+class StepperModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.7", ngImport: i0, type: StepperModule, declarations: [StepperComponent, StepComponent, StepPanelComponent], imports: [CommonModule], exports: [StepperComponent, StepComponent, StepPanelComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepperModule, imports: [CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: StepperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [StepperComponent, StepComponent, StepPanelComponent],
+                    imports: [CommonModule],
+                    exports: [StepperComponent, StepComponent, StepPanelComponent],
+                }]
+        }] });
+
 /*
  * Public API Surface of s4y-components
  */
@@ -2439,5 +2620,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AsideComponent, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, MaskDirective, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, RadioComponent, SearchBarComponent, SelectComponent, SliderComponent, SortTableDirective, SpinnerComponent, SvgComponent, SvgService, TableComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition };
+export { AsideComponent, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, MaskDirective, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, RadioComponent, SearchBarComponent, SelectComponent, SliderComponent, SortTableDirective, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, StepperModule, SvgComponent, SvgService, TableComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition };
 //# sourceMappingURL=s4y-ui.mjs.map