@koobiq/components 19.8.3 → 20.1.0

package/fesm2022/koobiq-components-tags.mjs

@@ -1,20 +1,17 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, inject, DestroyRef, ElementRef, EventEmitter, signal, booleanAttribute, Input, Output, forwardRef, ContentChild, ContentChildren, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, Inject, Optional, Self, NgModule } from '@angular/core';
+import { InjectionToken, Directive, inject, ChangeDetectorRef, DestroyRef, ElementRef, input, booleanAttribute, contentChild, output, signal, contentChildren, forwardRef, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, ContentChildren, NgModule } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import * as i3 from '@angular/forms';
-import { hasModifierKey, isSelectAll, SEMICOLON, COMMA, SPACE as SPACE$1, TAB as TAB$1, ENTER as ENTER$1 } from '@koobiq/cdk/keycodes';
-import * as i3$1 from '@koobiq/components/autocomplete';
+import { NgForm, FormGroupDirective, NgControl } from '@angular/forms';
+import { KbqAutocompleteTrigger } from '@koobiq/components/autocomplete';
 import * as i1 from '@koobiq/components/core';
-import { KbqFieldSizingContent, KbqColorDirective, KbqComponentColors, isNull, KBQ_TITLE_TEXT_REF, KBQ_VALIDATION } from '@koobiq/components/core';
-import * as i1$1 from '@koobiq/components/form-field';
-import { KbqFormFieldControl } from '@koobiq/components/form-field';
+import { KbqFieldSizingContent, KbqColorDirective, KbqComponentColors, hasModifierKey, isNull, KBQ_TITLE_TEXT_REF, ErrorStateMatcher, FocusKeyManager, isSelectAll, SEMICOLON, COMMA, SPACE as SPACE$1, TAB as TAB$1, ENTER as ENTER$1 } from '@koobiq/components/core';
+import { KbqFormFieldControl, KbqTrim } from '@koobiq/components/form-field';
 import { FocusMonitor } from '@angular/cdk/a11y';
-import * as i2$1 from '@angular/cdk/bidi';
+import { Directionality } from '@angular/cdk/bidi';
 import * as i2 from '@angular/cdk/drag-drop';
 import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
 import { DELETE, SPACE, BACKSPACE, ENTER, ESCAPE, F2, LEFT_ARROW, TAB, HOME, END } from '@angular/cdk/keycodes';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FocusKeyManager } from '@koobiq/cdk/a11y';
+import { takeUntilDestroyed, outputToObservable } from '@angular/core/rxjs-interop';
 import { Subject, merge } from 'rxjs';
 import { startWith, takeUntil, filter } from 'rxjs/operators';
 import { KbqIcon } from '@koobiq/components/icon';
