import * as i0 from '@angular/core';
import { EventEmitter, InjectionToken, inject, ElementRef, DOCUMENT, DestroyRef, Renderer2, computed, Component, Injector, Directive, TemplateRef, contentChild, input } from '@angular/core';
import { Overlay } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Icon } from '@ngstarter-ui/components/icon';
import { ProgressSpinner } from '@ngstarter-ui/components/spinner';
import { NgTemplateOutlet } from '@angular/common';
import { fromEvent } from 'rxjs';

class PictureRef {
    closed = new EventEmitter();
    close() {
        this.closed.emit();
    }
}

const IMAGE_VIEWER = new InjectionToken('IMAGE_VIEWER');
const IMAGE_VIEWER_PICTURE_REF = new InjectionToken('IMAGE_VIEWER_PICTURE_REF');
const IMAGE_VIEWER_PICTURE_DATA = new InjectionToken('IMAGE_VIEWER_PICTURE_DATA');

class ImageViewer {
    elementRef = inject(ElementRef);
    _document = inject(DOCUMENT);
    _destroyRef = inject(DestroyRef);
    _renderer = inject(Renderer2);
    _startClientY = 0;
    _startClientX = 0;
    _offsetY = 0;
    _offsetX = 0;
    _tmpOffsetY = 0;
    _tmpOffsetX = 0;
    _dragging = false;
    pictureRef = inject(IMAGE_VIEWER_PICTURE_REF);
    data = inject(IMAGE_VIEWER_PICTURE_DATA);
    loading = true;
    scale = 1;
    image;
    alreadyDragged = false;
    scaleMin = 1;
    scaleMax = 1;
    padding = 30;
    scaled = computed(() => {
        return this.scale !== 1;
    }, ...(ngDevMode ? [{ debugName: "scaled" }] : /* istanbul ignore next */ []));
    hasTitle = computed(() => {
        return !!(this.data.title || this.data.titleTplRef);
    }, ...(ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []));
    hasAside = computed(() => {
        return !!(this.data.caption || this.data.description || this.data.captionTplRef || this.data.descriptionTplRef);
    }, ...(ngDevMode ? [{ debugName: "hasAside" }] : /* istanbul ignore next */ []));
    onLoad(event) {
        this.loading = false;
        this.image = event.target;
        if (this.image.width > this.image.height) {
            this.scaleMax = this.image.naturalWidth / this.image.width;
        }
        else {
            this.scaleMax = this.image.naturalHeight / this.image.height;
        }
        const image = this.image;
        fromEvent(image, 'mousedown')
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((event) => {
            if (this.scale === this.scaleMin || event.button === 2) {
                return;
            }
            this._dragging = true;
            this._startClientY = event.clientY;
            this._startClientX = event.clientX;
        });
        fromEvent(this._document, 'mousemove')
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((event) => {
            if (this._dragging) {
                const scaleFactor = (1 / this.scale);
                let offsetY = (event.clientY - this._startClientY) * scaleFactor;
                let offsetX = (event.clientX - this._startClientX) * scaleFactor;
                this._transform(offsetY, offsetX);
            }
        });
        fromEvent(this._document, 'mouseup')
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((event) => {
            if (this._dragging) {
                const element = this.elementRef.nativeElement;
                const elementRect = element.getBoundingClientRect();
                this._renderer.removeClass(element, 'dragging');
                this._dragging = false;
                let imageWidth = Math.floor(image.getBoundingClientRect().width);
                let imageHeight = Math.floor(image.getBoundingClientRect().height);
                let imageViewportWidth = this.hasAside() ? elementRect.width - 420 : elementRect.width;
                let imageViewportHeight = elementRect.height;
                if (imageWidth <= imageViewportWidth && imageHeight <= imageViewportHeight) {
                    this._tmpOffsetY = 0;
                    this._tmpOffsetX = 0;
                    this._offsetY = 0;
                    this._offsetX = 0;
                    this._renderer.setStyle(image, 'transform', `translate(0px,0px)`);
                }
                else {
                    const imageRect = image.getBoundingClientRect();
                    const widthDiff = imageViewportWidth - imageWidth;
                    const heightDiff = imageViewportHeight - imageHeight;
                    const xPositionDiff = widthDiff / this.scale / 2;
                    const yPositionDiff = heightDiff / this.scale / 2;
                    if (imageRect.x > 0 && imageRect.y > 0) {
                        this._tmpOffsetY = yPositionDiff * -1 + this.padding;
                        this._tmpOffsetX = xPositionDiff * -1 + this.padding;
                    }
                    else if (imageRect.x < widthDiff && imageRect.y > 0) {
                        this._tmpOffsetY = yPositionDiff * -1 + this.padding;
                        this._tmpOffsetX = xPositionDiff - this.padding;
                    }
                    else if (imageRect.x < widthDiff && imageRect.y < heightDiff) {
                        this._tmpOffsetY = yPositionDiff - this.padding;
                        this._tmpOffsetX = xPositionDiff - this.padding;
                    }
                    else if (imageRect.x > 0 && imageRect.y < heightDiff) {
                        this._tmpOffsetY = yPositionDiff - this.padding;
                        this._tmpOffsetX = xPositionDiff * -1 + this.padding;
                    }
                    if (imageWidth < imageViewportWidth) {
                        this._tmpOffsetX = 0;
                    }
                    if (imageHeight < imageViewportHeight) {
                        this._tmpOffsetY = 0;
                    }
                    this._offsetY = this._tmpOffsetY;
                    this._offsetX = this._tmpOffsetX;
                    this._renderer.setStyle(image, 'transform', `translate(${this._tmpOffsetX}px,${this._tmpOffsetY}px)`);
                }
            }
        });
    }
    onBackdropClick() {
        this.pictureRef.close();
    }
    onPreventClick(event) {
        event.preventDefault();
        event.stopPropagation();
    }
    toggleZoom() {
        if (this.scale === this.scaleMin) {
            this.scale = this.scaleMax;
        }
        else {
            this.scale = this.scaleMin;
            this._renderer.setStyle(this.image, 'transform', `translate(0px,0px)`);
            this._offsetX = 0;
            this._offsetY = 0;
            this._tmpOffsetY = 0;
            this._tmpOffsetX = 0;
        }
        const element = this.elementRef.nativeElement;
        element.style.setProperty('--ngs-image-viewer-picture-scale', this.scale.toString());
    }
    onDragStart(event) {
        event.stopPropagation();
        event.preventDefault();
        this.alreadyDragged = true;
    }
    _transform(offsetY, offsetX) {
        const image = this.image;
        const scaleFactor = (1 / this.scale);
        let translateX = this._offsetX + offsetX;
        // let offsetStartX = ((image.width / 2) - translateX) / scaleFactor;
        // let offsetEndX = ((image.width / 2) + translateX) / scaleFactor;
        let translateY = this._offsetY + offsetY;
        // let offsetStartY = ((image.height / 2) - translateY) / scaleFactor;
        // let offsetEndY = ((image.height / 2) + translateY) / scaleFactor;
        // let thumbHalfWidth = 150;
        //
        // if (offsetStartX <= thumbHalfWidth && translateX > 0) {
        //   translateX = (image.width / 2) - (thumbHalfWidth * scaleFactor);
        // } else if (offsetEndX <= thumbHalfWidth && translateX < 0) {
        //   translateX = -((image.width / 2) - (thumbHalfWidth * scaleFactor));
        // }
        //
        // if (offsetStartY <= thumbHalfWidth && translateY > 0) {
        //   translateY = (image.height / 2) - (thumbHalfWidth * scaleFactor);
        // } else if (offsetEndY <= thumbHalfWidth && translateY < 0) {
        //   translateY = -((image.height / 2) - (thumbHalfWidth * scaleFactor));
        // }
        this._tmpOffsetY = translateY;
        this._tmpOffsetX = translateX;
        this._renderer.setStyle(image, 'transform', `translate(${translateX}px,${translateY}px)`);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: ImageViewer, isStandalone: true, selector: "ngs-image-viewer", host: { properties: { "class.loading": "loading", "class.dragging": "_dragging", "class.scaled": "scale !== 1" }, classAttribute: "ngs-image-viewer" }, exportAs: ["ngsImageViewer"], ngImport: i0, template: "<div class=\"title-container\">\n  @if (hasTitle()) {\n    <div class=\"title\">\n      @if (data.titleTplRef) {\n        <ng-container [ngTemplateOutlet]=\"data.titleTplRef\" />\n      } @else if (data.caption) {\n        {{ data.title }}\n      }\n    </div>\n  }\n</div>\n<div class=\"controls\" (click)=\"onPreventClick($event)\">\n  <div class=\"w-max\">\n    <button (click)=\"pictureRef.close()\" class=\"close\">\n      <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n    </button>\n  </div>\n  <div class=\"w-max\">\n    <button class=\"zoom\" (click)=\"toggleZoom()\" [disabled]=\"scaleMax === 1 || null\">\n      @if (scale === this.scaleMin) {\n        <ngs-icon name=\"fluent:zoom-in-24-regular\"/>\n      } @else {\n        <ngs-icon name=\"fluent:zoom-out-24-regular\"/>\n      }\n    </button>\n  </div>\n</div>\n<div class=\"content\" (click)=\"onBackdropClick()\">\n  <div class=\"image\" (dragstart)=\"onDragStart($event)\">\n    @if (loading) {\n      <div class=\"spinner\">\n        <ngs-progress-spinner/>\n      </div>\n    }\n    <img [src]=\"data.sourceUrl\" alt=\"\" (load)=\"onLoad($event)\" (click)=\"onPreventClick($event)\" class=\"img\">\n  </div>\n  @if (hasAside()) {\n    <aside class=\"aside\" (click)=\"onPreventClick($event)\">\n      <div class=\"aside-header\">\n        @if (data.captionTplRef) {\n          <ng-container [ngTemplateOutlet]=\"data.captionTplRef\" />\n        } @else if (data.caption) {\n          {{ data.caption }}\n        }\n      </div>\n      <div class=\"aside-body\">\n        <div class=\"aside-body-scroll\">\n          @if (data.descriptionTplRef) {\n            <ng-container [ngTemplateOutlet]=\"data.descriptionTplRef\" />\n          } @else if (data.description) {\n            {{ data.description }}\n          }\n        </div>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [":host{width:100vw;height:100vh;display:flex;flex-direction:column}:host .title-container{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3}:host .controls{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .header{position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:calc(var(--spacing, .25rem) * 20);flex:none;padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;align-items:center;justify-content:space-between}:host .content{box-shadow:var(--ngs-shadow-sm);z-index:2;display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 8);width:100vw;height:100vh}:host.scaled img{cursor:grab}:host.dragging img{cursor:grabbing}:host:has(.aside) .content{padding-inline-end:420px}:host .img{-webkit-user-select:none;user-select:none;scale:var(--ngs-image-viewer-picture-scale, 1);transition:scale .15s linear}:host:not(.dragging) img{transition:transform .15s linear,scale .15s linear}:host .title{font-weight:500;height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);font-size:var(--text-tiny);display:flex;align-items:center;background:var(--ngs-color-neutral-700);color:var(--ngs-color-neutral-300)}:host .close,:host .zoom{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);cursor:pointer;display:flex;flex:none;align-items:center;justify-content:center;background:var(--ngs-color-neutral-700);color:var(--ngs-color-neutral-300)}:host .close:hover,:host .zoom:hover{background:var(--ngs-color-neutral-800);color:var(--ngs-color-neutral-200)}:host .close:active,:host .zoom:active{background:var(--ngs-color-neutral-950);color:var(--ngs-color-neutral-100)}:host .aside{width:420px;position:absolute;inset-inline-end:0;top:0;bottom:0;flex:none;background:var(--ngs-color-neutral-50);display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 5);height:100%;padding-inline-end:calc(var(--spacing, .25rem) * 10)}:host .aside-header{font-weight:700;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-top:calc(var(--spacing, .25rem) * 8)}:host .aside-body{position:relative;flex-grow:1;font-size:var(--ngs-font-size-sm);color:var(--ngs-color-neutral-600);line-height:var(--leading-relaxed)}:host .aside-body-scroll{position:absolute;inset:0;overflow-y:auto;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-bottom:calc(var(--spacing, .25rem) * 8)}:host .image{position:relative;display:flex;align-items:center;justify-content:flex-end;height:100%;max-width:90%;max-height:90%}:host .image img{max-height:100%;max-width:100%}:host .spinner{visibility:hidden;width:max-content;position:absolute;top:50%;left:50%;z-index:-1;--tw-translate-y: -50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.loading .spinner{visibility:visible;z-index:1}:host.loading img{visibility:hidden;position:relative;z-index:-50}:host-context(html.dark) .title{background:var(--ngs-color-neutral-100);color:var(--ngs-color-neutral-600)}:host-context(html.dark) .close{background:var(--ngs-color-neutral-100);color:var(--ngs-color-neutral-600)}:host-context(html.dark) .close:hover{background:var(--ngs-color-neutral-200);color:var(--ngs-color-neutral-700)}:host-context(html.dark) .close:active{background:var(--ngs-color-neutral-300);color:var(--ngs-color-neutral-900)}:host-context(html.dark) .aside{background:var(--ngs-color-neutral-900)}:host-context(html.dark) .aside-body{color:var(--ngs-color-neutral-400)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: Icon, selector: "ngs-icon", inputs: ["name"], exportAs: ["ngsIcon"] }, { kind: "component", type: ProgressSpinner, selector: "ngs-progress-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["ngsProgressSpinner"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewer, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-image-viewer', exportAs: 'ngsImageViewer', imports: [
                        Icon,
                        ProgressSpinner,
                        NgTemplateOutlet
                    ], host: {
                        'class': 'ngs-image-viewer',
                        '[class.loading]': 'loading',
                        '[class.dragging]': '_dragging',
                        '[class.scaled]': 'scale !== 1'
                    }, template: "<div class=\"title-container\">\n  @if (hasTitle()) {\n    <div class=\"title\">\n      @if (data.titleTplRef) {\n        <ng-container [ngTemplateOutlet]=\"data.titleTplRef\" />\n      } @else if (data.caption) {\n        {{ data.title }}\n      }\n    </div>\n  }\n</div>\n<div class=\"controls\" (click)=\"onPreventClick($event)\">\n  <div class=\"w-max\">\n    <button (click)=\"pictureRef.close()\" class=\"close\">\n      <ngs-icon name=\"fluent:dismiss-24-regular\"/>\n    </button>\n  </div>\n  <div class=\"w-max\">\n    <button class=\"zoom\" (click)=\"toggleZoom()\" [disabled]=\"scaleMax === 1 || null\">\n      @if (scale === this.scaleMin) {\n        <ngs-icon name=\"fluent:zoom-in-24-regular\"/>\n      } @else {\n        <ngs-icon name=\"fluent:zoom-out-24-regular\"/>\n      }\n    </button>\n  </div>\n</div>\n<div class=\"content\" (click)=\"onBackdropClick()\">\n  <div class=\"image\" (dragstart)=\"onDragStart($event)\">\n    @if (loading) {\n      <div class=\"spinner\">\n        <ngs-progress-spinner/>\n      </div>\n    }\n    <img [src]=\"data.sourceUrl\" alt=\"\" (load)=\"onLoad($event)\" (click)=\"onPreventClick($event)\" class=\"img\">\n  </div>\n  @if (hasAside()) {\n    <aside class=\"aside\" (click)=\"onPreventClick($event)\">\n      <div class=\"aside-header\">\n        @if (data.captionTplRef) {\n          <ng-container [ngTemplateOutlet]=\"data.captionTplRef\" />\n        } @else if (data.caption) {\n          {{ data.caption }}\n        }\n      </div>\n      <div class=\"aside-body\">\n        <div class=\"aside-body-scroll\">\n          @if (data.descriptionTplRef) {\n            <ng-container [ngTemplateOutlet]=\"data.descriptionTplRef\" />\n          } @else if (data.description) {\n            {{ data.description }}\n          }\n        </div>\n      </div>\n    </aside>\n  }\n</div>\n", styles: [":host{width:100vw;height:100vh;display:flex;flex-direction:column}:host .title-container{position:absolute;inset-inline-start:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3}:host .controls{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 4);top:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}:host .header{position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;height:calc(var(--spacing, .25rem) * 20);flex:none;padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);z-index:3;display:flex;align-items:center;justify-content:space-between}:host .content{box-shadow:var(--ngs-shadow-sm);z-index:2;display:flex;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 8);width:100vw;height:100vh}:host.scaled img{cursor:grab}:host.dragging img{cursor:grabbing}:host:has(.aside) .content{padding-inline-end:420px}:host .img{-webkit-user-select:none;user-select:none;scale:var(--ngs-image-viewer-picture-scale, 1);transition:scale .15s linear}:host:not(.dragging) img{transition:transform .15s linear,scale .15s linear}:host .title{font-weight:500;height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);padding-left:calc(var(--spacing, .25rem) * 4);padding-right:calc(var(--spacing, .25rem) * 4);font-size:var(--text-tiny);display:flex;align-items:center;background:var(--ngs-color-neutral-700);color:var(--ngs-color-neutral-300)}:host .close,:host .zoom{width:calc(var(--spacing, .25rem) * 10);height:calc(var(--spacing, .25rem) * 10);border-radius:calc(infinity * 1px);cursor:pointer;display:flex;flex:none;align-items:center;justify-content:center;background:var(--ngs-color-neutral-700);color:var(--ngs-color-neutral-300)}:host .close:hover,:host .zoom:hover{background:var(--ngs-color-neutral-800);color:var(--ngs-color-neutral-200)}:host .close:active,:host .zoom:active{background:var(--ngs-color-neutral-950);color:var(--ngs-color-neutral-100)}:host .aside{width:420px;position:absolute;inset-inline-end:0;top:0;bottom:0;flex:none;background:var(--ngs-color-neutral-50);display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 5);height:100%;padding-inline-end:calc(var(--spacing, .25rem) * 10)}:host .aside-header{font-weight:700;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-top:calc(var(--spacing, .25rem) * 8)}:host .aside-body{position:relative;flex-grow:1;font-size:var(--ngs-font-size-sm);color:var(--ngs-color-neutral-600);line-height:var(--leading-relaxed)}:host .aside-body-scroll{position:absolute;inset:0;overflow-y:auto;padding-left:calc(var(--spacing, .25rem) * 8);padding-right:calc(var(--spacing, .25rem) * 8);padding-bottom:calc(var(--spacing, .25rem) * 8)}:host .image{position:relative;display:flex;align-items:center;justify-content:flex-end;height:100%;max-width:90%;max-height:90%}:host .image img{max-height:100%;max-width:100%}:host .spinner{visibility:hidden;width:max-content;position:absolute;top:50%;left:50%;z-index:-1;--tw-translate-y: -50%;--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}:host.loading .spinner{visibility:visible;z-index:1}:host.loading img{visibility:hidden;position:relative;z-index:-50}:host-context(html.dark) .title{background:var(--ngs-color-neutral-100);color:var(--ngs-color-neutral-600)}:host-context(html.dark) .close{background:var(--ngs-color-neutral-100);color:var(--ngs-color-neutral-600)}:host-context(html.dark) .close:hover{background:var(--ngs-color-neutral-200);color:var(--ngs-color-neutral-700)}:host-context(html.dark) .close:active{background:var(--ngs-color-neutral-300);color:var(--ngs-color-neutral-900)}:host-context(html.dark) .aside{background:var(--ngs-color-neutral-900)}:host-context(html.dark) .aside-body{color:var(--ngs-color-neutral-400)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }] });

class ImageViewerDirective {
    _overlay = inject(Overlay);
    _injector = inject(Injector);
    _destroyRef = inject(DestroyRef);
    get api() {
        return {
            open: (options) => this._open(options)
        };
    }
    _open(options) {
        const pictureRef = new PictureRef();
        const overlayRef = this._overlay.create({
            positionStrategy: this._overlay.position().global(),
            hasBackdrop: true
        });
        const injector = Injector.create({
            providers: [
                {
                    provide: IMAGE_VIEWER_PICTURE_REF,
                    useValue: pictureRef
                },
                {
                    provide: IMAGE_VIEWER_PICTURE_DATA,
                    useValue: options
                }
            ],
            parent: this._injector
        });
        const portal = new ComponentPortal(ImageViewer, null, injector);
        overlayRef.attach(portal);
        pictureRef.closed.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
            overlayRef.detach();
        });
        return pictureRef;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ImageViewerDirective, isStandalone: true, selector: "[ngsImageViewer]", host: { classAttribute: "ngs-image-viewer" }, exportAs: ["ngsImageViewer"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewerDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsImageViewer]',
                    exportAs: 'ngsImageViewer',
                    standalone: true,
                    host: {
                        'class': 'ngs-image-viewer',
                    }
                }]
        }] });

