@koobiq/components 20.1.0 → 20.3.0

package/fesm2022/koobiq-components-tags.mjs

@@ -1,25 +1,22 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, Directive, inject, ChangeDetectorRef, DestroyRef, ElementRef, input, booleanAttribute, contentChild, output, signal, contentChildren, forwardRef, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, ContentChildren, NgModule } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { Directive, inject, ChangeDetectorRef, DestroyRef, ElementRef, input, booleanAttribute, contentChild, output, signal, contentChildren, forwardRef, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, computed, ContentChildren, InjectionToken, NgModule } from '@angular/core';
 import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
 import { KbqAutocompleteTrigger } from '@koobiq/components/autocomplete';
 import * as i1 from '@koobiq/components/core';
-import { KbqFieldSizingContent, KbqColorDirective, KbqComponentColors, hasModifierKey, isNull, KBQ_TITLE_TEXT_REF, ErrorStateMatcher, FocusKeyManager, isSelectAll, SEMICOLON, COMMA, SPACE as SPACE$1, TAB as TAB$1, ENTER as ENTER$1 } from '@koobiq/components/core';
-import { KbqFormFieldControl, KbqTrim } from '@koobiq/components/form-field';
+import { KbqFieldSizingContent, KbqColorDirective, KbqComponentColors, hasModifierKey, isNull, KBQ_TITLE_TEXT_REF, ErrorStateMatcher, FocusKeyManager, isSelectAll, ENTER as ENTER$1, TAB as TAB$1, SPACE as SPACE$1, COMMA, SEMICOLON, kbqInjectAutofilled } from '@koobiq/components/core';
+import { KbqCleaner, KbqFormFieldControl, KBQ_CLEANER_CONTEXT, KbqTrim } from '@koobiq/components/form-field';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import * as i2 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
-import { DELETE, SPACE, BACKSPACE, ENTER, ESCAPE, F2, LEFT_ARROW, TAB, HOME, END } from '@angular/cdk/keycodes';
+import { DELETE, SPACE, BACKSPACE, ENTER, ESCAPE, F2, LEFT_ARROW, RIGHT_ARROW, TAB, HOME, END } from '@angular/cdk/keycodes';
 import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
 import { Subject, merge } from 'rxjs';
 import { startWith, takeUntil, filter } from 'rxjs/operators';
 import { KbqIcon } from '@koobiq/components/icon';
 import { PlatformModule } from '@angular/cdk/platform';
 
-/** Injection token to be used to override the default options for the chips module. */
-const KBQ_TAGS_DEFAULT_OPTIONS = new InjectionToken('kbq-tags-default-options');
-
 /**
  * Event object emitted by KbqTag when the tag is edited.
  */
