s4y-ui 5.0.1 → 5.0.2

package/fesm2022/s4y-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, InjectionToken, Injector } from '@angular/core';
+import { ContentChild, Component, signal, computed, Injectable, inject, input, HostBinding, Input, ChangeDetectionStrategy, NgModule, booleanAttribute, forwardRef, HostListener, Directive, EventEmitter, Output, model, output, ViewEncapsulation, effect, Inject, TemplateRef, ViewChild, ContentChildren, ElementRef, ViewContainerRef, viewChild, Renderer2, DestroyRef, InjectionToken, Injector } 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';
@@ -14,7 +14,8 @@ 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, CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal';
+import { TemplatePortal, ComponentPortal, CdkPortalOutlet } from '@angular/cdk/portal';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 class DashboardLayoutComponent {
     asideTemplate;
@@ -1394,6 +1395,8 @@ class ModalComponent {
     withHeader = input(true);
     closeOnBackdrop = input(true);
     closeOnEsc = input(true);
+    interceptBackdropClick = input(false);
+    onBackdrop = output();
     constructor(renderer, document) {
         this.renderer = renderer;
         this.document = document;
@@ -1416,9 +1419,13 @@ class ModalComponent {
     }
     ngAfterViewInit() { }
     onBackdropClick(evt) {
-        if (!this.closeOnBackdrop)
+        if (!this.closeOnBackdrop())
             return;
         if (evt.target === evt.currentTarget) {
+            if (this.interceptBackdropClick()) {
+                this.onBackdrop.emit();
+                return;
+            }
             this.onClose();
         }
     }
@@ -1431,7 +1438,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 }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", 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    @modalFadeCombined\r\n    cdkScrollable\r\n    (click)=\"onBackdropClick($event)\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\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        cdkScrollable\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"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], 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 }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, interceptBackdropClick: { classPropertyName: "interceptBackdropClick", publicName: "interceptBackdropClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", requestClose: "requestClose", onBackdrop: "onBackdrop" }, 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    @modalFadeCombined\r\n    cdkScrollable\r\n    (click)=\"onBackdropClick($event)\"\r\n    role=\"dialog\"\r\n    aria-modal=\"true\"\r\n  >\r\n    <div\r\n      class=\"s4y-modal-container\"\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        cdkScrollable\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"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], animations: [modalFadeCombined] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
@@ -1684,7 +1691,7 @@ class SelectComponent {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SelectComponent),
             },
-        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n  class=\"s4y-select-container\"\r\n  [style.maxWidth]=\"widthStyle()\"\r\n  s4yClickOutside\r\n  (clickOutside)=\"isOpened = false\"\r\n>\r\n  <p class=\"s4y-select-label\">\r\n    {{ label() }}\r\n  </p>\r\n\r\n  <div\r\n    class=\"s4y-select-container__wrapper\"\r\n    [class.disabled]=\"isDisabled\"\r\n    (click)=\"isOpened = !isOpened\"\r\n    [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n    tabindex=\"0\"\r\n    aria-controls=\"select-options-container\"\r\n  >\r\n    <div class=\"s4y-select-container__placeholder\">\r\n      @if (selectedOptionTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n        ></ng-container>\r\n      } @else {\r\n        @if (!selectedOption) {\r\n          <p>Selecione...</p>\r\n        } @else {\r\n          <p>{{ selectedOption }}</p>\r\n        }\r\n      }\r\n    </div>\r\n    @if (isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n    }\r\n    @if (!isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n    }\r\n  </div>\r\n  <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n    <div class=\"s4y-select-options\">\r\n      @if (withSearch()) {\r\n        <div class=\"s4y-select-options__search\">\r\n          <input\r\n            [ngModel]=\"onSearch()\"\r\n            (ngModelChange)=\"onSearch.set($event)\"\r\n            placeholder=\"Pesquisar...\"\r\n            type=\"text\"\r\n            name=\"search-option\"\r\n            id=\"search-option\"\r\n            autocomplete=\"off\"\r\n          />\r\n          <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n        </div>\r\n      }\r\n      @if (isLoading()) {\r\n        <div class=\"s4y-select-container__loading\">\r\n          <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n        </div>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <p class=\"s4y-select-options__message\">\r\n            <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n          </p>\r\n        } @else {\r\n          <p class=\"s4y-select-options__message\">\r\n            {{ errorMessageDefault() }}\r\n          </p>\r\n        }\r\n      } @else {\r\n        <div\r\n          class=\"s4y-select-options__scroll\"\r\n          role=\"listbox\"\r\n          aria-live=\"polite\"\r\n        >\r\n          @for (option of transformedOptions(); track $index) {\r\n            <p\r\n              [class.selected]=\"option.selected\"\r\n              class=\"s4y-select-options__item\"\r\n              role=\"option\"\r\n              aria-selected=\"false\"\r\n              tabindex=\"0\"\r\n              (click)=\"setSelectedOption(option)\"\r\n              (keyup.enter)=\"setSelectedOption(option)\"\r\n            >\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  optionTemplate;\r\n                  context: { $implicit: option?.option }\r\n                \"\r\n              ></ng-container>\r\n            </p>\r\n          } @empty {\r\n            @if (emptyTemplate) {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n              </p>\r\n            } @else {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                {{ emptyMessageDefault() }}\r\n              </p>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n  <svg\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{margin-bottom:.8rem;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[s4yClickOutside]", inputs: ["isVisible"], outputs: ["clickOutside"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [selectAnimation] });
+        ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "errorTemplate", first: true, predicate: ["errorTemplate"], descendants: true }, { propertyName: "emptyTemplate", first: true, predicate: ["emptyTemplate"], descendants: true }, { propertyName: "selectedOptionTemplate", first: true, predicate: ["selectedOptionTemplate"], descendants: true }], ngImport: i0, template: "<label\r\n  class=\"s4y-select-container\"\r\n  [style.maxWidth]=\"widthStyle()\"\r\n  s4yClickOutside\r\n  (clickOutside)=\"isOpened = false\"\r\n>\r\n  <p class=\"s4y-select-label\">\r\n    {{ label() }}\r\n  </p>\r\n\r\n  <div\r\n    class=\"s4y-select-container__wrapper\"\r\n    [class.disabled]=\"isDisabled\"\r\n    (click)=\"isOpened = !isOpened\"\r\n    [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n    tabindex=\"0\"\r\n    aria-controls=\"select-options-container\"\r\n  >\r\n    <div class=\"s4y-select-container__placeholder\">\r\n      @if (selectedOptionTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n        ></ng-container>\r\n      } @else {\r\n        @if (!selectedOption) {\r\n          <p>Selecione...</p>\r\n        } @else {\r\n          <p>{{ selectedOption }}</p>\r\n        }\r\n      }\r\n    </div>\r\n    @if (isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n    }\r\n    @if (!isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n    }\r\n  </div>\r\n  <ng-content select=\"s4y-error-message\"></ng-content>\r\n  <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n    <div class=\"s4y-select-options\">\r\n      @if (withSearch()) {\r\n        <div class=\"s4y-select-options__search\">\r\n          <input\r\n            [ngModel]=\"onSearch()\"\r\n            (ngModelChange)=\"onSearch.set($event)\"\r\n            placeholder=\"Pesquisar...\"\r\n            type=\"text\"\r\n            name=\"search-option\"\r\n            id=\"search-option\"\r\n            autocomplete=\"off\"\r\n          />\r\n          <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n        </div>\r\n      }\r\n      @if (isLoading()) {\r\n        <div class=\"s4y-select-container__loading\">\r\n          <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n        </div>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <p class=\"s4y-select-options__message\">\r\n            <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n          </p>\r\n        } @else {\r\n          <p class=\"s4y-select-options__message\">\r\n            {{ errorMessageDefault() }}\r\n          </p>\r\n        }\r\n      } @else {\r\n        <div\r\n          class=\"s4y-select-options__scroll\"\r\n          role=\"listbox\"\r\n          aria-live=\"polite\"\r\n        >\r\n          @for (option of transformedOptions(); track $index) {\r\n            <p\r\n              [class.selected]=\"option.selected\"\r\n              class=\"s4y-select-options__item\"\r\n              role=\"option\"\r\n              aria-selected=\"false\"\r\n              tabindex=\"0\"\r\n              (click)=\"setSelectedOption(option)\"\r\n              (keyup.enter)=\"setSelectedOption(option)\"\r\n            >\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  optionTemplate;\r\n                  context: { $implicit: option?.option }\r\n                \"\r\n              ></ng-container>\r\n            </p>\r\n          } @empty {\r\n            @if (emptyTemplate) {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n              </p>\r\n            } @else {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                {{ emptyMessageDefault() }}\r\n              </p>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n  <svg\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:5px;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "s4y-spinner", inputs: ["size", "color"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[s4yClickOutside]", inputs: ["isVisible"], outputs: ["clickOutside"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [selectAnimation] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
@@ -1694,7 +1701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectComponent),
                         },
