@ptsecurity/mosaic 13.2.0 → 13.4.0

package/fesm2015/ptsecurity-mosaic-tags.mjs

@@ -2,7 +2,7 @@ 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, EventEmitter, Directive, Inject, Optional, Self, Input, Output, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, ContentChild, NgModule } from '@angular/core';
+import { InjectionToken, EventEmitter, Directive, Inject, Optional, Self, Input, Output, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, ContentChild, forwardRef, NgModule } from '@angular/core';
 import { ENTER, TAB, SPACE, COMMA, hasModifierKey, BACKSPACE, DELETE, HOME, END } from '@ptsecurity/cdk/keycodes';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i3 from '@angular/forms';
@@ -195,9 +195,9 @@ class McTagInput {
         return this.separatorKeyCodes.indexOf(event.keyCode) > -1;
     }
 }
-/** @nocollapse */ /** @nocollapse */ McTagInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MC_TAGS_DEFAULT_OPTIONS }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTagInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", 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: "13.3.0", ngImport: i0, type: McTagInput, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTagInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: MC_TAGS_DEFAULT_OPTIONS }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTagInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", 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: "13.3.7", ngImport: i0, type: McTagInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mcTagInputFor]',
@@ -258,9 +258,9 @@ const TAG_ATTRIBUTE_NAMES = ['mc-basic-tag'];
  */
 class McTagAvatar {
 }
-/** @nocollapse */ /** @nocollapse */ McTagAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTagAvatar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: McTagAvatar, selector: "mc-tag-avatar, [mcTagAvatar]", host: { classAttribute: "mc-tag-avatar" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagAvatar, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTagAvatar.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTagAvatar.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTagAvatar, selector: "mc-tag-avatar, [mcTagAvatar]", host: { classAttribute: "mc-tag-avatar" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagAvatar, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mc-tag-avatar, [mcTagAvatar]',
@@ -273,66 +273,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
  */
 class McTagTrailingIcon {
 }
-/** @nocollapse */ /** @nocollapse */ McTagTrailingIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTagTrailingIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: McTagTrailingIcon, selector: "mc-tag-trailing-icon, [mcTagTrailingIcon]", host: { classAttribute: "mc-tag-trailing-icon" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagTrailingIcon, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTagTrailingIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagTrailingIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTagTrailingIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", type: McTagTrailingIcon, selector: "mc-tag-trailing-icon, [mcTagTrailingIcon]", host: { classAttribute: "mc-tag-trailing-icon" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagTrailingIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: 'mc-tag-trailing-icon, [mcTagTrailingIcon]',
                     host: { class: 'mc-tag-trailing-icon' }
                 }]
         }] });
