@koobiq/components 18.34.0 → 18.35.0

package/fesm2022/koobiq-components-tags.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Directive, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ContentChildren, ContentChild, forwardRef, Output, Input, Inject, inject, DestroyRef, Optional, Self, NgModule } from '@angular/core';
+import { InjectionToken, Directive, inject, EventEmitter, signal, booleanAttribute, ElementRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, Output, ViewChild, ContentChildren, forwardRef, Inject, DestroyRef, Optional, Self, NgModule } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i3 from '@angular/forms';
-import { SPACE, BACKSPACE, DELETE, HOME, END, ENTER, TAB, COMMA, SEMICOLON } from '@koobiq/cdk/keycodes';
+import { BACKSPACE as BACKSPACE$1, HOME, END, ENTER as ENTER$1, TAB, SPACE as SPACE$1, COMMA, SEMICOLON } from '@koobiq/cdk/keycodes';
 import * as i3$1 from '@koobiq/components/autocomplete';
 import * as i1 from '@koobiq/components/core';
-import { KbqColorDirective, KbqComponentColors, KBQ_TITLE_TEXT_REF, isBoolean } from '@koobiq/components/core';
+import { KbqFieldSizingContent, KbqColorDirective, isUndefined, kbqInjectElementRef, KbqComponentColors, isNull, KBQ_TITLE_TEXT_REF, isBoolean } from '@koobiq/components/core';
 import * as i1$1 from '@koobiq/components/form-field';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import * as i2 from '@angular/cdk/bidi';
@@ -13,13 +13,25 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
 import { Subject, merge } from 'rxjs';
-import { take, startWith } from 'rxjs/operators';
+import { take, startWith, filter } from 'rxjs/operators';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { SPACE, DELETE, BACKSPACE, ENTER, ESCAPE, F2 } from '@angular/cdk/keycodes';
 import { KbqIcon } from '@koobiq/components/icon';
 import { PlatformModule } from '@angular/cdk/platform';
 
 /** Injection token to be used to override the default options for the chips module. */
 const KBQ_TAGS_DEFAULT_OPTIONS = new InjectionToken('kbq-tags-default-options');
 
