@ptsecurity/mosaic 15.5.0 → 16.0.0

package/{fesm2020 → fesm2022}/ptsecurity-mosaic-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 '@ptsecurity/cdk/keycodes';
+import { SPACE, BACKSPACE, DELETE, HOME, END, ENTER, TAB, COMMA, SEMICOLON } from '@ptsecurity/cdk/keycodes';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i3 from '@angular/forms';
 import * as i1$1 from '@ptsecurity/mosaic/form-field';
@@ -34,10 +34,10 @@ const TAG_ATTRIBUTE_NAMES = ['mc-basic-tag'];
  * @docs-private
  */
 class McTagAvatar {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: McTagAvatar, selector: "mc-tag-avatar, [mcTagAvatar]", host: { classAttribute: "mc-tag-avatar" }, ngImport: i0 }); }
 }
-/** @nocollapse */ McTagAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ McTagAvatar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: McTagAvatar, selector: "mc-tag-avatar, [mcTagAvatar]", host: { classAttribute: "mc-tag-avatar" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagAvatar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTagAvatar, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mc-tag-avatar, [mcTagAvatar]',
@@ -49,10 +49,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
  * @docs-private
  */
 class McTagTrailingIcon {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: McTagTrailingIcon, selector: "mc-tag-trailing-icon, [mcTagTrailingIcon]", host: { classAttribute: "mc-tag-trailing-icon" }, ngImport: i0 }); }
 }
