@elderbyte/ngx-starter 20.12.0-beta.4 → 20.12.0-beta.6

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -22114,13 +22114,13 @@ class ElderBasicPaneLayoutComponent {
         this.class = '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderBasicPaneLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ElderBasicPaneLayoutComponent, isStandalone: true, selector: "elder-basic-pane-layout", host: { properties: { "class": "this.class" }, classAttribute: "elder-basic-pane-layout" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-flow:row nowrap;justify-content:flex-start;padding:var(--elder-pane-padding);gap:var(--elder-pane-gap);align-items:stretch}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: ElderBasicPaneLayoutComponent, isStandalone: true, selector: "elder-basic-pane-layout", host: { properties: { "class": "this.class" }, classAttribute: "elder-basic-pane-layout" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-flow:row nowrap;justify-content:flex-start;padding:var(--elder-pane-padding);gap:var(--elder-pane-gap);align-items:stretch;overflow-x:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: ElderBasicPaneLayoutComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, imports: [], selector: 'elder-basic-pane-layout', host: {
                         class: 'elder-basic-pane-layout',
-                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-flow:row nowrap;justify-content:flex-start;padding:var(--elder-pane-padding);gap:var(--elder-pane-gap);align-items:stretch}\n"] }]
+                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;flex-flow:row nowrap;justify-content:flex-start;padding:var(--elder-pane-padding);gap:var(--elder-pane-gap);align-items:stretch;overflow-x:hidden}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class']
@@ -38132,7 +38132,10 @@ class ElderDraggablePaneDirective {
          *                                                                         *
          **************************************************************************/
         this.constrainedWidth = computed(() => {
-            const width = this.widthInPercent() ?? 0;
+            const width = this.widthInPercent();
+            if (width === null) {
+                return null;
+            }
             return Math.max(this.minWidth(), Math.min(this.maxWidth(), width));
         }, ...(ngDevMode ? [{ debugName: "constrainedWidth" }] : []));
         /***************************************************************************
@@ -38144,7 +38147,7 @@ class ElderDraggablePaneDirective {
         this.mouseMove$ = fromEvent(document, 'mousemove');
         this.mouseUp$ = fromEvent(document, 'mouseup');
         this.drag$ = this.mouseDown$.pipe(tap$1((event) => {
-            this.initializeIfNecessary();
+            this.initComputedWidthModeIfNecessary();
             this.processDragStart(event);
         }), switchMap((event) => this.mouseMove$.pipe(finalize(() => {
             this.processDragEnd();
@@ -38155,6 +38158,10 @@ class ElderDraggablePaneDirective {
                 this.logger.error('Container width is 0, cannot calculate resize delta');
                 return;
             }
+            if (this.dragStartPaneWidthInPercent === null || isNaN(this.dragStartPaneWidthInPercent)) {
+                this.logger.error('Cannot handle mouse move: drag start width is invalid');
+                return;
+            }
             const deltaX = event.clientX - this.dragStartMousePosX;
             // Convert pixel delta to percentage delta
             let delta = (deltaX / this.containerWidth) * 100;
@@ -38168,13 +38175,14 @@ class ElderDraggablePaneDirective {
         this.drag$.pipe(takeUntilDestroyed()).subscribe((event) => {
             this.handleMouseMove(event);
         });
+        /**
+         * Effect syncs the width style with the constrained width.
+         */
         effect(() => {
             const constrainedWidth = this.constrainedWidth();
-            const isInComputedWidthMode = this.isInComputedWidthMode();
             untracked(() => {
-                if (isInComputedWidthMode && constrainedWidth !== null) {
-                    this.removeExternalWidthStyles();
-                    this.setWidthStyle(constrainedWidth);
+                if (constrainedWidth !== null) {
+                    this.setWidthStyle(this.constrainedWidth());
                 }
             });
         });
@@ -38213,16 +38221,20 @@ class ElderDraggablePaneDirective {
         event.preventDefault();
         event.stopPropagation();
         this.isDragging.set(true);
+        this.setWidthInPercentFromElementWidth();
         this.dragStartMousePosX = event.clientX;
         this.dragStartPaneWidthInPercent = this.widthInPercent();
     }
     processDragEnd() {
         this.isDragging.set(false);
     }
-    initializeIfNecessary() {
+    initComputedWidthModeIfNecessary() {
         if (!this.isInComputedWidthMode()) {
             this.isInComputedWidthMode.set(true);
             this.setWidthInPercentFromElementWidth();
+            this.removeExternalWidthStyles();
+            // manually set width style after removal of initial styles
+            this.setWidthStyle(this.constrainedWidth());
         }
     }
     setWidthInPercentFromElementWidth() {