+/**
+ * Event object emitted by KbqTag when the tag is edited.
+ */
+class KbqTagEditChange {
+    constructor(tag, type, reason) {
+        this.tag = tag;
+        this.type = type;
+        this.reason = reason;
+    }
+}
 /** Event object emitted by KbqTag when selected or deselected. */
 class KbqTagSelectionChange {
     constructor(source, selected, isUserInput = false) {
@@ -29,6 +41,9 @@ class KbqTagSelectionChange {
     }
 }
 const TAG_ATTRIBUTE_NAMES = ['kbq-basic-tag'];
+const getTagEditInputMissingError = () => {
+    return Error('Editable kbq-tag must contain a KbqTagEditInput.');
+};
 /**
  * Dummy directive to add CSS class to tag avatar.
  * @docs-private
@@ -59,7 +74,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     host: { class: 'kbq-tag-trailing-icon' }
                 }]
         }] });
+/**
+ * Directive to add submit behavior for the editable tag.
+ */
+class KbqTagEditSubmit {
+    constructor() {
+        /** @docs-private */
+        this.tag = inject(KbqTag);
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagEditSubmit, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqTagEditSubmit, isStandalone: true, selector: "[kbqTagEditSubmit]", host: { listeners: { "click": "tag.submitEditing(\"click\")" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-edit-submit" }, exportAs: ["kbqTagEditSubmit"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagEditSubmit, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[kbqTagEditSubmit]',
+                    exportAs: 'kbqTagEditSubmit',
+                    host: {
+                        class: 'kbq-tag-edit-submit',
+                        '[attr.tabindex]': '-1',
+                        '(click)': 'tag.submitEditing("click")'
+                    }
+                }]
+        }] });
+/**
+ * Directive to add input behavior for the editable tag.
+ */
+class KbqTagEditInput {
+    constructor() {
+        this.tag = inject(KbqTag);
+    }
+    /** @docs-private */
+    handleKeydown(event) {
+        switch (event.keyCode) {
+            case ESCAPE: {
+                event.stopPropagation();
+                this.tag.cancelEditing('escape');
+                break;
+            }
+            case ENTER: {
+                event.stopPropagation();
+                this.tag.submitEditing('enter');
+                break;
+            }
+            // prevent KbqTag from receiving these keydown events
+            case BACKSPACE:
+            case DELETE:
+            case SPACE: {
+                event.stopPropagation();
+                break;
+            }
+            default:
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqTagEditInput, isStandalone: true, selector: "[kbqTagEditInput]", host: { listeners: { "keydown": "handleKeydown($event)" }, classAttribute: "kbq-tag-edit-input" }, exportAs: ["kbqTagEditInput"], hostDirectives: [{ directive: i1.KbqFieldSizingContent }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagEditInput, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: '[kbqTagEditInput]',
+                    exportAs: 'kbqTagEditInput',
+                    host: {
+                        class: 'kbq-tag-edit-input',
+                        '(keydown)': 'handleKeydown($event)'
+                    },
+                    hostDirectives: [KbqFieldSizingContent]
+                }]
+        }] });
 class KbqTag extends KbqColorDirective {
+    /**
+     * Whether the tag list is editable.
+     *
+     * @docs-private
+     */
+    get tagListEditable() {
+        return !!this.tagList?.editable;
+    }
+    /** Whether the tag is editable. */
+    get editable() {
+        return isUndefined(this._editable) ? this.tagListEditable : this._editable;
+    }
+    set editable(value) {
+        this._editable = value;
+    }
     /** Whether the tag is selected. */
     get selected() {
         return this._selected;
@@ -73,7 +173,7 @@ class KbqTag extends KbqColorDirective {
     }
     /** The value of the tag. Defaults to the content inside `<kbq-tag>` tags. */
     get value() {
-        return this._value !== undefined ? this._value : this.elementRef.nativeElement.textContent;
+        return this._value ?? this.elementRef.nativeElement.textContent?.trim();
     }
     set value(value) {
         this._value = value;
@@ -113,19 +213,34 @@ class KbqTag extends KbqColorDirective {
             this._disabled = value;
         }
     }
-    constructor(elementRef, changeDetectorRef, _ngZone) {
+    constructor(changeDetectorRef, _ngZone) {
         super();
-        this.elementRef = elementRef;
         this.changeDetectorRef = changeDetectorRef;
         this._ngZone = _ngZone;
+        this.focusMonitor = inject(FocusMonitor);
+        this.tagList = inject(KbqTagList, { optional: true });
+        /** @docs-private */
+        this.elementRef = kbqInjectElementRef();
         /** Emits when the tag is focused. */
         this.onFocus = new Subject();
         /** Emits when the tag is blurred. */
         this.onBlur = new Subject();
+        /** @docs-private */
+        this.nativeElement = this.elementRef.nativeElement;
         /** Whether the tag has focus. */
         this.hasFocus = false;
         /** Whether the tag list is selectable */
         this.tagListSelectable = true;
+        /** Whether the tag edits can't be submitted. */
+        this.preventEditSubmit = false;
+        /**
+         * Emits event when the tag is edited.
+         */
+        this.editChange = new EventEmitter();
+        /**
+         * @docs-private
+         */
+        this.editing = signal(false);
         /** Emitted when the tag is selected or deselected. */
         this.selectionChange = new EventEmitter();
         /** Emitted when the tag is destroyed. */
@@ -140,11 +255,19 @@ class KbqTag extends KbqColorDirective {
         this.color = KbqComponentColors.ContrastFade;
         this.setDefaultColor(KbqComponentColors.ContrastFade);
         this.addHostClassName();
-        this.nativeElement = elementRef.nativeElement;
     }
     ngAfterContentInit() {
         this.addClassModificatorForIcons();
     }
+    ngAfterViewInit() {
+        this.focusMonitor.monitor(this.elementRef, true).subscribe((focusOrigin) => {
+            isNull(focusOrigin) ? this.blur() : this.focus();
+        });
+    }
+    ngOnDestroy() {
+        this.focusMonitor.stopMonitoring(this.elementRef);
+        this.destroyed.emit({ tag: this });
+    }
     addClassModificatorForIcons() {
         const icons = this.contentChildren.map((item) => item.elementRef.nativeElement);
         if (icons.length === 1) {
@@ -176,9 +299,6 @@ class KbqTag extends KbqColorDirective {
         }
         this.elementRef.nativeElement.classList.add('kbq-standard-tag');
     }
-    ngOnDestroy() {
-        this.destroyed.emit({ tag: this });
-    }
     select() {
         if (!this._selected) {
             this._selected = true;
@@ -204,11 +324,11 @@ class KbqTag extends KbqColorDirective {
     }
     /** Allows for programmatic focusing of the tag. */
     focus() {
-        if (!this.selectable) {
+        if (!this.selectable && !this.editable)
             return;
-        }
         if (!this.hasFocus) {
-            this.elementRef.nativeElement.focus();
+            if (!this.editing())
+                this.elementRef.nativeElement.focus();
             this.onFocus.next({ tag: this });
             Promise.resolve().then(() => {
                 this.hasFocus = true;
@@ -227,6 +347,7 @@ class KbqTag extends KbqColorDirective {
             this.removed.emit({ tag: this });
         }
     }
+    /** @docs-private */
     handleMousedown(event) {
         if (this.disabled || !this.selectable) {
             event.preventDefault();
@@ -235,6 +356,7 @@ class KbqTag extends KbqColorDirective {
             event.stopPropagation();
         }
     }
+    /** @docs-private */
     handleKeydown(event) {
         if (this.disabled) {
             return;
@@ -255,10 +377,16 @@ class KbqTag extends KbqColorDirective {
                 // Always prevent space from scrolling the page since the list has focus
                 event.preventDefault();
                 break;
+            case F2:
+            case ENTER:
+                this.startEditing(event.key);
+                break;
             default:
         }
     }
+    /** @docs-private */
     blur() {
+        this.cancelEditing('focusout');
         // When animations are enabled, Angular may end up removing the tag from the DOM a little
         // earlier than usual, causing it to be blurred and throwing off the logic in the tag list
         // that moves focus not the next item. To work around the issue, we defer marking the tag
@@ -273,6 +401,42 @@ class KbqTag extends KbqColorDirective {
             });
         });
     }
+    /** @docs-private */
+    handleDblClick(event) {
+        if (this.disabled || !this.editable)
+            return;
+        event.stopPropagation();
+        this.startEditing('dblclick');
+    }
+    startEditing(reason) {
+        if (!this.editable || this.editing())
+            return;
+        this.editing.set(true);
+        this.editChange.emit({ tag: this, type: 'start', reason });
+        setTimeout(() => {
+            const input = this.editInputElementRef?.nativeElement;
+            if (!input)
+                throw getTagEditInputMissingError();
+            input.focus();
+            input.select();
+        });
+    }
+    /** @docs-private */
+    cancelEditing(reason) {
+        if (!this.editing())
+            return;
+        this.editing.set(false);
+        this.editChange.emit({ tag: this, type: 'cancel', reason });
+        this.textElement.nativeElement.scrollTo({ left: 0, behavior: 'instant' });
+    }
+    /** @docs-private */
+    submitEditing(reason) {
+        if (!this.editing() || this.preventEditSubmit)
+            return;
+        this.editing.set(false);
+        this.editChange.emit({ tag: this, type: 'submit', reason });
+        this.textElement.nativeElement.scrollTo({ left: 0, behavior: 'instant' });
+    }
     dispatchSelectionChange(isUserInput = false) {
         this.selectionChange.emit({
             source: this,
@@ -280,12 +444,44 @@ class KbqTag extends KbqColorDirective {
             selected: this._selected
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTag, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { selected: "selected", value: "value", selectable: "selectable", removable: "removable", tabindex: "tabindex", disabled: "disabled" }, outputs: { selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "mousedown": "handleMousedown($event)", "keydown": "handleKeydown($event)", "focus": "focus()", "blur": "blur()" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "class.kbq-tag-with-avatar": "avatar", "class.kbq-tag-with-icon": "contentChildren", "class.kbq-tag-with-trailing-icon": "trailingIcon || removeIcon", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(() => KbqTagRemove), descendants: true }, { propertyName: "contentChildren", predicate: KbqIcon }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqTag"], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-tag__wrapper\">\n    <ng-content select=\"[kbq-icon]:not([kbqTagRemove])\" />\n    <span #kbqTitleText class=\"kbq-tag__text\">\n        <ng-content />\n    </span>\n    <ng-content select=\"[kbqTagRemove]\" />\n</div>\n", styles: [".kbq-tag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);border-radius:4px;cursor:default;outline:none;box-sizing:border-box}.kbq-tag .kbq-icon.kbq-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon.kbq-tag-remove:hover{cursor:pointer}.kbq-tag.kbq-disabled .kbq-icon.kbq-tag-remove:hover{cursor:default}.kbq-tag .kbq-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 var(--kbq-tag-size-content-gap-horizontal)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTag, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { editable: ["editable", "editable", booleanAttribute], preventEditSubmit: ["preventEditSubmit", "preventEditSubmit", booleanAttribute], selected: "selected", value: "value", selectable: "selectable", removable: "removable", tabindex: "tabindex", disabled: "disabled" }, outputs: { editChange: "editChange", selectionChange: "selectionChange", destroyed: "destroyed", removed: "removed" }, host: { listeners: { "dblclick": "handleDblClick($event)", "mousedown": "handleMousedown($event)", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled || null", "class.kbq-selected": "selected", "class.kbq-focused": "hasFocus", "class.kbq-tag-with-avatar": "avatar", "class.kbq-tag-with-icon": "contentChildren", "class.kbq-tag-with-trailing-icon": "trailingIcon || removeIcon", "class.kbq-disabled": "disabled", "class.kbq-tag_editable": "editable", "class.kbq-tag_editing": "editing()" }, classAttribute: "kbq-tag" }, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], queries: [{ propertyName: "editInputElementRef", first: true, predicate: KbqTagEditInput, descendants: true, read: ElementRef }, { propertyName: "avatar", first: true, predicate: KbqTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: KbqTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(() => KbqTagRemove), descendants: true }, { propertyName: "contentChildren", predicate: KbqIcon }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["kbqTitleText"], descendants: true }], exportAs: ["kbqTag"], usesInheritance: true, ngImport: i0, template: `
+        <div class="kbq-tag__wrapper">
+            <ng-content select="[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])" />
+            <span #kbqTitleText class="kbq-tag__text">
+                @if (editing()) {
+                    <ng-content select="[kbqTagEditInput]" />
+                } @else {
+                    <ng-content />
+                }
+            </span>
+            @if (editing()) {
+                <ng-content select="[kbqTagEditSubmit]" />
+            } @else {
+                <ng-content select="[kbqTagRemove]" />
+            }
+        </div>
+    `, isInline: true, styles: [".kbq-tag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);border-radius:4px;cursor:default;outline:none;box-sizing:border-box}.kbq-tag .kbq-icon.kbq-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon.kbq-tag-remove:hover{cursor:pointer}.kbq-tag.kbq-disabled .kbq-icon.kbq-tag-remove:hover{cursor:default}.kbq-tag .kbq-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 var(--kbq-tag-size-content-gap-horizontal)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left)}.kbq-tag .kbq-tag-edit-input{background:transparent;padding:0;margin:0;border:none;outline:none;min-width:var(--kbq-size-xs);max-width:100%}.kbq-tag .kbq-tag-edit-input::-ms-clear{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-webkit-search-decoration,.kbq-tag .kbq-tag-edit-input::-webkit-search-cancel-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-decoration{display:none}.kbq-tag .kbq-tag-edit-input.kbq-input{min-height:unset!important;border-radius:unset!important;padding:unset!important}.kbq-tag .kbq-tag-edit-submit{margin-right:var(--kbq-size-3xs)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTag, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]', exportAs: 'kbqTag', host: {
+            args: [{ selector: 'kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]', exportAs: 'kbqTag', template: `
+        <div class="kbq-tag__wrapper">
+            <ng-content select="[kbq-icon]:not([kbqTagRemove]):not([kbqTagEditSubmit])" />
+            <span #kbqTitleText class="kbq-tag__text">
+                @if (editing()) {
+                    <ng-content select="[kbqTagEditInput]" />
+                } @else {
+                    <ng-content />
+                }
+            </span>
+            @if (editing()) {
+                <ng-content select="[kbqTagEditSubmit]" />
+            } @else {
+                <ng-content select="[kbqTagRemove]" />
+            }
+        </div>
+    `, host: {
                         class: 'kbq-tag',
                         '[attr.tabindex]': 'tabindex',
                         '[attr.disabled]': 'disabled || null',
@@ -295,12 +491,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '[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()',
+                        '(dblclick)': 'handleDblClick($event)',
                         '(mousedown)': 'handleMousedown($event)',
-                        '(keydown)': 'handleKeydown($event)',
-                        '(focus)': 'focus()',
-                        '(blur)': 'blur()'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], template: "<div class=\"kbq-tag__wrapper\">\n    <ng-content select=\"[kbq-icon]:not([kbqTagRemove])\" />\n    <span #kbqTitleText class=\"kbq-tag__text\">\n        <ng-content />\n    </span>\n    <ng-content select=\"[kbqTagRemove]\" />\n</div>\n", styles: [".kbq-tag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);border-radius:4px;cursor:default;outline:none;box-sizing:border-box}.kbq-tag .kbq-icon.kbq-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon.kbq-tag-remove:hover{cursor:pointer}.kbq-tag.kbq-disabled .kbq-icon.kbq-tag-remove:hover{cursor:default}.kbq-tag .kbq-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 var(--kbq-tag-size-content-gap-horizontal)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { textElement: [{
+                        '(keydown)': 'handleKeydown($event)'
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTag }], styles: [".kbq-tag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical) var(--kbq-tag-size-padding-horizontal);border-radius:4px;cursor:default;outline:none;box-sizing:border-box}.kbq-tag .kbq-icon.kbq-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:var(--kbq-tag-size-close-button-margin-right)}.kbq-tag .kbq-icon.kbq-tag-remove:hover{cursor:pointer}.kbq-tag.kbq-disabled .kbq-icon.kbq-tag-remove:hover{cursor:default}.kbq-tag .kbq-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 var(--kbq-tag-size-content-gap-horizontal)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left)}.kbq-tag .kbq-tag-edit-input{background:transparent;padding:0;margin:0;border:none;outline:none;min-width:var(--kbq-size-xs);max-width:100%}.kbq-tag .kbq-tag-edit-input::-ms-clear{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-ms-reveal{display:none;width:0;height:0}.kbq-tag .kbq-tag-edit-input::-webkit-search-decoration,.kbq-tag .kbq-tag-edit-input::-webkit-search-cancel-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-button,.kbq-tag .kbq-tag-edit-input::-webkit-search-results-decoration{display:none}.kbq-tag .kbq-tag-edit-input.kbq-input{min-height:unset!important;border-radius:unset!important;padding:unset!important}.kbq-tag .kbq-tag-edit-submit{margin-right:var(--kbq-size-3xs)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { editable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], preventEditSubmit: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], editInputElementRef: [{
+                type: ContentChild,
+                args: [KbqTagEditInput, { read: ElementRef }]
+            }], editChange: [{
+                type: Output
+            }], textElement: [{
                 type: ViewChild,
                 args: ['kbqTitleText']
             }], contentChildren: [{
@@ -410,6 +618,10 @@ class KbqTagList {
     get tagRemoveChanges() {
         return merge(...this.tags.map((tag) => tag.destroyed));
     }
+    /** Combined stream of all of the child tags' edit change events. */
+    get tagEditChanges() {
+        return merge(...this.tags.map((tag) => tag.editChange));
+    }
     /** The array of selected tags inside tag list. */
     get selected() {
         return this.multiple ? this.selectionModel.selected : this.selectionModel.selected[0];
@@ -541,6 +753,8 @@ class KbqTagList {
          * @docs-private
          */
         this.stateChanges = new Subject();
+        /** Whether the tag list is editable. */
+        this.editable = false;
         this._tabIndex = 0;
         /**
          * Event that emits whenever the raw value of the tag-list changes. This is here primarily
@@ -726,7 +940,7 @@ class KbqTagList {
     keydown(event) {
         const target = event.target;
         // If they are on an empty input and hit backspace, focus the last tag
-        if (event.keyCode === BACKSPACE && this.isInputEmpty(target)) {
+        if (event.keyCode === BACKSPACE$1 && this.isInputEmpty(target)) {
             this.keyManager.setLastItemActive();
             event.preventDefault();
         }
@@ -918,6 +1132,7 @@ class KbqTagList {
         this.listenToTagsFocus();
         this.listenToTagsSelection();
         this.listenToTagsRemoved();
+        this.listenToTagsEdit();
     }
     dropSubscriptions() {
         if (this.tagFocusSubscription) {
@@ -936,6 +1151,10 @@ class KbqTagList {
             this.tagRemoveSubscription.unsubscribe();
             this.tagRemoveSubscription = null;
         }
+        if (this.tagEditSubscription) {
+            this.tagEditSubscription.unsubscribe();
+            this.tagEditSubscription = null;
+        }
     }
     /** Listens to user-generated selection events on each tag. */
     listenToTagsSelection() {
@@ -985,6 +1204,11 @@ class KbqTagList {
             }
         });
     }
+    listenToTagsEdit() {
+        this.tagEditSubscription = this.tagEditChanges
+            .pipe(filter(({ type }) => type === 'submit'))
+            .subscribe(() => this.propagateTagsChanges());
+    }
     /** Checks whether an event comes from inside a tag element. */
     originatesFromTag(event) {
         let currentElement = event.target;
@@ -1022,7 +1246,7 @@ class KbqTagList {
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ErrorStateMatcher }, { token: i2.Directionality, optional: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqTagList, selector: "kbq-tag-list", inputs: { multiple: "multiple", compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: "disabled", selectable: "selectable", tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, outputs: { valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "attr.tabindex": "disabled ? null : tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTagList"], ngImport: i0, template: "<div class=\"kbq-tags-list__list-container\">\n    <ng-content />\n</div>\n\n@if (canShowCleaner) {\n    <div class=\"kbq-tags-list__cleaner\">\n        <ng-content select=\"kbq-cleaner\" />\n    </div>\n}\n", styles: [".kbq-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-input{border:none;outline:none;background:transparent;text-overflow:ellipsis;min-height:unset;padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:4px;padding-right:unset}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqTagList, selector: "kbq-tag-list", inputs: { multiple: "multiple", compareWith: "compareWith", value: "value", required: "required", placeholder: "placeholder", disabled: "disabled", selectable: "selectable", editable: ["editable", "editable", booleanAttribute], tabIndex: "tabIndex", errorStateMatcher: "errorStateMatcher", orientation: "orientation" }, outputs: { valueChange: "valueChange", change: "change" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "keydown($event)" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "attr.tabindex": "disabled ? null : tabIndex", "id": "uid" }, classAttribute: "kbq-tag-list" }, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTagList"], ngImport: i0, template: "<div class=\"kbq-tags-list__list-container\">\n    <ng-content />\n</div>\n\n@if (canShowCleaner) {\n    <div class=\"kbq-tags-list__cleaner\">\n        <ng-content select=\"kbq-cleaner\" />\n    </div>\n}\n", styles: [".kbq-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-input{border:none;outline:none;background:transparent;text-overflow:ellipsis;min-height:unset;padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:4px;padding-right:unset}.kbq-tag-input.kbq-input{padding:unset;min-height:unset}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagList, decorators: [{
             type: Component,
@@ -1035,7 +1259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         '(focus)': 'focus()',
                         '(blur)': 'blur()',
                         '(keydown)': 'keydown($event)'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], template: "<div class=\"kbq-tags-list__list-container\">\n    <ng-content />\n</div>\n\n@if (canShowCleaner) {\n    <div class=\"kbq-tags-list__cleaner\">\n        <ng-content select=\"kbq-cleaner\" />\n    </div>\n}\n", styles: [".kbq-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-input{border:none;outline:none;background:transparent;text-overflow:ellipsis;min-height:unset;padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:4px;padding-right:unset}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], template: "<div class=\"kbq-tags-list__list-container\">\n    <ng-content />\n</div>\n\n@if (canShowCleaner) {\n    <div class=\"kbq-tags-list__cleaner\">\n        <ng-content select=\"kbq-cleaner\" />\n    </div>\n}\n", styles: [".kbq-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.kbq-tag-list:focus-visible{outline:none}.kbq-tag-input{border:none;outline:none;background:transparent;text-overflow:ellipsis;min-height:unset;padding-top:var(--kbq-tag-size-padding-vertical);padding-bottom:var(--kbq-tag-size-padding-vertical);padding-left:4px;padding-right:unset}.kbq-tag-input.kbq-input{padding:unset;min-height:unset}.kbq-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;gap:var(--kbq-tag-list-size-content-gap)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto}.kbq-tags-list__list-container .kbq-tag-input:first-child{padding-left:var(--kbq-size-s)}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding-top:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical) - var(--kbq-form-field-size-border-width))}\n", ".kbq-tag,.kbq-tag-list,.kbq-tag-input{--kbq-tag-list-size-content-gap: var(--kbq-size-xxs);--kbq-tag-size-padding-horizontal: var(--kbq-size-xxs);--kbq-tag-size-padding-vertical: var(--kbq-size-3xs);--kbq-tag-size-content-gap-horizontal: var(--kbq-size-3xs);--kbq-tag-size-icon-margin-left: var(--kbq-size-3xs);--kbq-tag-size-close-button-margin-right: var(--kbq-size-3xs);--kbq-tag-theme-fade-on-default-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-default-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-default-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-default-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-background: var(--kbq-states-background-theme-fade-hover);--kbq-tag-theme-fade-on-states-hover-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-hover-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-hover-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-background: var(--kbq-background-theme-fade);--kbq-tag-theme-fade-on-states-focus-text: var(--kbq-foreground-theme);--kbq-tag-theme-fade-on-states-focus-icon: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-close-button: var(--kbq-icon-theme);--kbq-tag-theme-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-theme-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-theme-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-theme-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-theme-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-default-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-default-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-default-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-default-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);--kbq-tag-contrast-fade-on-states-hover-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-hover-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-hover-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-background: var(--kbq-background-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-text: var(--kbq-foreground-contrast);--kbq-tag-contrast-fade-on-states-focus-icon: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-close-button: var(--kbq-icon-contrast-fade);--kbq-tag-contrast-fade-on-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-contrast-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-contrast-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-contrast-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-default-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-default-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-default-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-default-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-tag-error-fade-on-states-hover-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-hover-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-hover-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-background: var(--kbq-background-error-fade);--kbq-tag-error-fade-on-states-focus-text: var(--kbq-foreground-error);--kbq-tag-error-fade-on-states-focus-icon: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-close-button: var(--kbq-icon-error);--kbq-tag-error-fade-on-states-focus-outline: var(--kbq-states-line-focus-error);--kbq-tag-error-fade-on-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-error-fade-on-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-error-fade-on-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-error-fade-on-states-disabled-close-button: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-default-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-default-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-default-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-default-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-background: var(--kbq-states-background-warning-fade-hover);--kbq-tag-warning-fade-states-hover-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-hover-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-hover-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-background: var(--kbq-background-warning-fade);--kbq-tag-warning-fade-states-focus-text: var(--kbq-foreground-warning);--kbq-tag-warning-fade-states-focus-icon: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-close-button: var(--kbq-icon-warning);--kbq-tag-warning-fade-states-focus-outline: var(--kbq-states-line-focus-theme);--kbq-tag-warning-fade-states-disabled-background: var(--kbq-states-background-disabled);--kbq-tag-warning-fade-states-disabled-text: var(--kbq-states-foreground-disabled);--kbq-tag-warning-fade-states-disabled-icon: var(--kbq-states-icon-disabled);--kbq-tag-warning-fade-states-disabled-close-button: var(--kbq-states-icon-disabled)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ErrorStateMatcher }, { type: i2.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i3.NgForm, decorators: [{
@@ -1060,6 +1284,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], selectable: [{
                 type: Input
+            }], editable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], tabIndex: [{
                 type: Input
             }], valueChange: [{
@@ -1083,9 +1310,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 const KbqTagInputDefaultSeparators = {
-    [ENTER]: { symbol: /\r?\n/, key: 'Enter' },
+    [ENTER$1]: { symbol: /\r?\n/, key: 'Enter' },
     [TAB]: { symbol: /\t/, key: 'Tab' },
-    [SPACE]: { symbol: / /, key: ' ' },
+    [SPACE$1]: { symbol: / /, key: ' ' },
     [COMMA]: { symbol: /,/, key: ',' },
     [SEMICOLON]: { symbol: /;/, key: ';' }
 };
@@ -1348,6 +1575,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }] } });
 
+const COMPONENTS = [
+    KbqTagEditSubmit,
+    KbqTagEditInput
+];
 class KbqTagsModule {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: KbqTagsModule, declarations: [KbqTagList,
@@ -1355,30 +1586,36 @@ class KbqTagsModule {
             KbqTagInput,
             KbqTagTrailingIcon,
             KbqTagAvatar,
-            KbqTagRemove], imports: [PlatformModule], exports: [KbqTagList,
+            KbqTagRemove], imports: [PlatformModule, KbqTagEditSubmit,
+            KbqTagEditInput], exports: [KbqTagList,
             KbqTag,
             KbqTagInput,
             KbqTagTrailingIcon,
             KbqTagAvatar,
-            KbqTagRemove] }); }
+            KbqTagRemove, KbqTagEditSubmit,
+            KbqTagEditInput] }); }
     /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagsModule, providers: [
             {
                 provide: KBQ_TAGS_DEFAULT_OPTIONS,
-                useValue: { separatorKeyCodes: [ENTER] }
+                useValue: { separatorKeyCodes: [ENTER$1] }
             }
         ], imports: [PlatformModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTagsModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [PlatformModule],
+                    imports: [
+                        PlatformModule,
+                        ...COMPONENTS
+                    ],
                     exports: [
                         KbqTagList,
                         KbqTag,
                         KbqTagInput,
                         KbqTagTrailingIcon,
                         KbqTagAvatar,
-                        KbqTagRemove
+                        KbqTagRemove,
+                        ...COMPONENTS
                     ],
                     declarations: [
                         KbqTagList,
@@ -1391,7 +1628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     providers: [
                         {
                             provide: KBQ_TAGS_DEFAULT_OPTIONS,
-                            useValue: { separatorKeyCodes: [ENTER] }
+                            useValue: { separatorKeyCodes: [ENTER$1] }
                         }
                     ]
                 }]
@@ -1401,5 +1638,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_TAGS_DEFAULT_OPTIONS, KbqTag, KbqTagAvatar, KbqTagInput, KbqTagList, KbqTagListChange, KbqTagRemove, KbqTagSelectionChange, KbqTagTrailingIcon, KbqTagsModule };
+export { KBQ_TAGS_DEFAULT_OPTIONS, KbqTag, KbqTagAvatar, KbqTagEditChange, KbqTagEditInput, KbqTagEditSubmit, KbqTagInput, KbqTagList, KbqTagListChange, KbqTagRemove, KbqTagSelectionChange, KbqTagTrailingIcon, KbqTagsModule };
 //# sourceMappingURL=koobiq-components-tags.mjs.map