-                    ], template: "<label\r\n  class=\"s4y-select-container\"\r\n  [style.maxWidth]=\"widthStyle()\"\r\n  s4yClickOutside\r\n  (clickOutside)=\"isOpened = false\"\r\n>\r\n  <p class=\"s4y-select-label\">\r\n    {{ label() }}\r\n  </p>\r\n\r\n  <div\r\n    class=\"s4y-select-container__wrapper\"\r\n    [class.disabled]=\"isDisabled\"\r\n    (click)=\"isOpened = !isOpened\"\r\n    [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n    tabindex=\"0\"\r\n    aria-controls=\"select-options-container\"\r\n  >\r\n    <div class=\"s4y-select-container__placeholder\">\r\n      @if (selectedOptionTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n        ></ng-container>\r\n      } @else {\r\n        @if (!selectedOption) {\r\n          <p>Selecione...</p>\r\n        } @else {\r\n          <p>{{ selectedOption }}</p>\r\n        }\r\n      }\r\n    </div>\r\n    @if (isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n    }\r\n    @if (!isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n    }\r\n  </div>\r\n  <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n    <div class=\"s4y-select-options\">\r\n      @if (withSearch()) {\r\n        <div class=\"s4y-select-options__search\">\r\n          <input\r\n            [ngModel]=\"onSearch()\"\r\n            (ngModelChange)=\"onSearch.set($event)\"\r\n            placeholder=\"Pesquisar...\"\r\n            type=\"text\"\r\n            name=\"search-option\"\r\n            id=\"search-option\"\r\n            autocomplete=\"off\"\r\n          />\r\n          <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n        </div>\r\n      }\r\n      @if (isLoading()) {\r\n        <div class=\"s4y-select-container__loading\">\r\n          <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n        </div>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <p class=\"s4y-select-options__message\">\r\n            <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n          </p>\r\n        } @else {\r\n          <p class=\"s4y-select-options__message\">\r\n            {{ errorMessageDefault() }}\r\n          </p>\r\n        }\r\n      } @else {\r\n        <div\r\n          class=\"s4y-select-options__scroll\"\r\n          role=\"listbox\"\r\n          aria-live=\"polite\"\r\n        >\r\n          @for (option of transformedOptions(); track $index) {\r\n            <p\r\n              [class.selected]=\"option.selected\"\r\n              class=\"s4y-select-options__item\"\r\n              role=\"option\"\r\n              aria-selected=\"false\"\r\n              tabindex=\"0\"\r\n              (click)=\"setSelectedOption(option)\"\r\n              (keyup.enter)=\"setSelectedOption(option)\"\r\n            >\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  optionTemplate;\r\n                  context: { $implicit: option?.option }\r\n                \"\r\n              ></ng-container>\r\n            </p>\r\n          } @empty {\r\n            @if (emptyTemplate) {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n              </p>\r\n            } @else {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                {{ emptyMessageDefault() }}\r\n              </p>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n  <svg\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{margin-bottom:.8rem;border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"] }]
+                    ], template: "<label\r\n  class=\"s4y-select-container\"\r\n  [style.maxWidth]=\"widthStyle()\"\r\n  s4yClickOutside\r\n  (clickOutside)=\"isOpened = false\"\r\n>\r\n  <p class=\"s4y-select-label\">\r\n    {{ label() }}\r\n  </p>\r\n\r\n  <div\r\n    class=\"s4y-select-container__wrapper\"\r\n    [class.disabled]=\"isDisabled\"\r\n    (click)=\"isOpened = !isOpened\"\r\n    [attr.aria-expanded]=\"isOpened ? 'true' : 'false'\"\r\n    tabindex=\"0\"\r\n    aria-controls=\"select-options-container\"\r\n  >\r\n    <div class=\"s4y-select-container__placeholder\">\r\n      @if (selectedOptionTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"selectedOptionTemplate\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: selectedOption?.option }\"\r\n        ></ng-container>\r\n      } @else {\r\n        @if (!selectedOption) {\r\n          <p>Selecione...</p>\r\n        } @else {\r\n          <p>{{ selectedOption }}</p>\r\n        }\r\n      }\r\n    </div>\r\n    @if (isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowUp\"></ng-container>\r\n    }\r\n    @if (!isOpened) {\r\n      <ng-container [ngTemplateOutlet]=\"arrowDown\"></ng-container>\r\n    }\r\n  </div>\r\n  <ng-content select=\"s4y-error-message\"></ng-content>\r\n  <div @selectAnimation class=\"s4y-select-options-container\" *ngIf=\"isOpened\">\r\n    <div class=\"s4y-select-options\">\r\n      @if (withSearch()) {\r\n        <div class=\"s4y-select-options__search\">\r\n          <input\r\n            [ngModel]=\"onSearch()\"\r\n            (ngModelChange)=\"onSearch.set($event)\"\r\n            placeholder=\"Pesquisar...\"\r\n            type=\"text\"\r\n            name=\"search-option\"\r\n            id=\"search-option\"\r\n            autocomplete=\"off\"\r\n          />\r\n          <ng-container [ngTemplateOutlet]=\"searchIcon\"></ng-container>\r\n        </div>\r\n      }\r\n      @if (isLoading()) {\r\n        <div class=\"s4y-select-container__loading\">\r\n          <s4y-spinner [size]=\"'mini'\"></s4y-spinner>\r\n        </div>\r\n      } @else if (hasError()) {\r\n        @if (errorTemplate) {\r\n          <p class=\"s4y-select-options__message\">\r\n            <ng-container [ngTemplateOutlet]=\"errorTemplate\"></ng-container>\r\n          </p>\r\n        } @else {\r\n          <p class=\"s4y-select-options__message\">\r\n            {{ errorMessageDefault() }}\r\n          </p>\r\n        }\r\n      } @else {\r\n        <div\r\n          class=\"s4y-select-options__scroll\"\r\n          role=\"listbox\"\r\n          aria-live=\"polite\"\r\n        >\r\n          @for (option of transformedOptions(); track $index) {\r\n            <p\r\n              [class.selected]=\"option.selected\"\r\n              class=\"s4y-select-options__item\"\r\n              role=\"option\"\r\n              aria-selected=\"false\"\r\n              tabindex=\"0\"\r\n              (click)=\"setSelectedOption(option)\"\r\n              (keyup.enter)=\"setSelectedOption(option)\"\r\n            >\r\n              <ng-container\r\n                *ngTemplateOutlet=\"\r\n                  optionTemplate;\r\n                  context: { $implicit: option?.option }\r\n                \"\r\n              ></ng-container>\r\n            </p>\r\n          } @empty {\r\n            @if (emptyTemplate) {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                <ng-container [ngTemplateOutlet]=\"emptyTemplate\"></ng-container>\r\n              </p>\r\n            } @else {\r\n              <p\r\n                class=\"s4y-select-options__message\"\r\n                role=\"status\"\r\n                aria-live=\"assertive\"\r\n              >\r\n                {{ emptyMessageDefault() }}\r\n              </p>\r\n            }\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</label>\r\n\r\n<!-- arrows -->\r\n<ng-template #arrowDown>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #arrowUp>\r\n  <svg\r\n    class=\"s4y-select__svg\"\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #searchIcon>\r\n  <svg\r\n    width=\"18px\"\r\n    height=\"18px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M11 2C15.968 2 20 6.032 20 11C20 15.968 15.968 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2ZM11 18C14.8675 18 18 14.8675 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18ZM19.4853 18.0711L22.3137 20.8995L20.8995 22.3137L18.0711 19.4853L19.4853 18.0711Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-select-container{display:block;min-width:12rem}.s4y-select-container .s4y-select-label{margin-bottom:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-container__wrapper{border-radius:var(--radius);display:flex;align-items:center;justify-content:space-between;padding:1.2rem 1.6rem;background-color:#fff;gap:1rem;border:1px solid var(--gray-500);transition:.5s ease;min-height:4.6rem}.s4y-select-container .s4y-select-container__wrapper.disabled{opacity:.5;cursor:default;pointer-events:none;-webkit-user-select:none;user-select:none}.s4y-select-container .s4y-select-container__placeholder{color:var(--gray-900);font-size:1.4rem}.s4y-select-container .s4y-select-options-container{position:relative}.s4y-select-container .s4y-select-options{position:absolute;top:5px;left:0;display:flex;flex-direction:column;gap:.6rem;border-radius:var(--radius);padding:1.2rem 1.6rem;background-color:#fff;border:1px solid var(--gray-500);width:100%;max-height:24rem;z-index:var(--z-index-select-dropdown)}.s4y-select-container .s4y-select-options__scroll{overflow-y:auto}.s4y-select-container .s4y-select-options__item{padding:.8rem;font-size:1.4rem}.s4y-select-container .s4y-select-options__item:hover{border-radius:var(--radius);cursor:pointer;background-color:var(--gray-200)}.s4y-select-container .s4y-select-options__item.selected{background-color:var(--primary-color);color:var(--gray-100)}.s4y-select-container .s4y-select-options__message{font-size:1.4rem;color:var(--gray-900)}.s4y-select-container .s4y-select-container__loading{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.s4y-select-container .s4y-select-options__search{display:flex;align-items:center;justify-content:space-between;padding:1.2rem;border-radius:var(--radius);border:1px solid var(--gray-500);margin-bottom:1rem}.s4y-select-container .s4y-select-options__search input{font-size:1.4rem}.s4y-select-container .s4y-select-options__search input::placeholder{font-size:1.4rem}:host.ng-invalid.ng-touched .s4y-select-label,:host.ng-invalid.ng-dirty .s4y-select-label{color:var(--danger-color)}:host.ng-invalid.ng-touched .s4y-select-container__wrapper,:host.ng-invalid.ng-dirty .s4y-select-container__wrapper{border:1px solid var(--danger-color);background-color:#fff6f5}\n"] }]
         }], propDecorators: { optionTemplate: [{
                 type: ContentChild,
                 args: ['optionTemplate']
@@ -3155,6 +3162,207 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                     }, 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"] }]
         }] });
 
