@koobiq/components 17.0.0-rc.1 → 17.0.0-rc.11

package/fesm2022/koobiq-components-tags.mjs

@@ -1,22 +1,22 @@
-import { PlatformModule } from '@angular/cdk/platform';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, Directive, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ContentChildren, ContentChild, forwardRef, Output, Input, Inject, Optional, Self, NgModule } from '@angular/core';
-import { SPACE, BACKSPACE, DELETE, HOME, END, ENTER, TAB, COMMA, SEMICOLON } from '@koobiq/cdk/keycodes';
 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 * as i3$1 from '@koobiq/components/autocomplete';
+import * as i1 from '@koobiq/components/core';
+import { mixinColor, mixinDisabled, KbqComponentColors, KBQ_TITLE_TEXT_REF, mixinErrorState, isBoolean } from '@koobiq/components/core';
 import * as i1$1 from '@koobiq/components/form-field';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import * as i2 from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
-import * as i1 from '@koobiq/components/core';
-import { mixinColor, mixinDisabled, KbqComponentColors, KBQ_TITLE_TEXT_REF, mixinErrorState } from '@koobiq/components/core';
 import { Subject, merge } from 'rxjs';
 import { take, takeUntil, startWith } from 'rxjs/operators';
 import { KbqIcon } from '@koobiq/components/icon';
-import * as i3$1 from '@koobiq/components/autocomplete';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
+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');
@@ -82,9 +82,7 @@ class KbqTag extends KbqTagMixinBase {
     }
     /** 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 !== undefined ? this._value : this.elementRef.nativeElement.textContent;
     }
     set value(value) {
         this._value = value;
@@ -131,7 +129,7 @@ class KbqTag extends KbqTagMixinBase {
         this._ngZone = _ngZone;
         /** Emits when the tag is focused. */
         this.onFocus = new Subject();
-        /** Emits when the tag is blured. */
+        /** Emits when the tag is blurred. */
         this.onBlur = new Subject();
         /** Whether the tag has focus. */
         this.hasFocus = false;
@@ -291,7 +289,7 @@ class KbqTag extends KbqTagMixinBase {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", 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: "17.2.0", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { color: "color", 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])\"></ng-content>\n    <span class=\"kbq-tag__text\" #kbqTitleText><ng-content></ng-content></span>\n    <ng-content select=\"[kbqTagRemove]\"></ng-content>\n</div>\n", styles: [".kbq-tag{position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical, 4px) var(--kbq-tag-size-padding-horizontal, 4px);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, 2px)}.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, 2px)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left, 2px)}.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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: { color: "color", 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])\"></ng-content>\n    <span\n        #kbqTitleText\n        class=\"kbq-tag__text\"\n    >\n        <ng-content></ng-content>\n    </span>\n    <ng-content select=\"[kbqTagRemove]\"></ng-content>\n</div>\n", styles: [".kbq-tag{position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical, 2px) var(--kbq-tag-size-padding-horizontal, 4px);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, 2px)}.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, 2px)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left, 2px)}.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: "17.2.0", ngImport: i0, type: KbqTag, decorators: [{
             type: Component,
@@ -309,7 +307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '(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])\"></ng-content>\n    <span class=\"kbq-tag__text\" #kbqTitleText><ng-content></ng-content></span>\n    <ng-content select=\"[kbqTagRemove]\"></ng-content>\n</div>\n", styles: [".kbq-tag{position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical, 4px) var(--kbq-tag-size-padding-horizontal, 4px);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, 2px)}.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, 2px)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left, 2px)}.kbq-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}\n"] }]
+                    }, 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])\"></ng-content>\n    <span\n        #kbqTitleText\n        class=\"kbq-tag__text\"\n    >\n        <ng-content></ng-content>\n    </span>\n    <ng-content select=\"[kbqTagRemove]\"></ng-content>\n</div>\n", styles: [".kbq-tag{position:relative;display:inline-block;max-width:100%;padding:var(--kbq-tag-size-padding-vertical, 2px) var(--kbq-tag-size-padding-horizontal, 4px);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, 2px)}.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, 2px)}.kbq-tag .kbq-icon_left{margin-left:var(--kbq-tag-size-icon-margin-left, 2px)}.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: [{
                 type: ViewChild,
                 args: ['kbqTitleText']
@@ -610,9 +608,7 @@ class KbqTagList extends KbqTagListMixinBase {
         }
         // Prevents the tag list from capturing focus and redirecting
         // it back to the first tag when the user tabs out.
-        this.keyManager.tabOut
-            .pipe(takeUntil(this.destroyed))
-            .subscribe(() => {
+        this.keyManager.tabOut.pipe(takeUntil(this.destroyed)).subscribe(() => {
             this._tabIndex = -1;
             setTimeout(() => {
                 this._tabIndex = this.userTabIndex || 0;
@@ -620,13 +616,13 @@ class KbqTagList extends KbqTagListMixinBase {
             });
         });
         // When the list changes, re-subscribe
-        this.tags.changes
-            .pipe(startWith(null), takeUntil(this.destroyed))
-            .subscribe(() => {
+        this.tags.changes.pipe(startWith(null), takeUntil(this.destroyed)).subscribe(() => {
             if (this.disabled) {
                 // Since this happens after the content has been
                 // checked, we need to defer it to the next tick.
-                Promise.resolve().then(() => { this.syncTagsDisabledState(); });
+                Promise.resolve().then(() => {
+                    this.syncTagsDisabledState();
+                });
             }
             this.resetTags();
             // Reset tags selected/deselected status
@@ -668,8 +664,7 @@ class KbqTagList extends KbqTagListMixinBase {
         this.tagInput = inputElement;
         // todo need rethink about it
         if (this.ngControl && inputElement.ngControl?.statusChanges) {
-            inputElement.ngControl.statusChanges
-                .subscribe(() => this.ngControl.control.setErrors(inputElement.ngControl.errors));
+            inputElement.ngControl.statusChanges.subscribe(() => this.ngControl.control.setErrors(inputElement.ngControl.errors));
         }
     }
     // Implemented as part of ControlValueAccessor.
@@ -971,23 +966,20 @@ class KbqTagList extends KbqTagListMixinBase {
     }
     /** Listens to user-generated selection events on each tag. */
     listenToTagsFocus() {
-        this.tagFocusSubscription = this.tagFocusChanges
-            .subscribe((event) => {
+        this.tagFocusSubscription = this.tagFocusChanges.subscribe((event) => {
             const tagIndex = this.tags.toArray().indexOf(event.tag);
             if (this.isValidIndex(tagIndex)) {
                 this.keyManager.updateActiveItem(tagIndex);
             }
             this.stateChanges.next();
         });
-        this.tagBlurSubscription = this.tagBlurChanges
-            .subscribe(() => {
+        this.tagBlurSubscription = this.tagBlurChanges.subscribe(() => {
             this.blur();
             this.stateChanges.next();
         });
     }
     listenToTagsRemoved() {
-        this.tagRemoveSubscription = this.tagRemoveChanges
-            .subscribe((event) => {
+        this.tagRemoveSubscription = this.tagRemoveChanges.subscribe((event) => {
             const tag = event.tag;
             const tagIndex = this.tags.toArray().indexOf(event.tag);
             // In case the tag that will be removed is currently focused, we temporarily store
@@ -1031,11 +1023,11 @@ class KbqTagList extends KbqTagListMixinBase {
     }
     propagateSelectableToChildren() {
         if (this.tags) {
-            this.tags.forEach((tag) => tag.tagListSelectable = this._selectable);
+            this.tags.forEach((tag) => (tag.tagListSelectable = this._selectable));
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", 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: "14.0.0", version: "17.2.0", 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"], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-tags-list__list-container\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"kbq-tags-list__cleaner\"\n     *ngIf=\"canShowCleaner\">\n    <ng-content select=\"kbq-cleaner\"></ng-content>\n</div>\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, 4px);padding-bottom:var(--kbq-tag-size-padding-vertical, 4px);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, 4px)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding:calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-right, 12px) calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-left, 4px)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", 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"], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-tags-list__list-container\">\n    <ng-content></ng-content>\n</div>\n\n<div\n    *ngIf=\"canShowCleaner\"\n    class=\"kbq-tags-list__cleaner\"\n>\n    <ng-content select=\"kbq-cleaner\"></ng-content>\n</div>\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, 2px);padding-bottom:var(--kbq-tag-size-padding-vertical, 2px);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, 4px)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding:calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-right, 12px) calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-left, 4px)}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTagList, decorators: [{
             type: Component,
@@ -1048,7 +1040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         '(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></ng-content>\n</div>\n\n<div class=\"kbq-tags-list__cleaner\"\n     *ngIf=\"canShowCleaner\">\n    <ng-content select=\"kbq-cleaner\"></ng-content>\n</div>\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, 4px);padding-bottom:var(--kbq-tag-size-padding-vertical, 4px);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, 4px)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding:calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-right, 12px) calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-left, 4px)}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: KbqFormFieldControl, useExisting: KbqTagList }], template: "<div class=\"kbq-tags-list__list-container\">\n    <ng-content></ng-content>\n</div>\n\n<div\n    *ngIf=\"canShowCleaner\"\n    class=\"kbq-tags-list__cleaner\"\n>\n    <ng-content select=\"kbq-cleaner\"></ng-content>\n</div>\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, 2px);padding-bottom:var(--kbq-tag-size-padding-vertical, 2px);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, 4px)}.kbq-tags-list__list-container .kbq-tag-input{max-width:100%;flex:1 1 auto}.kbq-tags-list__cleaner .kbq-cleaner{max-height:24px}.kbq-form-field-type-tag-list .kbq-form-field__container{padding:calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-right, 12px) calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px)) var(--kbq-tag-input-size-padding-left, 4px)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ErrorStateMatcher }, { type: i2.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i3.NgForm, decorators: [{
@@ -1119,8 +1111,7 @@ class KbqTagInput {
         this._separatorKeyCodes = value || [];
     }
     get separators() {
-        return this._separatorKeyCodes
-            .reduce((acc, key) => {
+        return this._separatorKeyCodes.reduce((acc, key) => {
             const separator = this.getSeparatorByKeyCode(key);
             return separator ? [...acc, separator] : acc;
         }, []);
@@ -1141,6 +1132,15 @@ class KbqTagInput {
     set addOnBlur(value) {
         this._addOnBlur = coerceBooleanProperty(value);
     }
+    /**
+     * Whether the tagEnd event will be emitted when the text pasted.
+     */
+    get addOnPaste() {
+        return this._addOnPaste;
+    }
+    set addOnPaste(value) {
+        this._addOnPaste = coerceBooleanProperty(value);
+    }
     /** Whether the input is disabled. */
     get disabled() {
         return this._disabled || (this._tagList && this._tagList.disabled);
@@ -1177,6 +1177,7 @@ class KbqTagInput {
         this.inputElement = this.elementRef.nativeElement;
         this.setDefaultInputWidth();
         this._separators = this.defaultOptions.separators || KbqTagInputDefaultSeparators;
+        this._addOnPaste = isBoolean(this.defaultOptions.addOnPaste) ? this.defaultOptions.addOnPaste : true;
     }
     ngOnChanges() {
         this._tagList.stateChanges.next();
@@ -1221,7 +1222,8 @@ class KbqTagInput {
         }
     }
     get hasDuplicates() {
-        return this._tagList.tags.map(({ value }) => value)
+        return this._tagList.tags
+            .map(({ value }) => value)
             .some((tagValue) => tagValue === this.trimValue(this.inputElement.value));
     }
     onInput() {
@@ -1234,15 +1236,13 @@ class KbqTagInput {
             return;
         }
         const data = $event.clipboardData.getData('text');
-        if (data && data.length === 0) {
+        if ((data && data.length === 0) || !this.addOnPaste) {
             return;
         }
         const items = [];
         for (const separator of this.separators) {
             if (data.search(separator.symbol) > -1) {
-                items.push(...data
-                    .split(separator.symbol)
-                    .map((item) => this.trimValue(item)));
+                items.push(...data.split(separator.symbol).map((item) => this.trimValue(item)));
                 break;
             }
         }
@@ -1250,7 +1250,8 @@ class KbqTagInput {
             items.push(data);
         }
         const tagValues = this._tagList.tags.map(({ value }) => value);
-        items.filter((item) => !tagValues.includes(item))
+        items
+            .filter((item) => !tagValues.includes(item))
             .forEach((item) => this.tagEnd.emit({ input: this.inputElement, value: item }));
         this.updateInputWidth();
         $event.preventDefault();
@@ -1294,11 +1295,10 @@ class KbqTagInput {
     }
     /** Checks whether a keycode is one of the configured separators. */
     isSeparatorKey(event) {
-        return this.separators
-            .some((separator) => separator.key === event.key && !event.shiftKey);
+        return this.separators.some((separator) => separator.key === event.key && !event.shiftKey);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTagInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KBQ_TAGS_DEFAULT_OPTIONS }, { token: i1$1.KbqTrim, optional: true, self: true }, { token: i3.NgControl, optional: true, self: true }, { token: i3$1.KbqAutocompleteTrigger, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqTagInput, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], distinct: "distinct", placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], disabled: "disabled" }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur($event)", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["kbqTagInput", "kbqTagInputFor"], usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqTagInput, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], distinct: "distinct", placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], addOnPaste: ["kbqTagInputAddOnPaste", "addOnPaste"], disabled: "disabled" }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur($event)", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["kbqTagInput", "kbqTagInputFor"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTagInput, decorators: [{
             type: Directive,
@@ -1350,6 +1350,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
             }], addOnBlur: [{
                 type: Input,
                 args: ['kbqTagInputAddOnBlur']
+            }], addOnPaste: [{
+                type: Input,
+                args: ['kbqTagInputAddOnPaste']
             }], disabled: [{
                 type: Input
             }] } });
@@ -1367,11 +1370,13 @@ class KbqTagsModule {
             KbqTagTrailingIcon,
             KbqTagAvatar,
             KbqTagRemove] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTagsModule, providers: [{
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTagsModule, providers: [
+            {
                 provide: KBQ_TAGS_DEFAULT_OPTIONS,
                 // tslint:disable-next-line: no-object-literal-type-assertion
                 useValue: { separatorKeyCodes: [ENTER] }
-            }], imports: [CommonModule, PlatformModule] }); }
+            }
+        ], imports: [CommonModule, PlatformModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqTagsModule, decorators: [{
             type: NgModule,
@@ -1393,11 +1398,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
                         KbqTagAvatar,
                         KbqTagRemove
                     ],
-                    providers: [{
+                    providers: [
+                        {
                             provide: KBQ_TAGS_DEFAULT_OPTIONS,
                             // tslint:disable-next-line: no-object-literal-type-assertion
                             useValue: { separatorKeyCodes: [ENTER] }
-                        }]
+                        }
+                    ]
                 }]
         }] });