@@ -47,10 +44,10 @@ const getTagEditInputMissingError = () => {
  * @docs-private
  */
 class KbqTagAvatar {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTagAvatar, isStandalone: true, selector: "kbq-tag-avatar, [kbqTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTagAvatar, isStandalone: true, selector: "kbq-tag-avatar, [kbqTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagAvatar, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tag-avatar, [kbqTagAvatar]',
@@ -62,10 +59,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * @docs-private
  */
 class KbqTagTrailingIcon {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTagTrailingIcon, isStandalone: true, selector: "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", host: { classAttribute: "kbq-tag-trailing-icon" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTagTrailingIcon, isStandalone: true, selector: "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", host: { classAttribute: "kbq-tag-trailing-icon" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagTrailingIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagTrailingIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tag-trailing-icon, [kbqTagTrailingIcon]',
@@ -80,10 +77,10 @@ class KbqTagEditSubmit {
         /** @docs-private */
         this.tag = inject(KbqTag);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagEditSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTagEditSubmit, isStandalone: true, selector: "[kbqTagEditSubmit]", host: { listeners: { "click": "tag.submitEditing(\"click\")" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-edit-submit" }, exportAs: ["kbqTagEditSubmit"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagEditSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTagEditSubmit, isStandalone: true, selector: "[kbqTagEditSubmit]", host: { listeners: { "click": "tag.submitEditing(\"click\")" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-edit-submit" }, exportAs: ["kbqTagEditSubmit"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagEditSubmit, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagEditSubmit, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTagEditSubmit]',
@@ -129,10 +126,10 @@ class KbqTagEditInput {
             default:
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagEditInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagEditInput, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTagEditInput]',
@@ -396,16 +393,21 @@ class KbqTag extends KbqColorDirective {
             return;
         }
         if (
-        // We should toggle selection only if tag inside of a tag list.
+        // We should handle modifier-based selection only if tag is inside of a tag list.
         // Single tag can only be toggled on focus or blur.
         this.tagList &&
             this.selectable &&
             hasModifierKey(event, 'metaKey', 'ctrlKey', 'shiftKey')) {
-            this.toggleSelected(true);
+            if (!event.shiftKey)
+                this.toggleSelected(true);
+            this.tagList.handleSelectionInteraction(this, event.shiftKey);
             // We should stop event propagation to prevent the tag list from handling the click event.
             event.stopPropagation();
             return;
         }
+        if (this.tagList && this.selectable) {
+            this.tagList.handleSelectionInteraction(this, false);
+        }
         if (!this.tagList && this.selectable) {
             this.toggleSelected(true);
         }
@@ -429,7 +431,13 @@ class KbqTag extends KbqColorDirective {
                 break;
             }
             case SPACE: {
-                this.toggleSelected(true);
+                if (this.tagList) {
+                    this.toggleSelected(true);
+                    this.tagList.handleSelectionInteraction(this, false);
+                }
+                else {
+                    this.toggleSelected(true);
+                }
                 this.focusMonitor.focusVia(this.elementRef, 'keyboard');
                 // Always prevent space from scrolling the page since the list has focus
                 event.preventDefault();
@@ -532,8 +540,8 @@ class KbqTag extends KbqColorDirective {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqTag, isStandalone: true, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, preventEditSubmit: { classPropertyName: "preventEditSubmit", publicName: "preventEditSubmit", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { editChange: "editChange", selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "dblclick": "handleDblClick($event)", "click": "handleClick($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-tag-with-avatar": "avatar()", "class.kbq-tag-with-icon": "contentChildren()", "class.kbq-tag-with-trailing-icon": "trailingIcon() || removeIcon()", "class.kbq-disabled": "disabled", "class.kbq-tag_editable": "editable", "class.kbq-tag_editing": "editing()", "class.kbq-tag_removable": "removable", "class.kbq-tag_selectable": "selectable", "class.kbq-tag_draggable": "draggable" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "editInputElementRef", first: true, predicate: KbqTagEditInput, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "contentChildren", predicate: KbqIcon, isSignal: true }, { propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true, isSignal: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true, isSignal: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(() => KbqTagRemove), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqTag"], usesInheritance: true, hostDirectives: [{ directive: i2.CdkDrag }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqTag, isStandalone: true, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, preventEditSubmit: { classPropertyName: "preventEditSubmit", publicName: "preventEditSubmit", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { editChange: "editChange", selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "dblclick": "handleDblClick($event)", "click": "handleClick($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-tag-with-avatar": "avatar()", "class.kbq-tag-with-icon": "contentChildren()", "class.kbq-tag-with-trailing-icon": "trailingIcon() || removeIcon()", "class.kbq-disabled": "disabled", "class.kbq-tag_editable": "editable", "class.kbq-tag_editing": "editing()", "class.kbq-tag_removable": "removable", "class.kbq-tag_selectable": "selectable", "class.kbq-tag_draggable": "draggable" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "editInputElementRef", first: true, predicate: KbqTagEditInput, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "contentChildren", predicate: KbqIcon, isSignal: true }, { propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true, isSignal: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true, isSignal: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(() => KbqTagRemove), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqTag"], usesInheritance: true, hostDirectives: [{ directive: i2.CdkDrag }], ngImport: i0, template: `
         <div class="kbq-tag__wrapper">
             <ng-content select="[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])" />
             <span #kbqTitleText class="kbq-tag__text">
@@ -553,7 +561,7 @@ class KbqTag extends KbqColorDirective {
         </div>
     `, isInline: true, styles: [".kbq-tag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-block;max-width:100%;height:var(--kbq-size-xxl);padding:var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);border-radius:4px;cursor:default;outline:none;box-sizing:border-box}.kbq-tag .kbq-icon.kbq-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon.kbq-tag-remove:hover{cursor:pointer}.kbq-tag.kbq-disabled .kbq-icon.kbq-tag-remove:hover{cursor:default}.kbq-tag .kbq-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 var(--kbq-tag-size-content-gap-horizontal)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left)}.kbq-tag .kbq-tag-edit-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag .kbq-tag-edit-input::-ms-clear{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-webkit-search-decoration,.kbq-tag .kbq-tag-edit-input::-webkit-search-cancel-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-decoration{display:none}.kbq-tag .kbq-tag-edit-input{min-width:var(--kbq-size-xs);max-width:100%}.kbq-tag .kbq-tag-edit-input.kbq-input{min-height:unset!important;border-radius:unset!important;padding:unset!important}.kbq-tag .kbq-tag-edit-submit{margin-right:var(--kbq-size-3xs)}.kbq-tag.cdk-drag-placeholder{opacity:var(--kbq-opacity-disabled)}.kbq-tag.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTag, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]', template: `
         <div class="kbq-tag__wrapper">
@@ -650,10 +658,10 @@ class KbqTagRemove {
         // that the tag is being removed before the event bubbles up.
         event.stopPropagation();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTagRemove, isStandalone: true, selector: "[kbqTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.30", type: KbqTagRemove, isStandalone: true, selector: "[kbqTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagRemove, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagRemove, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTagRemove]',
@@ -869,6 +877,13 @@ class KbqTagList {
          */
         this.stateChanges = new Subject();
         this._required = false;
+        /**
+         * Implemented as part of KbqFormFieldControl. Forwarded from the registered `kbqTagInput`, which
+         * is the element the browser actually autofills — the tag list itself is not an input.
+         *
+         * @docs-private
+         */
+        this.autofilled = computed(() => this.registeredInput()?.autofilled?.() ?? false, ...(ngDevMode ? [{ debugName: "autofilled" }] : []));
         this._disabled = false;
         this._draggable = false;
         /**
@@ -902,15 +917,22 @@ class KbqTagList {
         /** Event emitted when the selected tag list value has been changed by the user. */
         this.change = output();
         /** @docs-private */
-        this.cleaner = contentChild('kbqTagListCleaner', ...(ngDevMode ? [{ debugName: "cleaner" }] : []));
+        this.cleaner = contentChild(KbqCleaner, ...(ngDevMode ? [{ debugName: "cleaner", descendants: false }] : [{ descendants: false }]));
         /**
          * Whether the component is in an error state.
          *
          * @docs-private
          */
         this.errorState = false;
+        /**
+         * The same control as `tagInput`, kept in a signal so `autofilled` can track it reactively —
+         * `registerInput()` runs after the first read.
+         */
+        this.registeredInput = signal(undefined, ...(ngDevMode ? [{ debugName: "registeredInput" }] : []));
         /** True when the next `tags.changes` emission is triggered by a UI action, not programmatic update. */
         this.pendingUIChange = false;
+        /** Shared range selection state used by pointer and keyboard interactions. */
+        this.rangeSelection = null;
         /**
          * 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
@@ -962,6 +984,12 @@ class KbqTagList {
             .pipe(startWith(null), takeUntilDestroyed(this.destroyRef))
             .subscribe((currentTags) => {
             this.resetTags();
+            if (this.rangeSelection) {
+                const tags = this.tags.toArray();
+                if (!tags.includes(this.rangeSelection.anchor) || !tags.includes(this.rangeSelection.activeEnd)) {
+                    this.rangeSelection = null;
+                }
+            }
             // Check to see if we need to update our tab index
             this.updateTabIndex();
             // Check to see if we have a destroyed tag and need to refocus
@@ -972,7 +1000,13 @@ class KbqTagList {
                 this.stateChanges.next();
                 if (currentTags && this.pendingUIChange) {
                     this.pendingUIChange = false;
-                    this.propagateTagsChanges();
+                    // The latch can survive a UI action the consumer rejected (nothing was
+                    // added, so `tags.changes` never fired to clear it). Propagating then
+                    // would mark the control dirty for an edit the user never made, so
+                    // require the rendered tags to actually differ from the current value.
+                    if (this.hasTagsValueChanged()) {
+                        this.propagateTagsChanges();
+                    }
                 }
             });
         });
@@ -1008,10 +1042,7 @@ class KbqTagList {
      */
     registerInput(inputElement) {
         this.tagInput = inputElement;
-        // todo need rethink about it (#DS-3740)
-        if (this.ngControl && inputElement.ngControl?.statusChanges) {
-            inputElement.ngControl.statusChanges.subscribe(() => this.ngControl.control.setErrors(inputElement.ngControl.errors));
-        }
+        this.registeredInput.set(inputElement);
     }
     /**
      * Implemented as part of ControlValueAccessor.
@@ -1073,6 +1104,22 @@ class KbqTagList {
             this.tagInput.focus();
         }
     }
+    /**
+     * Establishes a range origin or extends the current range to the specified tag.
+     *
+     * @docs-private
+     */
+    handleSelectionInteraction(tag, extendRange) {
+        const tags = this.tags.toArray();
+        const tagIndex = tags.indexOf(tag);
+        if (this.disabled || !tag.selectable || tag.disabled || !this.isValidIndex(tagIndex))
+            return;
+        if (extendRange) {
+            this.extendSelectionTo(tag);
+            return;
+        }
+        this.setRangeOrigin(tag);
+    }
     /**
      * Pass events to the keyboard manager. Available here for tests.
      *
@@ -1083,6 +1130,13 @@ class KbqTagList {
         if (this.disabled || isNull(target))
             return;
         const shouldSelectAll = this.selectable() && isSelectAll(event);
+        const shouldUpdateKeyboardRange = this.selectable() &&
+            this.isTagElement(target) &&
+            event.shiftKey &&
+            !event.altKey &&
+            !event.ctrlKey &&
+            !event.metaKey &&
+            [LEFT_ARROW, RIGHT_ARROW].includes(event.keyCode);
         if (this.isInputEmpty(target)) {
             if (event.keyCode === BACKSPACE ||
                 event.keyCode === LEFT_ARROW ||
@@ -1101,10 +1155,12 @@ class KbqTagList {
         else if (this.isTagElement(target)) {
             if (event.keyCode === HOME) {
                 this.keyManager.setFirstItemActive();
+                this.setRangeOrigin(this.keyManager.activeItem);
                 event.preventDefault();
             }
             else if (event.keyCode === END) {
                 this.keyManager.setLastItemActive();
+                this.setRangeOrigin(this.keyManager.activeItem);
                 event.preventDefault();
             }
             else if (shouldSelectAll) {
@@ -1113,7 +1169,18 @@ class KbqTagList {
                 event.preventDefault();
             }
             else {
+                const previousActiveIndex = this.keyManager.activeItemIndex;
                 this.keyManager.onKeydown(event);
+                if (previousActiveIndex !== this.keyManager.activeItemIndex) {
+                    if (shouldUpdateKeyboardRange) {
+                        if (!this.rangeSelection)
+                            this.setRangeOrigin(this.tags.get(previousActiveIndex));
+                        this.extendSelectionTo(this.keyManager.activeItem);
+                    }
+                    else {
+                        this.setRangeOrigin(this.keyManager.activeItem);
+                    }
+                }
             }
             this.stateChanges.next();
         }
@@ -1196,6 +1263,11 @@ class KbqTagList {
     }
     selectAll() {
         this.tags.forEach((tag) => tag.selectViaInteraction());
+        this.setRangeOrigin(this.keyManager.activeItem ??
+            this.tags
+                .toArray()
+                .reverse()
+                .find((tag) => tag.selectable && !tag.disabled));
     }
     /**
      * Unselects all tags in the list.
@@ -1204,6 +1276,7 @@ class KbqTagList {
      */
     unselectAll() {
         this.tags.forEach((tag) => tag.setSelectedState(false));
+        this.rangeSelection = null;
     }
     /**
      * Removes all selected tags from the list.
@@ -1213,6 +1286,15 @@ class KbqTagList {
     removeSelected() {
         this.selected.forEach((tag) => tag.remove());
     }
+    /** Whether the rendered tags no longer match the value this control last reported. */
+    hasTagsValueChanged() {
+        const currentValue = this.tags.map(({ value }) => value);
+        if (!Array.isArray(this._value)) {
+            return currentValue.length > 0;
+        }
+        return (this._value.length !== currentValue.length ||
+            currentValue.some((value, index) => value !== this._value[index]));
+    }
     propagateTagsChanges() {
         const valueToEmit = this.tags.map((tag) => tag.value);
         this._value = valueToEmit;
@@ -1291,8 +1373,47 @@ class KbqTagList {
                 this.unselectAll();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqTagList, isStandalone: true, selector: "kbq-tag-list", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dropped: "dropped", valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "class.kbq-tag-list_selectable": "selectable()", "class.kbq-tag-list_editable": "editable()", "class.kbq-tag-list_removable": "removable", "class.kbq-tag-list_draggable": "draggable", "attr.tabindex": "tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqTagListCleaner"], descendants: true, isSignal: true }, { propertyName: "tags", predicate: i0.forwardRef(() => KbqTag), descendants: true }], exportAs: ["kbqTagList"], hostDirectives: [{ directive: i2.CdkDropList }], ngImport: i0, template: `
+    extendSelectionTo(activeEnd) {
+        const tags = this.tags.toArray();
+        const activeEndIndex = activeEnd ? tags.indexOf(activeEnd) : -1;
+        if (!activeEnd || !this.isValidIndex(activeEndIndex))
+            return;
+        if (!this.rangeSelection) {
+            activeEnd.setSelectedState(true, { isUserInput: true, emitEvent: true });
+            this.setRangeOrigin(activeEnd);
+            return;
+        }
+        const anchorIndex = tags.indexOf(this.rangeSelection.anchor);
+        const previousActiveEndIndex = tags.indexOf(this.rangeSelection.activeEnd);
+        if (!this.isValidIndex(anchorIndex) || !this.isValidIndex(previousActiveEndIndex)) {
+            this.rangeSelection = null;
+            this.extendSelectionTo(activeEnd);
+            return;
+        }
+        const previousFromIndex = Math.min(anchorIndex, previousActiveEndIndex);
+        const previousToIndex = Math.max(anchorIndex, previousActiveEndIndex);
+        const fromIndex = Math.min(anchorIndex, activeEndIndex);
+        const toIndex = Math.max(anchorIndex, activeEndIndex);
+        tags.forEach((tag, index) => {
+            if (tag.disabled || !tag.selectable)
+                return;
+            const belongsToRange = index >= fromIndex && index <= toIndex;
+            const belongedToPreviousRange = index >= previousFromIndex && index <= previousToIndex;
+            if (belongsToRange || belongedToPreviousRange) {
+                tag.setSelectedState(belongsToRange, { isUserInput: true, emitEvent: true });
+            }
+        });
+        this.rangeSelection = { ...this.rangeSelection, activeEnd };
+    }
+    setRangeOrigin(anchor) {
+        this.rangeSelection = anchor ? { anchor, activeEnd: anchor } : null;
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.30", type: KbqTagList, isStandalone: true, selector: "kbq-tag-list", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dropped: "dropped", valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "class.kbq-tag-list_selectable": "selectable()", "class.kbq-tag-list_editable": "editable()", "class.kbq-tag-list_removable": "removable", "class.kbq-tag-list_draggable": "draggable", "attr.tabindex": "tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [
+            { provide: KbqFormFieldControl, useExisting: KbqTagList },
+            // Tag-list cleaners use consumer-provided click handlers; do not also reset the outer form control.
+            { provide: KBQ_CLEANER_CONTEXT, useValue: null }
+        ], queries: [{ propertyName: "cleaner", first: true, predicate: KbqCleaner, isSignal: true }, { propertyName: "tags", predicate: i0.forwardRef(() => KbqTag), descendants: true }], exportAs: ["kbqTagList"], hostDirectives: [{ directive: i2.CdkDropList }], ngImport: i0, template: `
         <div class="kbq-tags-list__list-container">
             <ng-content />
         </div>
@@ -1304,7 +1425,7 @@ class KbqTagList {
         }
     `, isInline: true, styles: [".kbq-tag-list{display:flex;flex-direction:row;min-height:var(--kbq-size-xxl);box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.kbq-tag-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-contrast);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagList, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tag-list', template: `
         <div class="kbq-tags-list__list-container">
@@ -1316,7 +1437,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 <ng-content select="kbq-cleaner" />
             </div>
         }
-    `, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+    `, providers: [
+                        { provide: KbqFormFieldControl, useExisting: KbqTagList },
+                        // Tag-list cleaners use consumer-provided click handlers; do not also reset the outer form control.
+                        { provide: KBQ_CLEANER_CONTEXT, useValue: null }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tag-list',
                         '[class.kbq-disabled]': 'disabled',
                         '[class.kbq-invalid]': 'errorState',
@@ -1349,7 +1474,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], errorStateMatcher: [{
                 type: Input
-            }], change: [{ type: i0.Output, args: ["change"] }], cleaner: [{ type: i0.ContentChild, args: ['kbqTagListCleaner', { isSignal: true }] }], tags: [{
+            }], change: [{ type: i0.Output, args: ["change"] }], cleaner: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqCleaner), { ...{ descendants: false }, isSignal: true }] }], tags: [{
                 type: ContentChildren,
                 args: [forwardRef(() => KbqTag), {
                         // Need to use `descendants: true`,
@@ -1358,13 +1483,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                     }]
             }] } });
 
-const KBQ_TAG_INPUT_DEFAULT_SEPARATORS = {
-    [ENTER$1]: { symbol: /\r?\n/, key: 'Enter' },
-    [TAB$1]: { symbol: /\t/, key: 'Tab' },
-    [SPACE$1]: { symbol: / /, key: ' ' },
-    [COMMA]: { symbol: /,/, key: ',' },
-    [SEMICOLON]: { symbol: /;/, key: ';' }
-};
+const KBQ_TAG_INPUT_DEFAULT_SEPARATORS = [
+    { symbol: /\r?\n/, key: 'Enter', keyCode: ENTER$1 },
+    { symbol: /\t/, key: 'Tab', keyCode: TAB$1 },
+    { symbol: / /, key: ' ', keyCode: SPACE$1 },
+    { symbol: /,/, key: ',', keyCode: COMMA },
+    { symbol: /;/, key: ';', keyCode: SEMICOLON }
+];
+const KBQ_TAGS_DEFAULT_OPTIONS_CONFIG = { separatorKeyCodes: [ENTER$1] };
+/** Injection token to be used to override the default options. */
+const KBQ_TAGS_DEFAULT_OPTIONS = new InjectionToken('kbq-tags-default-options', {
+    providedIn: 'root',
+    factory: () => KBQ_TAGS_DEFAULT_OPTIONS_CONFIG
+});
+/** Utility provider for `KBQ_TAGS_DEFAULT_OPTIONS`. */
+const kbqTagsDefaultOptionsProvider = (options) => ({
+    provide: KBQ_TAGS_DEFAULT_OPTIONS,
+    useValue: { ...KBQ_TAGS_DEFAULT_OPTIONS_CONFIG, ...options }
+});
 // Increasing integer for generating unique ids.
 let nextUniqueId = 0;
 /**
@@ -1382,12 +1518,14 @@ class KbqTagInput {
     set separatorKeyCodes(value) {
         this._separatorKeyCodes = value || [];
     }
-    /** @docs-private */
+    /**
+     * The effective set of separators: entries gated by `keyCode` are included only when that
+     * code is present in `separatorKeyCodes`; entries without a `keyCode` (no single-keystroke
+     * equivalent, e.g. a run of whitespace) are always included.
+     * @docs-private
+     */
     get separators() {
-        return this._separatorKeyCodes.reduce((acc, key) => {
-            const separator = this.getSeparatorByKeyCode(key);
-            return separator ? [...acc, separator] : acc;
-        }, []);
+        return this._separators.filter((separator) => separator.keyCode === undefined || this._separatorKeyCodes.includes(separator.keyCode));
     }
     /** Register input for tag list */
     // TODO: Skipped for migration because:
@@ -1426,10 +1564,28 @@ class KbqTagInput {
         this.elementRef = inject(ElementRef);
         this.defaultOptions = inject(KBQ_TAGS_DEFAULT_OPTIONS);
         this.trimDirective = inject(KbqTrim, { optional: true, self: true });
+        /**
+         * The form control instance bound to the input, if any.
+         *
+         * @deprecated Read only, and unused by the library: validation lives on the `<kbq-tag-list>`
+         * control. Binding `[formControl]`/`[ngModel]` to the input itself stays supported — it is what
+         * `kbqAutocomplete` drives the input through — only its validators are not consulted.
+         * Will be removed in a future major release.
+         * @docs-private
+         */
         this.ngControl = inject(NgControl, { optional: true, self: true });
+        /**
+         * The autocomplete trigger attached to the input, if any.
+         * @docs-private
+         */
         this.autocompleteTrigger = inject(KbqAutocompleteTrigger, { optional: true, self: true });
-        /** Whether the control is focused. */
+        /**
+         * Whether the control is focused.
+         * @docs-private
+         */
         this.focused = false;
+        /** Whether the control's value was filled in by the browser. */
+        this.autofilled = kbqInjectAutofilled();
         this._separatorKeyCodes = this.defaultOptions.separatorKeyCodes;
         this._separators = this.defaultOptions.separators || KBQ_TAG_INPUT_DEFAULT_SEPARATORS;
         /** Emitted when a tag is to be added. */
@@ -1464,9 +1620,9 @@ class KbqTagInput {
     }
     /** @docs-private */
     onKeydown(event) {
-        const isSeparatorKey = this.isSeparatorKey(event);
+        const isSeparatorKey = this.matchesInputSeparator(event);
         if (!this.inputElement.value) {
-            if (isSeparatorKey) {
+            if (isSeparatorKey && event.keyCode !== TAB$1) {
                 event.preventDefault();
             }
             this._tagList.keydown(event);
@@ -1483,68 +1639,66 @@ class KbqTagInput {
             event.preventDefault();
         }
     }
-    /** Checks to see if the blur should emit the (tagEnd) event. */
+    /**
+     * Checks to see if the blur should emit the (tagEnd) event.
+     * @docs-private
+     */
     blur(event) {
         this.focused = false;
         // Blur the tag list if it is not focused
         if (!this._tagList.focused) {
-            this.triggerValidation();
             this._tagList.blur();
         }
-        if (this.addOnBlur && (this.autocompleteTrigger?.onInputBlur()(event) || true)) {
+        // Chromium fires `blur` synchronously when the input becomes disabled, so without this
+        // guard disabling a focused tag input would append whatever was typed.
+        if (!this.disabled && this.addOnBlur && (this.autocompleteTrigger?.onInputBlur()(event) ?? true)) {
             this.emitTagEnd();
         }
         this._tagList.stateChanges.next();
     }
-    triggerValidation() {
-        if (!this.hasControl()) {
-            return;
-        }
-        this.ngControl.statusChanges.emit(this.ngControl.status);
-    }
-    /** Checks to see if the (tagEnd) event needs to be emitted. */
+    /**
+     * @deprecated No-op. Validation belongs to the `<kbq-tag-list>` form control, which
+     * revalidates itself whenever its value changes. Will be removed in a future major release.
+     * @docs-private
+     */
+    triggerValidation() { }
+    /**
+     * Checks to see if the (tagEnd) event needs to be emitted.
+     * @docs-private
+     */
     emitTagEnd() {
-        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) });
-        }
+        this.addTag(this.trimValue(this.inputElement.value), this.existingTagValues());
     }
+    /**
+     * Whether the current input value duplicates an existing tag.
+     * @docs-private
+     */
     get hasDuplicates() {
-        return this._tagList.tags
-            .map(({ value }) => value)
-            .some((tagValue) => tagValue === this.trimValue(this.inputElement.value));
+        return this.tagValues().has(this.trimValue(this.inputElement.value));
     }
+    /** @docs-private */
     onInput() {
         // Let tag list know whenever the value changes.
         this._tagList.stateChanges.next();
     }
+    /** @docs-private */
     onPaste($event) {
         if (!$event.clipboardData) {
             return;
         }
         const data = $event.clipboardData.getData('text');
-        if ((data && data.length === 0) || !this.addOnPaste()) {
+        if (!data || !this.addOnPaste()) {
             return;
         }
-        const separatorsInString = this.getSeparatorsForString(data);
+        const separatorsInString = this.getPasteSeparatorPatterns(data);
         // prettier-ignore
         const dividedString = separatorsInString.length > 0 ?
             [...data.split(new RegExp(`${separatorsInString.join('|')}`))] :
             [data];
-        let items = dividedString.map((item) => this.trimValue(item));
-        if (items.length === 0) {
-            items.push(data);
-        }
-        if (this.distinct()) {
-            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 }));
+        // Built once per paste, then updated as items are accepted, so a batch also dedupes
+        // against itself — `tags` is a QueryList that cannot refresh between iterations.
+        const existingValues = this.existingTagValues();
+        dividedString.forEach((item) => this.addTag(this.trimValue(item), existingValues));
         $event.preventDefault();
         $event.stopPropagation();
     }
@@ -1558,32 +1712,49 @@ class KbqTagInput {
     focus() {
         this.inputElement.focus();
     }
-    getSeparatorsForString(value) {
+    getPasteSeparatorPatterns(value) {
         return this.separators
-            .filter((separator) => value.search(separator.symbol) > -1)
+            .filter((separator) => (!separator.appliesTo || separator.appliesTo.includes('paste')) &&
+            value.search(separator.symbol) > -1)
             .map((separator) => separator.symbol.source);
     }
-    trimValue(value) {
-        return this.trimDirective ? this.trimDirective.trim(value) : value;
-    }
-    getSeparatorByKeyCode(keyCode) {
-        const sep = this._separators[keyCode];
-        if (sep) {
-            return sep;
+    /**
+     * Single path for adding a tag, shared by typed input, blur and paste.
+     * `existingValues` is `null` unless `distinct` is on, and is mutated as values are accepted.
+     */
+    addTag(value, existingValues) {
+        if (existingValues) {
+            if (existingValues.has(value))
+                return;
+            existingValues.add(value);
+        }
+        // An empty value adds nothing, so latching the flag here would make the next
+        // programmatic tags update look UI-initiated.
+        if (value) {
+            this._tagList?.notifyPendingTagChange();
         }
-        return null;
+        this.tagEnd.emit({ input: this.inputElement, value });
+    }
+    /** Values to dedupe against, or `null` when duplicates are allowed. */
+    existingTagValues() {
+        return this.distinct() ? this.tagValues() : null;
+    }
+    tagValues() {
+        return new Set(this._tagList.tags.map(({ value }) => value));
     }
-    hasControl() {
-        return !!this.ngControl;
+    trimValue(value) {
+        return (this.trimDirective ? this.trimDirective.trim(value) : value);
     }
-    /** Checks whether a keycode is one of the configured separators. */
-    isSeparatorKey(event) {
-        return this.separators.some((separator) => separator.key === event.key && !hasModifierKey(event));
+    /** Checks whether a keydown event matches a separator that applies to typed input. */
+    matchesInputSeparator(event) {
+        return this.separators.some((separator) => separator.key === event.key &&
+            !hasModifierKey(event) &&
+            (!separator.appliesTo || separator.appliesTo.includes('input')));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqTagInput, isStandalone: true, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: { classPropertyName: "separatorKeyCodes", publicName: "kbqTagInputSeparatorKeyCodes", isSignal: false, isRequired: false, transformFunction: null }, distinct: { classPropertyName: "distinct", publicName: "distinct", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, tagList: { classPropertyName: "tagList", publicName: "kbqTagInputFor", isSignal: false, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "kbqTagInputAddOnBlur", isSignal: false, isRequired: false, transformFunction: null }, addOnPaste: { classPropertyName: "addOnPaste", publicName: "kbqTagInputAddOnPaste", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.30", type: KbqTagInput, isStandalone: true, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: { classPropertyName: "separatorKeyCodes", publicName: "kbqTagInputSeparatorKeyCodes", isSignal: false, isRequired: false, transformFunction: null }, distinct: { classPropertyName: "distinct", publicName: "distinct", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, tagList: { classPropertyName: "tagList", publicName: "kbqTagInputFor", isSignal: false, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "kbqTagInputAddOnBlur", isSignal: false, isRequired: false, transformFunction: null }, addOnPaste: { classPropertyName: "addOnPaste", publicName: "kbqTagInputAddOnPaste", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, 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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kbqTagInputFor]',
@@ -1623,8 +1794,8 @@ const COMPONENTS = [
     KbqTagEditInput
 ];
 class KbqTagsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqTagsModule, imports: [PlatformModule, KbqTagEditSubmit,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.30", ngImport: i0, type: KbqTagsModule, imports: [PlatformModule, KbqTagEditSubmit,
             KbqTagEditInput, KbqTagList,
             KbqTag,
             KbqTagInput,
@@ -1637,14 +1808,9 @@ class KbqTagsModule {
             KbqTagAvatar,
             KbqTagRemove, KbqTagEditSubmit,
             KbqTagEditInput] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagsModule, providers: [
-            {
-                provide: KBQ_TAGS_DEFAULT_OPTIONS,
-                useValue: { separatorKeyCodes: [ENTER$1] }
-            }
-        ], imports: [PlatformModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagsModule, providers: [kbqTagsDefaultOptionsProvider({ separatorKeyCodes: [ENTER$1] })], imports: [PlatformModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.30", ngImport: i0, type: KbqTagsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1657,12 +1823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         KbqTagAvatar,
                         KbqTagRemove
                     ],
-                    providers: [
-                        {
-                            provide: KBQ_TAGS_DEFAULT_OPTIONS,
-                            useValue: { separatorKeyCodes: [ENTER$1] }
-                        }
-                    ],
+                    providers: [kbqTagsDefaultOptionsProvider({ separatorKeyCodes: [ENTER$1] })],
                     exports: [
                         KbqTagList,
                         KbqTag,
@@ -1679,5 +1840,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_TAGS_DEFAULT_OPTIONS, KbqTag, KbqTagAvatar, KbqTagEditChange, KbqTagEditInput, KbqTagEditSubmit, KbqTagInput, KbqTagList, KbqTagListChange, KbqTagRemove, KbqTagSelectionChange, KbqTagTrailingIcon, KbqTagsModule };
+export { KBQ_TAGS_DEFAULT_OPTIONS, KbqTag, KbqTagAvatar, KbqTagEditChange, KbqTagEditInput, KbqTagEditSubmit, KbqTagInput, KbqTagList, KbqTagListChange, KbqTagRemove, KbqTagSelectionChange, KbqTagTrailingIcon, KbqTagsModule, kbqTagsDefaultOptionsProvider };
 //# sourceMappingURL=koobiq-components-tags.mjs.map