class ImageViewerPictureCaptionDirective {
    templateRef = inject(TemplateRef);
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewerPictureCaptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ImageViewerPictureCaptionDirective, isStandalone: true, selector: "[ngsImageViewerPictureCaption]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewerPictureCaptionDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsImageViewerPictureCaption]',
                    standalone: true
                }]
        }] });

class ImageViewerPictureDescriptionDirective {
    templateRef = inject(TemplateRef);
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewerPictureDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ImageViewerPictureDescriptionDirective, isStandalone: true, selector: "[ngsImageViewerPictureDescription]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewerPictureDescriptionDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsImageViewerPictureDescription]',
                    standalone: true
                }]
        }] });

class ImageViewerPictureTitleDirective {
    templateRef = inject(TemplateRef);
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewerPictureTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ImageViewerPictureTitleDirective, isStandalone: true, selector: "[ngsImageViewerPictureTitle]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewerPictureTitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsImageViewerPictureTitle]',
                    standalone: true
                }]
        }] });

class ImageViewerPictureDirective {
    _imageViewer = inject(ImageViewerDirective);
    _titleTplRef = contentChild(ImageViewerPictureTitleDirective, ...(ngDevMode ? [{ debugName: "_titleTplRef" }] : /* istanbul ignore next */ []));
    _captionTplRef = contentChild(ImageViewerPictureCaptionDirective, ...(ngDevMode ? [{ debugName: "_captionTplRef" }] : /* istanbul ignore next */ []));
    _descriptionTplRef = contentChild(ImageViewerPictureDescriptionDirective, ...(ngDevMode ? [{ debugName: "_descriptionTplRef" }] : /* istanbul ignore next */ []));
    sourceUrl = input.required(...(ngDevMode ? [{ debugName: "sourceUrl" }] : /* istanbul ignore next */ []));
    caption = input(...(ngDevMode ? [undefined, { debugName: "caption" }] : /* istanbul ignore next */ []));
    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
    description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
    onClick(event) {
        event.preventDefault();
        event.stopPropagation();
        this._imageViewer.api.open({
            sourceUrl: this.sourceUrl(),
            title: this.title(),
            caption: this.caption(),
            description: this.description(),
            titleTplRef: this._titleTplRef()?.templateRef,
            captionTplRef: this._captionTplRef()?.templateRef,
            descriptionTplRef: this._descriptionTplRef()?.templateRef
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewerPictureDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.4", type: ImageViewerPictureDirective, isStandalone: true, selector: "[ngsImageViewerPicture]", inputs: { sourceUrl: { classPropertyName: "sourceUrl", publicName: "sourceUrl", isSignal: true, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "onClick($event)" }, classAttribute: "ngs-image-viewer-picture" }, providers: [
            {
                provide: IMAGE_VIEWER,
                useExisting: ImageViewerPictureDirective
            }
        ], queries: [{ propertyName: "_titleTplRef", first: true, predicate: ImageViewerPictureTitleDirective, descendants: true, isSignal: true }, { propertyName: "_captionTplRef", first: true, predicate: ImageViewerPictureCaptionDirective, descendants: true, isSignal: true }, { propertyName: "_descriptionTplRef", first: true, predicate: ImageViewerPictureDescriptionDirective, descendants: true, isSignal: true }], exportAs: ["ngsImageViewerPicture"], ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageViewerPictureDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[ngsImageViewerPicture]',
                    exportAs: 'ngsImageViewerPicture',
                    standalone: true,
                    providers: [
                        {
                            provide: IMAGE_VIEWER,
                            useExisting: ImageViewerPictureDirective
                        }
                    ],
                    host: {
                        'class': 'ngs-image-viewer-picture',
                        '(click)': 'onClick($event)'
                    }
                }]
        }], propDecorators: { _titleTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ImageViewerPictureTitleDirective), { isSignal: true }] }], _captionTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ImageViewerPictureCaptionDirective), { isSignal: true }] }], _descriptionTplRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ImageViewerPictureDescriptionDirective), { isSignal: true }] }], sourceUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "sourceUrl", required: true }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { ImageViewerDirective, ImageViewerPictureCaptionDirective, ImageViewerPictureDescriptionDirective, ImageViewerPictureDirective, ImageViewerPictureTitleDirective };
//# sourceMappingURL=ngstarter-ui-components-image-viewer.mjs.map
