@koobiq/components 18.35.0 → 18.36.0

package/fesm2022/koobiq-components-tags.mjs

@@ -1,21 +1,22 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, inject, EventEmitter, signal, booleanAttribute, ElementRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, Output, ViewChild, ContentChildren, forwardRef, Inject, DestroyRef, Optional, Self, NgModule } from '@angular/core';
+import { InjectionToken, Directive, inject, DestroyRef, ElementRef, EventEmitter, signal, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, Output, ViewChild, ContentChildren, forwardRef, Inject, Optional, Self, NgModule } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i3 from '@angular/forms';
-import { BACKSPACE as BACKSPACE$1, HOME, END, ENTER as ENTER$1, TAB, SPACE as SPACE$1, COMMA, SEMICOLON } from '@koobiq/cdk/keycodes';
+import { hasModifierKey, isSelectAll, ENTER as ENTER$1, TAB, SPACE as SPACE$1, COMMA, SEMICOLON } from '@koobiq/cdk/keycodes';
 import * as i3$1 from '@koobiq/components/autocomplete';
 import * as i1 from '@koobiq/components/core';
-import { KbqFieldSizingContent, KbqColorDirective, isUndefined, kbqInjectElementRef, KbqComponentColors, isNull, KBQ_TITLE_TEXT_REF, isBoolean } from '@koobiq/components/core';
+import { KbqFieldSizingContent, KbqColorDirective, KbqComponentColors, isNull, KBQ_TITLE_TEXT_REF, KbqHovered, isBoolean } from '@koobiq/components/core';
 import * as i1$1 from '@koobiq/components/form-field';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
-import * as i2 from '@angular/cdk/bidi';
-import { SelectionModel } from '@angular/cdk/collections';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import * as i2$1 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, HOME, END } from '@angular/cdk/keycodes';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
-import { Subject, merge } from 'rxjs';
-import { take, startWith, filter } from 'rxjs/operators';
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { SPACE, DELETE, BACKSPACE, ENTER, ESCAPE, F2 } from '@angular/cdk/keycodes';
+import { Subject, debounceTime, merge } from 'rxjs';
+import { startWith, filter } from 'rxjs/operators';
 import { KbqIcon } from '@koobiq/components/icon';
 import { PlatformModule } from '@angular/cdk/platform';
 