-/**
- *
- * Example:
- *
- *     `<mc-tag>
- *       <mc-icon mcTagRemove>cancel</mc-icon>
- *     </mc-tag>`
- *
- * You *may* use a custom icon, but you may need to override the `mc-tag-remove` positioning
- * styles to properly center the icon within the tag.
- */
-class McTagRemove {
-    constructor(parentTag) {
-        this.parentTag = parentTag;
-    }
-    focus($event) {
-        $event.stopPropagation();
-    }
-    /** Calls the parent tag's public `remove()` method if applicable. */
-    handleClick(event) {
-        if (this.parentTag.removable) {
-            this.parentTag.hasFocus = true;
-            this.parentTag.remove();
-        }
-        // We need to stop event propagation because otherwise the event will bubble up to the
-        // form field and cause the `onContainerClick` method to be invoked. This method would then
-        // reset the focused tag that has been focused after tag removal. Usually the parent
-        // the parent click listener of the `McTag` would prevent propagation, but it can happen
-        // that the tag is being removed before the event bubbles up.
-        event.stopPropagation();
-    }
-}
-/** @nocollapse */ /** @nocollapse */ McTagRemove.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagRemove, deps: [{ token: forwardRef(() => McTag) }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ McTagRemove.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", 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: "13.3.0", ngImport: i0, type: McTagRemove, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mcTagRemove]',
-                    host: {
-                        class: 'mc-tag-remove mc-tag-trailing-icon',
-                        '[attr.tabindex]': '-1',
-                        '(click)': 'handleClick($event)',
-                        '(focus)': 'focus($event)'
-                    }
-                }]
-        }], ctorParameters: function () {
-        return [{ type: McTag, decorators: [{
-                        type: Inject,
-                        args: [forwardRef(() => McTag)]
-                    }] }];
-    } });
 class McTagBase {
     // tslint:disable-next-line:naming-convention
     constructor(_elementRef) {
@@ -430,15 +379,13 @@ class McTag extends McTagMixinBase {
         const icons = this.contentChildren.map((item) => item._elementRef.nativeElement);
         if (icons.length === 1) {
             const iconElement = icons[0];
-            if (!iconElement.previousElementSibling && !iconElement.nextElementSibling) {
-                if (iconElement.nextSibling) {
-                    iconElement.classList.add('mc-icon_left');
-                    this.nativeElement.classList.add('mc-left-icon');
-                }
-                if (iconElement.previousSibling) {
-                    iconElement.classList.add('mc-icon_right');
-                    this.nativeElement.classList.add('mc-right-icon');
-                }
+            if (iconElement.classList.contains('mc-tag-remove')) {
+                iconElement.classList.add('mc-icon_right');
+                this.nativeElement.classList.add('mc-right-icon');
+            }
+            else {
+                iconElement.classList.add('mc-icon_left');
+                this.nativeElement.classList.add('mc-left-icon');
             }
         }
         else if (icons.length > 1) {
@@ -565,9 +512,9 @@ class McTag extends McTagMixinBase {
         });
     }
 }
-/** @nocollapse */ /** @nocollapse */ McTag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTag, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McTag.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: McTag, selector: "mc-tag, [mc-tag], mc-basic-tag, [mc-basic-tag]", inputs: { color: "color", selected: "selected", value: "value", selectable: "selectable", removable: "removable", 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" }, 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 }], exportAs: ["mcTag"], usesInheritance: true, ngImport: i0, template: "<div class=\"mc-tag__wrapper\">\n    <span class=\"mc-tag__text\"><ng-content></ng-content></span>\n    <ng-content select=\"[mc-icon]\"></ng-content>\n    <div class=\"mc-tag-overlay\"></div>\n</div>\n", styles: [".mc-tag{position:relative;display:inline-block;overflow:hidden;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:hover{cursor:pointer}.mc-tag.mc-disabled .mc-icon:hover{cursor:default}.mc-tag.mc-left-icon{padding-left:var(--mc-tags-size-icon-padding, 3px)}.mc-tag.mc-right-icon{padding-right:var(--mc-tags-size-icon-padding, 3px)}.mc-tag .mc-tag__text{margin-left:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px));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{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--mc-tags-size-height, 24px);height:var(--mc-tags-size-height, 24px)}.mc-tag__wrapper .mc-icon_left{margin-right:var(--mc-tags-size-icon-padding, 3px)}.mc-tag__wrapper .mc-icon_right{margin-left:var(--mc-tags-size-icon-padding, 3px)}.mc-tag-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTag, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTag.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTag, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McTag.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.7", type: McTag, selector: "mc-tag, [mc-tag], mc-basic-tag, [mc-basic-tag]", inputs: { color: "color", selected: "selected", value: "value", selectable: "selectable", removable: "removable", 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" }, 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 }], 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\"><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;overflow:hidden;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;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", 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',
@@ -583,7 +530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
                         '(keydown)': 'handleKeydown($event)',
                         '(focus)': 'focus()',
                         '(blur)': 'blur()'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-tag__wrapper\">\n    <span class=\"mc-tag__text\"><ng-content></ng-content></span>\n    <ng-content select=\"[mc-icon]\"></ng-content>\n    <div class=\"mc-tag-overlay\"></div>\n</div>\n", styles: [".mc-tag{position:relative;display:inline-block;overflow:hidden;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:hover{cursor:pointer}.mc-tag.mc-disabled .mc-icon:hover{cursor:default}.mc-tag.mc-left-icon{padding-left:var(--mc-tags-size-icon-padding, 3px)}.mc-tag.mc-right-icon{padding-right:var(--mc-tags-size-icon-padding, 3px)}.mc-tag .mc-tag__text{margin-left:calc(var(--mc-tags-size-text-margin, 8px) - var(--mc-tags-size-border-width, 1px));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{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--mc-tags-size-height, 24px);height:var(--mc-tags-size-height, 24px)}.mc-tag__wrapper .mc-icon_left{margin-right:var(--mc-tags-size-icon-padding, 3px)}.mc-tag__wrapper .mc-icon_right{margin-left:var(--mc-tags-size-icon-padding, 3px)}.mc-tag-overlay{position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-tag__wrapper\">\n    <ng-content select=\"[mc-icon]:not([mcTagRemove])\"></ng-content>\n    <span class=\"mc-tag__text\"><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;overflow:hidden;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;top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border-radius:inherit}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { contentChildren: [{
                 type: ContentChildren,
                 args: [McIcon]
@@ -613,6 +560,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
             }], disabled: [{
                 type: Input
             }] } });
+/**
+ *
+ * Example:
+ *
+ *     `<mc-tag>
+ *       <mc-icon mcTagRemove>cancel</mc-icon>
+ *     </mc-tag>`
+ *
+ * You *may* use a custom icon, but you may need to override the `mc-tag-remove` positioning
+ * styles to properly center the icon within the tag.
+ */
+class McTagRemove {
+    constructor(parentTag) {
+        this.parentTag = parentTag;
+    }
+    focus($event) {
+        $event.stopPropagation();
+    }
+    /** Calls the parent tag's public `remove()` method if applicable. */
+    handleClick(event) {
+        if (this.parentTag.removable) {
+            this.parentTag.hasFocus = true;
+            this.parentTag.remove();
+        }
+        // We need to stop event propagation because otherwise the event will bubble up to the
+        // form field and cause the `onContainerClick` method to be invoked. This method would then
+        // reset the focused tag that has been focused after tag removal. Usually the parent
+        // the parent click listener of the `McTag` would prevent propagation, but it can happen
+        // that the tag is being removed before the event bubbles up.
+        event.stopPropagation();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McTagRemove.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagRemove, deps: [{ token: forwardRef(() => McTag) }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McTagRemove.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.7", 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: "13.3.7", ngImport: i0, type: McTagRemove, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mcTagRemove]',
+                    host: {
+                        class: 'mc-tag-remove mc-tag-trailing-icon',
+                        '[attr.tabindex]': '-1',
+                        '(click)': 'handleClick($event)',
+                        '(focus)': 'focus($event)'
+                    }
+                }]
+        }], ctorParameters: function () {
+        return [{ type: McTag, decorators: [{
+                        type: Inject,
+                        args: [forwardRef(() => McTag)]
+                    }] }];
+    } });
 
 class McTagListBase {
     constructor(defaultErrorStateMatcher, parentForm, parentFormGroup, ngControl) {
@@ -819,7 +817,7 @@ class McTagList extends McTagListMixinBase {
     }
     ngAfterContentInit() {
         if (this.mcValidation.useValidation) {
-            setMosaicValidation(this);
+            setMosaicValidation(this, this.changeDetectorRef);
         }
         this.keyManager = new FocusKeyManager(this.tags)
             .withVerticalOrientation()
@@ -1241,9 +1239,9 @@ class McTagList extends McTagListMixinBase {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ McTagList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ErrorStateMatcher }, { token: NG_VALIDATORS, optional: true }, { token: MC_VALIDATION, optional: true }, { token: i2.Directionality, optional: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }, { token: i3.NgModel, optional: true, self: true }, { token: i3.FormControlName, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McTagList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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:var(--mc-tag-list-size-min-height, 30px);padding:var(--mc-tag-list-size-padding, 1px 6px)}.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"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagList, decorators: [{
+/** @nocollapse */ /** @nocollapse */ McTagList.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagList, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ErrorStateMatcher }, { token: NG_VALIDATORS, optional: true }, { token: MC_VALIDATION, optional: true }, { token: i2.Directionality, optional: true }, { token: i3.NgForm, optional: true }, { token: i3.FormGroupDirective, optional: true }, { token: i3.NgControl, optional: true, self: true }, { token: i3.NgModel, optional: true, self: true }, { token: i3.FormControlName, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McTagList.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.7", 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"], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagList, decorators: [{
             type: Component,
             args: [{ selector: 'mc-tag-list', exportAs: 'mcTagList', host: {
                         class: 'mc-tag-list',
@@ -1254,7 +1252,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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:var(--mc-tag-list-size-min-height, 30px);padding:var(--mc-tag-list-size-padding, 1px 6px)}.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);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"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ErrorStateMatcher }, { type: undefined, decorators: [{
                         type: Optional
@@ -1324,8 +1322,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImpor
 
 class McTagsModule {
 }
-/** @nocollapse */ /** @nocollapse */ McTagsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ McTagsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagsModule, declarations: [McTagList,
+/** @nocollapse */ /** @nocollapse */ McTagsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McTagsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagsModule, declarations: [McTagList,
         McTag,
         McTagInput,
         McTagTrailingIcon,
@@ -1336,12 +1334,12 @@ class McTagsModule {
         McTagTrailingIcon,
         McTagAvatar,
         McTagRemove] });
-/** @nocollapse */ /** @nocollapse */ McTagsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McTagsModule, providers: [{
+/** @nocollapse */ /** @nocollapse */ McTagsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.7", 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: "13.3.0", ngImport: i0, type: McTagsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.7", ngImport: i0, type: McTagsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, PlatformModule],