@elderbyte/ngx-starter 21.4.2 → 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']
             }] } });