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(--ngs-color-white);border:4px solid var(--ngs-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(--ngs-color-white);border:4px solid var(--ngs-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
