@elderbyte/ngx-starter 21.4.1 → 21.5.0-beta.0

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -23572,63 +23572,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
                 args: ['elderAutocomplete']
             }] } });
 
+var InteractionState;
+(function (InteractionState) {
+    InteractionState["PRISTINE"] = "PRISTINE";
+    InteractionState["INTERACTED"] = "INTERACTED";
+})(InteractionState || (InteractionState = {}));
 class ElderSelectOnTabDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(autoTrigger, elderSelectBase) {
-        this.autoTrigger = autoTrigger;
-        this.elderSelectBase = elderSelectBase;
+    constructor() {
         /***************************************************************************
          *                                                                         *
-         * Fields                                                                  *
+         * Fields                                                            *
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this.autoTrigger = inject(MatAutocompleteTrigger);
+        this.elderSelectBase = inject(ELDER_SELECT_BASE, {
+            skipSelf: true,
+        });
+        this.controlValueAccessor = this.elderSelectBase;
         this.destroy$ = new Subject$1();
-        /**
-         * Whether the autocomplete panel was open before the event
-         */
-        this.panelOpen = false;
-        /**
-         * Whether the user selected an option.
-         * (We want to ignore selections if there is already a selection present and the user tabs away)
-         */
-        this.userInput = false;
-        this.controlValueAccessor = elderSelectBase;
+        /***************************************************************************
+         *                                                                         *
+         * State                                                                   *
+         *                                                                         *
+         **************************************************************************/
+        this.isPanelOpen = false;
+        this.userInteractionState = InteractionState.PRISTINE;
+        this.valueSnapshot = null;
     }
     /***************************************************************************
      *                                                                         *
      * Event Listener                                                          *
      *                                                                         *
      **************************************************************************/
-    onOptionSelect() {
-        this.userInput = true;
+    handleVerticalArrowKeyPress() {
+        this.userInteractionState = InteractionState.INTERACTED;
     }
-    onBlur() {
-        if (!this.panelOpen) {
+    handleTabKeyPress() {
+        if (!this.isPanelOpen || this.shouldSkipTabSelection()) {
             return;
         }
-        if (!this.userInput) {
-            // The user did not select anything in the auto-complete
-            if (this.controlValueAccessor.value) {
-                this.logger.warn('Discarding TAB since the user did probably not intend to change the value! userInput:', this.userInput);
-                return;
-            }
-            if (!this.elderSelectBase.required) {
-                // The user did not select any option and no current value is present.
-                // Since the input is NOT marked as required, we assume the user did not want to select a value
-                return;
-            }
-        }
         const activeOption = this.autoTrigger.activeOption;
         if (activeOption) {
             const entity = activeOption.value;
             this.writeEntity(entity);
         }
-        this.reset();
+        this.userInteractionState = InteractionState.PRISTINE;
     }
     /***************************************************************************
      *                                                                         *
@@ -23636,15 +23625,25 @@ class ElderSelectOnTabDirective {
      *                                                                         *
      **************************************************************************/
     ngAfterViewInit() {
-        const autocomplete = this.autoTrigger.autocomplete;
-        merge(autocomplete.opened.pipe(map(() => true)), autocomplete.closed.pipe(map(() => false)))
-            .pipe(takeUntil(this.destroy$), delay(0))
-            .subscribe((value) => (this.panelOpen = value));
-        this.autoTrigger.optionSelections
-            .pipe(
-        // TODO https://github.com/angular/components/pull/14813
-        takeUntil(this.destroy$), tap((opt) => this.logger.debug('[optionSelections] CHANGED ', opt)), map((opt) => opt.isUserInput))
-            .subscribe((isUserInput) => (this.userInput = isUserInput));
+        const panelOpenAsync$ = this.buildPanelOpenAsyncObservable();
+        panelOpenAsync$.subscribe((isOpen) => {
+            this.isPanelOpen = isOpen;
+            if (isOpen) {
+                // Snapshot the value at panel-open time so Tab can compare against it.
+                this.valueSnapshot = this.controlValueAccessor.value;
+                // Reset userInput so any selection from a previous panel session is not carried over.
+                this.userInteractionState = InteractionState.PRISTINE;
+            }
+        });
+        const optionSelectionFromUserInput$ = this.buildOptionSelectionFromUserInputObservable();
+        optionSelectionFromUserInput$.subscribe((isUserInput) => {
+            if (isUserInput) {
+                this.userInteractionState = InteractionState.INTERACTED;
+            }
+            else {
+                this.userInteractionState = InteractionState.PRISTINE;
+            }
+        });
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -23655,8 +23654,35 @@ class ElderSelectOnTabDirective {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    reset() {
-        this.userInput = false;
+    isValueSnapShotNotEmpty() {
+        return this.valueSnapshot !== null && this.valueSnapshot !== undefined;
+    }
+    buildPanelOpenAsyncObservable() {
+        const autocomplete = this.autoTrigger.autocomplete;
+        const panelOpen$ = merge(autocomplete.opened.pipe(map(() => true)), autocomplete.closed.pipe(map(() => false)));
+        const panelOpenAsync$ = panelOpen$.pipe(takeUntil(this.destroy$), delay(0));
+        return panelOpenAsync$;
+    }
+    buildOptionSelectionFromUserInputObservable() {
+        return this.autoTrigger.optionSelections.pipe(takeUntil(this.destroy$), map((opt) => opt.isUserInput));
+    }
+    shouldSkipTabSelection() {
+        if (this.userInteractionState === InteractionState.INTERACTED) {
+            return false;
+        }
+        const isOptionalField = !this.elderSelectBase.required;
+        const hasValueToPreserve = this.isValueSnapShotNotEmpty();
+        if (isOptionalField) {
+            // Since the input is NOT marked as required, we assume the user did not want to select a value
+            this.logger.warn('Skipping TAB selection since the input is NOT marked as required');
+            return true;
+        }
+        if (hasValueToPreserve) {
+            // User has already selected a value
+            this.logger.warn('Discarding TAB since the user did probably not intend to change the value! userInput:', this.userInteractionState);
+            return true;
+        }
+        return false;
     }
     writeEntity(entity) {
         const value = this.entityToValue(entity);
@@ -23676,26 +23702,21 @@ class ElderSelectOnTabDirective {
             return entity;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ElderSelectOnTabDirective, deps: [{ token: i1$9.MatAutocompleteTrigger }, { token: ELDER_SELECT_BASE, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: ElderSelectOnTabDirective, isStandalone: true, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.arrowup": "onOptionSelect()", "keydown.arrowdown": "onOptionSelect()", "keydown.tab": "onBlur()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ElderSelectOnTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.2", type: ElderSelectOnTabDirective, isStandalone: true, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.arrowup": "handleVerticalArrowKeyPress()", "keydown.arrowdown": "handleVerticalArrowKeyPress()", "keydown.tab": "handleTabKeyPress()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: ElderSelectOnTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[elderSelectOnTab]',
                 }]
-        }], ctorParameters: () => [{ type: i1$9.MatAutocompleteTrigger }, { type: ElderSelectBase, decorators: [{
-                    type: SkipSelf
-                }, {
-                    type: Inject,
-                    args: [ELDER_SELECT_BASE]
-                }] }], propDecorators: { onOptionSelect: [{
+        }], propDecorators: { handleVerticalArrowKeyPress: [{
                 type: HostListener,
                 args: ['keydown.arrowup']
             }, {
                 type: HostListener,
                 args: ['keydown.arrowdown']
-            }], onBlur: [{
+            }], handleTabKeyPress: [{
                 type: HostListener,
                 args: ['keydown.tab']
             }] } });
@@ -37971,8 +37992,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 +38022,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 +38036,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 +38093,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 +38149,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 +38176,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;