@ngstarter-ui/components 1.0.21

package/fesm2022/ngstarter-ui-components-image-placeholder.mjs

@@ -0,0 +1,20 @@
+import * as i0 from '@angular/core';
+import { Component } from '@angular/core';
+
+class ImagePlaceholder {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImagePlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: ImagePlaceholder, isStandalone: true, selector: "ngs-image-placeholder", host: { classAttribute: "ngs-image-placeholder" }, exportAs: ["ngsImagePlaceholder"], ngImport: i0, template: "<svg viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"none\">\n  <defs>\n    <clipPath id=\"rectMaskExtraSmall\">\n      <rect x=\"10\" y=\"20\" width=\"80\" height=\"60\" rx=\"6\"/>\n    </clipPath>\n  </defs>\n\n  <rect x=\"10\" y=\"20\" width=\"80\" height=\"60\" rx=\"6\" class=\"placeholder-mountain-bg\"/>\n\n  <g clip-path=\"url(#rectMaskExtraSmall)\">\n    <path d=\"M10 80L40 35L70 80H10Z\" class=\"placeholder-mountain-1\"/>\n    <path d=\"M45 80L67.5 47.5L90 80H45Z\" class=\"placeholder-mountain-2\"/>\n    <circle cx=\"72.5\" cy=\"37.5\" r=\"7.5\" class=\"placeholder-mountain-sun\"/>\n  </g>\n</svg>\n", styles: [":host{display:flex;background:var(--color-surface-container);align-items:center;justify-content:center}:host svg{width:40%;min-width:100px}:host .placeholder-mountain-bg{fill:var(--color-neutral-300)}:host .placeholder-mountain-1{fill:var(--color-neutral-400)}:host .placeholder-mountain-2{fill:var(--color-neutral-100);opacity:.7}:host .placeholder-mountain-sun{fill:var(--color-neutral-100)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImagePlaceholder, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-image-placeholder', exportAs: 'ngsImagePlaceholder', imports: [], host: {
+                        'class': 'ngs-image-placeholder'
+                    }, template: "<svg viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"none\">\n  <defs>\n    <clipPath id=\"rectMaskExtraSmall\">\n      <rect x=\"10\" y=\"20\" width=\"80\" height=\"60\" rx=\"6\"/>\n    </clipPath>\n  </defs>\n\n  <rect x=\"10\" y=\"20\" width=\"80\" height=\"60\" rx=\"6\" class=\"placeholder-mountain-bg\"/>\n\n  <g clip-path=\"url(#rectMaskExtraSmall)\">\n    <path d=\"M10 80L40 35L70 80H10Z\" class=\"placeholder-mountain-1\"/>\n    <path d=\"M45 80L67.5 47.5L90 80H45Z\" class=\"placeholder-mountain-2\"/>\n    <circle cx=\"72.5\" cy=\"37.5\" r=\"7.5\" class=\"placeholder-mountain-sun\"/>\n  </g>\n</svg>\n", styles: [":host{display:flex;background:var(--color-surface-container);align-items:center;justify-content:center}:host svg{width:40%;min-width:100px}:host .placeholder-mountain-bg{fill:var(--color-neutral-300)}:host .placeholder-mountain-1{fill:var(--color-neutral-400)}:host .placeholder-mountain-2{fill:var(--color-neutral-100);opacity:.7}:host .placeholder-mountain-sun{fill:var(--color-neutral-100)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ImagePlaceholder };
+//# sourceMappingURL=ngstarter-ui-components-image-placeholder.mjs.map

package/fesm2022/ngstarter-ui-components-image-placeholder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-image-placeholder.mjs","sources":["../../../projects/components/image-placeholder/src/image-placeholder/image-placeholder.ts","../../../projects/components/image-placeholder/src/image-placeholder/image-placeholder.html","../../../projects/components/image-placeholder/ngstarter-ui-components-image-placeholder.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-image-placeholder',\n  exportAs: 'ngsImagePlaceholder',\n  imports: [],\n  templateUrl: './image-placeholder.html',\n  styleUrl: './image-placeholder.scss',\n  host: {\n    'class': 'ngs-image-placeholder'\n  }\n})\nexport class ImagePlaceholder {\n\n}\n","<svg viewBox=\"0 0 100 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" preserveAspectRatio=\"none\">\n  <defs>\n    <clipPath id=\"rectMaskExtraSmall\">\n      <rect x=\"10\" y=\"20\" width=\"80\" height=\"60\" rx=\"6\"/>\n    </clipPath>\n  </defs>\n\n  <rect x=\"10\" y=\"20\" width=\"80\" height=\"60\" rx=\"6\" class=\"placeholder-mountain-bg\"/>\n\n  <g clip-path=\"url(#rectMaskExtraSmall)\">\n    <path d=\"M10 80L40 35L70 80H10Z\" class=\"placeholder-mountain-1\"/>\n    <path d=\"M45 80L67.5 47.5L90 80H45Z\" class=\"placeholder-mountain-2\"/>\n    <circle cx=\"72.5\" cy=\"37.5\" r=\"7.5\" class=\"placeholder-mountain-sun\"/>\n  </g>\n</svg>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAYa,gBAAgB,CAAA;uGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,uKCZ7B,ypBAeA,EAAA,MAAA,EAAA,CAAA,gdAAA,CAAA,EAAA,CAAA;;2FDHa,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAV5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,EAAA,QAAA,EACvB,qBAAqB,EAAA,OAAA,EACtB,EAAE,EAAA,IAAA,EAGL;AACJ,wBAAA,OAAO,EAAE;AACV,qBAAA,EAAA,QAAA,EAAA,ypBAAA,EAAA,MAAA,EAAA,CAAA,gdAAA,CAAA,EAAA;;;AEVH;;AAEG;;;;"}

package/fesm2022/ngstarter-ui-components-image-resizer.mjs

@@ -0,0 +1,151 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, ElementRef, Renderer2, ChangeDetectorRef, NgZone, DestroyRef, DOCUMENT, input, numberAttribute, output, Directive, contentChild, signal, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
+import { fromEvent, throttleTime } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+class ImageResizeHandlerDirective {
+    _platformId = inject(PLATFORM_ID);
+    _elementRef = inject(ElementRef);
+    _renderer = inject(Renderer2);
+    _cdr = inject(ChangeDetectorRef);
+    _ngZone = inject(NgZone);
+    _destroyRef = inject(DestroyRef);
+    _document = inject(DOCUMENT);
+    _resizing = false;
+    _width;
+    _clientX;
+    maxWidth = input.required({ ...(ngDevMode ? { debugName: "maxWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    minWidth = input.required({ ...(ngDevMode ? { debugName: "minWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    targetElement = input.required(...(ngDevMode ? [{ debugName: "targetElement" }] : /* istanbul ignore next */ []));
+    direction = input.required(...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    dimensionsChanged = output();
+    ngOnInit() {
+        if (isPlatformServer(this._platformId)) {
+            return;
+        }
+        const targetElement = this.targetElement();
+        this._ngZone.runOutsideAngular(() => {
+            fromEvent(this._elementRef.nativeElement, 'mousedown')
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe((event) => {
+                this._resizing = true;
+                this._width = targetElement.getBoundingClientRect().width;
+                this._clientX = event.clientX;
+                this._cdr.detectChanges();
+            });
+            fromEvent(this._document, 'mousemove')
+                .pipe(throttleTime(5), takeUntilDestroyed(this._destroyRef))
+                .subscribe((event) => {
+                if (this._resizing) {
+                    let width = this._width;
+                    if (this.direction() === 'left') {
+                        width = this._width - (this._clientX - event.clientX);
+                    }
+                    else if (this.direction() === 'right') {
+                        width = (this._width - (event.clientX - this._clientX));
+                    }
+                    if (width <= this.minWidth()) {
+                        width = this.minWidth();
+                    }
+                    else if (width >= this.maxWidth()) {
+                        width = this.maxWidth();
+                    }
+                    this._renderer.setStyle(targetElement, 'width', width + 'px');
+                    this.dimensionsChanged.emit();
+                }
+            });
+            fromEvent(this._document, 'mouseup')
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(event => {
+                this._resizing = false;
+                this._cdr.detectChanges();
+            });
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageResizeHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.4", type: ImageResizeHandlerDirective, isStandalone: true, selector: "[ngsImageResizeHandler]", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: true, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: true, transformFunction: null }, targetElement: { classPropertyName: "targetElement", publicName: "targetElement", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dimensionsChanged: "dimensionsChanged" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageResizeHandlerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsImageResizeHandler]'
+                }]
+        }], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: true }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: true }] }], targetElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetElement", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: true }] }], dimensionsChanged: [{ type: i0.Output, args: ["dimensionsChanged"] }] } });
+
+class ImageResizerImageDirective {
+    elementRef = inject(ElementRef);
+    _onDragStart(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageResizerImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: ImageResizerImageDirective, isStandalone: true, selector: "[ngsImageResizerImage]", host: { listeners: { "dragstart": "_onDragStart($event)" } }, exportAs: ["ngsImageResizerImage"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageResizerImageDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngsImageResizerImage]',
+                    exportAs: 'ngsImageResizerImage',
+                    host: {
+                        '(dragstart)': '_onDragStart($event)'
+                    }
+                }]
+        }] });
+
+class ImageResizer {
+    _platformId = inject(PLATFORM_ID);
+    _elementRef = inject(ElementRef);
+    _renderer = inject(Renderer2);
+    imageRef = contentChild.required(ImageResizerImageDirective);
+    imageMaxWidth = input(null, { ...(ngDevMode ? { debugName: "imageMaxWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    imageMinWidth = input(100, { ...(ngDevMode ? { debugName: "imageMinWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    imageResized = output();
+    _maxWidth = signal(null, ...(ngDevMode ? [{ debugName: "_maxWidth" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this._maxWidth.set(this.imageMaxWidth());
+        });
+    }
+    ngAfterContentInit() {
+        if (isPlatformServer(this._platformId)) {
+            return;
+        }
+        this.imageRef().elementRef.nativeElement
+            .onload = () => {
+            setTimeout(() => {
+                const { width } = this.imageRef().elementRef.nativeElement.getBoundingClientRect();
+                if (this.imageMaxWidth() === null) {
+                    this._maxWidth.set(width);
+                }
+            }, 100);
+        };
+    }
+    onDimensionsChanged() {
+        const { width, height } = this.imageRef().elementRef.nativeElement.getBoundingClientRect();
+        const { naturalWidth, naturalHeight } = this.imageRef().elementRef.nativeElement;
+        this.imageResized.emit({
+            width,
+            height,
+            naturalWidth,
+            naturalHeight
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageResizer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ImageResizer, isStandalone: true, selector: "ngs-image-resizer", inputs: { imageMaxWidth: { classPropertyName: "imageMaxWidth", publicName: "imageMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, imageMinWidth: { classPropertyName: "imageMinWidth", publicName: "imageMinWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageResized: "imageResized" }, host: { classAttribute: "ngs-image-resizer" }, queries: [{ propertyName: "imageRef", first: true, predicate: ImageResizerImageDirective, descendants: true, isSignal: true }], exportAs: ["ngsImageResizer"], ngImport: i0, template: "<div ngsImageResizeHandler direction=\"right\"\n     [maxWidth]=\"_maxWidth()\"\n     [minWidth]=\"imageMinWidth()\"\n     [targetElement]=\"imageRef().elementRef.nativeElement\" class=\"handler handler-start\"\n     (dimensionsChanged)=\"onDimensionsChanged()\"></div>\n<ng-content select=\"[ngsImageResizerImage]\"/>\n<div ngsImageResizeHandler direction=\"left\"\n     [maxWidth]=\"_maxWidth()\"\n     [minWidth]=\"imageMinWidth()\"\n     [targetElement]=\"imageRef().elementRef.nativeElement\" class=\"handler handler-end\"\n     (dimensionsChanged)=\"onDimensionsChanged()\"></div>\n", styles: ["@layer properties;:host{display:flex;align-items:center;overflow:hidden;-webkit-user-select:none;user-select:none;position:relative;width:max-content;max-width:100%}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host img{max-width:100%}:host .handler{height:100%;max-height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 3);cursor:ew-resize;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-white, #fff);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:absolute;top:50%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);background-color:var(--color-white);border:4px solid var(--color-on-secondary-fixed)}:host .handler-start{inset-inline-start:calc(var(--spacing, .25rem) * 3)}:host .handler-end{inset-inline-end:calc(var(--spacing, .25rem) * 3)}:host .handler:active{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: ImageResizeHandlerDirective, selector: "[ngsImageResizeHandler]", inputs: ["maxWidth", "minWidth", "targetElement", "direction"], outputs: ["dimensionsChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ImageResizer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngs-image-resizer', exportAs: 'ngsImageResizer', imports: [
+                        ImageResizeHandlerDirective
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        'class': 'ngs-image-resizer'
+                    }, template: "<div ngsImageResizeHandler direction=\"right\"\n     [maxWidth]=\"_maxWidth()\"\n     [minWidth]=\"imageMinWidth()\"\n     [targetElement]=\"imageRef().elementRef.nativeElement\" class=\"handler handler-start\"\n     (dimensionsChanged)=\"onDimensionsChanged()\"></div>\n<ng-content select=\"[ngsImageResizerImage]\"/>\n<div ngsImageResizeHandler direction=\"left\"\n     [maxWidth]=\"_maxWidth()\"\n     [minWidth]=\"imageMinWidth()\"\n     [targetElement]=\"imageRef().elementRef.nativeElement\" class=\"handler handler-end\"\n     (dimensionsChanged)=\"onDimensionsChanged()\"></div>\n", styles: ["@layer properties;:host{display:flex;align-items:center;overflow:hidden;-webkit-user-select:none;user-select:none;position:relative;width:max-content;max-width:100%}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host img{max-width:100%}:host .handler{height:100%;max-height:calc(var(--spacing, .25rem) * 12);width:calc(var(--spacing, .25rem) * 3);cursor:ew-resize;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:2px;border-color:var(--color-white, #fff);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);position:absolute;top:50%;--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y);background-color:var(--color-white);border:4px solid var(--color-on-secondary-fixed)}:host .handler-start{inset-inline-start:calc(var(--spacing, .25rem) * 3)}:host .handler-end{inset-inline-end:calc(var(--spacing, .25rem) * 3)}:host .handler:active{--tw-scale-x: 95%;--tw-scale-y: 95%;--tw-scale-z: 95%;scale:var(--tw-scale-x) var(--tw-scale-y)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-translate-x{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-y{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-translate-z{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-scale-x{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-y{syntax: \"*\"; inherits: false; initial-value: 1;}@property --tw-scale-z{syntax: \"*\"; inherits: false; initial-value: 1;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-translate-x: 0;--tw-translate-y: 0;--tw-translate-z: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-scale-z: 1}}}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { imageRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ImageResizerImageDirective), { isSignal: true }] }], imageMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageMaxWidth", required: false }] }], imageMinWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageMinWidth", required: false }] }], imageResized: [{ type: i0.Output, args: ["imageResized"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ImageResizer, ImageResizerImageDirective };
+//# sourceMappingURL=ngstarter-ui-components-image-resizer.mjs.map

package/fesm2022/ngstarter-ui-components-image-resizer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngstarter-ui-components-image-resizer.mjs","sources":["../../../projects/components/image-resizer/src/image-resize-handler.directive.ts","../../../projects/components/image-resizer/src/image-resizer-image.directive.ts","../../../projects/components/image-resizer/src/image-resizer/image-resizer.ts","../../../projects/components/image-resizer/src/image-resizer/image-resizer.html","../../../projects/components/image-resizer/ngstarter-ui-components-image-resizer.ts"],"sourcesContent":["import {\n  ChangeDetectorRef, DestroyRef,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  NgZone, numberAttribute, output,\n  PLATFORM_ID,\n  Renderer2,\n  DOCUMENT\n} from '@angular/core';\nimport { isPlatformServer } from '@angular/common';\nimport { fromEvent, throttleTime } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Directive({\n  selector: '[ngsImageResizeHandler]'\n})\nexport class ImageResizeHandlerDirective {\n  private _platformId = inject(PLATFORM_ID);\n  private _elementRef = inject(ElementRef);\n  private _renderer = inject(Renderer2);\n  private _cdr = inject(ChangeDetectorRef);\n  private _ngZone = inject(NgZone);\n  private _destroyRef = inject(DestroyRef);\n  private _document = inject(DOCUMENT);\n  private _resizing = false;\n  private _width: number;\n  private _clientX: number;\n\n  maxWidth = input.required({\n    transform: numberAttribute\n  });\n  minWidth = input.required({\n    transform: numberAttribute\n  });\n  targetElement = input.required<HTMLElement>();\n  direction = input.required<'left' | 'right'>();\n\n  readonly dimensionsChanged = output();\n\n  ngOnInit() {\n    if (isPlatformServer(this._platformId)) {\n      return;\n    }\n\n    const targetElement = this.targetElement();\n\n    this._ngZone.runOutsideAngular(() => {\n      fromEvent<MouseEvent>(this._elementRef.nativeElement, 'mousedown')\n        .pipe(takeUntilDestroyed(this._destroyRef))\n        .subscribe((event: MouseEvent) => {\n          this._resizing = true;\n          this._width = targetElement.getBoundingClientRect().width;\n          this._clientX = event.clientX;\n          this._cdr.detectChanges();\n        })\n      ;\n      fromEvent<MouseEvent>(this._document, 'mousemove')\n        .pipe(\n          throttleTime(5),\n          takeUntilDestroyed(this._destroyRef)\n        )\n        .subscribe((event: MouseEvent) => {\n          if (this._resizing) {\n            let width = this._width;\n\n            if (this.direction() === 'left') {\n              width = this._width - (this._clientX - event.clientX);\n            } else if (this.direction() === 'right') {\n              width = (this._width - (event.clientX - this._clientX));\n            }\n\n            if (width <= this.minWidth()) {\n              width = this.minWidth();\n            } else if (width >= this.maxWidth()) {\n              width = this.maxWidth();\n            }\n\n            this._renderer.setStyle(targetElement, 'width', width + 'px');\n            this.dimensionsChanged.emit();\n          }\n        })\n      ;\n      fromEvent(this._document, 'mouseup')\n        .pipe(takeUntilDestroyed(this._destroyRef))\n        .subscribe(event => {\n          this._resizing = false;\n          this._cdr.detectChanges();\n        })\n      ;\n    });\n  }\n}\n","import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n  selector: '[ngsImageResizerImage]',\n  exportAs: 'ngsImageResizerImage',\n  host: {\n    '(dragstart)': '_onDragStart($event)'\n  }\n})\nexport class ImageResizerImageDirective {\n  readonly elementRef = inject<ElementRef<HTMLImageElement>>(ElementRef);\n\n  protected _onDragStart(event: Event) {\n    event.stopPropagation();\n    event.preventDefault();\n  }\n}\n","import {\n  AfterContentInit,\n  ChangeDetectionStrategy,\n  Component, contentChild, effect,\n  ElementRef,\n  inject, input, numberAttribute,\n  output,\n  PLATFORM_ID,\n  Renderer2,\n  signal,\n} from '@angular/core';\nimport { ImageResizeHandlerDirective } from '../image-resize-handler.directive';\nimport { isPlatformServer } from '@angular/common';\nimport { ImageResizedEvent } from '../types';\nimport { ImageResizerImageDirective } from '../image-resizer-image.directive';\n\n@Component({\n  selector: 'ngs-image-resizer',\n  exportAs: 'ngsImageResizer',\n  imports: [\n    ImageResizeHandlerDirective\n  ],\n  templateUrl: './image-resizer.html',\n  styleUrl: './image-resizer.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-image-resizer'\n  }\n})\nexport class ImageResizer implements AfterContentInit {\n  protected _platformId = inject(PLATFORM_ID);\n  protected _elementRef = inject(ElementRef);\n  protected _renderer = inject(Renderer2);\n\n  readonly imageRef = contentChild.required(ImageResizerImageDirective);\n\n  imageMaxWidth = input(null, {\n    transform: numberAttribute\n  });\n  imageMinWidth = input(100, {\n    transform: numberAttribute\n  });\n\n  readonly imageResized = output<ImageResizedEvent>();\n\n  protected _maxWidth = signal<number | null>(null);\n\n  constructor() {\n    effect(() => {\n      this._maxWidth.set(this.imageMaxWidth());\n    });\n  }\n\n  ngAfterContentInit() {\n    if (isPlatformServer(this._platformId)) {\n      return;\n    }\n\n    this.imageRef().elementRef.nativeElement\n      .onload = () => {\n        setTimeout(() => {\n          const { width } = this.imageRef().elementRef.nativeElement.getBoundingClientRect();\n\n          if (this.imageMaxWidth() === null) {\n            this._maxWidth.set(width);\n          }\n        }, 100);\n      };\n  }\n\n  onDimensionsChanged() {\n    const { width, height } = this.imageRef().elementRef.nativeElement.getBoundingClientRect();\n    const { naturalWidth, naturalHeight } = this.imageRef().elementRef.nativeElement;\n    this.imageResized.emit({\n      width,\n      height,\n      naturalWidth,\n      naturalHeight\n    });\n  }\n}\n","<div ngsImageResizeHandler direction=\"right\"\n     [maxWidth]=\"_maxWidth()\"\n     [minWidth]=\"imageMinWidth()\"\n     [targetElement]=\"imageRef().elementRef.nativeElement\" class=\"handler handler-start\"\n     (dimensionsChanged)=\"onDimensionsChanged()\"></div>\n<ng-content select=\"[ngsImageResizerImage]\"/>\n<div ngsImageResizeHandler direction=\"left\"\n     [maxWidth]=\"_maxWidth()\"\n     [minWidth]=\"imageMinWidth()\"\n     [targetElement]=\"imageRef().elementRef.nativeElement\" class=\"handler handler-end\"\n     (dimensionsChanged)=\"onDimensionsChanged()\"></div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-image-viewer.mjs

@@ -0,0 +1,349 @@
+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:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;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(--color-neutral-700);color:var(--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(--color-neutral-700);color:var(--color-neutral-300)}:host .close:hover,:host .zoom:hover{background:var(--color-neutral-800);color:var(--color-neutral-200)}:host .close:active,:host .zoom:active{background:var(--color-neutral-950);color:var(--color-neutral-100)}:host .aside{width:420px;position:absolute;inset-inline-end:0;top:0;bottom:0;flex:none;background:var(--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:.875rem;color:var(--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(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close{background:var(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close:hover{background:var(--color-neutral-200);color:var(--color-neutral-700)}:host-context(html.dark) .close:active{background:var(--color-neutral-300);color:var(--color-neutral-900)}:host-context(html.dark) .aside{background:var(--color-neutral-900)}:host-context(html.dark) .aside-body{color:var(--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:0 1px 3px #0000001a,0 1px 2px -1px #0000001a;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(--color-neutral-700);color:var(--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(--color-neutral-700);color:var(--color-neutral-300)}:host .close:hover,:host .zoom:hover{background:var(--color-neutral-800);color:var(--color-neutral-200)}:host .close:active,:host .zoom:active{background:var(--color-neutral-950);color:var(--color-neutral-100)}:host .aside{width:420px;position:absolute;inset-inline-end:0;top:0;bottom:0;flex:none;background:var(--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:.875rem;color:var(--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(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close{background:var(--color-neutral-100);color:var(--color-neutral-600)}:host-context(html.dark) .close:hover{background:var(--color-neutral-200);color:var(--color-neutral-700)}:host-context(html.dark) .close:active{background:var(--color-neutral-300);color:var(--color-neutral-900)}:host-context(html.dark) .aside{background:var(--color-neutral-900)}:host-context(html.dark) .aside-body{color:var(--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