@elderbyte/ngx-starter 20.12.0-beta.2 → 20.12.0-beta.3

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -5,7 +5,7 @@ import { Pipe, LOCALE_ID, Inject, NgModule, Injectable, inject, Optional, SkipSe
 import * as i1 from '@angular/platform-browser';
 import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId, DateTimeFormatter, convert, ZonedDateTime, Temporal as Temporal$1 } from '@js-joda/core';
 import { LoggerFactory } from '@elderbyte/ts-logger';
-import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, mergeAll, skipUntil, filter as filter$1, map as map$1, combineLatestWith as combineLatestWith$1, NEVER } from 'rxjs';
+import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, mergeAll, skipUntil, filter as filter$1, map as map$1, combineLatestWith as combineLatestWith$1, tap as tap$1, takeUntil as takeUntil$1, NEVER } from 'rxjs';
 import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap as switchMap$1, mergeMap, expand, reduce, combineLatestWith, startWith, skip, delay, share, skipWhile, timeout } from 'rxjs/operators';
 import { Temporal } from '@js-temporal/polyfill';
 import * as i1$1 from '@angular/common/http';
@@ -38097,51 +38097,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
         }] });
 
 class ElderDraggablePaneDirective {
-    onMouseUp() {
-        if (this.isDragging()) {
-            this.isDragging.set(false);
-            this.stopEventListenerMouseMove();
-        }
-    }
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
     constructor() {
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
         this.elementRef = inject((ElementRef));
         // Inputs
         this.isActive = input(true, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
-        this.minWidth = input(5, ...(ngDevMode ? [{ debugName: "minWidth" }] : []));
-        this.maxWidth = input(95, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
+        this.minWidth = input(5, ...(ngDevMode ? [{ debugName: "minWidth", transform: (value) => Math.max(0, Math.min(100, value)) }] : [{
+                transform: (value) => Math.max(0, Math.min(100, value)),
+            }]));
+        this.maxWidth = input(95, ...(ngDevMode ? [{ debugName: "maxWidth", transform: (value) => Math.max(0, Math.min(100, value)) }] : [{
+                transform: (value) => Math.max(0, Math.min(100, value)),
+            }]));
         this.handlePosition = input('end', ...(ngDevMode ? [{ debugName: "handlePosition" }] : []));
         this.initialWidthCss = input(null, ...(ngDevMode ? [{ debugName: "initialWidthCss" }] : []));
         // State
-        this.widthMode = signal('initial', ...(ngDevMode ? [{ debugName: "widthMode" }] : []));
+        this.isResizingInitialized = signal(false, ...(ngDevMode ? [{ debugName: "isResizingInitialized" }] : []));
         this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
         this.widthInPercent = signal(null, ...(ngDevMode ? [{ debugName: "widthInPercent" }] : []));
+        this.containerWidth = 0;
+        this.dragStartMousePosX = 0;
+        this.dragStartPaneWidthInPercent = 0;
         // Computed
         this.constrainedWidth = computed(() => {
             const width = this.widthInPercent() ?? 0;
             return Math.max(this.minWidth(), Math.min(this.maxWidth(), width));
         }, ...(ngDevMode ? [{ debugName: "constrainedWidth" }] : []));
-        this.isInitialized = computed(() => this.widthInPercent() !== null, ...(ngDevMode ? [{ debugName: "isInitialized" }] : []));
-        this.dragStartMousePosX = 0;
-        this.dragStartPaneWidthInPercent = 0;
-        this.containerWidthInPx = 0;
+        // observables
+        this.mouseDown$ = new Subject();
+        this.mouseMove$ = fromEvent(document, 'mousemove');
+        this.mouseUp$ = fromEvent(document, 'mouseup');
+        // main drag observable
+        this.drag$ = this.mouseDown$.pipe(tap$1((event) => {
+            this.initializeIfNecessary();
+            this.processDragStart(event);
+        }), switchMap((event) => this.mouseMove$.pipe(finalize(() => {
+            this.processDragEnd();
+        }), takeUntil$1(this.mouseUp$))));
         this.handleMouseMove = (event) => {
-            if (!this.isDragging()) {
-                return;
-            }
             event.preventDefault();
-            // check to prevent division by zero
-            if (this.containerWidthInPx === 0) {
-                console.error('Container width is 0, cannot calculate resize delta');
+            if (this.containerWidth === 0) {
+                this.logger.error('Container width is 0, cannot calculate resize delta');
                 return;
             }
             const deltaX = event.clientX - this.dragStartMousePosX;
             // Convert pixel delta to percentage delta
-            let delta = (deltaX / this.containerWidthInPx) * 100;
+            let delta = (deltaX / this.containerWidth) * 100;
             // Invert delta for left-side handles
             if (this.handlePosition() === 'start') {
                 delta = -delta;
@@ -38149,70 +38154,61 @@ class ElderDraggablePaneDirective {
             const newWidth = this.dragStartPaneWidthInPercent + delta;
             this.widthInPercent.set(newWidth);
         };
-        effect(() => {
-            const isDragging = this.isDragging();
-            untracked(() => {
-                if (isDragging) {
-                    this.widthMode.set('dynamic');
-                }
-            });
+        this.drag$.pipe(takeUntilDestroyed()).subscribe((event) => {
+            this.handleMouseMove(event);
         });
     }
     /***************************************************************************
      *                                                                         *
-     * Lifecycle methods                                                      *
+     * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
     ngOnDestroy() {
-        this.stopEventListenerMouseMove();
+        this.mouseDown$.complete();
     }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                          *
+     * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    onMouseDown(event) {
-        // Get the container element to calculate percentages
-        const containerElement = this.elementRef.nativeElement.parentElement;
-        if (!containerElement) {
-            console.error('Container element not found for percentage calculation');
-            return;
-        }
-        const containerWidth = containerElement.offsetWidth;
-        if (containerWidth === 0) {
-            console.error('Container element has no width, cannot calculate percentages', containerElement);
-            return;
-        }
+    processDragStart(event) {
         event.preventDefault();
         event.stopPropagation();
-        if (!this.isInitialized()) {
-            this.setWidthInPercentFromElementWidth(containerWidth);
-        }
         this.isDragging.set(true);
         this.dragStartMousePosX = event.clientX;
         this.dragStartPaneWidthInPercent = this.widthInPercent();
-        this.containerWidthInPx = containerWidth;
-        this.startEventListenerMouseMove();
     }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    setWidthInPercentFromElementWidth(containerWidth) {
-        // Calculate the current element width as a percentage of container width
-        const elementWidth = this.elementRef.nativeElement.offsetWidth;
-        const percentage = (elementWidth / containerWidth) * 100;
-        this.widthInPercent.set(percentage || 30);
+    processDragEnd() {
+        this.isDragging.set(false);
+    }
+    initializeIfNecessary() {
+        if (!this.isResizingInitialized()) {
+            this.isResizingInitialized.set(true);
+            this.setWidthInPercentFromElementWidth();
+        }
     }
-    startEventListenerMouseMove() {
-        document.addEventListener('mousemove', this.handleMouseMove);
+    setWidthInPercentFromElementWidth() {
+        this.updateContainerWidth();
+        if (this.containerWidth === 0) {
+            this.logger.error('Container width is 0. Can not calculate percent.');
+            return;
+        }
+        // Calculate the current element width as a percentage of container width
+        const paneWidth = this.elementRef.nativeElement.offsetWidth;
+        const percentage = (paneWidth / this.containerWidth) * 100;
+        this.widthInPercent.set(percentage);
     }
-    stopEventListenerMouseMove() {
-        document.removeEventListener('mousemove', this.handleMouseMove);
+    updateContainerWidth() {
+        const containerElement = this.elementRef.nativeElement.parentElement;
+        if (!containerElement) {
+            this.logger.error('Container element not found for percentage calculation');
+            return null;
+        }
+        this.containerWidth = containerElement.offsetWidth;
+        return this.containerWidth;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderDraggablePaneDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.6", type: ElderDraggablePaneDirective, isStandalone: true, selector: "[elderDraggablePane]", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, handlePosition: { classPropertyName: "handlePosition", publicName: "handlePosition", isSignal: true, isRequired: false, transformFunction: null }, initialWidthCss: { classPropertyName: "initialWidthCss", publicName: "initialWidthCss", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:mouseup": "onMouseUp()" }, properties: { "class.pane-with-drag-handle-initialized": "isInitialized()", "class.dragging": "isDragging()", "class.flex-none": "widthMode() === \"dynamic\" || initialWidthCss() !== null", "style.width.%": "constrainedWidth()", "style.width": "widthMode() === \"initial\" ? \"var(--initial-width)\" : \"var(--dynamic-width)\"", "style.--initial-width": "(isActive() && initialWidthCss() !== null) ? initialWidthCss() : \"auto\"", "style.--dynamic-width": "constrainedWidth() + \"%\"" }, classAttribute: "pane-with-drag-handle" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.6", type: ElderDraggablePaneDirective, isStandalone: true, selector: "[elderDraggablePane]", inputs: { isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, handlePosition: { classPropertyName: "handlePosition", publicName: "handlePosition", isSignal: true, isRequired: false, transformFunction: null }, initialWidthCss: { classPropertyName: "initialWidthCss", publicName: "initialWidthCss", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.dragging": "isDragging()", "class.flex-none": "isResizingInitialized() || initialWidthCss() !== null", "style.width": "isResizingInitialized() ? \"var(--dynamic-width)\" : \"var(--initial-width)\"", "style.--initial-width": "(isActive() && initialWidthCss() !== null) ? initialWidthCss() : \"auto\"", "style.--dynamic-width": "constrainedWidth() + \"%\"" }, classAttribute: "pane-with-drag-handle" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderDraggablePaneDirective, decorators: [{
             type: Directive,
@@ -38220,19 +38216,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImpor
                     selector: '[elderDraggablePane]',
                     host: {
                         class: 'pane-with-drag-handle',
-                        '[class.pane-with-drag-handle-initialized]': 'isInitialized()',
                         '[class.dragging]': 'isDragging()',
-                        '[class.flex-none]': 'widthMode() === "dynamic" || initialWidthCss() !== null',
-                        '[style.width.%]': 'constrainedWidth()',
-                        '[style.width]': 'widthMode() === "initial" ? "var(--initial-width)" : "var(--dynamic-width)"',
+                        '[class.flex-none]': 'isResizingInitialized() || initialWidthCss() !== null',
+                        '[style.width]': 'isResizingInitialized() ? "var(--dynamic-width)" : "var(--initial-width)"',
                         '[style.--initial-width]': '(isActive() && initialWidthCss() !== null) ? initialWidthCss() : "auto"',
                         '[style.--dynamic-width]': 'constrainedWidth() + "%"',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], handlePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlePosition", required: false }] }], initialWidthCss: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialWidthCss", required: false }] }], onMouseUp: [{
-                type: HostListener,
-                args: ['document:mouseup']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], handlePosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "handlePosition", required: false }] }], initialWidthCss: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialWidthCss", required: false }] }] } });
 
 class ElderPaneComponent {
     constructor() {
@@ -38242,17 +38233,18 @@ class ElderPaneComponent {
         this.hasDragHandleRight = computed(() => this.dragHandleDirective?.handlePosition() === 'end', ...(ngDevMode ? [{ debugName: "hasDragHandleRight" }] : []));
     }
     onDragHandleMouseDown(event) {
-        // Delegate to the directive's mousedown handler
-        this.dragHandleDirective?.onMouseDown(event);
+        if (this.dragHandleDirective) {
+            this.dragHandleDirective.mouseDown$.next(event);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: ElderPaneComponent, isStandalone: true, selector: "elder-pane", host: { classAttribute: "elder-pane" }, ngImport: i0, template: "@if (hasDragHandle()) {\n  <div\n    class=\"elder-pane-drag-handle\"\n    [class.handle-left]=\"hasDragHandleLeft()\"\n    [class.handle-right]=\"hasDragHandleRight()\"\n    (mousedown)=\"onDragHandleMouseDown($event)\"\n  ></div>\n}\n<div class=\"elder-pane-outer\">\n  <div class=\"elder-pane-inner\">\n    <ng-content select=\"elder-pane-header\"></ng-content>\n    <ng-content select=\"elder-pane-content\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;position:relative;flex:1 1 0;min-width:0;min-height:0}:host.pane-with-drag-handle-initialized{flex:none}.elder-pane-outer{overflow:hidden;border-radius:var(--elder-pane-border-radius);background-color:var(--elder-pane-bg-color);position:relative;display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-inner{display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-drag-handle{position:absolute;top:0;bottom:0;width:4px;background-color:var(--md-sys-color-primary-container);cursor:col-resize;border-radius:3px;z-index:10;opacity:0;transition:.2s ease-in-out}.elder-pane-drag-handle:hover{opacity:1}.elder-pane-drag-handle.handle-left{left:-8px}.elder-pane-drag-handle.handle-right{right:-8px}:host.dragging .elder-pane-drag-handle{background-color:var(--md-sys-color-secondary-container);width:6px;opacity:1}:host.dragging .elder-pane-drag-handle.handle-left{left:-9px}:host.dragging .elder-pane-drag-handle.handle-right{right:-9px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: ElderPaneComponent, isStandalone: true, selector: "elder-pane", host: { classAttribute: "elder-pane" }, ngImport: i0, template: "@if (hasDragHandle()) {\n  <div\n    class=\"elder-pane-drag-handle\"\n    [class.handle-left]=\"hasDragHandleLeft()\"\n    [class.handle-right]=\"hasDragHandleRight()\"\n    (mousedown)=\"onDragHandleMouseDown($event)\"\n  ></div>\n}\n<div class=\"elder-pane-outer\">\n  <div class=\"elder-pane-inner\">\n    <ng-content select=\"elder-pane-header\"></ng-content>\n    <ng-content select=\"elder-pane-content\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;position:relative;flex:1 1 0;min-width:0;min-height:0}.elder-pane-outer{overflow:hidden;border-radius:var(--elder-pane-border-radius);background-color:var(--elder-pane-bg-color);position:relative;display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-inner{display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-drag-handle{position:absolute;top:0;bottom:0;width:4px;background-color:var(--md-sys-color-primary-container);cursor:col-resize;border-radius:3px;z-index:10;opacity:0;transition:.2s ease-in-out}.elder-pane-drag-handle:hover{opacity:1}.elder-pane-drag-handle.handle-left{left:-8px}.elder-pane-drag-handle.handle-right{right:-8px}:host.dragging .elder-pane-drag-handle{background-color:var(--md-sys-color-secondary-container);width:6px;opacity:1}:host.dragging .elder-pane-drag-handle.handle-left{left:-9px}:host.dragging .elder-pane-drag-handle.handle-right{right:-9px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderPaneComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-pane', imports: [], host: {
                         class: 'elder-pane',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [], template: "@if (hasDragHandle()) {\n  <div\n    class=\"elder-pane-drag-handle\"\n    [class.handle-left]=\"hasDragHandleLeft()\"\n    [class.handle-right]=\"hasDragHandleRight()\"\n    (mousedown)=\"onDragHandleMouseDown($event)\"\n  ></div>\n}\n<div class=\"elder-pane-outer\">\n  <div class=\"elder-pane-inner\">\n    <ng-content select=\"elder-pane-header\"></ng-content>\n    <ng-content select=\"elder-pane-content\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;position:relative;flex:1 1 0;min-width:0;min-height:0}:host.pane-with-drag-handle-initialized{flex:none}.elder-pane-outer{overflow:hidden;border-radius:var(--elder-pane-border-radius);background-color:var(--elder-pane-bg-color);position:relative;display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-inner{display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-drag-handle{position:absolute;top:0;bottom:0;width:4px;background-color:var(--md-sys-color-primary-container);cursor:col-resize;border-radius:3px;z-index:10;opacity:0;transition:.2s ease-in-out}.elder-pane-drag-handle:hover{opacity:1}.elder-pane-drag-handle.handle-left{left:-8px}.elder-pane-drag-handle.handle-right{right:-8px}:host.dragging .elder-pane-drag-handle{background-color:var(--md-sys-color-secondary-container);width:6px;opacity:1}:host.dragging .elder-pane-drag-handle.handle-left{left:-9px}:host.dragging .elder-pane-drag-handle.handle-right{right:-9px}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [], template: "@if (hasDragHandle()) {\n  <div\n    class=\"elder-pane-drag-handle\"\n    [class.handle-left]=\"hasDragHandleLeft()\"\n    [class.handle-right]=\"hasDragHandleRight()\"\n    (mousedown)=\"onDragHandleMouseDown($event)\"\n  ></div>\n}\n<div class=\"elder-pane-outer\">\n  <div class=\"elder-pane-inner\">\n    <ng-content select=\"elder-pane-header\"></ng-content>\n    <ng-content select=\"elder-pane-content\"></ng-content>\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;position:relative;flex:1 1 0;min-width:0;min-height:0}.elder-pane-outer{overflow:hidden;border-radius:var(--elder-pane-border-radius);background-color:var(--elder-pane-bg-color);position:relative;display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-inner{display:flex;flex-flow:column nowrap;width:100%;height:100%}.elder-pane-drag-handle{position:absolute;top:0;bottom:0;width:4px;background-color:var(--md-sys-color-primary-container);cursor:col-resize;border-radius:3px;z-index:10;opacity:0;transition:.2s ease-in-out}.elder-pane-drag-handle:hover{opacity:1}.elder-pane-drag-handle.handle-left{left:-8px}.elder-pane-drag-handle.handle-right{right:-8px}:host.dragging .elder-pane-drag-handle{background-color:var(--md-sys-color-secondary-container);width:6px;opacity:1}:host.dragging .elder-pane-drag-handle.handle-left{left:-9px}:host.dragging .elder-pane-drag-handle.handle-right{right:-9px}\n"] }]
         }] });
 
 class ElderPaneContentComponent {