@@ -50,10 +47,10 @@ const getTagEditInputMissingError = () => {
  * @docs-private
  */
 class KbqTagAvatar {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqTagAvatar, isStandalone: true, selector: "kbq-tag-avatar, [kbqTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTagAvatar, isStandalone: true, selector: "kbq-tag-avatar, [kbqTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagAvatar, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tag-avatar, [kbqTagAvatar]',
@@ -65,10 +62,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * @docs-private
  */
 class KbqTagTrailingIcon {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqTagTrailingIcon, isStandalone: true, selector: "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", host: { classAttribute: "kbq-tag-trailing-icon" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTagTrailingIcon, isStandalone: true, selector: "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", host: { classAttribute: "kbq-tag-trailing-icon" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagTrailingIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagTrailingIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-tag-trailing-icon, [kbqTagTrailingIcon]',
@@ -83,19 +80,19 @@ class KbqTagEditSubmit {
         /** @docs-private */
         this.tag = inject(KbqTag);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagEditSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqTagEditSubmit, isStandalone: true, selector: "[kbqTagEditSubmit]", host: { listeners: { "click": "tag.submitEditing(\"click\")" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-edit-submit" }, exportAs: ["kbqTagEditSubmit"], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagEditSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTagEditSubmit, isStandalone: true, selector: "[kbqTagEditSubmit]", host: { listeners: { "click": "tag.submitEditing(\"click\")" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-edit-submit" }, exportAs: ["kbqTagEditSubmit"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagEditSubmit, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagEditSubmit, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTagEditSubmit]',
-                    exportAs: 'kbqTagEditSubmit',
                     host: {
                         class: 'kbq-tag-edit-submit',
                         '[attr.tabindex]': '-1',
                         '(click)': 'tag.submitEditing("click")'
-                    }
+                    },
+                    exportAs: 'kbqTagEditSubmit'
                 }]
         }] });
 /**
@@ -132,31 +129,35 @@ class KbqTagEditInput {
             default:
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)", "click": "handleClick($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagEditInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagEditInput, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTagEditInput]',
-                    exportAs: 'kbqTagEditInput',
                     host: {
                         class: 'kbq-tag-edit-input',
                         '(keydown)': 'handleKeydown($event)',
                         '(click)': 'handleClick($event)'
                     },
-                    hostDirectives: [KbqFieldSizingContent]
+                    hostDirectives: [KbqFieldSizingContent],
+                    exportAs: 'kbqTagEditInput'
                 }]
         }] });
 class KbqTag extends KbqColorDirective {
     /** Whether the tag is editable. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get editable() {
-        return this._editable ?? !!this.tagList?.editable;
+        return this._editable ?? !!this.tagList?.editable();
     }
     set editable(value) {
         this._editable = value;
     }
     /** Whether the tag is selected. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get selected() {
         return this._selected;
     }
@@ -164,6 +165,8 @@ class KbqTag extends KbqColorDirective {
         this.setSelectedState(value, { emitEvent: true });
     }
     /** The value of the tag. Defaults to the content inside `<kbq-tag>` tags. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get value() {
         return this._value ?? this.elementRef.nativeElement.textContent?.trim();
     }
@@ -173,8 +176,10 @@ class KbqTag extends KbqColorDirective {
     /**
      * Whether the tag is selectable.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get selectable() {
-        return this._selectable || !!this.tagList?.selectable;
+        return this._selectable || !!this.tagList?.selectable();
     }
     set selectable(value) {
         this._selectable = value;
@@ -182,12 +187,16 @@ class KbqTag extends KbqColorDirective {
     /**
      * Determines whether the tag is removable.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get removable() {
         return this._removable && (this.tagList?.removable ?? true);
     }
     set removable(value) {
         this._removable = value;
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get tabindex() {
         if (this.disabled)
             return null;
@@ -201,6 +210,8 @@ class KbqTag extends KbqColorDirective {
     /**
      * Whether the tag is disabled.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled || (this.tagList?.disabled ?? false);
     }
@@ -216,9 +227,9 @@ class KbqTag extends KbqColorDirective {
     get draggable() {
         return (this.tagList?.draggable ?? false) && !this.disabled;
     }
-    constructor(changeDetectorRef) {
+    constructor() {
         super();
-        this.changeDetectorRef = changeDetectorRef;
+        this.changeDetectorRef = inject(ChangeDetectorRef);
         this.focusMonitor = inject(FocusMonitor);
         this.tagList = inject(KbqTagList, { optional: true });
         this.drag = inject(CdkDrag, { host: true });
@@ -246,24 +257,32 @@ class KbqTag extends KbqColorDirective {
          */
         this.hasFocus = false;
         /** Whether the tag edits can't be submitted. */
-        this.preventEditSubmit = false;
+        this.preventEditSubmit = input(false, ...(ngDevMode ? [{ debugName: "preventEditSubmit", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.editInputElementRef = contentChild(KbqTagEditInput, ...(ngDevMode ? [{ debugName: "editInputElementRef", read: ElementRef }] : [{ read: ElementRef }]));
         /**
          * Emits event when the tag is edited.
          */
-        this.editChange = new EventEmitter();
+        this.editChange = output();
         /**
          * @docs-private
          */
-        this.editing = signal(false);
+        this.editing = signal(false, ...(ngDevMode ? [{ debugName: "editing" }] : []));
+        this.contentChildren = contentChildren(KbqIcon);
+        /** The tag avatar */
+        this.avatar = contentChild(KbqTagAvatar, ...(ngDevMode ? [{ debugName: "avatar" }] : []));
+        /** The tag's trailing icon. */
+        this.trailingIcon = contentChild(KbqTagTrailingIcon, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : []));
+        /** The tag's remove toggler. */
+        this.removeIcon = contentChild(forwardRef(() => KbqTagRemove), ...(ngDevMode ? [{ debugName: "removeIcon" }] : []));
         /** Emitted when the tag is selected or deselected. */
-        this.selectionChange = new EventEmitter();
+        this.selectionChange = output();
         /** Emitted when the tag is destroyed and leaving the DOM. */
-        this.destroyed = new EventEmitter();
+        this.destroyed = output();
         /**
          * Emitted when a tag is to be removed.
          * Fires on programmatic and UI removal (click or keyboard).
          */
-        this.removed = new EventEmitter();
+        this.removed = output();
         this._selected = false;
         this._selectable = false;
         this._removable = true;
@@ -287,7 +306,7 @@ class KbqTag extends KbqColorDirective {
     }
     /** @docs-private */
     addClassModificatorForIcons() {
-        const icons = this.contentChildren.map((item) => item.elementRef.nativeElement);
+        const icons = this.contentChildren().map((item) => item.elementRef.nativeElement);
         if (icons.length === 1) {
             const iconElement = icons[0];
             if (iconElement.classList.contains('kbq-tag-remove')) {
@@ -399,7 +418,12 @@ class KbqTag extends KbqColorDirective {
             case DELETE:
             case BACKSPACE: {
                 // If there is a tag list and it has selected tags, remove them, otherwise remove focused tag.
-                this.tagList?.selected.length ? this.tagList.removeSelected() : this.remove();
+                if (this.tagList?.selected.length) {
+                    this.tagList.removeSelected();
+                }
+                else {
+                    this.remove();
+                }
                 // Always prevent so page navigation does not occur
                 event.preventDefault();
                 break;
@@ -435,7 +459,7 @@ class KbqTag extends KbqColorDirective {
         this.editing.set(true);
         this.editChange.emit({ tag: this, type: 'start', reason });
         setTimeout(() => {
-            const input = this.editInputElementRef?.nativeElement;
+            const input = this.editInputElementRef()?.nativeElement;
             if (!input)
                 throw getTagEditInputMissingError();
             this.focusMonitor.focusVia(this.elementRef.nativeElement, 'keyboard');
@@ -452,7 +476,7 @@ class KbqTag extends KbqColorDirective {
     }
     /** @docs-private */
     submitEditing(reason) {
-        if (!this.editing() || this.preventEditSubmit)
+        if (!this.editing() || this.preventEditSubmit())
             return;
         this.editing.set(false);
         this.editChange.emit({ tag: this, type: 'submit', reason });
@@ -508,8 +532,8 @@ class KbqTag extends KbqColorDirective {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTag, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: KbqTag, isStandalone: true, 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)", "click": "handleClick($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-tag-with-avatar": "avatar", "class.kbq-tag-with-icon": "contentChildren", "class.kbq-tag-with-trailing-icon": "trailingIcon || removeIcon", "class.kbq-disabled": "disabled", "class.kbq-tag_editable": "editable", "class.kbq-tag_editing": "editing()", "class.kbq-tag_removable": "removable", "class.kbq-tag_selectable": "selectable", "class.kbq-tag_draggable": "draggable" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "editInputElementRef", first: true, predicate: KbqTagEditInput, descendants: true, read: ElementRef }, { 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: i2.CdkDrag }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqTag, isStandalone: true, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { editable: { classPropertyName: "editable", publicName: "editable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, preventEditSubmit: { classPropertyName: "preventEditSubmit", publicName: "preventEditSubmit", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { editChange: "editChange", selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "dblclick": "handleDblClick($event)", "click": "handleClick($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-tag-with-avatar": "avatar()", "class.kbq-tag-with-icon": "contentChildren()", "class.kbq-tag-with-trailing-icon": "trailingIcon() || removeIcon()", "class.kbq-disabled": "disabled", "class.kbq-tag_editable": "editable", "class.kbq-tag_editing": "editing()", "class.kbq-tag_removable": "removable", "class.kbq-tag_selectable": "selectable", "class.kbq-tag_draggable": "draggable" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "editInputElementRef", first: true, predicate: KbqTagEditInput, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "contentChildren", predicate: KbqIcon, isSignal: true }, { propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true, isSignal: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true, isSignal: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(() => KbqTagRemove), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqTag"], usesInheritance: true, hostDirectives: [{ directive: i2.CdkDrag }], ngImport: i0, template: `
         <div class="kbq-tag__wrapper">
             <ng-content select="[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])" />
             <span #kbqTitleText class="kbq-tag__text">
@@ -529,7 +553,7 @@ class KbqTag extends KbqColorDirective {
         </div>
     `, isInline: true, styles: [".kbq-tag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-block;max-width:100%;height:var(--kbq-size-xxl);padding:var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);border-radius:4px;cursor:default;outline:none;box-sizing:border-box}.kbq-tag .kbq-icon.kbq-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon.kbq-tag-remove:hover{cursor:pointer}.kbq-tag.kbq-disabled .kbq-icon.kbq-tag-remove:hover{cursor:default}.kbq-tag .kbq-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 var(--kbq-tag-size-content-gap-horizontal)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left)}.kbq-tag .kbq-tag-edit-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag .kbq-tag-edit-input::-ms-clear{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-webkit-search-decoration,.kbq-tag .kbq-tag-edit-input::-webkit-search-cancel-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-decoration{display:none}.kbq-tag .kbq-tag-edit-input{min-width:var(--kbq-size-xs);max-width:100%}.kbq-tag .kbq-tag-edit-input.kbq-input{min-height:unset!important;border-radius:unset!important;padding:unset!important}.kbq-tag .kbq-tag-edit-submit{margin-right:var(--kbq-size-3xs)}.kbq-tag.cdk-drag-placeholder{opacity:var(--kbq-opacity-disabled)}.kbq-tag.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTag, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]', template: `
         <div class="kbq-tag__wrapper">
@@ -549,14 +573,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }
             }
         </div>
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'kbqTag', hostDirectives: [CdkDrag], host: {
+    `, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tag',
                         '[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-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()',
@@ -566,40 +590,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(dblclick)': 'handleDblClick($event)',
                         '(click)': 'handleClick($event)',
                         '(keydown)': 'handleKeydown($event)'
-                    }, 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}.kbq-tag .kbq-tag-edit-input::-ms-clear{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-webkit-search-decoration,.kbq-tag .kbq-tag-edit-input::-webkit-search-cancel-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-decoration{display:none}.kbq-tag .kbq-tag-edit-input{min-width:var(--kbq-size-xs);max-width:100%}.kbq-tag .kbq-tag-edit-input.kbq-input{min-height:unset!important;border-radius:unset!important;padding:unset!important}.kbq-tag .kbq-tag-edit-submit{margin-right:var(--kbq-size-3xs)}.kbq-tag.cdk-drag-placeholder{opacity:var(--kbq-opacity-disabled)}.kbq-tag.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { editable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], preventEditSubmit: [{
+                    }, hostDirectives: [CdkDrag], exportAs: '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}.kbq-tag .kbq-tag-edit-input::-ms-clear{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-webkit-search-decoration,.kbq-tag .kbq-tag-edit-input::-webkit-search-cancel-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-decoration{display:none}.kbq-tag .kbq-tag-edit-input{min-width:var(--kbq-size-xs);max-width:100%}.kbq-tag .kbq-tag-edit-input.kbq-input{min-height:unset!important;border-radius:unset!important;padding:unset!important}.kbq-tag .kbq-tag-edit-submit{margin-right:var(--kbq-size-3xs)}.kbq-tag.cdk-drag-placeholder{opacity:var(--kbq-opacity-disabled)}.kbq-tag.cdk-drag-animating{transition:transform .3s cubic-bezier(0,0,.2,1)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], editInputElementRef: [{
-                type: ContentChild,
-                args: [KbqTagEditInput, { read: ElementRef }]
-            }], editChange: [{
-                type: Output
-            }], textElement: [{
+            }], preventEditSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventEditSubmit", required: false }] }], editInputElementRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTagEditInput), { ...{ read: ElementRef }, isSignal: true }] }], editChange: [{ type: i0.Output, args: ["editChange"] }], textElement: [{
                 type: ViewChild,
                 args: ['kbqTitleText']
-            }], contentChildren: [{
-                type: ContentChildren,
-                args: [KbqIcon]
-            }], avatar: [{
-                type: ContentChild,
-                args: [KbqTagAvatar, { static: false }]
-            }], trailingIcon: [{
-                type: ContentChild,
-                args: [KbqTagTrailingIcon, { static: false }]
-            }], removeIcon: [{
-                type: ContentChild,
-                args: [forwardRef(() => KbqTagRemove), { static: false }]
-            }], selectionChange: [{
-                type: Output
-            }], destroyed: [{
-                type: Output
-            }], removed: [{
-                type: Output
-            }], selected: [{
+            }], contentChildren: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KbqIcon), { isSignal: true }] }], avatar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTagAvatar), { isSignal: true }] }], trailingIcon: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqTagTrailingIcon), { isSignal: true }] }], removeIcon: [{ type: i0.ContentChild, args: [forwardRef(() => KbqTagRemove), { isSignal: true }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], destroyed: [{ type: i0.Output, args: ["destroyed"] }], removed: [{ type: i0.Output, args: ["removed"] }], selected: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], value: [{
@@ -628,8 +626,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * styles to properly center the icon within the tag.
  */
 class KbqTagRemove {
-    constructor(parentTag) {
-        this.parentTag = parentTag;
+    constructor() {
+        this.parentTag = inject(KbqTag);
     }
     /** @docs-private */
     focus(event) {
@@ -652,10 +650,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: "19.2.21", ngImport: i0, type: KbqTagRemove, deps: [{ token: forwardRef(() => KbqTag) }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqTagRemove, isStandalone: true, selector: "[kbqTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagRemove, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqTagRemove, isStandalone: true, selector: "[kbqTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagRemove, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagRemove, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqTagRemove]',
@@ -666,10 +664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(focus)': 'focus($event)'
                     }
                 }]
-        }], ctorParameters: () => [{ type: KbqTag, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => KbqTag)]
-                }] }] });
+        }] });
 
 // Increasing integer for generating unique ids for tag-list components.
 let nextUniqueId$1 = 0;
@@ -687,7 +682,7 @@ class KbqTagList {
      * @docs-private
      */
     get tagSelectionChanges() {
-        return merge(...this.tags.map((tag) => tag.selectionChange));
+        return merge(...this.tags.map((tag) => outputToObservable(tag.selectionChange)));
     }
     /**
      * Combined stream of all of the child tags' focus change events.
@@ -711,7 +706,7 @@ class KbqTagList {
      * @docs-private
      */
     get tagRemoveChanges() {
-        return merge(...this.tags.map((tag) => tag.destroyed));
+        return merge(...this.tags.map((tag) => outputToObservable(tag.destroyed)));
     }
     /**
      * Combined stream of all of the child tags' removal request events.
@@ -719,7 +714,7 @@ class KbqTagList {
      * @docs-private
      */
     get tagBeforeRemoveChanges() {
-        return merge(...this.tags.map((tag) => tag.removed));
+        return merge(...this.tags.map((tag) => outputToObservable(tag.removed)));
     }
     /**
      * Combined stream of all of the child tags' edit change events.
@@ -727,7 +722,7 @@ class KbqTagList {
      * @docs-private
      */
     get tagEditChanges() {
-        return merge(...this.tags.map((tag) => tag.editChange));
+        return merge(...this.tags.map((tag) => outputToObservable(tag.editChange)));
     }
     /**
      * The array of selected tags inside tag list.
@@ -739,12 +734,14 @@ class KbqTagList {
     }
     /** @docs-private */
     get canShowCleaner() {
-        return this.cleaner && this.tags.length > 0;
+        return !!this.cleaner() && this.tags.length > 0;
     }
     /**
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get value() {
         return this._value;
     }
@@ -762,6 +759,8 @@ class KbqTagList {
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get required() {
         return this._required;
     }
@@ -773,6 +772,8 @@ class KbqTagList {
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get placeholder() {
         return this.tagInput ? this.tagInput.placeholder : this._placeholder;
     }
@@ -802,6 +803,8 @@ class KbqTagList {
      * Implemented as part of KbqFormFieldControl.
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this.ngControl ? !!this.ngControl.disabled : this._disabled;
     }
@@ -809,6 +812,8 @@ class KbqTagList {
         this._disabled = value;
         this.syncDropListDisabledState();
     }
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get draggable() {
         return this._draggable && !this.disabled;
     }
@@ -817,6 +822,8 @@ class KbqTagList {
         this.syncDropListDisabledState();
     }
     /** Whether the tags in the list are removable. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get removable() {
         return this._removable;
     }
@@ -829,6 +836,8 @@ class KbqTagList {
      *
      * @docs-private
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get tabIndex() {
         return this.disabled || this.tagInput ? null : this._tabIndex;
     }
@@ -836,15 +845,14 @@ class KbqTagList {
         this.userTabIndex = value;
         this._tabIndex = value;
     }
-    constructor(elementRef, changeDetectorRef, defaultErrorStateMatcher, dir, parentForm, parentFormGroup, ngControl) {
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.defaultErrorStateMatcher = defaultErrorStateMatcher;
-        this.dir = dir;
-        this.parentForm = parentForm;
-        this.parentFormGroup = parentFormGroup;
-        this.ngControl = ngControl;
-        this.useLegacyValidation = inject(KBQ_VALIDATION, { optional: true })?.useValidation ?? false;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
+        this.defaultErrorStateMatcher = inject(ErrorStateMatcher);
+        this.dir = inject(Directionality, { optional: true });
+        this.parentForm = inject(NgForm, { optional: true });
+        this.parentFormGroup = inject(FormGroupDirective, { optional: true });
+        this.ngControl = inject(NgControl, { optional: true, self: true });
         this.dropList = inject(CdkDropList, { host: true });
         this.destroyRef = inject(DestroyRef);
         this.focusMonitor = inject(FocusMonitor);
@@ -860,40 +868,20 @@ class KbqTagList {
          * @docs-private
          */
         this.stateChanges = new Subject();
-        /**
-         * @deprecated Unused. Will be removed in next major release.
-         *
-         * @docs-private
-         */
-        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();
+        this.dropped = output();
         /**
          * 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;
+        this.selectable = input(true, ...(ngDevMode ? [{ debugName: "selectable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /** Whether the tags in the list are editable. */
-        this.editable = false;
-        /**
-         * Whether to emit change events when tags are added/removed.
-         *
-         * @deprecated No longer needed. Will be removed in the next major release.
-         */
-        this.emitOnTagChanges = true;
+        this.editable = input(false, ...(ngDevMode ? [{ debugName: "editable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         this._removable = true;
         this._tabIndex = 0;
         /**
@@ -901,7 +889,7 @@ class KbqTagList {
          * to facilitate the two-way binding for the `value` input.
          * @docs-private
          */
-        this.valueChange = new EventEmitter();
+        this.valueChange = output();
         /** @docs-private */
         this.uid = `kbq-tag-list-${nextUniqueId$1++}`;
         /**
@@ -911,20 +899,10 @@ class KbqTagList {
          * @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.
-         *
-         * @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();
+        this.change = output();
+        /** @docs-private */
+        this.cleaner = contentChild('kbqTagListCleaner', ...(ngDevMode ? [{ debugName: "cleaner" }] : []));
         /**
          * Whether the component is in an error state.
          *
@@ -972,6 +950,8 @@ class KbqTagList {
         // it back to the first tag when the user tabs out.
         this.keyManager.tabOut.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             this._tabIndex = -1;
+            // Direct DOM write since the binding update is deferred with eventCoalescing.
+            this.elementRef.nativeElement.tabIndex = -1;
             setTimeout(() => {
                 this._tabIndex = this.userTabIndex || 0;
                 this.changeDetectorRef.markForCheck();
@@ -1102,7 +1082,7 @@ class KbqTagList {
         const target = event.target;
         if (this.disabled || isNull(target))
             return;
-        const shouldSelectAll = this.selectable && isSelectAll(event);
+        const shouldSelectAll = this.selectable() && isSelectAll(event);
         if (this.isInputEmpty(target)) {
             if (event.keyCode === BACKSPACE ||
                 event.keyCode === LEFT_ARROW ||
@@ -1138,12 +1118,6 @@ class KbqTagList {
             this.stateChanges.next();
         }
     }
-    /**
-     * @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()) {
@@ -1158,14 +1132,12 @@ class KbqTagList {
                 setTimeout(() => {
                     if (!this.focused) {
                         this.markAsTouched();
-                        this.revalidate();
                     }
                 });
             }
             else {
                 // If there's no tag input, then mark the field as touched.
                 this.markAsTouched();
-                this.revalidate();
             }
         }
     }
@@ -1298,14 +1270,6 @@ class KbqTagList {
     syncTagsRemovableState() {
         this.tags?.forEach((tag) => (tag.removable = this.removable));
     }
-    /** Revalidate control. */
-    revalidate() {
-        if (this.useLegacyValidation && this.ngControl?.control) {
-            const control = this.ngControl.control;
-            control.updateValueAndValidity({ emitEvent: false });
-            control.statusChanges.emit(control.status);
-        }
-    }
     setupDropListInitialProperties() {
         this.syncDropListDisabledState();
         this.dropList.elementContainerSelector = '.kbq-tags-list__list-container';
@@ -1327,8 +1291,8 @@ class KbqTagList {
                 this.unselectAll();
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", 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: "19.2.21", type: KbqTagList, isStandalone: true, 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], emitOnTagChanges: ["emitOnTagChanges", "emitOnTagChanges", 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_selectable": "selectable", "class.kbq-tag-list_editable": "editable", "class.kbq-tag-list_removable": "removable", "class.kbq-tag-list_draggable": "draggable", "attr.tabindex": "tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: i0.forwardRef(() => KbqTag), descendants: true }], exportAs: ["kbqTagList"], hostDirectives: [{ directive: i2.CdkDropList }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqTagList, isStandalone: true, selector: "kbq-tag-list", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, tabIndex: { classPropertyName: "tabIndex", publicName: "tabIndex", isSignal: false, isRequired: false, transformFunction: null }, errorStateMatcher: { classPropertyName: "errorStateMatcher", publicName: "errorStateMatcher", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { dropped: "dropped", valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "class.kbq-tag-list_selectable": "selectable()", "class.kbq-tag-list_editable": "editable()", "class.kbq-tag-list_removable": "removable", "class.kbq-tag-list_draggable": "draggable", "attr.tabindex": "tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqTagListCleaner"], descendants: true, isSignal: true }, { propertyName: "tags", predicate: i0.forwardRef(() => KbqTag), descendants: true }], exportAs: ["kbqTagList"], hostDirectives: [{ directive: i2.CdkDropList }], ngImport: i0, template: `
         <div class="kbq-tags-list__list-container">
             <ng-content />
         </div>
@@ -1340,9 +1304,9 @@ class KbqTagList {
         }
     `, isInline: true, styles: [".kbq-tag-list{display:flex;flex-direction:row;min-height:var(--kbq-size-xxl);box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.kbq-tag-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-contrast);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagList, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tag-list', exportAs: 'kbqTagList', template: `
+            args: [{ selector: 'kbq-tag-list', template: `
         <div class="kbq-tags-list__list-container">
             <ng-content />
         </div>
@@ -1352,12 +1316,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 <ng-content select="kbq-cleaner" />
             </div>
         }
-    `, host: {
+    `, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-tag-list',
                         '[class.kbq-disabled]': 'disabled',
                         '[class.kbq-invalid]': 'errorState',
-                        '[class.kbq-tag-list_selectable]': 'selectable',
-                        '[class.kbq-tag-list_editable]': 'editable',
+                        '[class.kbq-tag-list_selectable]': 'selectable()',
+                        '[class.kbq-tag-list_editable]': 'editable()',
                         '[class.kbq-tag-list_removable]': 'removable',
                         '[class.kbq-tag-list_draggable]': 'draggable',
                         '[attr.tabindex]': 'tabIndex',
@@ -1365,23 +1329,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(focus)': 'focus()',
                         '(blur)': 'blur()',
                         '(keydown)': 'keydown($event)'
-                    }, 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{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-contrast);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ErrorStateMatcher }, { type: i2$1.Directionality, decorators: [{
-                    type: Optional
-                }] }, { type: i3.NgForm, decorators: [{
-                    type: Optional
-                }] }, { type: i3.FormGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i3.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { multiple: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], compareWith: [{
-                type: Input
-            }], value: [{
+                    }, hostDirectives: [CdkDropList], exportAs: 'kbqTagList', styles: [".kbq-tag-list{display:flex;flex-direction:row;min-height:var(--kbq-size-xxl);box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-list.cdk-drop-list-dragging .cdk-drag{transition:transform .25s cubic-bezier(0,0,.2,1)}.kbq-tag-input{background:transparent;padding:0;margin:0;border:none;outline:none}.kbq-tag-input::-ms-clear{display:none;width:0;height:0}.kbq-tag-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag-input::-webkit-search-decoration,.kbq-tag-input::-webkit-search-cancel-button,.kbq-tag-input::-webkit-search-results-button,.kbq-tag-input::-webkit-search-results-decoration{display:none}.kbq-tag-input{padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:var(--kbq-size-xxs);padding-right:unset;min-width:var(--kbq-size-3xl);max-width:100%;flex-grow:1}.kbq-tag-input.kbq-input{--kbq-input-size-padding-vertical: 0;--kbq-form-field-size-border-radius: 0;padding-left:var(--kbq-size-xxs);min-height:unset!important;width:auto}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}body:has(.kbq-tag-list.cdk-drop-list-dragging){cursor:grabbing}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-theme-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-theme-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-selected-background: var(--kbq-background-theme);--kbq-tag-contrast-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-contrast-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-selected-background: var(--kbq-background-error);--kbq-tag-error-fade-on-states-selected-text: var(--kbq-foreground-white);--kbq-tag-error-fade-on-states-selected-icon: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-selected-close-button: var(--kbq-icon-white);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-selected-background: var(--kbq-background-warning);--kbq-tag-warning-fade-states-selected-text: var(--kbq-foreground-contrast);--kbq-tag-warning-fade-states-selected-icon: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-selected-close-button: var(--kbq-icon-contrast);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{
                 type: Input
             }], required: [{
                 type: Input
@@ -1393,34 +1342,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }], draggable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], dropped: [{
-                type: Output
-            }], selectable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], editable: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], emitOnTagChanges: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], removable: [{
+            }], dropped: [{ type: i0.Output, args: ["dropped"] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], removable: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], tabIndex: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
-            }], errorStateMatcher: [{
-                type: Input
-            }], orientation: [{
+            }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], errorStateMatcher: [{
                 type: Input
-            }], change: [{
-                type: Output
-            }], cleaner: [{
-                type: ContentChild,
-                args: ['kbqTagListCleaner', { static: true }]
-            }], tags: [{
+            }], change: [{ type: i0.Output, args: ["change"] }], cleaner: [{ type: i0.ContentChild, args: ['kbqTagListCleaner', { isSignal: true }] }], tags: [{
                 type: ContentChildren,
                 args: [forwardRef(() => KbqTag), {
                         // Need to use `descendants: true`,
@@ -1448,6 +1377,8 @@ class KbqTagInput {
      *
      * Defaults to `[ENTER]`.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     set separatorKeyCodes(value) {
         this._separatorKeyCodes = value || [];
     }
@@ -1459,6 +1390,8 @@ class KbqTagInput {
         }, []);
     }
     /** Register input for tag list */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     set tagList(value) {
         if (value) {
             this._tagList = value;
@@ -1468,6 +1401,8 @@ class KbqTagInput {
     /**
      * Whether or not the tagEnd event will be emitted when the input is blurred.
      */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get addOnBlur() {
         return this._addOnBlur;
     }
@@ -1475,6 +1410,8 @@ class KbqTagInput {
         this._addOnBlur = coerceBooleanProperty(value);
     }
     /** Whether the input is disabled. */
+    // TODO: Skipped for migration because:
+    //  Accessor inputs cannot be migrated as they are too complex.
     get disabled() {
         return this._disabled || (this._tagList && this._tagList.disabled);
     }
@@ -1485,37 +1422,41 @@ class KbqTagInput {
     get empty() {
         return !this.inputElement.value;
     }
-    constructor(elementRef, defaultOptions, trimDirective, ngControl, autocompleteTrigger) {
-        this.elementRef = elementRef;
-        this.defaultOptions = defaultOptions;
-        this.trimDirective = trimDirective;
-        this.ngControl = ngControl;
-        this.autocompleteTrigger = autocompleteTrigger;
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.defaultOptions = inject(KBQ_TAGS_DEFAULT_OPTIONS);
+        this.trimDirective = inject(KbqTrim, { optional: true, self: true });
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        this.autocompleteTrigger = inject(KbqAutocompleteTrigger, { optional: true, self: true });
         /** Whether the control is focused. */
         this.focused = false;
         this._separatorKeyCodes = this.defaultOptions.separatorKeyCodes;
         this._separators = this.defaultOptions.separators || KBQ_TAG_INPUT_DEFAULT_SEPARATORS;
         /** Emitted when a tag is to be added. */
-        this.tagEnd = new EventEmitter();
+        this.tagEnd = output({ alias: 'kbqTagInputTokenEnd' });
         /** A value indicating whether allow/prevent tags duplication  */
-        this.distinct = false;
+        this.distinct = input(false, ...(ngDevMode ? [{ debugName: "distinct" }] : []));
         /** The input's placeholder text. */
+        // TODO: Skipped for migration because:
+        //  This input overrides a field from a superclass, while the superclass field
+        //  is not migrated.
         this.placeholder = '';
         /** Unique id for the input. */
+        // TODO: Skipped for migration because:
+        //  This input overrides a field from a superclass, while the superclass field
+        //  is not migrated.
         this.id = `kbq-tag-list-input-${nextUniqueId++}`;
         this._addOnBlur = true;
         /**
          * Whether the tagEnd event will be emitted when the text pasted.
          * @default true
          */
-        this.addOnPaste = this.defaultOptions.addOnPaste ?? true;
+        this.addOnPaste = input(this.defaultOptions.addOnPaste ?? true, ...(ngDevMode ? [{ debugName: "addOnPaste", alias: 'kbqTagInputAddOnPaste',
+                transform: booleanAttribute }] : [{
+                alias: 'kbqTagInputAddOnPaste',
+                transform: booleanAttribute
+            }]));
         this._disabled = false;
-        /**
-         * @docs-private
-         *
-         * @deprecated Unused. Will be removed in next major release.
-         */
-        this.countOfSymbolsForUpdateWidth = 3;
         this.inputElement = this.elementRef.nativeElement;
     }
     ngOnChanges() {
@@ -1550,7 +1491,7 @@ class KbqTagInput {
             this.triggerValidation();
             this._tagList.blur();
         }
-        if (this.addOnBlur && (this.autocompleteTrigger?.onInputBlur(event) || true)) {
+        if (this.addOnBlur && (this.autocompleteTrigger?.onInputBlur()(event) || true)) {
             this.emitTagEnd();
         }
         this._tagList.stateChanges.next();
@@ -1564,7 +1505,7 @@ class KbqTagInput {
     /** Checks to see if the (tagEnd) event needs to be emitted. */
     emitTagEnd() {
         if (!this.hasControl() || (this.hasControl() && !this.ngControl.invalid)) {
-            if (this.distinct && this.hasDuplicates)
+            if (this.distinct() && this.hasDuplicates)
                 return;
             this._tagList?.notifyPendingTagChange();
             this.tagEnd.emit({ input: this.inputElement, value: this.trimValue(this.inputElement.value) });
@@ -1584,7 +1525,7 @@ class KbqTagInput {
             return;
         }
         const data = $event.clipboardData.getData('text');
-        if ((data && data.length === 0) || !this.addOnPaste) {
+        if ((data && data.length === 0) || !this.addOnPaste()) {
             return;
         }
         const separatorsInString = this.getSeparatorsForString(data);
@@ -1596,7 +1537,7 @@ class KbqTagInput {
         if (items.length === 0) {
             items.push(data);
         }
-        if (this.distinct) {
+        if (this.distinct()) {
             const tagValues = this._tagList.tags.map(({ value }) => value);
             items = items.filter((item) => !tagValues.includes(item));
         }
@@ -1607,12 +1548,6 @@ class KbqTagInput {
         $event.preventDefault();
         $event.stopPropagation();
     }
-    /**
-     * @docs-private
-     *
-     * @deprecated Unused. Will be removed in next major release.
-     */
-    updateInputWidth() { }
     /** @docs-private */
     onFocus() {
         this.focused = true;
@@ -1645,14 +1580,13 @@ class KbqTagInput {
     isSeparatorKey(event) {
         return this.separators.some((separator) => separator.key === event.key && !hasModifierKey(event));
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagInput, deps: [{ token: i0.ElementRef }, { token: KBQ_TAGS_DEFAULT_OPTIONS }, { token: i1$1.KbqTrim, optional: true, self: true }, { token: i3.NgControl, optional: true, self: true }, { token: i3$1.KbqAutocompleteTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: KbqTagInput, isStandalone: true, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], distinct: "distinct", placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], addOnPaste: ["kbqTagInputAddOnPaste", "addOnPaste", booleanAttribute], disabled: "disabled" }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur($event)", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["kbqTagInput", "kbqTagInputFor"], usesOnChanges: true, hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: KbqTagInput, isStandalone: true, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: { classPropertyName: "separatorKeyCodes", publicName: "kbqTagInputSeparatorKeyCodes", isSignal: false, isRequired: false, transformFunction: null }, distinct: { classPropertyName: "distinct", publicName: "distinct", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, tagList: { classPropertyName: "tagList", publicName: "kbqTagInputFor", isSignal: false, isRequired: false, transformFunction: null }, addOnBlur: { classPropertyName: "addOnBlur", publicName: "kbqTagInputAddOnBlur", isSignal: false, isRequired: false, transformFunction: null }, addOnPaste: { classPropertyName: "addOnPaste", publicName: "kbqTagInputAddOnPaste", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur($event)", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["kbqTagInput", "kbqTagInputFor"], usesOnChanges: true, hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[kbqTagInputFor]',
-                    exportAs: 'kbqTagInput, kbqTagInputFor',
                     host: {
                         class: 'kbq-tag-input',
                         '[id]': 'id',
@@ -1664,32 +1598,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '(input)': 'onInput()',
                         '(paste)': 'onPaste($event)'
                     },
-                    hostDirectives: [KbqFieldSizingContent]
+                    hostDirectives: [KbqFieldSizingContent],
+                    exportAs: 'kbqTagInput, kbqTagInputFor'
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [KBQ_TAGS_DEFAULT_OPTIONS]
-                }] }, { type: i1$1.KbqTrim, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i3.NgControl, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }, { type: i3$1.KbqAutocompleteTrigger, decorators: [{
-                    type: Optional
-                }, {
-                    type: Self
-                }] }], propDecorators: { separatorKeyCodes: [{
+        }], ctorParameters: () => [], propDecorators: { separatorKeyCodes: [{
                 type: Input,
                 args: ['kbqTagInputSeparatorKeyCodes']
-            }], tagEnd: [{
-                type: Output,
-                args: ['kbqTagInputTokenEnd']
-            }], distinct: [{
-                type: Input
-            }], placeholder: [{
+            }], tagEnd: [{ type: i0.Output, args: ["kbqTagInputTokenEnd"] }], distinct: [{ type: i0.Input, args: [{ isSignal: true, alias: "distinct", required: false }] }], placeholder: [{
                 type: Input
             }], id: [{
                 type: Input
@@ -1699,10 +1614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             }], addOnBlur: [{
                 type: Input,
                 args: ['kbqTagInputAddOnBlur']
-            }], addOnPaste: [{
-                type: Input,
-                args: [{ alias: 'kbqTagInputAddOnPaste', transform: booleanAttribute }]
-            }], disabled: [{
+            }], addOnPaste: [{ type: i0.Input, args: [{ isSignal: true, alias: "kbqTagInputAddOnPaste", required: false }] }], disabled: [{
                 type: Input
             }] } });
 
@@ -1711,8 +1623,8 @@ const COMPONENTS = [
     KbqTagEditInput
 ];
 class KbqTagsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqTagsModule, imports: [PlatformModule, KbqTagEditSubmit,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqTagsModule, imports: [PlatformModule, KbqTagEditSubmit,
             KbqTagEditInput, KbqTagList,
             KbqTag,
             KbqTagInput,
@@ -1725,14 +1637,14 @@ class KbqTagsModule {
             KbqTagAvatar,
             KbqTagRemove, KbqTagEditSubmit,
             KbqTagEditInput] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagsModule, providers: [
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagsModule, providers: [
             {
                 provide: KBQ_TAGS_DEFAULT_OPTIONS,
                 useValue: { separatorKeyCodes: [ENTER$1] }
             }
         ], imports: [PlatformModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqTagsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqTagsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1745,6 +1657,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqTagAvatar,
                         KbqTagRemove
                     ],
+                    providers: [
+                        {
+                            provide: KBQ_TAGS_DEFAULT_OPTIONS,
+                            useValue: { separatorKeyCodes: [ENTER$1] }
+                        }
+                    ],
                     exports: [
                         KbqTagList,
                         KbqTag,
@@ -1753,12 +1671,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqTagAvatar,
                         KbqTagRemove,
                         ...COMPONENTS
-                    ],
-                    providers: [
-                        {
-                            provide: KBQ_TAGS_DEFAULT_OPTIONS,
-                            useValue: { separatorKeyCodes: [ENTER$1] }
-                        }
                     ]
                 }]
         }] });