@@ -49,10 +50,10 @@ const getTagEditInputMissingError = () => {
  * @docs-private
  */
 class KbqTagAvatar {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqTagAvatar, selector: "kbq-tag-avatar, [kbqTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqTagAvatar, selector: "kbq-tag-avatar, [kbqTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagAvatar, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tag-avatar, [kbqTagAvatar]',
@@ -64,10 +65,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * @docs-private
  */
 class KbqTagTrailingIcon {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqTagTrailingIcon, 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: "18.2.14", ngImport: i0, type: KbqTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqTagTrailingIcon, selector: "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", host: { classAttribute: "kbq-tag-trailing-icon" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagTrailingIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagTrailingIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tag-trailing-icon, [kbqTagTrailingIcon]',
@@ -82,10 +83,10 @@ class KbqTagEditSubmit {
         /** @docs-private */
         this.tag = inject(KbqTag);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagEditSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.14", ngImport: i0, type: KbqTagEditSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", 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: "18.2.13", ngImport: i0, type: KbqTagEditSubmit, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagEditSubmit, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -118,20 +119,20 @@ class KbqTagEditInput {
                 this.tag.submitEditing('enter');
                 break;
             }
-            // prevent KbqTag from receiving these keydown events
+            // We should prevent KbqTag from receiving these keydown events
             case BACKSPACE:
-            case DELETE:
-            case SPACE: {
+            case SPACE:
+            case DELETE: {
                 event.stopPropagation();
                 break;
             }
             default:
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($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: "18.2.14", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagEditInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagEditInput, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -145,17 +146,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 class KbqTag extends KbqColorDirective {
-    /**
-     * Whether the tag list is editable.
-     *
-     * @docs-private
-     */
-    get tagListEditable() {
-        return !!this.tagList?.editable;
-    }
     /** Whether the tag is editable. */
     get editable() {
-        return isUndefined(this._editable) ? this.tagListEditable : this._editable;
+        return this._editable ?? !!this.tagList?.editable;
     }
     set editable(value) {
         this._editable = value;
@@ -165,11 +158,7 @@ class KbqTag extends KbqColorDirective {
         return this._selected;
     }
     set selected(value) {
-        const coercedValue = coerceBooleanProperty(value);
-        if (coercedValue !== this._selected) {
-            this._selected = coercedValue;
-            this.dispatchSelectionChange();
-        }
+        this.setSelectedState(value, { emitEvent: true });
     }
     /** The value of the tag. Defaults to the content inside `<kbq-tag>` tags. */
     get value() {
@@ -185,19 +174,19 @@ class KbqTag extends KbqColorDirective {
      * not selectable.
      */
     get selectable() {
-        return this._selectable && this.tagListSelectable;
+        return this._selectable && (this.tagList?.selectable ?? true);
     }
     set selectable(value) {
-        this._selectable = coerceBooleanProperty(value);
+        this._selectable = value;
     }
     /**
-     * Determines whether or not the tag displays the remove styling and emits (removed) events.
+     * Determines whether the tag is removable.
      */
     get removable() {
-        return this._removable;
+        return this._removable && (this.tagList?.removable ?? true);
     }
     set removable(value) {
-        this._removable = coerceBooleanProperty(value);
+        this._removable = value;
     }
     get tabindex() {
         return this.disabled ? null : this._tabindex;
@@ -205,32 +194,54 @@ class KbqTag extends KbqColorDirective {
     set tabindex(value) {
         this._tabindex = value;
     }
+    /**
+     * Whether the tag is disabled.
+     */
     get disabled() {
-        return this._disabled;
+        return this._disabled || (this.tagList?.disabled ?? false);
     }
     set disabled(value) {
-        if (value !== this.disabled) {
-            this._disabled = value;
-        }
+        this._disabled = value;
+        this.syncDragDisabledState();
     }
-    constructor(changeDetectorRef, _ngZone) {
+    /**
+     * Whether the tag is draggable.
+     *
+     * @docs-private
+     */
+    get draggable() {
+        return (this.tagList?.draggable ?? false) && !this.disabled;
+    }
+    constructor(changeDetectorRef) {
         super();
         this.changeDetectorRef = changeDetectorRef;
-        this._ngZone = _ngZone;
         this.focusMonitor = inject(FocusMonitor);
         this.tagList = inject(KbqTagList, { optional: true });
+        this.drag = inject(CdkDrag, { host: true });
+        this.destroyRef = inject(DestroyRef);
         /** @docs-private */
-        this.elementRef = kbqInjectElementRef();
-        /** Emits when the tag is focused. */
+        this.elementRef = inject(ElementRef);
+        /**
+         * Emits when the tag is focused.
+         *
+         * @docs-private
+         */
         this.onFocus = new Subject();
-        /** Emits when the tag is blurred. */
+        /**
+         * Emits when the tag is blurred.
+         *
+         * @docs-private
+         */
         this.onBlur = new Subject();
         /** @docs-private */
         this.nativeElement = this.elementRef.nativeElement;
-        /** Whether the tag has focus. */
+        /**
+         * Whether the tag has focus.
+         *
+         * @docs-private
+         */
         this.hasFocus = false;
-        /** Whether the tag list is selectable */
-        this.tagListSelectable = true;
+        this.focusOrigin = null;
         /** Whether the tag edits can't be submitted. */
         this.preventEditSubmit = false;
         /**
@@ -255,19 +266,20 @@ class KbqTag extends KbqColorDirective {
         this.color = KbqComponentColors.ContrastFade;
         this.setDefaultColor(KbqComponentColors.ContrastFade);
         this.addHostClassName();
+        this.setupDragInitialProperties();
     }
     ngAfterContentInit() {
         this.addClassModificatorForIcons();
     }
     ngAfterViewInit() {
-        this.focusMonitor.monitor(this.elementRef, true).subscribe((focusOrigin) => {
-            isNull(focusOrigin) ? this.blur() : this.focus();
-        });
+        this.setupFocusMonitor();
     }
     ngOnDestroy() {
+        this.cancelEditing('destroy');
         this.focusMonitor.stopMonitoring(this.elementRef);
         this.destroyed.emit({ tag: this });
     }
+    /** @docs-private */
     addClassModificatorForIcons() {
         const icons = this.contentChildren.map((item) => item.elementRef.nativeElement);
         if (icons.length === 1) {
@@ -288,6 +300,7 @@ class KbqTag extends KbqColorDirective {
             secondIconElement.classList.add('kbq-icon_right');
         }
     }
+    /** @docs-private */
     addHostClassName() {
         // Add class for the different tags
         for (const attr of TAG_ATTRIBUTE_NAMES) {
@@ -299,42 +312,46 @@ class KbqTag extends KbqColorDirective {
         }
         this.elementRef.nativeElement.classList.add('kbq-standard-tag');
     }
+    /**
+     * Selects the tag.
+     */
     select() {
-        if (!this._selected) {
-            this._selected = true;
-            this.dispatchSelectionChange();
-        }
+        if (this.disabled || !this.selectable)
+            return;
+        this.setSelectedState(true, { emitEvent: true });
     }
+    /**
+     * Deselects the tag.
+     */
     deselect() {
-        if (this._selected) {
-            this._selected = false;
-            this.dispatchSelectionChange();
-        }
+        if (this.disabled || !this.selectable)
+            return;
+        this.setSelectedState(false, { emitEvent: true });
     }
+    /**
+     * Selects the tag and emits event with isUserInput flag.
+     *
+     * @docs-private
+     */
     selectViaInteraction() {
-        if (!this._selected) {
-            this._selected = true;
-            this.dispatchSelectionChange(true);
-        }
+        if (this.disabled || !this.selectable)
+            return;
+        this.setSelectedState(true, { isUserInput: true, emitEvent: true });
     }
+    /**
+     * Toggles the current selected state of the tag.
+     */
     toggleSelected(isUserInput = false) {
-        this._selected = !this.selected;
-        this.dispatchSelectionChange(isUserInput);
+        if (this.disabled || !this.selectable)
+            return this.selected;
+        this.setSelectedState(!this.selected, { isUserInput, emitEvent: true });
         return this.selected;
     }
-    /** Allows for programmatic focusing of the tag. */
+    /** Focuses the tag. */
     focus() {
-        if (!this.selectable && !this.editable)
+        if (this.disabled)
             return;
-        if (!this.hasFocus) {
-            if (!this.editing())
-                this.elementRef.nativeElement.focus();
-            this.onFocus.next({ tag: this });
-            Promise.resolve().then(() => {
-                this.hasFocus = true;
-                this.changeDetectorRef.markForCheck();
-            });
-        }
+        this.elementRef.nativeElement.focus();
     }
     /**
      * Allows for programmatic removal of the tag. Called by the KbqTagList when the DELETE or
@@ -349,34 +366,33 @@ class KbqTag extends KbqColorDirective {
     }
     /** @docs-private */
     handleMousedown(event) {
-        if (this.disabled || !this.selectable) {
-            event.preventDefault();
-        }
-        else {
-            event.stopPropagation();
-        }
+        if (this.disabled || (!this.selectable && !this.editable) || this.editing())
+            return event.preventDefault();
+        if (hasModifierKey(event, 'metaKey', 'ctrlKey', 'shiftKey') && this.selectable)
+            this.toggleSelected(true);
+        event.stopPropagation();
     }
     /** @docs-private */
     handleKeydown(event) {
-        if (this.disabled) {
+        if (this.disabled || this.editing())
             return;
-        }
         switch (event.keyCode) {
             case DELETE:
-            case BACKSPACE:
-                // If we are removable, remove the focused tag
-                this.remove();
+            case BACKSPACE: {
+                const hasSelectedTags = this.tagList &&
+                    (Array.isArray(this.tagList.selected) ? this.tagList.selected.length > 0 : !!this.tagList.selected);
+                // If there is a tag list and it has selected tags, remove them, otherwise remove focused tag.
+                hasSelectedTags ? this.tagList.removeSelected() : this.remove();
                 // Always prevent so page navigation does not occur
                 event.preventDefault();
                 break;
-            case SPACE:
-                // If we are selectable, toggle the focused tag
-                if (this.selectable) {
-                    this.toggleSelected(true);
-                }
+            }
+            case SPACE: {
+                this.toggleSelected(true);
                 // Always prevent space from scrolling the page since the list has focus
                 event.preventDefault();
                 break;
+            }
             case F2:
             case ENTER:
                 this.startEditing(event.key);
@@ -386,20 +402,7 @@ class KbqTag extends KbqColorDirective {
     }
     /** @docs-private */
     blur() {
-        this.cancelEditing('focusout');
-        // When animations are enabled, Angular may end up removing the tag from the DOM a little
-        // earlier than usual, causing it to be blurred and throwing off the logic in the tag list
-        // that moves focus not the next item. To work around the issue, we defer marking the tag
-        // as not focused until the next time the zone stabilizes.
-        this._ngZone.onStable
-            .asObservable()
-            .pipe(take(1))
-            .subscribe(() => {
-            this._ngZone.run(() => {
-                this.hasFocus = false;
-                this.onBlur.next({ tag: this });
-            });
-        });
+        this.elementRef.nativeElement.blur();
     }
     /** @docs-private */
     handleDblClick(event) {
@@ -417,7 +420,6 @@ class KbqTag extends KbqColorDirective {
             const input = this.editInputElementRef?.nativeElement;
             if (!input)
                 throw getTagEditInputMissingError();
-            input.focus();
             input.select();
         });
     }
@@ -427,7 +429,7 @@ class KbqTag extends KbqColorDirective {
             return;
         this.editing.set(false);
         this.editChange.emit({ tag: this, type: 'cancel', reason });
-        this.textElement.nativeElement.scrollTo({ left: 0, behavior: 'instant' });
+        this.textElement.nativeElement.scrollTo?.({ left: 0, behavior: 'instant' });
     }
     /** @docs-private */
     submitEditing(reason) {
@@ -435,17 +437,70 @@ class KbqTag extends KbqColorDirective {
             return;
         this.editing.set(false);
         this.editChange.emit({ tag: this, type: 'submit', reason });
-        this.textElement.nativeElement.scrollTo({ left: 0, behavior: 'instant' });
+        this.textElement.nativeElement.scrollTo?.({ left: 0, behavior: 'instant' });
+    }
+    /**
+     * Sets the selected state of the tag.
+     *
+     * @docs-private
+     */
+    setSelectedState(selected, options = {}) {
+        const { isUserInput = false, emitEvent = false } = options;
+        if (selected !== this.selected) {
+            this._selected = selected;
+            if (emitEvent) {
+                this.selectionChange.emit({
+                    source: this,
+                    isUserInput,
+                    selected: this.selected
+                });
+            }
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    setupDragInitialProperties() {
+        this.syncDragDisabledState();
+        this.drag.started.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            this.drag.data = {
+                tag: this,
+                hasFocus: this.hasFocus,
+                focusOrigin: this.focusOrigin
+            };
+        });
     }
-    dispatchSelectionChange(isUserInput = false) {
-        this.selectionChange.emit({
-            source: this,
-            isUserInput,
-            selected: this._selected
+    syncDragDisabledState() {
+        this.drag.disabled = !this.draggable;
+    }
+    setupFocusMonitor() {
+        this.focusMonitor
+            .monitor(this.elementRef, true)
+            .pipe(
+        // Debounce to ensure correct hasFocus and focusOrigin state during drag start operations
+        debounceTime(0))
+            .subscribe((origin) => {
+            if (this.disabled)
+                return;
+            this.focusOrigin = origin;
+            const hasFocus = !isNull(origin);
+            if (hasFocus !== this.hasFocus) {
+                this.hasFocus = hasFocus;
+                if (this.hasFocus) {
+                    this.onFocus.next({ tag: this });
+                    if (!this.tagList)
+                        this.select();
+                }
+                else {
+                    this.onBlur.next({ tag: this });
+                    this.cancelEditing('blur');
+                    if (!this.tagList)
+                        this.deselect();
+                }
+                this.changeDetectorRef.markForCheck();
+            }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTag, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { editable: ["editable", "editable", booleanAttribute], preventEditSubmit: ["preventEditSubmit", "preventEditSubmit", booleanAttribute], selected: "selected", value: "value", selectable: "selectable", removable: "removable", tabindex: "tabindex", disabled: "disabled" }, outputs: { editChange: "editChange", selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "dblclick": "handleDblClick($event)", "mousedown": "handleMousedown($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "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()" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "editInputElementRef", first: true, predicate: KbqTagEditInput, descendants: true, read: ElementRef }, { propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(() => KbqTagRemove), descendants: true }, { propertyName: "contentChildren", predicate: KbqIcon }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqTag"], usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTag, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { editable: ["editable", "editable", booleanAttribute], preventEditSubmit: ["preventEditSubmit", "preventEditSubmit", booleanAttribute], selected: ["selected", "selected", booleanAttribute], value: "value", selectable: ["selectable", "selectable", booleanAttribute], removable: ["removable", "removable", booleanAttribute], tabindex: "tabindex", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { editChange: "editChange", selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "dblclick": "handleDblClick($event)", "mousedown": "handleMousedown($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 }, { propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(() => KbqTagRemove), descendants: true }, { propertyName: "contentChildren", predicate: KbqIcon }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqTag"], usesInheritance: true, hostDirectives: [{ directive: i1.KbqHovered }, { 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">
@@ -458,14 +513,16 @@ class KbqTag extends KbqColorDirective {
             @if (editing()) {
                 <ng-content select="[kbqTagEditSubmit]" />
             } @else {
-                <ng-content select="[kbqTagRemove]" />
+                @if (removable) {
+                    <ng-content select="[kbqTagRemove]" />
+                }
             }
         </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%;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;min-width:var(--kbq-size-xs);max-width:100%}.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.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__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, 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;min-width:var(--kbq-size-xs);max-width:100%}.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.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: "18.2.13", ngImport: i0, type: KbqTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTag, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]', exportAs: 'kbqTag', template: `
+            args: [{ selector: 'kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]', exportAs: 'kbqTag', hostDirectives: [KbqHovered, CdkDrag], template: `
         <div class="kbq-tag__wrapper">
             <ng-content select="[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])" />
             <span #kbqTitleText class="kbq-tag__text">
@@ -478,7 +535,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             @if (editing()) {
                 <ng-content select="[kbqTagEditSubmit]" />
             } @else {
-                <ng-content select="[kbqTagRemove]" />
+                @if (removable) {
+                    <ng-content select="[kbqTagRemove]" />
+                }
             }
         </div>
     `, host: {
@@ -486,18 +545,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[attr.tabindex]': 'tabindex',
                         '[attr.disabled]': 'disabled || null',
                         '[class.kbq-selected]': 'selected',
-                        '[class.kbq-focused]': 'hasFocus',
                         '[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',
                         '(dblclick)': 'handleDblClick($event)',
                         '(mousedown)': 'handleMousedown($event)',
                         '(keydown)': 'handleKeydown($event)'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], 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%;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;min-width:var(--kbq-size-xs);max-width:100%}.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.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__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { editable: [{
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], 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;min-width:var(--kbq-size-xs);max-width:100%}.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.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"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { editable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], preventEditSubmit: [{
@@ -530,17 +591,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], removed: [{
                 type: Output
             }], selected: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], value: [{
                 type: Input
             }], selectable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], removable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], tabindex: [{
                 type: Input
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }] } });
 /**
  *
@@ -557,10 +622,15 @@ class KbqTagRemove {
     constructor(parentTag) {
         this.parentTag = parentTag;
     }
-    focus($event) {
-        $event.stopPropagation();
+    /** @docs-private */
+    focus(event) {
+        event.stopPropagation();
     }
-    /** Calls the parent tag's public `remove()` method if applicable. */
+    /**
+     * Calls the parent tag's public `remove()` method if applicable.
+     *
+     * @docs-private
+     */
     handleClick(event) {
         if (this.parentTag.removable) {
             this.parentTag.hasFocus = true;
@@ -573,10 +643,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: "18.2.13", ngImport: i0, type: KbqTagRemove, deps: [{ token: forwardRef(() => KbqTag) }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqTagRemove, 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: "18.2.14", ngImport: i0, type: KbqTagRemove, deps: [{ token: forwardRef(() => KbqTag) }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqTagRemove, 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: "18.2.13", ngImport: i0, type: KbqTagRemove, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagRemove, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTagRemove]',
@@ -622,35 +692,19 @@ class KbqTagList {
     get tagEditChanges() {
         return merge(...this.tags.map((tag) => tag.editChange));
     }
-    /** The array of selected tags inside tag list. */
+    /**
+     * The array of selected tags inside tag list.
+     *
+     * @docs-private
+     */
     get selected() {
-        return this.multiple ? this.selectionModel.selected : this.selectionModel.selected[0];
+        const selected = this.tags.filter(({ selected }) => selected);
+        return this.multiple ? selected : selected[0];
     }
+    /** @docs-private */
     get canShowCleaner() {
         return this.cleaner && this.tags.length > 0;
     }
-    /** Whether the user should be allowed to select multiple tags. */
-    get multiple() {
-        return this._multiple;
-    }
-    set multiple(value) {
-        this._multiple = coerceBooleanProperty(value);
-    }
-    /**
-     * A function to compare the option values with the selected values. The first argument
-     * is a value from an option. The second is a value from the selection. A boolean
-     * should be returned.
-     */
-    get compareWith() {
-        return this._compareWith;
-    }
-    set compareWith(fn) {
-        this._compareWith = fn;
-        if (this.selectionModel) {
-            // A different comparator means the selection could change.
-            this.initializeSelection();
-        }
-    }
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
@@ -659,7 +713,6 @@ class KbqTagList {
         return this._value;
     }
     set value(value) {
-        this.writeValue(value);
         this._value = value;
     }
     /**
@@ -717,19 +770,23 @@ class KbqTagList {
         return this.ngControl ? !!this.ngControl.disabled : this._disabled;
     }
     set disabled(value) {
-        this._disabled = coerceBooleanProperty(value);
-        this.syncTagsDisabledState();
+        this._disabled = value;
+        this.syncDropListDisabledState();
     }
-    /**
-     * Whether or not this tag list is selectable. When a tag list is not selectable,
-     * the selected states for all the tags inside the tag list are always ignored.
-     */
-    get selectable() {
-        return this._selectable;
+    get draggable() {
+        return this._draggable && !this.disabled;
     }
-    set selectable(value) {
-        this._selectable = coerceBooleanProperty(value);
-        this.propagateSelectableToChildren();
+    set draggable(value) {
+        this._draggable = value;
+        this.syncDropListDisabledState();
+    }
+    /** Whether the tags in the list are removable. */
+    get removable() {
+        return this._removable;
+    }
+    set removable(value) {
+        this._removable = value;
+        this.syncTagsRemovableState();
     }
     get tabIndex() {
         return this._tabIndex;
@@ -746,6 +803,14 @@ class KbqTagList {
         this.parentForm = parentForm;
         this.parentFormGroup = parentFormGroup;
         this.ngControl = ngControl;
+        this.dropList = inject(CdkDropList, { host: true });
+        this.destroyRef = inject(DestroyRef);
+        this.focusMonitor = inject(FocusMonitor);
+        /**
+         * Implemented as part of KbqFormFieldControl.
+         *
+         * @docs-private
+         */
         this.controlType = 'tag-list';
         /**
          * Emits whenever the component state changes and should cause the parent
@@ -753,8 +818,35 @@ class KbqTagList {
          * @docs-private
          */
         this.stateChanges = new Subject();
-        /** Whether the tag list is editable. */
+        /**
+         * Whether the user should be allowed to select multiple tags.
+         *
+         * NOTE! Component does not support dynamic multiple attribute changes.
+         */
+        this.multiple = false;
+        /**
+         * A function to compare the option values with the selected values. The first argument
+         * is a value from an option. The second is a value from the selection. A boolean
+         * should be returned.
+         *
+         * @deprecated Unused. Will be removed in next major release.
+         */
+        this.compareWith = (o1, o2) => o1 === o2;
+        this._required = false;
+        this._disabled = false;
+        this._draggable = false;
+        /**
+         * Emits when the user drops tag inside tag list container.
+         */
+        this.dropped = new EventEmitter();
+        /**
+         * Whether or not this tag list is selectable. When a tag list is not selectable,
+         * the selected states for all the tags inside the tag list are always ignored.
+         */
+        this.selectable = true;
+        /** Whether the tags in the list are editable. */
         this.editable = false;
+        this._removable = true;
         this._tabIndex = 0;
         /**
          * Event that emits whenever the raw value of the tag-list changes. This is here primarily
@@ -762,40 +854,49 @@ class KbqTagList {
          * @docs-private
          */
         this.valueChange = new EventEmitter();
+        /** @docs-private */
         this.uid = `kbq-tag-list-${nextUniqueId$1++}`;
         /**
          * User defined tab index.
          * When it is not null, use user defined tab index. Otherwise use tabIndex
+         *
+         * @docs-private
          */
         this.userTabIndex = null;
+        /**
+         * @docs-private
+         *
+         * @deprecated Unused. Will be removed in next major release.
+         */
         this.tagChanges = new EventEmitter();
-        /** Orientation of the tag list. */
+        /**
+         * Orientation of the tag list.
+         *
+         * @deprecated Unused. Will be removed in next major release.
+         */
         this.orientation = 'horizontal';
         /** Event emitted when the selected tag list value has been changed by the user. */
         this.change = new EventEmitter();
-        /** Whether the component is in an error state. */
+        /**
+         * Whether the component is in an error state.
+         *
+         * @docs-private
+         */
         this.errorState = false;
-        this._required = false;
-        this._disabled = false;
-        this._selectable = true;
-        this._multiple = 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;
-        this.destroyRef = inject(DestroyRef);
+        /** @docs-private */
         this.onTouched = () => { };
+        /** @docs-private */
         this.onChange = () => { };
-        this._compareWith = (o1, o2) => o1 === o2;
         if (this.ngControl) {
             this.ngControl.valueAccessor = this;
         }
-    }
-    ngOnInit() {
-        this.selectionModel = new SelectionModel(this.multiple, undefined, false);
-        this.stateChanges.next();
+        this.setupDropListInitialProperties();
     }
     ngDoCheck() {
         if (this.ngControl) {
@@ -828,16 +929,7 @@ class KbqTagList {
         this.tags.changes
             .pipe(startWith(null), takeUntilDestroyed(this.destroyRef))
             .subscribe((currentTags) => {
-            if (this.disabled) {
-                // Since this happens after the content has been
-                // checked, we need to defer it to the next tick.
-                Promise.resolve().then(() => {
-                    this.syncTagsDisabledState();
-                });
-            }
             this.resetTags();
-            // Reset tags selected/deselected status
-            this.initializeSelection();
             // 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
@@ -845,7 +937,6 @@ class KbqTagList {
             // Defer setting the value in order to avoid the "Expression
             // has changed after it was checked" errors from Angular.
             Promise.resolve().then(() => {
-                this.tagChanges.emit(this.tags.toArray());
                 this.stateChanges.next();
                 // do not call on initial
                 if (currentTags) {
@@ -853,12 +944,16 @@ class KbqTagList {
                 }
             });
         });
-        this.propagateSelectableToChildren();
+    }
+    ngAfterViewInit() {
+        this.setupFocusMonitor();
     }
     ngOnDestroy() {
         this.stateChanges.complete();
+        this.focusMonitor.stopMonitoring(this.elementRef);
         this.dropSubscriptions();
     }
+    /** @docs-private */
     updateErrorState() {
         const oldState = this.errorState;
         const parent = this.parentFormGroup || this.parentForm;
@@ -870,7 +965,11 @@ class KbqTagList {
             this.stateChanges.next();
         }
     }
-    /** Associates an HTML input element with this tag list. */
+    /**
+     * Associates an HTML input element with this tag list.
+     *
+     * @docs-private
+     */
     registerInput(inputElement) {
         this.tagInput = inputElement;
         // todo need rethink about it (#DS-3740)
@@ -878,27 +977,34 @@ class KbqTagList {
             inputElement.ngControl.statusChanges.subscribe(() => this.ngControl.control.setErrors(inputElement.ngControl.errors));
         }
     }
-    // Implemented as part of ControlValueAccessor.
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
     writeValue(value) {
-        if (this.tags) {
-            this.setSelectionByValue(value, false);
-        }
+        this.value = value;
     }
-    // Implemented as part of ControlValueAccessor.
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
     registerOnChange(fn) {
         this.onChange = fn;
     }
-    // Implemented as part of ControlValueAccessor.
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    // Implemented as part of ControlValueAccessor.
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
     setDisabledState(isDisabled) {
         this.disabled = isDisabled;
         this.stateChanges.next();
     }
     /**
      * Implemented as part of KbqFormFieldControl.
+     *
      * @docs-private
      */
     onContainerClick(event) {
@@ -936,15 +1042,26 @@ class KbqTagList {
     }
     /**
      * Pass events to the keyboard manager. Available here for tests.
+     *
+     * @docs-private
      */
     keydown(event) {
         const target = event.target;
-        // If they are on an empty input and hit backspace, focus the last tag
-        if (event.keyCode === BACKSPACE$1 && this.isInputEmpty(target)) {
-            this.keyManager.setLastItemActive();
-            event.preventDefault();
+        if (this.disabled || isNull(target))
+            return;
+        const _isSelectAll = this.multiple && this.selectable && isSelectAll(event);
+        if (this.isInputEmpty(target)) {
+            if (event.keyCode === BACKSPACE) {
+                this.keyManager.setLastItemActive();
+                event.preventDefault();
+            }
+            else if (_isSelectAll) {
+                this.selectAll();
+                this.keyManager.setLastItemActive();
+                event.preventDefault();
+            }
         }
-        else if (target && target.classList.contains('kbq-tag')) {
+        else if (this.isTagElement(target)) {
             if (event.keyCode === HOME) {
                 this.keyManager.setFirstItemActive();
                 event.preventDefault();
@@ -953,29 +1070,23 @@ class KbqTagList {
                 this.keyManager.setLastItemActive();
                 event.preventDefault();
             }
+            else if (_isSelectAll) {
+                this.selectAll();
+                this.keyManager.setLastItemActive();
+                event.preventDefault();
+            }
             else {
                 this.keyManager.onKeydown(event);
             }
             this.stateChanges.next();
         }
     }
-    setSelectionByValue(value, isUserInput = true) {
-        this.clearSelection();
-        // @TODO seems like redundant action, need to double check (#DS-3740)
-        this.tags.forEach((tag) => tag.deselect());
-        if (Array.isArray(value)) {
-            value.forEach((currentValue) => this.selectValue(currentValue, isUserInput));
-            this.sortValues();
-        }
-        else {
-            const correspondingTag = this.selectValue(value, isUserInput);
-            // Shift focus to the active item. Note that we shouldn't do this in multiple
-            // mode, because we don't know what tag the user interacted with last.
-            if (correspondingTag && isUserInput) {
-                this.keyManager.setActiveItem(correspondingTag);
-            }
-        }
-    }
+    /**
+     * @docs-private
+     *
+     * @deprecated Unused. Will be removed in next major release.
+     */
+    setSelectionByValue(_value, _isUserInput = true) { }
     /** When blurred, mark the field as touched when focus moved outside the tag list. */
     blur() {
         if (!this.hasFocusedTag()) {
@@ -1009,6 +1120,8 @@ class KbqTagList {
     }
     /**
      * Check the tab index as you should not be allowed to focus an empty list.
+     *
+     * @docs-private
      */
     updateTabIndex() {
         // If we have 0 tags, we should not allow keyboard focus
@@ -1017,6 +1130,8 @@ class KbqTagList {
     /**
      * If the amount of tags changed, we need to update the
      * key manager state and focus the next closest tag.
+     *
+     * @docs-private
      */
     updateFocusForDestroyedTags() {
         if (this.lastDestroyedTagIndex != null) {
@@ -1046,78 +1161,27 @@ class KbqTagList {
         }
         return false;
     }
-    /**
-     * Finds and selects the tag based on its value.
-     * @returns Tag that has the corresponding value.
-     */
-    selectValue(value, isUserInput = true) {
-        const correspondingTag = this.tags.find((tag) => {
-            return tag.value != null && this._compareWith(tag.value, value);
-        });
-        if (correspondingTag) {
-            if (isUserInput) {
-                correspondingTag.selectViaInteraction();
-            }
-            else {
-                correspondingTag.select();
-            }
-            this.selectionModel.select(correspondingTag);
-        }
-        return correspondingTag;
-    }
-    initializeSelection() {
-        // Defer setting the value in order to avoid the "Expression
-        // has changed after it was checked" errors from Angular.
-        Promise.resolve().then(() => {
-            if (this.ngControl || this._value) {
-                this.setSelectionByValue(this.ngControl ? this.ngControl.value : this._value, false);
-                this.stateChanges.next();
-            }
-        });
+    isTagElement(element) {
+        return element.classList.contains('kbq-tag');
+    }
+    selectAll() {
+        this.tags.forEach((tag) => tag.selectViaInteraction());
     }
     /**
-     * Deselects every tag in the list.
-     * @param skip Tag that should not be deselected.
+     * Unselects all tags in the list.
+     *
+     * @docs-private
      */
-    clearSelection(skip) {
-        this.selectionModel.clear();
-        this.tags.forEach((tag) => {
-            if (tag !== skip) {
-                tag.deselect();
-            }
-        });
-        this.stateChanges.next();
+    unselectAll() {
+        this.tags.forEach((tag) => tag.setSelectedState(false));
     }
     /**
-     * Sorts the model values, ensuring that they keep the same
-     * order that they have in the panel.
+     * Removes all selected tags from the list.
+     *
+     * @docs-private
      */
-    sortValues() {
-        if (this._multiple) {
-            this.selectionModel.clear();
-            this.tags.forEach((tag) => {
-                if (tag.selected) {
-                    this.selectionModel.select(tag);
-                }
-            });
-            this.stateChanges.next();
-        }
-    }
-    /** Emits change event to set the model value. */
-    // todo need rethink this method and selection logic (#DS-3740)
-    propagateChanges(fallbackValue) {
-        let valueToEmit;
-        if (Array.isArray(this.selected)) {
-            valueToEmit = this.selected.map((tag) => tag.value);
-        }
-        else {
-            valueToEmit = this.selected ? this.selected.value : fallbackValue;
-        }
-        this._value = valueToEmit;
-        this.change.emit(new KbqTagListChange(this, valueToEmit));
-        this.valueChange.emit(valueToEmit);
-        this.onChange(valueToEmit);
-        this.changeDetectorRef.markForCheck();
+    removeSelected() {
+        Array.isArray(this.selected) ? this.selected.forEach((tag) => tag.remove()) : this.selected.remove();
     }
     propagateTagsChanges() {
         const valueToEmit = this.tags.map((tag) => tag.value);
@@ -1159,23 +1223,12 @@ class KbqTagList {
     /** Listens to user-generated selection events on each tag. */
     listenToTagsSelection() {
         this.tagSelectionSubscription = this.tagSelectionChanges.subscribe((event) => {
-            if (event.source.selected) {
-                this.selectionModel.select(event.source);
-            }
-            else {
-                this.selectionModel.deselect(event.source);
-            }
-            // For single selection tag list, make sure the deselected value is unselected.
             if (!this.multiple) {
                 this.tags.forEach((tag) => {
-                    if (!this.selectionModel.isSelected(tag) && tag.selected) {
-                        tag.deselect();
-                    }
+                    if (tag !== event.source)
+                        tag.setSelectedState(false);
                 });
             }
-            if (event.isUserInput) {
-                this.propagateChanges();
-            }
         });
     }
     /** Listens to user-generated selection events on each tag. */
@@ -1185,10 +1238,14 @@ class KbqTagList {
             if (this.isValidIndex(tagIndex)) {
                 this.keyManager.updateActiveItem(tagIndex);
             }
+            if (!this.multiple)
+                event.tag.select();
             this.stateChanges.next();
         });
-        this.tagBlurSubscription = this.tagBlurChanges.subscribe(() => {
+        this.tagBlurSubscription = this.tagBlurChanges.subscribe((event) => {
             this.blur();
+            if (!this.multiple)
+                event.tag.deselect();
             this.stateChanges.next();
         });
     }
@@ -1213,7 +1270,7 @@ class KbqTagList {
     originatesFromTag(event) {
         let currentElement = event.target;
         while (currentElement && currentElement !== this.elementRef.nativeElement) {
-            if (currentElement.classList.contains('kbq-tag')) {
+            if (this.isTagElement(currentElement)) {
                 return true;
             }
             currentElement = currentElement.parentElement;
@@ -1224,13 +1281,8 @@ class KbqTagList {
     hasFocusedTag() {
         return this.tags.some((tag) => tag.hasFocus);
     }
-    /** Syncs the list's disabled state with the individual tags. */
-    syncTagsDisabledState() {
-        if (this.tags) {
-            this.tags.forEach((tag) => {
-                tag.disabled = this._disabled;
-            });
-        }
+    syncTagsRemovableState() {
+        this.tags?.forEach((tag) => (tag.removable = this.removable));
     }
     /** Revalidate control. */
     revalidate() {
@@ -1240,27 +1292,73 @@ class KbqTagList {
             control.statusChanges.emit(control.status);
         }
     }
-    propagateSelectableToChildren() {
-        if (this.tags) {
-            this.tags.forEach((tag) => (tag.tagListSelectable = this._selectable));
-        }
+    setupDropListInitialProperties() {
+        this.syncDropListDisabledState();
+        this.dropList.elementContainerSelector = '.kbq-tags-list__list-container';
+        this.dropList.orientation = 'mixed';
+        this.dropList.dropped
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(({ currentIndex, previousIndex, event, item }) => {
+            const { tag, hasFocus, focusOrigin } = item.data;
+            this.dropped.emit({ currentIndex, previousIndex, event, tag });
+            if (this.tagInput) {
+                return this.tagInput.focus();
+            }
+            if (hasFocus) {
+                return setTimeout(() => this.focusMonitor.focusVia(tag.nativeElement, focusOrigin));
+            }
+        });
+    }
+    syncDropListDisabledState() {
+        this.dropList.disabled = !this.draggable;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ErrorStateMatcher }, { token: i2.Directionality, optional: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqTagList, selector: "kbq-tag-list", inputs: { multiple: "multiple", compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: "disabled", selectable: "selectable", editable: ["editable", "editable", booleanAttribute], tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, outputs: { valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "attr.tabindex": "disabled ? null : tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTagList"], ngImport: i0, template: "<div class=\"kbq-tags-list__list-container\">\n    <ng-content />\n</div>\n\n@if (canShowCleaner) {\n    <div class=\"kbq-tags-list__cleaner\">\n        <ng-content select=\"kbq-cleaner\" />\n    </div>\n}\n", styles: [".kbq-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-input{border:none;outline:none;background:transparent;text-overflow:ellipsis;min-height:unset;padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:4px;padding-right:unset}.kbq-tag-input.kbq-input{padding:unset;min-height:unset}.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{max-width:100%;flex:1 1 auto}.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))}\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-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-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-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-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 }); }
+    setupFocusMonitor() {
+        this.focusMonitor.monitor(this.elementRef, true).subscribe((origin) => {
+            if (!origin)
+                this.unselectAll();
+        });
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ErrorStateMatcher }, { token: i2$1.Directionality, optional: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqTagList, selector: "kbq-tag-list", inputs: { multiple: ["multiple", "multiple", booleanAttribute], compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: ["disabled", "disabled", booleanAttribute], draggable: ["draggable", "draggable", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], editable: ["editable", "editable", booleanAttribute], removable: ["removable", "removable", booleanAttribute], tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, 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_multiple": "multiple", "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": "disabled ? null : tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTagList"], hostDirectives: [{ directive: i2.CdkDropList }], ngImport: i0, template: `
+        <div class="kbq-tags-list__list-container">
+            <ng-content />
+        </div>
+
+        @if (canShowCleaner) {
+            <div class="kbq-tags-list__cleaner">
+                <ng-content select="kbq-cleaner" />
+            </div>
+        }
+    `, 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{border:none;outline:none;background:transparent;text-overflow:ellipsis;min-height:unset;padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:4px;padding-right:unset}.kbq-tag-input.kbq-input{padding:unset;min-height:unset}.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{max-width:100%;flex:1 1 auto}.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-line-warning);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-white);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-white);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-white);--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: "18.2.13", ngImport: i0, type: KbqTagList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagList, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tag-list', exportAs: 'kbqTagList', host: {
+            args: [{ selector: 'kbq-tag-list', exportAs: 'kbqTagList', template: `
+        <div class="kbq-tags-list__list-container">
+            <ng-content />
+        </div>
+
+        @if (canShowCleaner) {
+            <div class="kbq-tags-list__cleaner">
+                <ng-content select="kbq-cleaner" />
+            </div>
+        }
+    `, host: {
                         class: 'kbq-tag-list',
                         '[class.kbq-disabled]': 'disabled',
                         '[class.kbq-invalid]': 'errorState',
+                        '[class.kbq-tag-list_multiple]': 'multiple',
+                        '[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]': 'disabled ? null : tabIndex',
                         '[id]': 'uid',
                         '(focus)': 'focus()',
                         '(blur)': 'blur()',
                         '(keydown)': 'keydown($event)'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], template: "<div class=\"kbq-tags-list__list-container\">\n    <ng-content />\n</div>\n\n@if (canShowCleaner) {\n    <div class=\"kbq-tags-list__cleaner\">\n        <ng-content select=\"kbq-cleaner\" />\n    </div>\n}\n", styles: [".kbq-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-input{border:none;outline:none;background:transparent;text-overflow:ellipsis;min-height:unset;padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:4px;padding-right:unset}.kbq-tag-input.kbq-input{padding:unset;min-height:unset}.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{max-width:100%;flex:1 1 auto}.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))}\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-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-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-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-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"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ErrorStateMatcher }, { type: i2.Directionality, decorators: [{
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], hostDirectives: [CdkDropList], 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{border:none;outline:none;background:transparent;text-overflow:ellipsis;min-height:unset;padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:4px;padding-right:unset}.kbq-tag-input.kbq-input{padding:unset;min-height:unset}.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{max-width:100%;flex:1 1 auto}.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-line-warning);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-white);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-white);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-white);--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"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ErrorStateMatcher }, { type: i2$1.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i3.NgForm, decorators: [{
                     type: Optional
@@ -1271,7 +1369,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }, {
                     type: Self
                 }] }], propDecorators: { multiple: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], compareWith: [{
                 type: Input
             }], value: [{
@@ -1281,12 +1380,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], placeholder: [{
                 type: Input
             }], disabled: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], draggable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], dropped: [{
+                type: Output
             }], selectable: [{
-                type: Input
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], editable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
+            }], removable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], tabIndex: [{
                 type: Input
             }], valueChange: [{
@@ -1457,13 +1566,12 @@ class KbqTagInput {
         if ((data && data.length === 0) || !this.addOnPaste) {
             return;
         }
-        const items = [];
-        for (const separator of this.separators) {
-            if (data.search(separator.symbol) > -1) {
-                items.push(...data.split(separator.symbol).map((item) => this.trimValue(item)));
-                break;
-            }
-        }
+        const separatorsInString = this.getSeparatorsForString(data);
+        // prettier-ignore
+        const dividedString = separatorsInString.length > 0 ?
+            [...data.split(new RegExp(`${separatorsInString.join('|')}`))] :
+            [data];
+        const items = dividedString.map((item) => this.trimValue(item));
         if (items.length === 0) {
             items.push(data);
         }
@@ -1487,14 +1595,21 @@ class KbqTagInput {
             this.setDefaultInputWidth();
         }
     }
+    /** @docs-private */
     onFocus() {
         this.focused = true;
+        this._tagList.unselectAll();
         this._tagList.stateChanges.next();
     }
     /** Focuses the input. */
     focus() {
         this.inputElement.focus();
     }
+    getSeparatorsForString(value) {
+        return this.separators
+            .filter((separator) => value.search(separator.key) > -1)
+            .map((separator) => separator.key);
+    }
     trimValue(value) {
         return this.trimDirective ? this.trimDirective.trim(value) : value;
     }
@@ -1515,10 +1630,10 @@ class KbqTagInput {
     isSeparatorKey(event) {
         return this.separators.some((separator) => separator.key === event.key && !event.shiftKey);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { 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: "14.0.0", version: "18.2.13", type: KbqTagInput, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], distinct: "distinct", placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], addOnPaste: ["kbqTagInputAddOnPaste", "addOnPaste"], 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, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { 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: "14.0.0", version: "18.2.14", type: KbqTagInput, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], distinct: "distinct", placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], addOnPaste: ["kbqTagInputAddOnPaste", "addOnPaste"], 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, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kbqTagInputFor]',
@@ -1580,8 +1695,8 @@ const COMPONENTS = [
     KbqTagEditInput
 ];
 class KbqTagsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KbqTagsModule, declarations: [KbqTagList,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KbqTagsModule, declarations: [KbqTagList,
             KbqTag,
             KbqTagInput,
             KbqTagTrailingIcon,
@@ -1594,14 +1709,14 @@ class KbqTagsModule {
             KbqTagAvatar,
             KbqTagRemove, KbqTagEditSubmit,
             KbqTagEditInput] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagsModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagsModule, providers: [
             {
                 provide: KBQ_TAGS_DEFAULT_OPTIONS,
                 useValue: { separatorKeyCodes: [ENTER$1] }
             }
         ], imports: [PlatformModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqTagsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [