@koobiq/components 16.0.0-beta.1 → 16.0.0-beta.11

package/fesm2022/koobiq-components-tags.mjs

@@ -3,7 +3,7 @@ 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 } from '@koobiq/cdk/keycodes';
+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 * as i1$1 from '@koobiq/components/form-field';
@@ -35,12 +35,12 @@ const TAG_ATTRIBUTE_NAMES = ['kbq-basic-tag'];
  */
 class KbqTagAvatar {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagAvatar, selector: "kbq-tag-avatar, [mcTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagAvatar, selector: "kbq-tag-avatar, [kbqTagAvatar]", host: { classAttribute: "kbq-tag-avatar" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagAvatar, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kbq-tag-avatar, [mcTagAvatar]',
+                    selector: 'kbq-tag-avatar, [kbqTagAvatar]',
                     host: { class: 'kbq-tag-avatar' }
                 }]
         }] });
@@ -50,12 +50,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
  */
 class KbqTagTrailingIcon {
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagTrailingIcon, selector: "kbq-tag-trailing-icon, [mcTagTrailingIcon]", host: { classAttribute: "kbq-tag-trailing-icon" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagTrailingIcon, selector: "kbq-tag-trailing-icon, [kbqTagTrailingIcon]", host: { classAttribute: "kbq-tag-trailing-icon" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagTrailingIcon, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'kbq-tag-trailing-icon, [mcTagTrailingIcon]',
+                    selector: 'kbq-tag-trailing-icon, [kbqTagTrailingIcon]',
                     host: { class: 'kbq-tag-trailing-icon' }
                 }]
         }] });
@@ -66,7 +66,7 @@ class KbqTagBase {
     }
 }
 /** @docs-private */
-const KbqTagMixinBase = mixinColor(mixinDisabled(KbqTagBase), KbqComponentColors.Theme);
+const KbqTagMixinBase = mixinColor(mixinDisabled(KbqTagBase), KbqComponentColors.ContrastFade);
 class KbqTag extends KbqTagMixinBase {
     /** Whether the tag is selected. */
     get selected() {
@@ -235,8 +235,8 @@ class KbqTag extends KbqTagMixinBase {
             this.removed.emit({ tag: this });
         }
     }
-    handleClick(event) {
-        if (this.disabled) {
+    handleMousedown(event) {
+        if (this.disabled || !this.selectable) {
             event.preventDefault();
         }
         else {
@@ -290,11 +290,11 @@ class KbqTag extends KbqTagMixinBase {
         });
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", 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: "16.1.5", 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: { "click": "handleClick($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(function () { return KbqTagRemove; }), descendants: true }, { propertyName: "contentChildren", predicate: KbqIcon }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["mcTitleText"], descendants: true }], exportAs: ["mcTag"], usesInheritance: true, ngImport: i0, template: "<div class=\"kbq-tag__wrapper\">\n    <ng-content select=\"[kbq-icon]:not([mcTagRemove])\"></ng-content>\n    <span class=\"kbq-tag__text\" #mcTitleText><ng-content></ng-content></span>\n    <ng-content select=\"[mcTagRemove]\"></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: "16.1.5", 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(function () { return 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTag, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]', exportAs: 'mcTag', inputs: ['color'], host: {
+            args: [{ selector: 'kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]', exportAs: 'kbqTag', inputs: ['color'], host: {
                         class: 'kbq-tag',
                         '[attr.tabindex]': 'tabindex',
                         '[attr.disabled]': 'disabled || null',
@@ -304,14 +304,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         '[class.kbq-tag-with-icon]': 'contentChildren',
                         '[class.kbq-tag-with-trailing-icon]': 'trailingIcon || removeIcon',
                         '[class.kbq-disabled]': 'disabled',
-                        '(click)': 'handleClick($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([mcTagRemove])\"></ng-content>\n    <span class=\"kbq-tag__text\" #mcTitleText><ng-content></ng-content></span>\n    <ng-content select=\"[mcTagRemove]\"></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 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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { textElement: [{
                 type: ViewChild,
-                args: ['mcTitleText']
+                args: ['kbqTitleText']
             }], contentChildren: [{
                 type: ContentChildren,
                 args: [KbqIcon]
@@ -348,7 +348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
  * Example:
  *
  *     `<kbq-tag>
- *       <kbq-icon mcTagRemove>cancel</kbq-icon>
+ *       <kbq-icon kbqTagRemove>cancel</kbq-icon>
  *     </kbq-tag>`
  *
  * You *may* use a custom icon, but you may need to override the `kbq-tag-remove` positioning
@@ -375,12 +375,12 @@ class KbqTagRemove {
         event.stopPropagation();
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagRemove, deps: [{ token: forwardRef(() => KbqTag) }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagRemove, selector: "[mcTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagRemove, selector: "[kbqTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "kbq-tag-remove kbq-tag-trailing-icon" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagRemove, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[mcTagRemove]',
+                    selector: '[kbqTagRemove]',
                     host: {
                         class: 'kbq-tag-remove kbq-tag-trailing-icon',
                         '[attr.tabindex]': '-1',
@@ -505,7 +505,7 @@ class KbqTagList extends KbqTagListMixinBase {
         this._placeholder = value;
         this.stateChanges.next();
     }
-    /** Whether any tags or the mcTagInput inside of this tag-list has focus. */
+    /** Whether any tags or the kbqTagInput inside of this tag-list has focus. */
     get focused() {
         return (this.tagInput && this.tagInput.focused) || this.hasFocusedTag();
     }
@@ -543,9 +543,7 @@ class KbqTagList extends KbqTagListMixinBase {
     }
     set selectable(value) {
         this._selectable = coerceBooleanProperty(value);
-        if (this.tags) {
-            this.tags.forEach((tag) => tag.tagListSelectable = this._selectable);
-        }
+        this.propagateSelectableToChildren();
     }
     get tabIndex() {
         return this._tabIndex;
@@ -602,7 +600,8 @@ class KbqTagList extends KbqTagListMixinBase {
     ngAfterContentInit() {
         this.keyManager = new FocusKeyManager(this.tags)
             .withVerticalOrientation()
-            .withHorizontalOrientation(this.dir ? this.dir.value : 'ltr');
+            .withHorizontalOrientation(this.dir ? this.dir.value : 'ltr')
+            .skipPredicate((item) => item.disabled || !item.selectable);
         if (this.dir) {
             this.dir.change
                 .pipe(takeUntil(this.destroyed))
@@ -643,6 +642,7 @@ class KbqTagList extends KbqTagListMixinBase {
                 this.propagateTagsChanges();
             });
         });
+        this.propagateSelectableToChildren();
     }
     ngOnInit() {
         this.selectionModel = new SelectionModel(this.multiple, undefined, false);
@@ -1028,12 +1028,17 @@ class KbqTagList extends KbqTagListMixinBase {
             control.statusChanges.emit(control.status);
         }
     }
+    propagateSelectableToChildren() {
+        if (this.tags) {
+            this.tags.forEach((tag) => tag.tagListSelectable = this._selectable);
+        }
+    }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", 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: "16.1.5", 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: ["mcTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["mcTagList"], 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-input{border:none;outline:none;background:transparent;min-height:22px}.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;margin-left:var(--kbq-tag-input-size-content-gap, 8px)}.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, 4px) - var(--kbq-form-field-size-border-width, 1px));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px));padding-left: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: "16.1.5", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTagList, decorators: [{
             type: Component,
-            args: [{ selector: 'kbq-tag-list', exportAs: 'mcTagList', host: {
+            args: [{ selector: 'kbq-tag-list', exportAs: 'kbqTagList', host: {
                         class: 'kbq-tag-list',
                         '[class.kbq-disabled]': 'disabled',
                         '[class.kbq-invalid]': 'errorState',
@@ -1042,7 +1047,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", 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-input{border:none;outline:none;background:transparent;min-height:22px}.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;margin-left:var(--kbq-tag-input-size-content-gap, 8px)}.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, 4px) - var(--kbq-form-field-size-border-width, 1px));padding-bottom:calc(var(--kbq-tag-input-size-padding-vertical, 4px) - var(--kbq-form-field-size-border-width, 1px));padding-left: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 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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ErrorStateMatcher }, { type: i2.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i3.NgForm, decorators: [{
@@ -1080,7 +1085,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 type: Output
             }], cleaner: [{
                 type: ContentChild,
-                args: ['mcTagListCleaner', { static: true }]
+                args: ['kbqTagListCleaner', { static: true }]
             }], tags: [{
                 type: ContentChildren,
                 args: [KbqTag, {
@@ -1090,6 +1095,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                     }]
             }] } });
 
+const KbqTagInputDefaultSeparators = {
+    [ENTER]: { symbol: /\r?\n/, key: 'Enter' },
+    [TAB]: { symbol: /\t/, key: 'Tab' },
+    [SPACE]: { symbol: / /, key: ' ' },
+    [COMMA]: { symbol: /,/, key: ',' },
+    [SEMICOLON]: { symbol: /;/, key: ';' }
+};
 // Increasing integer for generating unique ids.
 let nextUniqueId = 0;
 /**
@@ -1148,12 +1160,6 @@ class KbqTagInput {
         /** Whether the control is focused. */
         this.focused = false;
         this._separatorKeyCodes = this.defaultOptions.separatorKeyCodes;
-        this._separators = {
-            [ENTER]: { symbol: /\r?\n/, key: 'Enter' },
-            [TAB]: { symbol: /\t/, key: 'Tab' },
-            [SPACE]: { symbol: / /, key: ' ' },
-            [COMMA]: { symbol: /,/, key: ',' }
-        };
         /** Emitted when a tag is to be added. */
         this.tagEnd = new EventEmitter();
         /** The input's placeholder text. */
@@ -1166,6 +1172,7 @@ class KbqTagInput {
         // tslint:disable-next-line: no-unnecessary-type-assertion
         this.inputElement = this.elementRef.nativeElement;
         this.setDefaultInputWidth();
+        this._separators = this.defaultOptions.separators || KbqTagInputDefaultSeparators;
     }
     ngOnChanges() {
         this._tagList.stateChanges.next();
@@ -1278,13 +1285,13 @@ class KbqTagInput {
             .some((separator) => separator.key === event.key && !event.shiftKey);
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", 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 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagInput, selector: "input[mcTagInputFor]", inputs: { separatorKeyCodes: ["mcTagInputSeparatorKeyCodes", "separatorKeyCodes"], placeholder: "placeholder", id: "id", tagList: ["mcTagInputFor", "tagList"], addOnBlur: ["mcTagInputAddOnBlur", "addOnBlur"], disabled: "disabled" }, outputs: { tagEnd: "mcTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur()", "focus": "onFocus()", "input": "onInput()", "paste": "onPaste($event)" }, properties: { "id": "id", "attr.disabled": "disabled || null", "attr.placeholder": "placeholder || null" }, classAttribute: "kbq-tag-input" }, exportAs: ["mcTagInput", "mcTagInputFor"], usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqTagInput, selector: "input[kbqTagInputFor]", inputs: { separatorKeyCodes: ["kbqTagInputSeparatorKeyCodes", "separatorKeyCodes"], placeholder: "placeholder", id: "id", tagList: ["kbqTagInputFor", "tagList"], addOnBlur: ["kbqTagInputAddOnBlur", "addOnBlur"], disabled: "disabled" }, outputs: { tagEnd: "kbqTagInputTokenEnd" }, host: { listeners: { "keydown": "onKeydown($event)", "blur": "blur()", "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: "16.1.5", ngImport: i0, type: KbqTagInput, decorators: [{
             type: Directive,
             args: [{
-                    selector: 'input[mcTagInputFor]',
-                    exportAs: 'mcTagInput, mcTagInputFor',
+                    selector: 'input[kbqTagInputFor]',
+                    exportAs: 'kbqTagInput, kbqTagInputFor',
                     host: {
                         class: 'kbq-tag-input',
                         '[id]': 'id',
@@ -1310,20 +1317,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                     type: Self
                 }] }]; }, propDecorators: { separatorKeyCodes: [{
                 type: Input,
-                args: ['mcTagInputSeparatorKeyCodes']
+                args: ['kbqTagInputSeparatorKeyCodes']
             }], tagEnd: [{
                 type: Output,
-                args: ['mcTagInputTokenEnd']
+                args: ['kbqTagInputTokenEnd']
             }], placeholder: [{
                 type: Input
             }], id: [{
                 type: Input
             }], tagList: [{
                 type: Input,
-                args: ['mcTagInputFor']
+                args: ['kbqTagInputFor']
             }], addOnBlur: [{
                 type: Input,
-                args: ['mcTagInputAddOnBlur']
+                args: ['kbqTagInputAddOnBlur']
             }], disabled: [{
                 type: Input
             }] } });