import * as i0 from '@angular/core';
import { inject, Renderer2, ElementRef, ChangeDetectorRef, NgZone, DestroyRef, DOCUMENT, viewChild, input, numberAttribute, output, ChangeDetectionStrategy, Component } from '@angular/core';
import { fromEvent, throttleTime } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

class ResizableContainer {
    _renderer = inject(Renderer2);
    _elementRef = inject(ElementRef);
    _cdr = inject(ChangeDetectorRef);
    _ngZone = inject(NgZone);
    _destroyRef = inject(DestroyRef);
    _document = inject(DOCUMENT);
    _resizing = false;
    _maxWidth;
    _clientX;
    _initialWidth;
    handlerRef = viewChild.required('handler');
    minWidth = input(0, { ...(ngDevMode ? { debugName: "minWidth" } : /* istanbul ignore next */ {}), transform: numberAttribute });
    resized = output();
    ngOnInit() {
        this._ngZone.runOutsideAngular(() => {
            fromEvent(this.handlerRef().nativeElement, 'mousedown')
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe((event) => {
                this._resizing = true;
                this._maxWidth = this._elementRef.nativeElement.parentElement.getBoundingClientRect().width;
                this._clientX = event.clientX;
                this._initialWidth = this._elementRef.nativeElement.getBoundingClientRect().width;
                // Prevent text selection during resize
                this._document.body.style.userSelect = 'none';
                this._document.body.style.cursor = 'ew-resize';
                this._cdr.detectChanges();
            });
            fromEvent(this._document, 'mousemove')
                .pipe(throttleTime(5), takeUntilDestroyed(this._destroyRef))
                .subscribe((event) => {
                if (this._resizing) {
                    let width = this._initialWidth - (this._clientX - event.clientX);
                    if (width <= this.minWidth()) {
                        width = this.minWidth();
                    }
                    else if (width >= this._maxWidth) {
                        width = this._maxWidth;
                    }
                    this._renderer.setStyle(this._elementRef.nativeElement, 'width', width + 'px');
                    this.resized.emit({ width });
                }
            });
            fromEvent(this._document, 'mouseup')
                .pipe(takeUntilDestroyed(this._destroyRef))
                .subscribe(event => {
                this._resizing = false;
                this._document.body.style.userSelect = '';
                this._document.body.style.cursor = '';
                this._cdr.detectChanges();
            });
        });
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.4", type: ResizableContainer, isStandalone: true, selector: "ngs-resizable-container", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { resized: "resized" }, host: { classAttribute: "ngs-resizable-container" }, viewQueries: [{ propertyName: "handlerRef", first: true, predicate: ["handler"], descendants: true, isSignal: true }], exportAs: ["ngsResizableContainer"], ngImport: i0, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n<button #handler class=\"handler\">\n  <span class=\"handler-indicator\"></span>\n</button>\n", styles: [":host{position:relative;display:flex;align-items:stretch;overflow:hidden}:host .content{flex-grow:1;width:100%;height:100%;margin-inline-end:calc(var(--spacing, .25rem) * 4)}:host .handler{position:absolute;-webkit-user-select:none;user-select:none;top:0;bottom:0;inset-inline-end:0;cursor:ew-resize;align-items:center;display:flex;justify-content:center;width:calc(var(--spacing, .25rem) * 5)}:host .handler .handler-indicator{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background:var(--ngs-color-surface-container-highest)}:host .handler:hover .handler-indicator,:host .handler:active .handler-indicator{background:var(--ngs-color-secondary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: ResizableContainer, decorators: [{
            type: Component,
            args: [{ selector: 'ngs-resizable-container', exportAs: 'ngsResizableContainer', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                        'class': 'ngs-resizable-container'
                    }, template: "<div class=\"content\">\n  <ng-content/>\n</div>\n<button #handler class=\"handler\">\n  <span class=\"handler-indicator\"></span>\n</button>\n", styles: [":host{position:relative;display:flex;align-items:stretch;overflow:hidden}:host .content{flex-grow:1;width:100%;height:100%;margin-inline-end:calc(var(--spacing, .25rem) * 4)}:host .handler{position:absolute;-webkit-user-select:none;user-select:none;top:0;bottom:0;inset-inline-end:0;cursor:ew-resize;align-items:center;display:flex;justify-content:center;width:calc(var(--spacing, .25rem) * 5)}:host .handler .handler-indicator{display:flex;height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 1.5);border-radius:calc(infinity * 1px);background:var(--ngs-color-surface-container-highest)}:host .handler:hover .handler-indicator,:host .handler:active .handler-indicator{background:var(--ngs-color-secondary)}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
        }], propDecorators: { handlerRef: [{ type: i0.ViewChild, args: ['handler', { isSignal: true }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], resized: [{ type: i0.Output, args: ["resized"] }] } });

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

export { ResizableContainer };
//# sourceMappingURL=ngstarter-ui-components-resizable-container.mjs.map