+class ImagePreviewComponent {
+    imgEl = viewChild('imgEl');
+    src = '';
+    name;
+    overlayRef;
+    zoom = signal(1);
+    MIN_ZOOM = 0.5;
+    MAX_ZOOM = 3;
+    ZOOM_STEP = 0.25;
+    fullScreenImage = signal(false);
+    toggleFullscreen() {
+        this.fullScreenImage.update((value) => !value);
+    }
+    zoomOut() {
+        const currentZoom = this.zoom();
+        const newZoom = Math.max(this.MIN_ZOOM, currentZoom - this.ZOOM_STEP);
+        this.zoom.set(newZoom);
+        this.applyZoom();
+    }
+    zoomIn() {
+        const currentZoom = this.zoom();
+        const newZoom = Math.min(this.MAX_ZOOM, currentZoom + this.ZOOM_STEP);
+        this.zoom.set(newZoom);
+        this.applyZoom();
+    }
+    resetZoom() {
+        this.zoom.set(1);
+        this.applyZoom();
+    }
+    applyZoom() {
+        const img = this.imgEl()?.nativeElement;
+        if (img) {
+            img.style.transform = `scale(${this.zoom()})`;
+        }
+    }
+    close() {
+        if (!this.overlayRef)
+            return;
+        this.overlayRef.dispose();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImagePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: ImagePreviewComponent, isStandalone: true, selector: "s4y-image-preview", viewQueries: [{ propertyName: "imgEl", first: true, predicate: ["imgEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"s4y-image-preview-container\">\r\n  <div class=\"s4y-preview-controls\">\r\n    <div class=\"flex gap-1 align-center\">\r\n      <button\r\n        class=\"btn-close s4y-action-btn gray-4\"\r\n        type=\"button\"\r\n        (click)=\"close()\"\r\n      >\r\n        \u2715\r\n      </button>\r\n      @if (name) {\r\n        <p class=\"medium-text-regular fw-400\" style=\"color: var(--gray-400)\">\r\n          {{ name }}\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex gap-2\">\r\n      <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n        <ng-container [ngTemplateOutlet]=\"zoomOutSvg\" />\r\n      </button>\r\n      <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n        <ng-container [ngTemplateOutlet]=\"zoomInSvg\" />\r\n      </button>\r\n      <button class=\"s4y-action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n        <ng-container [ngTemplateOutlet]=\"refreshSvg\" />\r\n      </button>\r\n\r\n      <button class=\"s4y-action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"\r\n            fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\r\n          \"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"s4y-preview-img-container\">\r\n    <div class=\"s4y-img-preview\" [class.full-screen-img]=\"fullScreenImage()\">\r\n      <img\r\n        #imgEl\r\n        style=\"transform-origin: center center\"\r\n        [src]=\"src\"\r\n        alt=\"Imagem\"\r\n        (dblclick)=\"resetZoom()\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"s4y-preview-clickable\" (click)=\"close()\"></div>\r\n  </div>\r\n</div>\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n  <svg\r\n    width=\"24px\"\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=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n  <svg\r\n    width=\"24px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n  <svg\r\n    width=\"24px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n  <svg\r\n    width=\"24px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n  <svg\r\n    width=\"24px\"\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=\"M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-image-preview-container{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.s4y-image-preview-container .s4y-action-btn{border-radius:50%;height:3rem;width:3rem}.s4y-image-preview-container .s4y-action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.s4y-image-preview-container .s4y-preview-controls{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;backdrop-filter:blur(6px);background:color-mix(in oklab,#000 45%,transparent);margin-bottom:.5rem;align-items:center;height:5rem;flex-shrink:0;padding:0 1.8rem}.s4y-image-preview-container .s4y-preview-controls button{line-height:0;color:#fff}.s4y-image-preview-container .s4y-preview-controls .btn-close{font-size:2rem;transition:.2s ease}.s4y-image-preview-container .s4y-preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.s4y-image-preview-container .s4y-img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview.full-screen-img{max-width:100%;height:auto}.s4y-image-preview-container .s4y-preview-clickable{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImagePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-image-preview', imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, template: "<div class=\"s4y-image-preview-container\">\r\n  <div class=\"s4y-preview-controls\">\r\n    <div class=\"flex gap-1 align-center\">\r\n      <button\r\n        class=\"btn-close s4y-action-btn gray-4\"\r\n        type=\"button\"\r\n        (click)=\"close()\"\r\n      >\r\n        \u2715\r\n      </button>\r\n      @if (name) {\r\n        <p class=\"medium-text-regular fw-400\" style=\"color: var(--gray-400)\">\r\n          {{ name }}\r\n        </p>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"flex gap-2\">\r\n      <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n        <ng-container [ngTemplateOutlet]=\"zoomOutSvg\" />\r\n      </button>\r\n      <button class=\"s4y-action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n        <ng-container [ngTemplateOutlet]=\"zoomInSvg\" />\r\n      </button>\r\n      <button class=\"s4y-action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n        <ng-container [ngTemplateOutlet]=\"refreshSvg\" />\r\n      </button>\r\n\r\n      <button class=\"s4y-action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"\r\n            fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\r\n          \"\r\n        />\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"s4y-preview-img-container\">\r\n    <div class=\"s4y-img-preview\" [class.full-screen-img]=\"fullScreenImage()\">\r\n      <img\r\n        #imgEl\r\n        style=\"transform-origin: center center\"\r\n        [src]=\"src\"\r\n        alt=\"Imagem\"\r\n        (dblclick)=\"resetZoom()\"\r\n      />\r\n    </div>\r\n\r\n    <div class=\"s4y-preview-clickable\" (click)=\"close()\"></div>\r\n  </div>\r\n</div>\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n  <svg\r\n    width=\"24px\"\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=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n  <svg\r\n    width=\"24px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n  <svg\r\n    width=\"24px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM10 10V7H12V10H15V12H12V15H10V12H7V10H10Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n  <svg\r\n    width=\"24px\"\r\n    xmlns=\"http://www.w3.org/2000/svg\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"currentColor\"\r\n  >\r\n    <path\r\n      d=\"M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748ZM7 10H15V12H7V10Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n  <svg\r\n    width=\"24px\"\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=\"M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z\"\r\n    ></path>\r\n  </svg>\r\n</ng-template>\r\n", styles: [".s4y-image-preview-container{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.s4y-image-preview-container .s4y-action-btn{border-radius:50%;height:3rem;width:3rem}.s4y-image-preview-container .s4y-action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.s4y-image-preview-container .s4y-preview-controls{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;backdrop-filter:blur(6px);background:color-mix(in oklab,#000 45%,transparent);margin-bottom:.5rem;align-items:center;height:5rem;flex-shrink:0;padding:0 1.8rem}.s4y-image-preview-container .s4y-preview-controls button{line-height:0;color:#fff}.s4y-image-preview-container .s4y-preview-controls .btn-close{font-size:2rem;transition:.2s ease}.s4y-image-preview-container .s4y-preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.s4y-image-preview-container .s4y-img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.s4y-image-preview-container .s4y-img-preview.full-screen-img{max-width:100%;height:auto}.s4y-image-preview-container .s4y-preview-clickable{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1}\n"] }]
+        }] });
+
+class ImageService {
+    _overlay = inject(Overlay);
+    _overlayRef;
+    open(fileSrc, fileName) {
+        const portal = this.createPortal();
+        this._overlayRef = this.createOverlay();
+        const componentRef = this._overlayRef.attach(portal);
+        componentRef.instance.src = fileSrc;
+        componentRef.instance.name = fileName;
+        componentRef.instance.overlayRef = this._overlayRef;
+        let sub = this._overlayRef.backdropClick().subscribe((_) => {
+            sub.unsubscribe();
+            this.close();
+        });
+        let sub2 = this._overlayRef
+            .keydownEvents()
+            .pipe(filter$1((key) => key.code === 'Escape'))
+            .subscribe((_) => {
+            sub2.unsubscribe();
+            this.close();
+        });
+        return this._overlayRef;
+    }
+    close() {
+        this._overlayRef.dispose();
+    }
+    createOverlay() {
+        const overlay = this._overlay.create({
+            hasBackdrop: true,
+            backdropClass: ['s4y-overlay-bg'],
+            scrollStrategy: this._overlay.scrollStrategies.block(),
+            panelClass: ['s4y-preview-pane'],
+            disposeOnNavigation: true,
+        });
+        overlay.backdropClick().subscribe(() => overlay.dispose());
+        return overlay;
+    }
+    createPortal() {
+        return new ComponentPortal(ImagePreviewComponent);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ImageComponent {
+    imageService = inject(ImageService);
+    elRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    destroy = inject(DestroyRef);
+    constructor() { }
+    src = input('', {
+        alias: 's4ySrc',
+    });
+    innerTpl = input();
+    fileName = input();
+    disablePreview = input(false);
+    withOverlay = input(false);
+    wrapper;
+    overlayEl;
+    ngOnInit() {
+        this.configureWrapperElement();
+        this.configureOverlay();
+        this.configureEyeSvg();
+        this.configureImageSrc();
+    }
+    ngAfterViewInit() {
+        this.onShowOverlay();
+    }
+    configureWrapperElement() {
+        const img = this.ImageEl;
+        if (!img)
+            return;
+        const parent = img.parentNode;
+        this.wrapper = this.createElement('span');
+        this.addClass(this.wrapper, 's4y-img-wrapper');
+        this.renderer.setStyle(this.wrapper, 'position', 'relative');
+        this.renderer.setStyle(this.wrapper, 'display', 'inline-block');
+        this.renderer.insertBefore(parent, this.wrapper, img);
+        this.renderer.removeChild(parent, img);
+        this.renderer.appendChild(this.wrapper, img);
+        const click$ = fromEvent(this.wrapper, 'click');
+        click$.pipe(takeUntilDestroyed(this.destroy)).subscribe(() => {
+            this.showPreview();
+        });
+    }
+    configureOverlay() {
+        if (this.withOverlay()) {
+            this.overlayEl = this.createElement('div');
+            this.renderer.addClass(this.overlayEl, 's4y-img-overlay');
+            this.renderer.appendChild(this.wrapper, this.overlayEl);
+        }
+    }
+    configureEyeSvg() {
+        const overlay = this.overlayEl;
+        if (!overlay)
+            return;
+        const svgContainer = this.createElement('span');
+        svgContainer.innerHTML = this.eyeSvg;
+        this.renderer.appendChild(overlay, svgContainer);
+    }
+    configureImageSrc() {
+        const imgEl = this.ImageEl;
+        const src = this.src();
+        if (!imgEl || !src)
+            return;
+        this.renderer.setAttribute(imgEl, 'src', src);
+    }
+    onShowOverlay() {
+        const wrapper = this.wrapper;
+        const overlay = this.overlayEl;
+        if (!wrapper || !this.withOverlay() || !overlay)
+            return;
+        const wrapperMouseOver$ = fromEvent(this.wrapper, 'mouseover');
+        const wrapperMouseLeave$ = fromEvent(this.wrapper, 'mouseleave');
+        wrapperMouseOver$.pipe(takeUntilDestroyed(this.destroy)).subscribe((x) => {
+            this.addClass(overlay, 'active');
+        });
+        wrapperMouseLeave$.pipe(takeUntilDestroyed(this.destroy)).subscribe((x) => {
+            this.removeClass(overlay, 'active');
+        });
+    }
+    createElement(element) {
+        return this.renderer.createElement(element);
+    }
+    addClass(el, className) {
+        return this.renderer.addClass(el, className);
+    }
+    removeClass(el, className) {
+        return this.renderer.removeClass(el, className);
+    }
+    showPreview() {
+        this.imageService.open(this.src(), this.fileName());
+    }
+    get eyeSvg() {
+        return `<svg width="24px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#fff"><path d="M12.0003 3C17.3924 3 21.8784 6.87976 22.8189 12C21.8784 17.1202 17.3924 21 12.0003 21C6.60812 21 2.12215 17.1202 1.18164 12C2.12215 6.87976 6.60812 3 12.0003 3ZM12.0003 19C16.2359 19 19.8603 16.052 20.7777 12C19.8603 7.94803 16.2359 5 12.0003 5C7.7646 5 4.14022 7.94803 3.22278 12C4.14022 16.052 7.7646 19 12.0003 19ZM12.0003 16.5C9.51498 16.5 7.50026 14.4853 7.50026 12C7.50026 9.51472 9.51498 7.5 12.0003 7.5C14.4855 7.5 16.5003 9.51472 16.5003 12C16.5003 14.4853 14.4855 16.5 12.0003 16.5ZM12.0003 14.5C13.381 14.5 14.5003 13.3807 14.5003 12C14.5003 10.6193 13.381 9.5 12.0003 9.5C10.6196 9.5 9.50026 10.6193 9.50026 12C9.50026 13.3807 10.6196 14.5 12.0003 14.5Z"></path></svg>`;
+    }
+    get ImageEl() {
+        return this.elRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.15", type: ImageComponent, isStandalone: true, selector: "img[s4yImage]", inputs: { src: { classPropertyName: "src", publicName: "s4ySrc", isSignal: true, isRequired: false, transformFunction: null }, innerTpl: { classPropertyName: "innerTpl", publicName: "innerTpl", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, disablePreview: { classPropertyName: "disablePreview", publicName: "disablePreview", isSignal: true, isRequired: false, transformFunction: null }, withOverlay: { classPropertyName: "withOverlay", publicName: "withOverlay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [".s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}.s4y-img-overlay{background-color:#0009;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;transition:.3s ease;opacity:0;display:flex;align-items:center;justify-content:center}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'img[s4yImage]', template: `<ng-content />`, encapsulation: ViewEncapsulation.None, styles: [".s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}.s4y-img-overlay{background-color:#0009;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0;transition:.3s ease;opacity:0;display:flex;align-items:center;justify-content:center}\n"] }]
+        }], ctorParameters: () => [] });
+
 const selectMultiAnim = trigger('selectMultiAnim', [
     // entra
     transition(':enter', [
@@ -3351,6 +3559,25 @@ async function toMaybeBooleanPromise(value) {
         return await firstValueFrom(value);
     return value;
 }
+async function toHandlerResult(ret) {
+    if (ret instanceof Promise)
+        return await ret;
+    if (ret instanceof EventEmitter)
+        return await firstValueFrom(ret);
+    if (isObservable(ret))
+        return await firstValueFrom(ret);
+    return ret;
+}
+async function allow(canDismiss, reason) {
+    if (!canDismiss)
+        return true;
+    try {
+        return await Promise.resolve(canDismiss(reason));
+    }
+    catch {
+        return false;
+    }
+}
 
 class DynamicDialogRef {
     overlayRef;
@@ -3363,6 +3590,9 @@ class DynamicDialogRef {
     _afterClosed = new Subject();
     panelEl;
     isClosing = false;
+    _container;
+    _opts;
+    _contentComponentRef;
     constructor(overlayRef) {
         this.overlayRef = overlayRef;
         this.afterOpened$ = this._afterOpened.asObservable();
@@ -3445,6 +3675,72 @@ class DynamicDialogRef {
         }
         this.overlayRef.dispose();
     }
+    _attachContentComponent(componentRef) {
+        this._contentComponentRef = componentRef;
+    }
+    getComponent() {
+        return this._contentComponentRef?.instance;
+    }
+    hasComponent() {
+        return !!this._contentComponentRef;
+    }
+    _attachForButtonUpdates(container, opts) {
+        this._container = container;
+        this._opts = opts;
+        // garantir objetos
+        this._opts.okBtnOptions ??= {};
+        this._opts.cancelBtnOptions ??= {};
+    }
+    updateButtons(patch) {
+        if (!this._opts)
+            return;
+        if (patch.ok)
+            Object.assign(this._opts.okBtnOptions, patch.ok);
+        if (patch.cancel)
+            Object.assign(this._opts.cancelBtnOptions, patch.cancel);
+        this._markForCheck();
+    }
+    // OK
+    setOkLoading(state) {
+        this._ensureBtn('ok').loading = state;
+        // se você usa okLoading interno como overlay, mantenha em sincronia:
+        this._container.okLoading = !!state;
+        this._markForCheck();
+    }
+    setOkDisabled(state) {
+        this._ensureBtn('ok').disabled = state;
+        this._markForCheck();
+    }
+    setOkText(text) {
+        this._ensureBtn('ok').text = text;
+        this._markForCheck();
+    }
+    // Cancel
+    setCancelLoading(state) {
+        this._ensureBtn('cancel').loading = state;
+        this._container.cancelLoading = !!state;
+        this._markForCheck();
+    }
+    setCancelDisabled(state) {
+        this._ensureBtn('cancel').disabled = state;
+        this._markForCheck();
+    }
+    setCancelText(text) {
+        this._ensureBtn('cancel').text = text;
+        this._markForCheck();
+    }
+    _ensureBtn(which) {
+        if (!this._opts)
+            throw new Error('Dialog options not attached.');
+        const key = which === 'ok' ? 'okBtnOptions' : 'cancelBtnOptions';
+        this._opts[key] ??= {};
+        return this._opts[key];
+    }
+    _markForCheck() {
+        const cdr = this._container?.cdr;
+        if (cdr?.markForCheck)
+            cdr.markForCheck();
+    }
 }
 
 class DynamicDialogComponent {
@@ -3460,10 +3756,17 @@ class DynamicDialogComponent {
     footerTemplate;
     contentTemplate;
     templateContext;
+    portalOutlet;
     constructor(ref, dialogOptions) {
         this.ref = ref;
         this.dialogOptions = dialogOptions;
     }
+    ngAfterViewInit() {
+        if (this.portalOutlet?.attachedRef) {
+            console.log();
+            this.ref._attachContentComponent(this.portalOutlet.attachedRef);
+        }
+    }
     get data() {
         return this.injectedData;
     }
@@ -3472,10 +3775,16 @@ class DynamicDialogComponent {
             return;
         this.okLoading = true;
         try {
-            const res = await toMaybeBooleanPromise(this.dialogOptions?.onOk?.({ data: this.injectedData, ref: this.ref }));
-            if (res === false)
+            const component = this.ref.getComponent();
+            const out = await toHandlerResult(this.dialogOptions?.onOk?.({
+                data: this.injectedData,
+                ref: this.ref,
+                component,
+            }));
+            if (out === false)
                 return;
-            await this.ref.closeAnimated(undefined, 'ok');
+            const result = out === true || typeof out === 'undefined' ? undefined : out;
+            await this.ref.closeAnimated(result, 'ok');
         }
         finally {
             this.okLoading = false;
@@ -3485,22 +3794,25 @@ class DynamicDialogComponent {
     async onCancel() {
         if (this.cancelLoading)
             return;
-        this.cancelLoading = true;
+        // this.cancelLoading = true;
         try {
-            const res = await toMaybeBooleanPromise(this.dialogOptions?.onCancel?.({
+            const component = this.ref.getComponent();
+            const out = await toHandlerResult(this.dialogOptions?.onCancel?.({
                 data: this.injectedData,
                 ref: this.ref,
+                component,
             }));
-            if (res === false)
-                return;
-            await this.ref.closeAnimated(undefined, 'cancel');
+            if (out === false)
+                return; // NÃO fecha
+            const result = out === true || typeof out === 'undefined' ? undefined : out;
+            await this.ref.closeAnimated(result, 'cancel');
         }
         finally {
             this.cancelLoading = false;
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogComponent, deps: [{ token: DynamicDialogRef }, { token: DYNAMIC_DIALOG_OPTIONS }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicDialogComponent, isStandalone: true, selector: "s4y-dynamic-dialog", inputs: { contentPortal: "contentPortal", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", contentTemplate: "contentTemplate", templateContext: "templateContext" }, host: { attributes: { "role": "dialog", "aria-modal": "true", "tabindex": "-1" }, properties: { "attr.aria-labelledby": "'s4y-dialog-title'" }, classAttribute: "s4y-dialog" }, ngImport: i0, template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n  @if (headerTemplate) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"headerTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    </header>\r\n  } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n      <p class=\"s4y-dialog-header__description\">\r\n        {{ dialogOptions?.description }}\r\n      </p>\r\n    </header>\r\n  }\r\n\r\n  @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n    <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n      &times;\r\n    </button>\r\n  }\r\n\r\n  <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n    @if (contentTemplate) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"contentTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    } @else {\r\n      <ng-template\r\n        cdkPortalOutlet\r\n        [cdkPortalOutlet]=\"contentPortal\"\r\n      ></ng-template>\r\n    }\r\n  </section>\r\n\r\n  @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n  @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n  @if (!(dialogOptions?.hideFooter ?? false)) {\r\n    <footer\r\n      class=\"flex gap-1 s4y-dialog__footer\"\r\n      [ngStyle]=\"dialogOptions?.footerStyle\"\r\n    >\r\n      @if (footerTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"footerTemplate\"\r\n          [ngTemplateOutletContext]=\"templateContext\"\r\n        >\r\n        </ng-container>\r\n      } @else {\r\n        @if (cancelBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onCancel()\"\r\n            [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n            [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n            [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n            [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n          </button>\r\n        }\r\n        @if (okBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onOk()\"\r\n            [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n            [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n            [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n            [size]=\"okBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ okBtnOptions?.text ?? \"Ok\" }}\r\n          </button>\r\n        }\r\n      }\r\n    </footer>\r\n  }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-dialog__footer{flex-direction:column-reverse}.s4y-dialog__footer button{width:100%}}.s4y-dialog-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-dialog-header__description{font-size:2rem;font-size:1.4rem;font-weight:400;color:var(--gray-700)}.s4y-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto}.s4y-dialog-close-btn{padding:0rem 1.4rem;cursor:pointer;font-size:2rem;position:absolute;right:0;top:0;transition:.5 ease}.s4y-dialog-close-btn:hover{background-color:var(--gray-200);border-radius:var(--radius)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: DynamicDialogComponent, isStandalone: true, selector: "s4y-dynamic-dialog", inputs: { contentPortal: "contentPortal", headerTemplate: "headerTemplate", footerTemplate: "footerTemplate", contentTemplate: "contentTemplate", templateContext: "templateContext" }, host: { attributes: { "role": "dialog", "aria-modal": "true", "tabindex": "-1" }, properties: { "attr.aria-labelledby": "'s4y-dialog-title'" }, classAttribute: "s4y-dialog" }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true }], ngImport: i0, template: "<article class=\"s4y-dialog\" role=\"dialog\" aria-modal=\"true\">\r\n  @if (headerTemplate) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"headerTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    </header>\r\n  } @else if (dialogOptions?.title || dialogOptions?.description) {\r\n    <header\r\n      class=\"s4y-dialog-header\"\r\n      [class.s4y-centered-header]=\"dialogOptions?.centeredHeader\"\r\n      [ngStyle]=\"dialogOptions?.headerStyle\"\r\n    >\r\n      <h2 class=\"s4y-dialog-header__title\">{{ dialogOptions?.title }}</h2>\r\n      <p class=\"s4y-dialog-header__description\">\r\n        {{ dialogOptions?.description }}\r\n      </p>\r\n    </header>\r\n  }\r\n\r\n  @if (dialogOptions?.closable || dialogOptions?.closable == undefined) {\r\n    <button class=\"s4y-dialog-close-btn\" (click)=\"ref.closeAnimated(undefined, 'close')\" aria-label=\"Fechar\">\r\n      &times;\r\n    </button>\r\n  }\r\n\r\n  <section class=\"s4y-dialog__body\" [ngStyle]=\"dialogOptions?.bodyStyle\">\r\n    @if (contentTemplate) {\r\n      <ng-container\r\n        [ngTemplateOutlet]=\"contentTemplate\"\r\n        [ngTemplateOutletContext]=\"templateContext\"\r\n      >\r\n      </ng-container>\r\n    } @else {\r\n      <ng-template\r\n        cdkPortalOutlet\r\n        [cdkPortalOutlet]=\"contentPortal\"\r\n      ></ng-template>\r\n    }\r\n  </section>\r\n\r\n  @let cancelBtnOptions = this.dialogOptions?.cancelBtnOptions;\r\n  @let okBtnOptions = this.dialogOptions?.okBtnOptions;\r\n\r\n  @if (!(dialogOptions?.hideFooter ?? false)) {\r\n    <footer\r\n      class=\"flex gap-1 s4y-dialog__footer\"\r\n      [ngStyle]=\"dialogOptions?.footerStyle\"\r\n    >\r\n      @if (footerTemplate) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"footerTemplate\"\r\n          [ngTemplateOutletContext]=\"templateContext\"\r\n        >\r\n        </ng-container>\r\n      } @else {\r\n        @if (cancelBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onCancel()\"\r\n            [loading]=\"cancelLoading || (cancelBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"cancelBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"cancelBtnOptions?.variant ?? 'gray'\"\r\n            [outlined]=\"cancelBtnOptions?.outlined ?? true\"\r\n            [disabled]=\"cancelBtnOptions?.disabled ?? false\"\r\n            [size]=\"cancelBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ cancelBtnOptions?.text ?? \"Cancelar\" }}\r\n          </button>\r\n        }\r\n        @if (okBtnOptions?.text) {\r\n          <button\r\n            (click)=\"onOk()\"\r\n            [loading]=\"okLoading || (okBtnOptions?.loading ?? false)\"\r\n            [fullWidth]=\"okBtnOptions?.fullWidth ?? false\"\r\n            s4yButton\r\n            [variant]=\"okBtnOptions?.variant ?? 'primary'\"\r\n            [outlined]=\"okBtnOptions?.outlined ?? false\"\r\n            [disabled]=\"okBtnOptions?.disabled ?? false\"\r\n            [size]=\"okBtnOptions?.size ?? 'small'\"\r\n          >\r\n            {{ okBtnOptions?.text ?? \"Ok\" }}\r\n          </button>\r\n        }\r\n      }\r\n    </footer>\r\n  }\r\n</article>\r\n", styles: [".s4y-dialog{display:flex;flex-direction:column;max-height:90dvh;overflow:hidden;position:relative}.s4y-dialog-header{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;padding-bottom:1.4rem;gap:.4rem}.s4y-centered-header{align-items:center}.s4y-dialog-action{display:flex;align-items:center;justify-content:space-between;width:100%}.s4y-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:1rem;padding-top:1.4rem;flex-shrink:0}@media screen and (min-width: 320px) and (max-width: 480px){.s4y-dialog__footer{flex-direction:column-reverse}.s4y-dialog__footer button{width:100%}}.s4y-dialog-header__title{font-size:1.8rem;color:var(--primary-color)}.s4y-dialog-header__description{font-size:2rem;font-size:1.4rem;font-weight:400;color:var(--gray-700)}.s4y-dialog__body{flex:1 1 auto;min-height:0;overflow-y:auto}.s4y-dialog-close-btn{padding:0rem 1.4rem;cursor:pointer;font-size:2rem;position:absolute;right:0;top:0;transition:.5 ease}.s4y-dialog-close-btn:hover{background-color:var(--gray-200);border-radius:var(--radius)}\n"], dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ButtonComponent, selector: "button[s4yButton], a[s4yButton]", inputs: ["disabled", "outlined", "loading", "size", "variant", "fullWidth", "iconAligned"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicDialogComponent, decorators: [{
             type: Component,
@@ -3524,12 +3836,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 type: Input
             }], templateContext: [{
                 type: Input
+            }], portalOutlet: [{
+                type: ViewChild,
+                args: [CdkPortalOutlet, { static: false }]
             }] } });
 
 class DynamicDialogService {
     overlay = inject(Overlay);
     rootInjector = inject(Injector);
-    open(component, opts = {}) {
+    open(component, opts) {
+        opts = opts ?? {};
         const overlayRef = this.overlay.create(this.buildOverlayConfig(opts));
         overlayRef.updateSize({
             width: opts.width ?? 'auto',
@@ -3546,19 +3862,26 @@ class DynamicDialogService {
             classes.forEach((c) => overlayRef.addPanelClass(c));
         }
         const dialogRef = new DynamicDialogRef(overlayRef);
+        const untilClosed$ = dialogRef.afterClosed$.pipe(take(1));
         if (opts.closeOnBackdrop) {
             overlayRef
                 .backdropClick()
-                .pipe(take(1))
-                .subscribe(() => {
+                .pipe(takeUntil(untilClosed$))
+                .subscribe(async () => {
+                if (!(await allow(opts.canDismiss, 'backdrop')))
+                    return;
                 dialogRef.closeAnimated(undefined, 'backdrop');
             });
         }
         if (opts.closeOnEsc !== false) {
             overlayRef
                 .keydownEvents()
-                .pipe(filter$1((e) => e.key === 'Escape' || e.key === 'Esc'), take(1))
-                .subscribe(() => dialogRef.closeAnimated(undefined, 'esc'));
+                .pipe(filter$1((e) => e.key === 'Escape' || e.key === 'Esc'), takeUntil(untilClosed$))
+                .subscribe(async () => {
+                if (!(await allow(opts.canDismiss, 'esc')))
+                    return;
+                dialogRef.closeAnimated(undefined, 'esc');
+            });
         }
         // injeta o ref + dados no componente container
         const injector = Injector.create({
@@ -3572,6 +3895,7 @@ class DynamicDialogService {
         // anexa o container
         const containerPortal = new ComponentPortal(DynamicDialogComponent, null, injector);
         const containerRef = overlayRef.attach(containerPortal);
+        dialogRef._attachForButtonUpdates(containerRef.instance, opts);
         const templateCtx = {
             $implicit: opts.data,
             data: opts.data,
@@ -3620,6 +3944,324 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 }]
         }] });
 
+class DynamicLoadingGlobalComponent {
+    message = signal('Carregando dados...');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicLoadingGlobalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: DynamicLoadingGlobalComponent, isStandalone: true, selector: "s4y-dynamic-loading-global", ngImport: i0, template: `
+    <div class="s4y-dynamic-loading-container">
+      <span class="s4y-dynamic-loading-container__loader"></span>
+      <p>{{ message() }}</p>
+    </div>
+  `, isInline: true, styles: [".s4y-dynamic-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;color:#fff}.s4y-dynamic-loading-container__loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid #fff;border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicLoadingGlobalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-dynamic-loading-global', imports: [], template: `
+    <div class="s4y-dynamic-loading-container">
+      <span class="s4y-dynamic-loading-container__loader"></span>
+      <p>{{ message() }}</p>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: [".s4y-dynamic-loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8rem;color:#fff}.s4y-dynamic-loading-container__loader{width:48px;height:48px;border-radius:50%;display:inline-block;border-top:3px solid #fff;border-right:3px solid transparent;box-sizing:border-box;animation:rotation 1s linear infinite}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+        }] });
+
+class DynamicLoadingGlobalService {
+    overlay = inject(Overlay);
+    overlays = new Map();
+    constructor() { }
+    showLoading(message) {
+        const overlayRef = this.createOverlay();
+        const portal = this.loadingComponentPortal();
+        const id = crypto.randomUUID();
+        const componentRef = overlayRef.attach(portal);
+        if (message) {
+            componentRef.instance.message.set(message);
+        }
+        this.overlays.set(id, { overlayRef, componentRef });
+        return id;
+    }
+    updateMessage(id, message) {
+        const entry = this.overlays.get(id);
+        if (entry) {
+            entry.componentRef.instance.message.set(message);
+        }
+    }
+    hiddenLoading(id) {
+        if (id) {
+            const entry = this.overlays.get(id);
+            if (entry) {
+                entry.overlayRef.dispose();
+                this.overlays.delete(id);
+            }
+        }
+        else {
+            this.overlays.forEach((entry) => entry.overlayRef.dispose());
+            this.overlays.clear();
+        }
+    }
+    loadingComponentPortal() {
+        return new ComponentPortal(DynamicLoadingGlobalComponent);
+    }
+    createOverlay() {
+        return this.overlay.create({
+            backdropClass: ['s4y-overlay-bg'],
+            panelClass: ['s4y-centered-panel-content'],
+            scrollStrategy: this.overlay.scrollStrategies.block(),
+            hasBackdrop: true,
+            disposeOnNavigation: true,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicLoadingGlobalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicLoadingGlobalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: DynamicLoadingGlobalService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+const SIZE_MAP = {
+    xs: 16,
+    sm: 20,
+    md: 24,
+    lg: 32,
+    xl: 40,
+};
+class RatingComponent {
+    sanitizer = inject(DomSanitizer);
+    value = signal(0);
+    hoverValue = signal(null);
+    count = input(5);
+    size = input('md');
+    sizePx = computed(() => {
+        const v = this.size();
+        return typeof v === 'number' ? v : (SIZE_MAP[v] ?? SIZE_MAP.md);
+    });
+    allowHalf = input(false);
+    readOnly = input(false);
+    disabled = signal(false);
+    onChange = () => { };
+    onTouched = () => { };
+    stars = computed(() => {
+        const totalStars = this.count(); // número, ex: 5
+        const displayValue = this.hoverValue() ?? this.value();
+        const result = [];
+        for (let i = 0; i < totalStars; i++) {
+            let icon = this.starLineIcon;
+            if (displayValue >= i + 1) {
+                icon = this.starFillIcon;
+            }
+            else if (this.allowHalf() && displayValue >= i + 0.5) {
+                icon = this.starHalfIcon;
+            }
+            result.push(this.sanitizer.bypassSecurityTrustHtml(icon));
+        }
+        return result;
+    });
+    get isDisabledClass() {
+        return this.disabled();
+    }
+    get isReadOnlyClass() {
+        return this.readOnly();
+    }
+    clearHoverStar() {
+        this.hoverValue.set(null);
+    }
+    writeValue(value) {
+        const total = this.count();
+        const normalized = typeof value === 'number' ? Math.max(0, Math.min(value, total)) : 0;
+        this.value.set(this.allowHalf()
+            ? Math.round(normalized * 2) / 2
+            : Math.round(normalized));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    setRating(index, event) {
+        if (!this.isInteractive)
+            return;
+        //é um array, entao a posicao é 0
+        const next = this.allowHalf() ? this.computeHalf(index, event) : index + 1;
+        if (next === this.value()) {
+            this.updateValue(0);
+            this.hoverValue.set(null);
+        }
+        else {
+            this.updateValue(next);
+        }
+    }
+    onKey(event) {
+        if (!this.isInteractive)
+            return;
+        const total = this.count();
+        const step = this.allowHalf() ? 0.5 : 1;
+        const base = this.hoverValue() ?? this.value();
+        if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+            const next = Math.min(base + step, total);
+            this.hoverValue.set(next);
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+            const next = Math.max(base - step, 0);
+            this.hoverValue.set(next);
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'Home') {
+            this.hoverValue.set(0);
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'End') {
+            this.hoverValue.set(total);
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'Enter' || event.key === ' ') {
+            const targetValue = this.hoverValue() ?? this.value();
+            this.updateValue(targetValue);
+            this.hoverValue.set(null);
+            event.preventDefault();
+            return;
+        }
+        if (event.key === 'Escape') {
+            this.hoverValue.set(null);
+            event.preventDefault();
+            return;
+        }
+    }
+    onStarHover(index, event) {
+        if (!this.isInteractive)
+            return;
+        if (this.allowHalf()) {
+            this.hoverValue.set(this.computeHalf(index, event));
+        }
+        else {
+            this.hoverValue.set(index + 1);
+        }
+    }
+    onStarHoverTouch(index, event) {
+        if (!this.isInteractive)
+            return;
+        if (this.allowHalf()) {
+            this.hoverValue.set(this.computeHalf(index, event));
+        }
+        else {
+            this.hoverValue.set(index + 1);
+        }
+    }
+    onTouchCommit(index, event) {
+        if (!this.isInteractive)
+            return;
+        const next = this.allowHalf() ? this.computeHalf(index, event) : index + 1;
+        // Em mobile, toque único normalmente deve setar; se tocar de novo no mesmo, zera:
+        if (next === this.value()) {
+            this.updateValue(0);
+            this.hoverValue.set(null);
+        }
+        else {
+            this.updateValue(next);
+        }
+        // evita rolagem acidental ao tocar/arrastar levemente
+        event.preventDefault();
+    }
+    updateValue(value) {
+        const newValue = this.allowHalf()
+            ? Math.round(value * 2) / 2
+            : Math.round(value);
+        this.value.set(newValue);
+        this.onChange(newValue);
+        this.onTouched();
+    }
+    getClientXFromEvent(e) {
+        if (e instanceof TouchEvent) {
+            const t = e.touches[0] ?? e.changedTouches[0];
+            return t?.clientX ?? 0;
+        }
+        return e.clientX ?? 0;
+    }
+    computeHalf(index, e) {
+        const target = e.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const clientX = this.getClientXFromEvent(e);
+        const relativeX = clientX - rect.left; // 0..width
+        const isHalf = relativeX < rect.width / 2;
+        return isHalf ? index + 0.5 : index + 1;
+    }
+    get isInteractive() {
+        return !this.disabled() && !this.readOnly();
+    }
+    get starLineIcon() {
+        return `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26ZM12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502L9.96214 9.69434L5.12921 10.2674L8.70231 13.5717L7.75383 18.3451L12.0006 15.968Z"
+    ></path>
+  </svg>`;
+    }
+    get starFillIcon() {
+        return `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      d="M12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"
+    ></path>
+  </svg>`;
+    }
+    get starHalfIcon() {
+        return `
+    <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path
+      d="M12.0006 15.968L16.2473 18.3451L15.2988 13.5717L18.8719 10.2674L14.039 9.69434L12.0006 5.27502V15.968ZM12.0006 18.26L4.94715 22.2082L6.52248 14.2799L0.587891 8.7918L8.61493 7.84006L12.0006 0.5L15.3862 7.84006L23.4132 8.7918L17.4787 14.2799L19.054 22.2082L12.0006 18.26Z"
+    ></path>
+  </svg>
+    `;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: RatingComponent, isStandalone: true, selector: "s4y-rating", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowHalf: { classPropertyName: "allowHalf", publicName: "allowHalf", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseleave": "clearHoverStar()" }, properties: { "class.s4y-rating--disabled": "this.isDisabledClass", "class.s4y-rating--readonly": "this.isReadOnlyClass" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RatingComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\r\n  class=\"s4y-star-container\"\r\n  role=\"slider\"\r\n  [attr.aria-valuemin]=\"0\"\r\n  [attr.aria-valuemax]=\"count()\"\r\n  [attr.aria-valuenow]=\"value()\"\r\n  [attr.aria-valuetext]=\"(hoverValue() ?? value()) + ' de ' + count()\"\r\n  [attr.aria-readonly]=\"readOnly() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n  tabindex=\"0\"\r\n  (blur)=\"onTouched()\"\r\n  (keydown)=\"onKey($event)\"\r\n>\r\n  @for (star of stars(); track $index) {\r\n    <button\r\n      tabindex=\"-1\"\r\n      (click)=\"setRating($index, $event)\"\r\n      (mousemove)=\"onStarHover($index, $event)\"\r\n      (touchstart)=\"onStarHoverTouch($index, $event)\"\r\n      (touchend)=\"onTouchCommit($index, $event)\"\r\n      [innerHTML]=\"star\"\r\n      [disabled]=\"disabled()\"\r\n      role=\"button\"\r\n      class=\"s4y-star-item\"\r\n      [style.height.px]=\"sizePx()\"\r\n      [style.width.px]=\"sizePx()\"\r\n      [attr.aria-label]=\"'Avaliar com ' + ($index + 1) + ' estrela(s)'\"\r\n    ></button>\r\n  }\r\n</div>\r\n", styles: [":host(.s4y-rating--disabled) .s4y-star-item{cursor:not-allowed;opacity:.6;pointer-events:none}:host(.s4y-rating--readonly) .s4y-star-item{cursor:default}.s4y-star-container{display:flex;gap:.8rem}.s4y-star-container .s4y-star-item{cursor:pointer;color:#ffc309}.s4y-star-container .s4y-star-item svg{width:100%;height:100%}.s4y-star-item{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.s4y-star-item svg{width:100%;height:100%;display:block;pointer-events:none}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: RatingComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-rating', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RatingComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\r\n  class=\"s4y-star-container\"\r\n  role=\"slider\"\r\n  [attr.aria-valuemin]=\"0\"\r\n  [attr.aria-valuemax]=\"count()\"\r\n  [attr.aria-valuenow]=\"value()\"\r\n  [attr.aria-valuetext]=\"(hoverValue() ?? value()) + ' de ' + count()\"\r\n  [attr.aria-readonly]=\"readOnly() ? 'true' : null\"\r\n  [attr.aria-disabled]=\"disabled() ? 'true' : null\"\r\n  tabindex=\"0\"\r\n  (blur)=\"onTouched()\"\r\n  (keydown)=\"onKey($event)\"\r\n>\r\n  @for (star of stars(); track $index) {\r\n    <button\r\n      tabindex=\"-1\"\r\n      (click)=\"setRating($index, $event)\"\r\n      (mousemove)=\"onStarHover($index, $event)\"\r\n      (touchstart)=\"onStarHoverTouch($index, $event)\"\r\n      (touchend)=\"onTouchCommit($index, $event)\"\r\n      [innerHTML]=\"star\"\r\n      [disabled]=\"disabled()\"\r\n      role=\"button\"\r\n      class=\"s4y-star-item\"\r\n      [style.height.px]=\"sizePx()\"\r\n      [style.width.px]=\"sizePx()\"\r\n      [attr.aria-label]=\"'Avaliar com ' + ($index + 1) + ' estrela(s)'\"\r\n    ></button>\r\n  }\r\n</div>\r\n", styles: [":host(.s4y-rating--disabled) .s4y-star-item{cursor:not-allowed;opacity:.6;pointer-events:none}:host(.s4y-rating--readonly) .s4y-star-item{cursor:default}.s4y-star-container{display:flex;gap:.8rem}.s4y-star-container .s4y-star-item{cursor:pointer;color:#ffc309}.s4y-star-container .s4y-star-item svg{width:100%;height:100%}.s4y-star-item{display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;line-height:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.s4y-star-item svg{width:100%;height:100%;display:block;pointer-events:none}\n"] }]
+        }], propDecorators: { isDisabledClass: [{
+                type: HostBinding,
+                args: ['class.s4y-rating--disabled']
+            }], isReadOnlyClass: [{
+                type: HostBinding,
+                args: ['class.s4y-rating--readonly']
+            }], clearHoverStar: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
 /*
  * Public API Surface of s4y-components
  */
@@ -3629,5 +4271,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
+export { AsideComponent, AsideService, AvatarComponent, BreadcrumbComponent, BreadcrumbItemDirective, BreadcrumbService, ButtonComponent, CheckboxComponent, ClickOutsideDirective, DYNAMIC_DIALOG_DATA, DYNAMIC_DIALOG_OPTIONS, DashboardContainerComponent, DashboardLayoutComponent, DashboardModule, DashboardRoutesComponent, DrawerComponent, DynamicDialogComponent, DynamicDialogRef, DynamicDialogService, DynamicLoadingGlobalService, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, InputComponent, InputPrefixComponent, InputSufixComponent, LabelComponent, LoadingModalComponent, LoadingModalService, MaskDirective, MenuComponent, MenuItemComponent, ModalComponent, ModalConfirmationComponent, ModalConfirmationService, NavbarComponent, PaginationComponent, PopoverPanelComponent, PopoverTriggerDirective, RadioComponent, RatingComponent, SearchBarComponent, SelectComponent, SelectMultiComponent, SidebarRightComponent, SidebarRightService, SliderComponent, SpinnerComponent, StepComponent, StepPanelComponent, StepperComponent, SvgComponent, SvgService, TableComponent, TableSortDirective, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipDirective, TooltipModule, TooltipPosition, modalFadeCombined, sidebarRightAnimation };
 //# sourceMappingURL=s4y-ui.mjs.map