-/** @nocollapse */ McTagTrailingIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ McTagTrailingIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: McTagTrailingIcon, selector: "mc-tag-trailing-icon, [mcTagTrailingIcon]", host: { classAttribute: "mc-tag-trailing-icon" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagTrailingIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTagTrailingIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mc-tag-trailing-icon, [mcTagTrailingIcon]',
@@ -68,33 +68,6 @@ class McTagBase {
 /** @docs-private */
 const McTagMixinBase = mixinColor(mixinDisabled(McTagBase));
 class McTag extends McTagMixinBase {
-    constructor(elementRef, changeDetectorRef, _ngZone) {
-        super(elementRef);
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this._ngZone = _ngZone;
-        /** Emits when the tag is focused. */
-        this.onFocus = new Subject();
-        /** Emits when the tag is blured. */
-        this.onBlur = new Subject();
-        /** Whether the tag has focus. */
-        this.hasFocus = false;
-        /** Whether the tag list is selectable */
-        this.tagListSelectable = true;
-        /** Emitted when the tag is selected or deselected. */
-        this.selectionChange = new EventEmitter();
-        /** Emitted when the tag is destroyed. */
-        this.destroyed = new EventEmitter();
-        /** Emitted when a tag is to be removed. */
-        this.removed = new EventEmitter();
-        this._selected = false;
-        this._selectable = true;
-        this._removable = true;
-        this._tabindex = -1;
-        this._disabled = false;
-        this.addHostClassName();
-        this.nativeElement = elementRef.nativeElement;
-    }
     /** Whether the tag is selected. */
     get selected() {
         return this._selected;
@@ -150,6 +123,33 @@ class McTag extends McTagMixinBase {
             this._disabled = value;
         }
     }
+    constructor(elementRef, changeDetectorRef, _ngZone) {
+        super(elementRef);
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
+        this._ngZone = _ngZone;
+        /** Emits when the tag is focused. */
+        this.onFocus = new Subject();
+        /** Emits when the tag is blured. */
+        this.onBlur = new Subject();
+        /** Whether the tag has focus. */
+        this.hasFocus = false;
+        /** Whether the tag list is selectable */
+        this.tagListSelectable = true;
+        /** Emitted when the tag is selected or deselected. */
+        this.selectionChange = new EventEmitter();
+        /** Emitted when the tag is destroyed. */
+        this.destroyed = new EventEmitter();
+        /** Emitted when a tag is to be removed. */
+        this.removed = new EventEmitter();
+        this._selected = false;
+        this._selectable = true;
+        this._removable = true;
+        this._tabindex = -1;
+        this._disabled = false;
+        this.addHostClassName();
+        this.nativeElement = elementRef.nativeElement;
+    }
     ngAfterContentInit() {
         this.addClassModificatorForIcons();
     }
@@ -235,8 +235,8 @@ class McTag extends McTagMixinBase {
             this.removed.emit({ tag: this });
         }
     }
-    handleClick(event) {
-        if (this.disabled) {
+    handleMousedown(event) {
+        if (this.disabled || !this.selectable) {
             event.preventDefault();
         }
         else {
@@ -289,10 +289,10 @@ class McTag extends McTagMixinBase {
             selected: this._selected
         });
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTag, 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: McTag, selector: "mc-tag, [mc-tag], mc-basic-tag, [mc-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.mc-selected": "selected", "class.mc-focused": "hasFocus", "class.mc-tag-with-avatar": "avatar", "class.mc-tag-with-icon": "contentChildren", "class.mc-tag-with-trailing-icon": "trailingIcon || removeIcon", "class.mc-disabled": "disabled" }, classAttribute: "mc-tag" }, providers: [{ provide: MC_TITLE_TEXT_REF, useExisting: McTag }], queries: [{ propertyName: "avatar", first: true, predicate: McTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: McTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(function () { return McTagRemove; }), descendants: true }, { propertyName: "contentChildren", predicate: McIcon }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["mcTitleText"], descendants: true }], exportAs: ["mcTag"], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-tag__wrapper\">\n    <ng-content select=\"[mc-icon]:not([mcTagRemove])\"></ng-content>\n    <span class=\"mc-tag__text\" #mcTitleText><ng-content></ng-content></span>\n    <ng-content select=\"[mcTagRemove]\"></ng-content>\n</div>\n<div class=\"mc-tag-overlay\"></div>\n", styles: [".mc-tag{position:relative;display:inline-block;max-width:100%;margin:var(--mc-tags-size-margin, 2px);height:var(--mc-tags-size-height, 24px);border-width:var(--mc-tags-size-border-width, 1px);border-style:solid;border-radius:var(--mc-tags-size-border-radius, 4px);cursor:default;outline:none;box-sizing:border-box}.mc-tag .mc-icon.mc-tag-remove:hover{cursor:pointer}.mc-tag.mc-disabled .mc-icon.mc-tag-remove:hover{cursor:default}.mc-tag .mc-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mc-tag:not(.mc-tag-with-icon) .mc-tag__text{margin-right:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}.mc-tag__wrapper .mc-icon.mc-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:var(--mc-tags-size-height, 24px);padding-left:var(--mc-tags-size-icon-padding, 4px);padding-right:var(--mc-tags-size-icon-padding, 4px)}.mc-tag__wrapper .mc-icon_left{margin-right:var(--mc-tags-size-icon-padding, 4px)}.mc-tag__wrapper>.mc-icon:first-child{margin-left:calc(var(--mc-tags-size-icon-padding, 4px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper>.mc-tag__text:last-child{margin-right:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper>.mc-tag__text:first-child{margin-left:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag-overlay{position:absolute;inset:-1px;pointer-events:none;border-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-/** @nocollapse */ McTag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTag, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McTag.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: McTag, selector: "mc-tag, [mc-tag], mc-basic-tag, [mc-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.mc-selected": "selected", "class.mc-focused": "hasFocus", "class.mc-tag-with-avatar": "avatar", "class.mc-tag-with-icon": "contentChildren", "class.mc-tag-with-trailing-icon": "trailingIcon || removeIcon", "class.mc-disabled": "disabled" }, classAttribute: "mc-tag" }, providers: [{ provide: MC_TITLE_TEXT_REF, useExisting: McTag }], queries: [{ propertyName: "avatar", first: true, predicate: McTagAvatar, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: McTagTrailingIcon, descendants: true }, { propertyName: "removeIcon", first: true, predicate: i0.forwardRef(function () { return McTagRemove; }), descendants: true }, { propertyName: "contentChildren", predicate: McIcon }], viewQueries: [{ propertyName: "textElement", first: true, predicate: ["mcTitleText"], descendants: true }], exportAs: ["mcTag"], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-tag__wrapper\">\n    <ng-content select=\"[mc-icon]:not([mcTagRemove])\"></ng-content>\n    <span class=\"mc-tag__text\" #mcTitleText><ng-content></ng-content></span>\n    <ng-content select=\"[mcTagRemove]\"></ng-content>\n</div>\n<div class=\"mc-tag-overlay\"></div>\n", styles: [".mc-tag{position:relative;display:inline-block;max-width:100%;margin:var(--mc-tags-size-margin, 2px);height:var(--mc-tags-size-height, 24px);border-width:var(--mc-tags-size-border-width, 1px);border-style:solid;border-radius:var(--mc-tags-size-border-radius, 4px);cursor:default;outline:none;box-sizing:border-box}.mc-tag .mc-icon.mc-tag-remove:hover{cursor:pointer}.mc-tag.mc-disabled .mc-icon.mc-tag-remove:hover{cursor:default}.mc-tag .mc-tag__text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.mc-tag:not(.mc-tag-with-icon) .mc-tag__text{margin-right:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper{display:flex;align-items:center;height:100%;flex:1 1 100%}.mc-tag__wrapper .mc-icon.mc-tag-remove{display:flex;align-items:center;justify-content:center;flex-shrink:0;height:var(--mc-tags-size-height, 24px);padding-left:var(--mc-tags-size-icon-padding, 4px);padding-right:var(--mc-tags-size-icon-padding, 4px)}.mc-tag__wrapper .mc-icon_left{margin-right:var(--mc-tags-size-icon-padding, 4px)}.mc-tag__wrapper>.mc-icon:first-child{margin-left:calc(var(--mc-tags-size-icon-padding, 4px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper>.mc-tag__text:last-child{margin-right:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag__wrapper>.mc-tag__text:first-child{margin-left:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px))}.mc-tag-overlay{position:absolute;inset:-1px;pointer-events:none;border-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTag, decorators: [{
             type: Component,
             args: [{ selector: 'mc-tag, [mc-tag], mc-basic-tag, [mc-basic-tag]', exportAs: 'mcTag', inputs: ['color'], host: {
                         class: 'mc-tag',
@@ -304,7 +304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         '[class.mc-tag-with-icon]': 'contentChildren',
                         '[class.mc-tag-with-trailing-icon]': 'trailingIcon || removeIcon',
                         '[class.mc-disabled]': 'disabled',
-                        '(click)': 'handleClick($event)',
+                        '(mousedown)': 'handleMousedown($event)',
                         '(keydown)': 'handleKeydown($event)',
                         '(focus)': 'focus()',
                         '(blur)': 'blur()'
@@ -374,10 +374,10 @@ class McTagRemove {
         // that the tag is being removed before the event bubbles up.
         event.stopPropagation();
     }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTagRemove, deps: [{ token: forwardRef(() => McTag) }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: McTagRemove, selector: "[mcTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "mc-tag-remove mc-tag-trailing-icon" }, ngImport: i0 }); }
 }
-/** @nocollapse */ McTagRemove.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagRemove, deps: [{ token: forwardRef(() => McTag) }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ McTagRemove.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: McTagRemove, selector: "[mcTagRemove]", host: { listeners: { "click": "handleClick($event)", "focus": "focus($event)" }, properties: { "attr.tabindex": "-1" }, classAttribute: "mc-tag-remove mc-tag-trailing-icon" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagRemove, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTagRemove, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mcTagRemove]',
@@ -420,51 +420,6 @@ class McTagListChange {
     }
 }
 class McTagList extends McTagListMixinBase {
-    constructor(elementRef, changeDetectorRef, defaultErrorStateMatcher, dir, parentForm, parentFormGroup, ngControl) {
-        super(defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl);
-        this.elementRef = elementRef;
-        this.changeDetectorRef = changeDetectorRef;
-        this.dir = dir;
-        this.controlType = 'tag-list';
-        this._tabIndex = 0;
-        /**
-         * Event that emits whenever the raw value of the tag-list changes. This is here primarily
-         * to facilitate the two-way binding for the `value` input.
-         * @docs-private
-         */
-        this.valueChange = new EventEmitter();
-        this.uid = `mc-tag-list-${nextUniqueId$1++}`;
-        /**
-         * User defined tab index.
-         * When it is not null, use user defined tab index. Otherwise use tabIndex
-         */
-        this.userTabIndex = null;
-        this.tagChanges = new EventEmitter();
-        /** Orientation of the tag list. */
-        this.orientation = 'horizontal';
-        /** Event emitted when the selected tag list value has been changed by the user. */
-        this.change = new EventEmitter();
-        this._required = false;
-        this._disabled = false;
-        this._selectable = true;
-        this._multiple = false;
-        /**
-         * When a tag is destroyed, we store the index of the destroyed tag until the tags
-         * query list notifies about the update. This is necessary because we cannot determine an
-         * appropriate tag that should receive focus until the array of tags updated completely.
-         */
-        this.lastDestroyedTagIndex = null;
-        /** Subject that emits when the component has been destroyed. */
-        this.destroyed = new Subject();
-        // tslint:disable-next-line:no-empty
-        this.onTouched = () => { };
-        // tslint:disable-next-line:no-empty
-        this.onChange = () => { };
-        this._compareWith = (o1, o2) => o1 === o2;
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
     /** Combined stream of all of the child tags' selection change events. */
     get tagSelectionChanges() {
         return merge(...this.tags.map((tag) => tag.selectionChange));
@@ -588,9 +543,7 @@ class McTagList extends McTagListMixinBase {
     }
     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;
@@ -599,6 +552,51 @@ class McTagList extends McTagListMixinBase {
         this.userTabIndex = value;
         this._tabIndex = value;
     }
+    constructor(elementRef, changeDetectorRef, defaultErrorStateMatcher, dir, parentForm, parentFormGroup, ngControl) {
+        super(defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl);
+        this.elementRef = elementRef;
+        this.changeDetectorRef = changeDetectorRef;
+        this.dir = dir;
+        this.controlType = 'tag-list';
+        this._tabIndex = 0;
+        /**
+         * Event that emits whenever the raw value of the tag-list changes. This is here primarily
+         * to facilitate the two-way binding for the `value` input.
+         * @docs-private
+         */
+        this.valueChange = new EventEmitter();
+        this.uid = `mc-tag-list-${nextUniqueId$1++}`;
+        /**
+         * User defined tab index.
+         * When it is not null, use user defined tab index. Otherwise use tabIndex
+         */
+        this.userTabIndex = null;
+        this.tagChanges = new EventEmitter();
+        /** Orientation of the tag list. */
+        this.orientation = 'horizontal';
+        /** Event emitted when the selected tag list value has been changed by the user. */
+        this.change = new EventEmitter();
+        this._required = false;
+        this._disabled = false;
+        this._selectable = true;
+        this._multiple = false;
+        /**
+         * When a tag is destroyed, we store the index of the destroyed tag until the tags
+         * query list notifies about the update. This is necessary because we cannot determine an
+         * appropriate tag that should receive focus until the array of tags updated completely.
+         */
+        this.lastDestroyedTagIndex = null;
+        /** Subject that emits when the component has been destroyed. */
+        this.destroyed = new Subject();
+        // tslint:disable-next-line:no-empty
+        this.onTouched = () => { };
+        // tslint:disable-next-line:no-empty
+        this.onChange = () => { };
+        this._compareWith = (o1, o2) => o1 === o2;
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+    }
     ngAfterContentInit() {
         this.keyManager = new FocusKeyManager(this.tags)
             .withVerticalOrientation()
@@ -643,6 +641,7 @@ class McTagList extends McTagListMixinBase {
                 this.propagateTagsChanges();
             });
         });
+        this.propagateSelectableToChildren();
     }
     ngOnInit() {
         this.selectionModel = new SelectionModel(this.multiple, undefined, false);
@@ -1028,10 +1027,15 @@ class McTagList extends McTagListMixinBase {
             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: McTagList, 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: McTagList, selector: "mc-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.mc-disabled": "disabled", "class.mc-invalid": "errorState", "attr.tabindex": "disabled ? null : tabIndex", "id": "uid" }, classAttribute: "mc-tag-list" }, providers: [{ provide: McFormFieldControl, useExisting: McTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["mcTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: McTag, descendants: true }], exportAs: ["mcTagList"], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-tags-list__list-container\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"mc-tags-list__cleaner\"\n     *ngIf=\"canShowCleaner\">\n    <ng-content select=\"mc-cleaner\"></ng-content>\n</div>\n", styles: [".mc-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.mc-tag-input{border:none;outline:none;background:transparent}.mc-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;min-height:calc(var(--mc-form-field-size-height, 32px) - var(--mc-form-field-size-border-width, 1px) * 2)}.mc-tags-list__list-container .mc-tag-input{max-width:100%;flex:1 1 auto;height:var(--mc-tag-input-size-height, 22px);margin:var(--mc-tag-input-size-margin, 2px 4px)}.mc-form-field-type-tag-list .mc-tags-list__list-container{padding:var(--mc-tag-list-size-padding, 1px 12px)}.mc-tags-list__cleaner .mc-cleaner{height:30px}\n"], dependencies: [{ kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-/** @nocollapse */ McTagList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagList, 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 */ McTagList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: McTagList, selector: "mc-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.mc-disabled": "disabled", "class.mc-invalid": "errorState", "attr.tabindex": "disabled ? null : tabIndex", "id": "uid" }, classAttribute: "mc-tag-list" }, providers: [{ provide: McFormFieldControl, useExisting: McTagList }], queries: [{ propertyName: "cleaner", first: true, predicate: ["mcTagListCleaner"], descendants: true, static: true }, { propertyName: "tags", predicate: McTag, descendants: true }], exportAs: ["mcTagList"], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-tags-list__list-container\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"mc-tags-list__cleaner\"\n     *ngIf=\"canShowCleaner\">\n    <ng-content select=\"mc-cleaner\"></ng-content>\n</div>\n", styles: [".mc-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.mc-tag-input{border:none;outline:none;background:transparent}.mc-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;min-height:calc(var(--mc-form-field-size-height, 32px) - var(--mc-form-field-size-border-width, 1px) * 2);padding:var(--mc-tag-list-size-padding, 1px 12px)}.mc-tags-list__list-container .mc-tag-input{max-width:100%;flex:1 1 auto;height:var(--mc-tag-input-size-height, 22px);margin:var(--mc-tag-input-size-margin, 2px 4px)}.mc-tags-list__cleaner .mc-cleaner{height:30px}\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: "15.2.9", ngImport: i0, type: McTagList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTagList, decorators: [{
             type: Component,
             args: [{ selector: 'mc-tag-list', exportAs: 'mcTagList', host: {
                         class: 'mc-tag-list',
@@ -1042,7 +1046,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         '(focus)': 'focus()',
                         '(blur)': 'blur()',
                         '(keydown)': 'keydown($event)'
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: McFormFieldControl, useExisting: McTagList }], template: "<div class=\"mc-tags-list__list-container\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"mc-tags-list__cleaner\"\n     *ngIf=\"canShowCleaner\">\n    <ng-content select=\"mc-cleaner\"></ng-content>\n</div>\n", styles: [".mc-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.mc-tag-input{border:none;outline:none;background:transparent}.mc-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;min-height:calc(var(--mc-form-field-size-height, 32px) - var(--mc-form-field-size-border-width, 1px) * 2);padding:var(--mc-tag-list-size-padding, 1px 12px)}.mc-tags-list__list-container .mc-tag-input{max-width:100%;flex:1 1 auto;height:var(--mc-tag-input-size-height, 22px);margin:var(--mc-tag-input-size-margin, 2px 4px)}.mc-tags-list__cleaner .mc-cleaner{height:30px}\n"] }]
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: McFormFieldControl, useExisting: McTagList }], template: "<div class=\"mc-tags-list__list-container\">\n    <ng-content></ng-content>\n</div>\n\n<div class=\"mc-tags-list__cleaner\"\n     *ngIf=\"canShowCleaner\">\n    <ng-content select=\"mc-cleaner\"></ng-content>\n</div>\n", styles: [".mc-tag-list{display:flex;flex-direction:row;box-sizing:border-box}.mc-tag-input{border:none;outline:none;background:transparent}.mc-tags-list__list-container{display:flex;flex-wrap:wrap;flex:1 1 100%;box-sizing:border-box;min-width:0;min-height:calc(var(--mc-form-field-size-height, 32px) - var(--mc-form-field-size-border-width, 1px) * 2)}.mc-tags-list__list-container .mc-tag-input{max-width:100%;flex:1 1 auto;height:var(--mc-tag-input-size-height, 22px);margin:var(--mc-tag-input-size-margin, 2px 4px)}.mc-form-field-type-tag-list .mc-tags-list__list-container{padding:var(--mc-tag-list-size-padding, 1px 12px)}.mc-tags-list__cleaner .mc-cleaner{height:30px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ErrorStateMatcher }, { type: i2.Directionality, decorators: [{
                     type: Optional
                 }] }, { type: i3.NgForm, decorators: [{
@@ -1090,6 +1094,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                     }]
             }] } });
 
+const McTagInputDefaultSeparators = {
+    [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;
 /**
@@ -1097,34 +1108,6 @@ let nextUniqueId = 0;
  * May be placed inside or outside of an `<mc-tag-list>`.
  */
 class McTagInput {
-    constructor(elementRef, renderer, defaultOptions, trimDirective, ngControl) {
-        this.elementRef = elementRef;
-        this.renderer = renderer;
-        this.defaultOptions = defaultOptions;
-        this.trimDirective = trimDirective;
-        this.ngControl = ngControl;
-        /** 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. */
-        this.placeholder = '';
-        /** Unique id for the input. */
-        this.id = `mc-tag-list-input-${nextUniqueId++}`;
-        this._addOnBlur = true;
-        this._disabled = false;
-        this.countOfSymbolsForUpdateWidth = 3;
-        // tslint:disable-next-line: no-unnecessary-type-assertion
-        this.inputElement = this.elementRef.nativeElement;
-        this.setDefaultInputWidth();
-    }
     /**
      * The list of key codes that will trigger a tagEnd event.
      *
@@ -1167,6 +1150,29 @@ class McTagInput {
     get empty() {
         return !this.inputElement.value;
     }
+    constructor(elementRef, renderer, defaultOptions, trimDirective, ngControl) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+        this.defaultOptions = defaultOptions;
+        this.trimDirective = trimDirective;
+        this.ngControl = ngControl;
+        /** Whether the control is focused. */
+        this.focused = false;
+        this._separatorKeyCodes = this.defaultOptions.separatorKeyCodes;
+        /** Emitted when a tag is to be added. */
+        this.tagEnd = new EventEmitter();
+        /** The input's placeholder text. */
+        this.placeholder = '';
+        /** Unique id for the input. */
+        this.id = `mc-tag-list-input-${nextUniqueId++}`;
+        this._addOnBlur = true;
+        this._disabled = false;
+        this.countOfSymbolsForUpdateWidth = 3;
+        // tslint:disable-next-line: no-unnecessary-type-assertion
+        this.inputElement = this.elementRef.nativeElement;
+        this.setDefaultInputWidth();
+        this._separators = this.defaultOptions.separators || McTagInputDefaultSeparators;
+    }
     ngOnChanges() {
         this._tagList.stateChanges.next();
     }
@@ -1277,10 +1283,10 @@ class McTagInput {
         return this.separators
             .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: McTagInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MC_TAGS_DEFAULT_OPTIONS }, { token: i1$1.McTrim, 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: McTagInput, 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: "mc-tag-input" }, exportAs: ["mcTagInput", "mcTagInputFor"], usesOnChanges: true, ngImport: i0 }); }
 }
-/** @nocollapse */ McTagInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MC_TAGS_DEFAULT_OPTIONS }, { token: i1$1.McTrim, optional: true, self: true }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ McTagInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.9", type: McTagInput, 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: "mc-tag-input" }, exportAs: ["mcTagInput", "mcTagInputFor"], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTagInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mcTagInputFor]',
@@ -1329,25 +1335,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
             }] } });
 
 class McTagsModule {
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: McTagsModule, declarations: [McTagList,
+            McTag,
+            McTagInput,
+            McTagTrailingIcon,
+            McTagAvatar,
+            McTagRemove], imports: [CommonModule, PlatformModule], exports: [McTagList,
+            McTag,
+            McTagInput,
+            McTagTrailingIcon,
+            McTagAvatar,
+            McTagRemove] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTagsModule, providers: [{
+                provide: MC_TAGS_DEFAULT_OPTIONS,
+                // tslint:disable-next-line: no-object-literal-type-assertion
+                useValue: { separatorKeyCodes: [ENTER] }
+            }], imports: [CommonModule, PlatformModule] }); }
 }
-/** @nocollapse */ McTagsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ McTagsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.9", ngImport: i0, type: McTagsModule, declarations: [McTagList,
-        McTag,
-        McTagInput,
-        McTagTrailingIcon,
-        McTagAvatar,
-        McTagRemove], imports: [CommonModule, PlatformModule], exports: [McTagList,
-        McTag,
-        McTagInput,
-        McTagTrailingIcon,
-        McTagAvatar,
-        McTagRemove] });
-/** @nocollapse */ McTagsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagsModule, providers: [{
-            provide: MC_TAGS_DEFAULT_OPTIONS,
-            // tslint:disable-next-line: no-object-literal-type-assertion
-            useValue: { separatorKeyCodes: [ENTER] }
-        }], imports: [CommonModule, PlatformModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: McTagsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: McTagsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, PlatformModule],