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

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -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();
@@ -38168,13 +38171,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());
                 }
             });
         });
@@ -38219,10 +38223,13 @@ class ElderDraggablePaneDirective {
     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() {