@elderbyte/ngx-starter 21.4.2 → 21.4.3

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -23573,62 +23573,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImpor
             }] } });
 
 class ElderSelectOnTabDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(autoTrigger, elderSelectBase) {
-        this.autoTrigger = autoTrigger;
-        this.elderSelectBase = elderSelectBase;
+    constructor() {
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this.autoTrigger = inject(MatAutocompleteTrigger);
+        this.elderSelectBase = inject(ELDER_SELECT_BASE, {
+            skipSelf: true,
+        });
         this.destroy$ = new Subject$1();
-        /**
-         * Whether the autocomplete panel was open before the event
-         */
+        this.controlValueAccessor = this.elderSelectBase;
         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;
+        this.userInteracted = false;
     }
     /***************************************************************************
      *                                                                         *
      * Event Listener                                                          *
      *                                                                         *
      **************************************************************************/
-    onOptionSelect() {
-        this.userInput = true;
+    handleVerticalArrowKeyPress() {
+        this.userInteracted = true;
     }
-    onBlur() {
+    handleTabKeyPress() {
         if (!this.panelOpen) {
             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);
+        if (this.userInteracted || this.isRequiredAndEmpty()) {
+            this.selectActiveOption();
         }
-        this.reset();
     }
     /***************************************************************************
      *                                                                         *
@@ -23636,15 +23611,8 @@ 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));
+        this.observePanelOpen();
+        this.observeAutocompleteSelection();
     }
     ngOnDestroy() {
         this.destroy$.next();
@@ -23655,8 +23623,36 @@ class ElderSelectOnTabDirective {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    reset() {
-        this.userInput = false;
+    isRequiredAndEmpty() {
+        return !this.controlValueAccessor.value && this.elderSelectBase.required;
+    }
+    resetInteractionState() {
+        this.userInteracted = false;
+    }
+    observePanelOpen() {
+        const autocomplete = this.autoTrigger.autocomplete;
+        merge(autocomplete.opened.pipe(map(() => true)), autocomplete.closed.pipe(map(() => false)))
+            .pipe(takeUntil(this.destroy$), delay(0))
+            .subscribe((isOpen) => {
+            this.panelOpen = isOpen;
+            if (isOpen) {
+                this.resetInteractionState();
+            }
+        });
+    }
+    observeAutocompleteSelection() {
+        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.userInteracted = isUserInput));
+    }
+    selectActiveOption() {
+        const activeOption = this.autoTrigger.activeOption;
+        if (activeOption) {
+            const entity = activeOption.value;
+            this.writeEntity(entity);
+        }
     }
     writeEntity(entity) {
         const value = this.entityToValue(entity);
@@ -23676,26 +23672,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']
             }] } });