@koobiq/components 19.6.0 → 19.7.0

package/fesm2022/koobiq-components-tags.mjs

@@ -16,7 +16,7 @@ import { DELETE, SPACE, BACKSPACE, ENTER, ESCAPE, F2, LEFT_ARROW, TAB, HOME, END
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
 import { Subject, merge } from 'rxjs';
-import { startWith, filter } from 'rxjs/operators';
+import { startWith, takeUntil, filter } from 'rxjs/operators';
 import { KbqIcon } from '@koobiq/components/icon';
 import { PlatformModule } from '@angular/cdk/platform';
 
@@ -253,9 +253,12 @@ class KbqTag extends KbqColorDirective {
         this.editing = signal(false);
         /** Emitted when the tag is selected or deselected. */
         this.selectionChange = new EventEmitter();
-        /** Emitted when the tag is destroyed. */
+        /** Emitted when the tag is destroyed and leaving the DOM. */
         this.destroyed = new EventEmitter();
-        /** Emitted when a tag is to be removed. */
+        /**
+         * Emitted when a tag is to be removed.
+         * Fires on programmatic and UI removal (click or keyboard).
+         */
         this.removed = new EventEmitter();
         this._selected = false;
         this._selectable = false;
@@ -696,13 +699,21 @@ class KbqTagList {
         return merge(...this.tags.map((tag) => tag.onBlur));
     }
     /**
-     * Combined stream of all of the child tags' remove change events.
+     * Combined stream of all of the child tags' destroyed events.
      *
      * @docs-private
      */
     get tagRemoveChanges() {
         return merge(...this.tags.map((tag) => tag.destroyed));
     }
+    /**
+     * Combined stream of all of the child tags' removal request events.
+     *
+     * @docs-private
+     */
+    get tagBeforeRemoveChanges() {
+        return merge(...this.tags.map((tag) => tag.removed));
+    }
     /**
      * Combined stream of all of the child tags' edit change events.
      *
@@ -872,7 +883,8 @@ class KbqTagList {
         this.editable = false;
         /**
          * Whether to emit change events when tags are added/removed.
-         * Set to `false` to prevent the form control from being marked as dirty during programmatic updates.
+         *
+         * @deprecated No longer needed. Will be removed in the next major release.
          */
         this.emitOnTagChanges = true;
         this._removable = true;
@@ -912,12 +924,16 @@ class KbqTagList {
          * @docs-private
          */
         this.errorState = false;
+        /** True when the next `tags.changes` emission is triggered by a UI action, not programmatic update. */
+        this.pendingUIChange = false;
         /**
          * When a tag is destroyed, we store the index of the destroyed tag until the tags
          * query list notifies about the update. This is necessary because we cannot determine an
          * appropriate tag that should receive focus until the array of tags updated completely.
          */
         this.lastDestroyedTagIndex = null;
+        /** Triggers unsubscription from all per-tags streams when tags are reset. */
+        this.tagsSubscriptions$ = new Subject();
         /** @docs-private */
         this.onTouched = () => { };
         /** @docs-private */
@@ -967,8 +983,8 @@ class KbqTagList {
             // has changed after it was checked" errors from Angular.
             Promise.resolve().then(() => {
                 this.stateChanges.next();
-                // do not call on initial
-                if (currentTags && this.emitOnTagChanges) {
+                if (currentTags && this.pendingUIChange) {
+                    this.pendingUIChange = false;
                     this.propagateTagsChanges();
                 }
             });
@@ -980,7 +996,7 @@ class KbqTagList {
     ngOnDestroy() {
         this.stateChanges.complete();
         this.focusMonitor.stopMonitoring(this.elementRef);
-        this.dropSubscriptions();
+        this.tagsSubscriptions$.next();
     }
     /** @docs-private */
     updateErrorState() {
@@ -994,6 +1010,10 @@ class KbqTagList {
             this.stateChanges.next();
         }
     }
+    /** Notifies that the next `tags.changes` emission is UI-initiated. */
+    notifyPendingTagChange() {
+        this.pendingUIChange = true;
+    }
     /**
      * Associates an HTML input element with this tag list.
      *
@@ -1223,32 +1243,14 @@ class KbqTagList {
         this.changeDetectorRef.markForCheck();
     }
     resetTags() {
-        this.dropSubscriptions();
+        this.tagsSubscriptions$.next();
         this.listenToTagsFocus();
         this.listenToTagsRemoved();
         this.listenToTagsEdit();
     }
-    dropSubscriptions() {
-        if (this.tagFocusSubscription) {
-            this.tagFocusSubscription.unsubscribe();
-            this.tagFocusSubscription = null;
-        }
-        if (this.tagBlurSubscription) {
-            this.tagBlurSubscription.unsubscribe();
-            this.tagBlurSubscription = null;
-        }
-        if (this.tagRemoveSubscription) {
-            this.tagRemoveSubscription.unsubscribe();
-            this.tagRemoveSubscription = null;
-        }
-        if (this.tagEditSubscription) {
-            this.tagEditSubscription.unsubscribe();
-            this.tagEditSubscription = null;
-        }
-    }
     /** Listens to user-generated selection events on each tag. */
     listenToTagsFocus() {
-        this.tagFocusSubscription = this.tagFocusChanges.subscribe(({ tag, origin }) => {
+        this.tagFocusChanges.pipe(takeUntil(this.tagsSubscriptions$)).subscribe(({ tag, origin }) => {
             const tagIndex = this.tags.toArray().indexOf(tag);
             if (this.isValidIndex(tagIndex)) {
                 this.keyManager.setFocusOrigin(origin);
@@ -1256,13 +1258,13 @@ class KbqTagList {
             }
             this.stateChanges.next();
         });
-        this.tagBlurSubscription = this.tagBlurChanges.subscribe(() => {
+        this.tagBlurChanges.pipe(takeUntil(this.tagsSubscriptions$)).subscribe(() => {
             this.blur();
             this.stateChanges.next();
         });
     }
     listenToTagsRemoved() {
-        this.tagRemoveSubscription = this.tagRemoveChanges.subscribe((event) => {
+        this.tagRemoveChanges.pipe(takeUntil(this.tagsSubscriptions$)).subscribe((event) => {
             const tag = event.tag;
             const tagIndex = this.tags.toArray().indexOf(event.tag);
             // In case the tag that will be removed is currently focused, we temporarily store
@@ -1272,10 +1274,14 @@ class KbqTagList {
                 this.lastDestroyedTagIndex = tagIndex;
             }
         });
+        // Set the pending flag so the subsequent `tags.changes` is treated as UI action.
+        this.tagBeforeRemoveChanges
+            .pipe(takeUntil(this.tagsSubscriptions$))
+            .subscribe(() => (this.pendingUIChange = true));
     }
     listenToTagsEdit() {
-        this.tagEditSubscription = this.tagEditChanges
-            .pipe(filter(({ type }) => type === 'submit'))
+        this.tagEditChanges
+            .pipe(filter(({ type }) => type === 'submit'), takeUntil(this.tagsSubscriptions$))
             .subscribe(() => this.propagateTagsChanges());
     }
     /** Checks whether any of the tags is focused. */
@@ -1300,6 +1306,7 @@ class KbqTagList {
         this.dropList.dropped
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(({ currentIndex, previousIndex, event, item }) => {
+            this.pendingUIChange = true;
             const { tag } = item.data;
             this.dropped.emit({ currentIndex, previousIndex, event, tag });
         });
@@ -1509,12 +1516,16 @@ class KbqTagInput {
     }
     /** @docs-private */
     onKeydown(event) {
+        const isSeparatorKey = this.isSeparatorKey(event);
         if (!this.inputElement.value) {
+            if (isSeparatorKey) {
+                event.preventDefault();
+            }
             this._tagList.keydown(event);
             event.stopPropagation();
             return;
         }
-        if (this.isSeparatorKey(event) && this.inputElement.value) {
+        if (isSeparatorKey) {
             this.emitTagEnd();
             event.preventDefault();
         }
@@ -1543,6 +1554,7 @@ class KbqTagInput {
         if (!this.hasControl() || (this.hasControl() && !this.ngControl.invalid)) {
             if (this.distinct && this.hasDuplicates)
                 return;
+            this._tagList?.notifyPendingTagChange();
             this.tagEnd.emit({ input: this.inputElement, value: this.trimValue(this.inputElement.value) });
         }
     }
@@ -1576,6 +1588,9 @@ class KbqTagInput {
             const tagValues = this._tagList.tags.map(({ value }) => value);
             items = items.filter((item) => !tagValues.includes(item));
         }
+        if (items.length) {
+            this._tagList?.notifyPendingTagChange();
+        }
         items.forEach((item) => this.tagEnd.emit({ input: this.inputElement, value: item }));
         $event.preventDefault();
         $event.stopPropagation();
@@ -1616,7 +1631,7 @@ class KbqTagInput {
     }
     /** Checks whether a keycode is one of the configured separators. */
     isSeparatorKey(event) {
-        return this.separators.some((separator) => separator.key === event.key && !event.shiftKey);
+        return this.separators.some((separator) => separator.key === event.key && !hasModifierKey(event));
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: KbqTagInput, deps: [{ token: i0.ElementRef }, { token: KBQ_TAGS_DEFAULT_OPTIONS }, { token: i1$1.KbqTrim, optional: true, self: true }, { token: i3.NgControl, optional: true, self: true }, { token: i3$1.KbqAutocompleteTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.20", type: KbqTagInput, isStandalone: true, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], distinct: "distinct", placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], addOnPaste: ["kbqTagInputAddOnPaste", "addOnPaste", booleanAttribute], disabled: "disabled" }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur($event)", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["kbqTagInput", "kbqTagInputFor"], usesOnChanges: true, hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }