@elderbyte/ngx-starter 21.4.0 → 21.4.2

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -37971,8 +37971,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 args: ['class']
             }] } });
 
-const DEFAULT_MIN_WIDTH = 5;
-const DEFAULT_MAX_WIDTH = 95;
+const DEFAULT_MIN_WIDTH = '5%';
+const DEFAULT_MAX_WIDTH = '95%';
 const DEFAULT_HANDLE_POSITION = 'end';
 
 class ElderResizeBehaviorDirective {
@@ -38001,7 +38001,7 @@ class ElderResizeBehaviorDirective {
         this.isInComputedWidthMode = signal(false, ...(ngDevMode ? [{ debugName: "isInComputedWidthMode" }] : []));
         this.widthInPercent = signal(null, ...(ngDevMode ? [{ debugName: "widthInPercent" }] : []));
         this._isDragging = signal(false, ...(ngDevMode ? [{ debugName: "_isDragging" }] : []));
-        this.containerWidth = 0;
+        this.containerWidth = signal(0, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
         this.dragStartMousePosX = 0;
         this.dragStartPaneWidthInPercent = 0;
         /***************************************************************************
@@ -38015,7 +38015,12 @@ class ElderResizeBehaviorDirective {
             if (width === null) {
                 return null;
             }
-            return Math.max(this.minWidth(), Math.min(this.maxWidth(), width));
+            const containerW = this.containerWidth();
+            const minParsed = this.parseWidthConstraint(this.minWidth());
+            const maxParsed = this.parseWidthConstraint(this.maxWidth());
+            const minPercent = this.toPercent(minParsed, containerW);
+            const maxPercent = this.toPercent(maxParsed, containerW);
+            return Math.max(minPercent, Math.min(maxPercent, width));
         }, ...(ngDevMode ? [{ debugName: "constrainedWidth" }] : []));
         /***************************************************************************
          *                                                                         *
@@ -38067,6 +38072,23 @@ class ElderResizeBehaviorDirective {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
+    parseWidthConstraint(input) {
+        const trimmed = String(input).trim().toLowerCase();
+        const floatValue = parseFloat(trimmed);
+        const isValidEnding = trimmed.endsWith('px') || trimmed.endsWith('%');
+        if (Number.isNaN(floatValue) || !isValidEnding) {
+            this.logger.error(`Invalid width constraint: ${input}`);
+            return { value: 0, unit: 'percent' };
+        }
+        return { value: floatValue, unit: trimmed.endsWith('px') ? 'px' : 'percent' };
+    }
+    toPercent(parsed, containerWidth) {
+        if (parsed.unit === 'percent')
+            return parsed.value;
+        if (containerWidth <= 0)
+            return parsed.value <= 0 ? 0 : 100;
+        return (parsed.value / containerWidth) * 100;
+    }
     removeExternalWidthStyles() {
         const stylesToRemove = [
             'flex',
@@ -38106,24 +38128,23 @@ class ElderResizeBehaviorDirective {
     }
     setWidthInPercentFromElementWidth() {
         this.updateContainerWidth();
-        if (this.containerWidth === 0) {
+        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;
+        const percentage = (paneWidth / this.containerWidth()) * 100;
         this.widthInPercent.set(percentage);
     }
     updateContainerWidth() {
         const containerElement = this.elementRef.nativeElement.parentElement;
         if (!containerElement) {
             this.logger.error('Container element not found for percentage calculation');
-            return null;
+            return;
         }
         // Use clientWidth which excludes borders and scrollbars, then subtract padding
-        this.containerWidth = containerElement.clientWidth - this.getContainerPadding();
-        return this.containerWidth;
+        this.containerWidth.set(containerElement.clientWidth - this.getContainerPadding());
     }
     getContainerPadding() {
         const containerElement = this.elementRef.nativeElement.parentElement;
@@ -38134,14 +38155,14 @@ class ElderResizeBehaviorDirective {
             parseFloat(window.getComputedStyle(containerElement).paddingRight));
     }
     calcWidthInPercent(event, position) {
-        if (this.containerWidth === 0 ||
+        if (this.containerWidth() === 0 ||
             this.dragStartPaneWidthInPercent === null ||
             isNaN(this.dragStartPaneWidthInPercent)) {
             return undefined;
         }
         const deltaX = event.clientX - this.dragStartMousePosX;
         // Convert pixel delta to percentage delta
-        let delta = (deltaX / this.containerWidth) * 100;
+        let delta = (deltaX / this.containerWidth()) * 100;
         // Invert delta for left-side handles
         if (position === 'start') {
             delta = -delta;
@@ -38188,8 +38209,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
         }] });
 
 class ElderResizeContainerComponent {
+    constructor() {
+        this.resizeHandleDirective = inject(ElderResizeBehaviorDirective);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ElderResizeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: ElderResizeContainerComponent, isStandalone: true, selector: "elder-resize-container", host: { classAttribute: "elder-resize-container" }, hostDirectives: [{ directive: ElderResizeBehaviorDirective, inputs: ["minWidth", "minWidth", "maxWidth", "maxWidth", "handlePosition", "handlePosition"] }], ngImport: i0, template: "<elder-resize-handle-bar></elder-resize-handle-bar>\n<div class=\"elder-resize-container-inner\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:stretch;position:relative}:host.resize-mode{flex:none!important}.elder-resize-container-inner{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:stretch}\n"], dependencies: [{ kind: "component", type: ElderResizeHandleBarComponent, selector: "elder-resize-handle-bar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: ElderResizeContainerComponent, isStandalone: true, selector: "elder-resize-container", host: { classAttribute: "elder-resize-container" }, hostDirectives: [{ directive: ElderResizeBehaviorDirective, inputs: ["minWidth", "minWidth", "maxWidth", "maxWidth", "handlePosition", "handlePosition"] }], ngImport: i0, template: "@if (resizeHandleDirective.handlePosition() !== 'none') {\n  <elder-resize-handle-bar></elder-resize-handle-bar>\n}\n<div class=\"elder-resize-container-inner\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:stretch;position:relative}:host.resize-mode{flex:none!important}.elder-resize-container-inner{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:stretch}\n"], dependencies: [{ kind: "component", type: ElderResizeHandleBarComponent, selector: "elder-resize-handle-bar" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ElderResizeContainerComponent, decorators: [{
             type: Component,
@@ -38200,7 +38224,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                             directive: ElderResizeBehaviorDirective,
                             inputs: ['minWidth', 'maxWidth', 'handlePosition'],
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<elder-resize-handle-bar></elder-resize-handle-bar>\n<div class=\"elder-resize-container-inner\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:stretch;position:relative}:host.resize-mode{flex:none!important}.elder-resize-container-inner{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:stretch}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (resizeHandleDirective.handlePosition() !== 'none') {\n  <elder-resize-handle-bar></elder-resize-handle-bar>\n}\n<div class=\"elder-resize-container-inner\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:stretch;position:relative}:host.resize-mode{flex:none!important}.elder-resize-container-inner{height:100%;display:flex;flex-flow:column nowrap;justify-content:flex-start;align-items:stretch}\n"] }]
         }] });
 
 const DEFAULT_CONFIG = {