s4y-ui 5.5.1 → 5.6.1

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;
@@ -3161,6 +3162,193 @@ 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: "\r\n<div class=\"preview-controls\">\r\n  <div class=\"flex gap-1 align-center\">\r\n    <button class=\"btn-close action-btn gray-4\" type=\"button\" (click)=\"close()\">\r\n      \u2715\r\n    </button>\r\n    @if (name) {\r\n      <p class=\"medium-text-regular fw-400 \" style=\"color: var(--gray-400)\">{{ name }}</p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex gap-2\">\r\n    <button class=\"action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n\r\n      <ng-container [ngTemplateOutlet]=\"zoomOutSvg\"/>\r\n    </button>\r\n    <button class=\"action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n      <ng-container [ngTemplateOutlet]=\"zoomInSvg\"/>\r\n    </button>\r\n    <button class=\"action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n      <ng-container [ngTemplateOutlet]=\"refreshSvg\"/>\r\n    </button>\r\n\r\n    <button class=\"action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n        <ng-container [ngTemplateOutlet]=\"fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\" />\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n\r\n<div class=\"preview-img-container\">\r\n  <div class=\"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=\"preview-clickable\" (click)=\"close()\"></div>\r\n</div>\r\n\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n  <svg width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"></path></svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n  <svg width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"></path></svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n  <svg width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path 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\"></path></svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n  <svg width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path 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\"></path></svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n  <svg width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path 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\"></path></svg>\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.action-btn{border-radius:50%;height:3rem;width:3rem}.action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.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}.preview-controls button{line-height:0;color:#fff}.preview-controls .btn-close{font-size:2rem;transition:.2s ease}.preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.img-preview.full-screen-img{max-width:100%;height:auto}.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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: ImagePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's4y-image-preview', imports: [NgTemplateOutlet], template: "\r\n<div class=\"preview-controls\">\r\n  <div class=\"flex gap-1 align-center\">\r\n    <button class=\"btn-close action-btn gray-4\" type=\"button\" (click)=\"close()\">\r\n      \u2715\r\n    </button>\r\n    @if (name) {\r\n      <p class=\"medium-text-regular fw-400 \" style=\"color: var(--gray-400)\">{{ name }}</p>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"flex gap-2\">\r\n    <button class=\"action-btn\" type=\"button\" (click)=\"zoomOut()\">\r\n\r\n      <ng-container [ngTemplateOutlet]=\"zoomOutSvg\"/>\r\n    </button>\r\n    <button class=\"action-btn\" type=\"button\" (click)=\"zoomIn()\">\r\n      <ng-container [ngTemplateOutlet]=\"zoomInSvg\"/>\r\n    </button>\r\n    <button class=\"action-btn\" type=\"button\" (click)=\"resetZoom()\">\r\n      <ng-container [ngTemplateOutlet]=\"refreshSvg\"/>\r\n    </button>\r\n\r\n    <button class=\"action-btn\" type=\"button\" (click)=\"toggleFullscreen()\">\r\n        <ng-container [ngTemplateOutlet]=\"fullScreenImage() ? fullScreenExitSvg : fullscreenSvg\" />\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n\r\n<div class=\"preview-img-container\">\r\n  <div class=\"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=\"preview-clickable\" (click)=\"close()\"></div>\r\n</div>\r\n\r\n\r\n<!-- SVG -->\r\n\r\n<ng-template #fullscreenSvg>\r\n  <svg width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 3V5H4V9H2V3H8ZM2 21V15H4V19H8V21H2ZM22 21H16V19H20V15H22V21ZM22 9H20V5H16V3H22V9Z\"></path></svg>\r\n</ng-template>\r\n\r\n<ng-template #fullScreenExitSvg>\r\n  <svg width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M18 7H22V9H16V3H18V7ZM8 9H2V7H6V3H8V9ZM18 17V21H16V15H22V17H18ZM8 15V21H6V17H2V15H8Z\"></path></svg>\r\n</ng-template>\r\n\r\n<ng-template #zoomInSvg>\r\n  <svg width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path 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\"></path></svg>\r\n</ng-template>\r\n<ng-template #zoomOutSvg>\r\n  <svg width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path 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\"></path></svg>\r\n</ng-template>\r\n\r\n<ng-template #refreshSvg>\r\n  <svg width=\"24px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path 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\"></path></svg>\r\n</ng-template>\r\n", styles: [":host{width:100%;display:flex;flex-direction:column;gap:1.2rem;min-height:100dvh}.action-btn{border-radius:50%;height:3rem;width:3rem}.action-btn:hover{transition:.2s ease;background-color:var(--gray-700)}.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}.preview-controls button{line-height:0;color:#fff}.preview-controls .btn-close{font-size:2rem;transition:.2s ease}.preview-img-container{flex-grow:1;z-index:3;position:relative;display:flex;align-items:center;padding-bottom:1.2rem}.img-preview{margin:0 auto;display:flex;align-items:center;justify-content:center;z-index:2;width:90%;max-width:70rem;transition:.5s ease}.img-preview img{height:auto;border-radius:var(--radius);width:100%;transition:.5s ease}.img-preview.full-screen-img{max-width:100%;height:auto}.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('');
+    fileName = input();
+    disablePreview = input(false);
+    withOverlay = input(false);
+    wrapper;
+    overlayEl;
+    ngOnInit() {
+        this.configureWrapperElement();
+        this.configureOverlay();
+        this.configureEyeSvg();
+    }
+    ngAfterViewInit() {
+        this.onShowOverlay();
+    }
+    configureWrapperElement() {
+        const img = this.elRef.nativeElement;
+        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);
+    }
+    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>`;
+    }
+    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: "src", 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-overlay-bg{background-color:#0009}.s4y-preview-pane{height:100dvh;width:100dvw;height:auto;overflow:auto;display:flex;flex-direction:column}.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}.s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}\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-overlay-bg{background-color:#0009}.s4y-preview-pane{height:100dvh;width:100dvw;height:auto;overflow:auto;display:flex;flex-direction:column}.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}.s4y-img-overlay.active{opacity:1}.s4y-eye-overlay{color:#fff}\n"] }]
+        }], ctorParameters: () => [] });
+
 const selectMultiAnim = trigger('selectMultiAnim', [
     // entra
     transition(':enter', [
@@ -3751,5 +3939,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, ErrorMessageComponent, FormFieldComponent, FormFieldPasswordComponent, FormsKitModule, HintComponent, ImageComponent, ImageService, 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 };
 //# sourceMappingURL=s4y-ui.mjs.map