@ptsecurity/mosaic 11.6.0 → 12.2.1

package/fesm2015/ptsecurity-mosaic-core.js

@@ -1,16 +1,22 @@
+import * as i2$1 from '@angular/cdk/bidi';
 import { BidiModule } from '@angular/cdk/bidi';
 import * as i0 from '@angular/core';
-import { InjectionToken, isDevMode, NgModule, Optional, Inject, Directive, Injectable, Pipe, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, ElementRef, ChangeDetectorRef, Output, ContentChildren } from '@angular/core';
+import { InjectionToken, isDevMode, NgModule, Optional, Inject, Directive, Injectable, Pipe, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, Output, ContentChild, ContentChildren, TemplateRef } from '@angular/core';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { Subject } from 'rxjs';
-import { DateAdapter, MC_DATE_LOCALE } from '@ptsecurity/cdk/datetime';
-import * as MessageFormat from 'messageformat';
+import MessageFormat from '@messageformat/core';
+import * as i1 from '@ptsecurity/cdk/datetime';
+import { MC_DATE_LOCALE } from '@ptsecurity/cdk/datetime';
 import { RequiredValidator } from '@angular/forms';
-import * as i1 from '@angular/common';
+import * as i2 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
+import * as i1$2 from '@angular/cdk/overlay';
 import { Overlay } from '@angular/cdk/overlay';
 import { trigger, state, style, transition, animate, group } from '@angular/animations';
-import { ENTER, SPACE } from '@ptsecurity/cdk/keycodes';
+import { ENTER, SPACE, TAB, ESCAPE } from '@ptsecurity/cdk/keycodes';
+import * as i1$1 from '@angular/cdk/a11y';
+import { takeUntil, distinctUntilChanged, delay } from 'rxjs/operators';
+import { ComponentPortal } from '@angular/cdk/portal';
 
 function isBoolean(val) { return typeof val === 'boolean'; }
 function toBoolean(value) {
@@ -81,16 +87,21 @@ class McCommonModule {
         }
     }
 }
-McCommonModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [BidiModule],
-                exports: [BidiModule]
-            },] }
-];
-/** @nocollapse */
-McCommonModule.ctorParameters = () => [
-    { type: Boolean, decorators: [{ type: Optional }, { type: Inject, args: [MC_SANITY_CHECKS,] }] }
-];
+/** @nocollapse */ McCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McCommonModule, deps: [{ token: MC_SANITY_CHECKS, optional: true }], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McCommonModule, imports: [BidiModule], exports: [BidiModule] });
+/** @nocollapse */ McCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McCommonModule, imports: [[BidiModule], BidiModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McCommonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [BidiModule],
+                    exports: [BidiModule]
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MC_SANITY_CHECKS]
+                }] }]; } });
 
 function mixinDisabled(base) {
     return class extends base {
@@ -116,16 +127,13 @@ var ThemePalette;
     ThemePalette["Default"] = "second";
     ThemePalette["Empty"] = "";
 })(ThemePalette || (ThemePalette = {}));
-/** Mixin to augment a directive with a `color` property. */
 function mixinColor(base, defaultColor = ThemePalette.Default) {
     return class extends base {
         constructor(...args) {
             super(...args);
             this.color = defaultColor;
         }
-        get color() {
-            return this._color;
-        }
+        get color() { return this._color; }
         set color(value) {
             const colorPalette = value || defaultColor;
             if (colorPalette !== this._color) {
@@ -141,17 +149,12 @@ function mixinColor(base, defaultColor = ThemePalette.Default) {
     };
 }
 
-// Mixin to augment a directive with a `tabIndex` property.
 function mixinTabIndex(base, defaultTabIndex = 0) {
-    // Note: We cast `base` to `unknown` and then `Constructor`. It could be an abstract class,
-    // but given we `extend` it from another class, we can assume a constructor being accessible.
-    // tslint:disable-next-line:naming-convention
-    class Mixin extends base {
+    return class extends base {
         constructor(...args) {
             super(...args);
-            // tslint:disable-next-line:orthodox-getter-and-setter
-            this._tabIndex = defaultTabIndex;
             this.defaultTabIndex = defaultTabIndex;
+            this._tabIndex = defaultTabIndex;
         }
         get tabIndex() {
             return this.disabled ? -1 : this._tabIndex;
@@ -160,11 +163,7 @@ function mixinTabIndex(base, defaultTabIndex = 0) {
             // If the specified tabIndex value is null or undefined, fall back to the default value.
             this._tabIndex = value != null ? coerceNumberProperty(value) : this.defaultTabIndex;
         }
-    }
-    // Since we don't directly extend from `base` with it's original types, and we instruct
-    // TypeScript that `T` actually is instantiatable through `new`, the types don't overlap.
-    // This is a limitation in TS as abstract classes cannot be typed properly dynamically.
-    return Mixin;
+    };
 }
 
 /**
@@ -204,12 +203,15 @@ function mixinErrorState(base) {
  */
 class McLine {
 }
-McLine.decorators = [
-    { type: Directive, args: [{
-                selector: '[mc-line], [mcLine]',
-                host: { class: 'mc-line' }
-            },] }
-];
+/** @nocollapse */ McLine.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McLine, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McLine.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McLine, selector: "[mc-line], [mcLine]", host: { classAttribute: "mc-line" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McLine, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mc-line], [mcLine]',
+                    host: { class: 'mc-line' }
+                }]
+        }] });
 /**
  * Helper that takes a query list of lines and sets the correct class on the host.
  * @docs-private
@@ -250,13 +252,17 @@ class McLineSetter {
 }
 class McLineModule {
 }
-McLineModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [],
-                exports: [McLine],
-                declarations: [McLine]
-            },] }
-];
+/** @nocollapse */ McLineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McLineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McLineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McLineModule, declarations: [McLine], exports: [McLine] });
+/** @nocollapse */ McLineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McLineModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McLineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [McLine],
+                    declarations: [McLine]
+                }]
+        }] });
 
 /** Error state matcher that matches when a control is invalid and dirty. */
 class ShowOnDirtyErrorStateMatcher {
@@ -264,19 +270,23 @@ class ShowOnDirtyErrorStateMatcher {
         return !!(control && control.invalid && (control.dirty || (form && form.submitted)));
     }
 }
-ShowOnDirtyErrorStateMatcher.decorators = [
-    { type: Injectable }
-];
+/** @nocollapse */ ShowOnDirtyErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ ShowOnDirtyErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ShowOnDirtyErrorStateMatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, decorators: [{
+            type: Injectable
+        }] });
 /** Provider that defines how form controls behave with regards to displaying error messages. */
 class ErrorStateMatcher {
     isErrorState(control, form) {
         return !!(control && control.invalid && (control.touched || (form && form.submitted)));
     }
 }
-/** @nocollapse */ ErrorStateMatcher.ɵprov = i0.ɵɵdefineInjectable({ factory: function ErrorStateMatcher_Factory() { return new ErrorStateMatcher(); }, token: ErrorStateMatcher, providedIn: "root" });
-ErrorStateMatcher.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
+/** @nocollapse */ ErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ ErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ErrorStateMatcher, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 const enUS = {
     relativeTemplates: {
@@ -1109,14 +1119,14 @@ class DateFormatter {
         return this.adapter.hasSame(startDate, endDate, unit) ? 'yes' : 'no';
     }
 }
-DateFormatter.decorators = [
-    { type: Injectable }
-];
-/** @nocollapse */
-DateFormatter.ctorParameters = () => [
-    { type: DateAdapter },
-    { type: String, decorators: [{ type: Inject, args: [MC_DATE_LOCALE,] }] }
-];
+/** @nocollapse */ DateFormatter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DateFormatter, deps: [{ token: i1.DateAdapter }, { token: MC_DATE_LOCALE }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ DateFormatter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DateFormatter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DateFormatter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MC_DATE_LOCALE]
+                }] }]; } });
 
 /* tslint:disable:naming-convention */
 const MC_LOCALE_ID = new InjectionToken('McLocaleId');
@@ -1199,25 +1209,35 @@ class McDecimalPipe {
         }
     }
 }
-/** @nocollapse */ McDecimalPipe.ɵprov = i0.ɵɵdefineInjectable({ factory: function McDecimalPipe_Factory() { return new McDecimalPipe(i0.ɵɵinject(MC_LOCALE_ID, 8)); }, token: McDecimalPipe, providedIn: "root" });
-McDecimalPipe.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] },
-    { type: Pipe, args: [{ name: 'mcNumber' },] }
-];
-/** @nocollapse */
-McDecimalPipe.ctorParameters = () => [
-    { type: String, decorators: [{ type: Optional }, { type: Inject, args: [MC_LOCALE_ID,] }] }
-];
+/** @nocollapse */ McDecimalPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McDecimalPipe, deps: [{ token: MC_LOCALE_ID, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ McDecimalPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McDecimalPipe, name: "mcNumber" });
+/** @nocollapse */ McDecimalPipe.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McDecimalPipe, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McDecimalPipe, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }, {
+            type: Pipe,
+            args: [{ name: 'mcNumber' }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MC_LOCALE_ID]
+                }] }]; } });
 
 class McFormattersModule {
 }
-McFormattersModule.decorators = [
-    { type: NgModule, args: [{
-                exports: [McDecimalPipe],
-                declarations: [McDecimalPipe],
-                providers: [DateFormatter]
-            },] }
-];
+/** @nocollapse */ McFormattersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McFormattersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McFormattersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McFormattersModule, declarations: [McDecimalPipe], exports: [McDecimalPipe] });
+/** @nocollapse */ McFormattersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McFormattersModule, providers: [DateFormatter] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McFormattersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [McDecimalPipe],
+                    declarations: [McDecimalPipe],
+                    providers: [DateFormatter]
+                }]
+        }] });
 
 const validationTooltipShowDelay = 10;
 const validationTooltipHideDelay = 3000;
@@ -1309,19 +1329,26 @@ class McHighlightPipe {
         return value.replace(new RegExp(`(${args})`, 'gi'), '<mark class="mc-highlight">$1</mark>');
     }
 }
-McHighlightPipe.decorators = [
-    { type: Pipe, args: [{ name: 'mcHighlight' },] }
-];
+/** @nocollapse */ McHighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ McHighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McHighlightPipe, name: "mcHighlight" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McHighlightPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'mcHighlight' }]
+        }] });
 
 class McHighlightModule {
 }
-McHighlightModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                exports: [McHighlightPipe],
-                declarations: [McHighlightPipe]
-            },] }
-];
+/** @nocollapse */ McHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McHighlightModule, declarations: [McHighlightPipe], imports: [CommonModule], exports: [McHighlightPipe] });
+/** @nocollapse */ McHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McHighlightModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McHighlightModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [McHighlightPipe],
+                    declarations: [McHighlightPipe]
+                }]
+        }] });
 
 const selectEvents = 'selectEvents';
 
@@ -1462,13 +1489,19 @@ const POSITION_MAP = {
         overlayY: 'bottom'
     }
 };
-const DEFAULT_4_POSITIONS = objectValues([
-    POSITION_MAP.top, POSITION_MAP.right, POSITION_MAP.bottom, POSITION_MAP.left
-]);
 const EXTENDED_OVERLAY_POSITIONS = objectValues([
-    POSITION_MAP.top, POSITION_MAP.topLeft, POSITION_MAP.topRight, POSITION_MAP.right, POSITION_MAP.rightTop,
-    POSITION_MAP.rightBottom, POSITION_MAP.bottom, POSITION_MAP.bottomLeft, POSITION_MAP.bottomRight,
-    POSITION_MAP.left, POSITION_MAP.leftTop, POSITION_MAP.leftBottom
+    POSITION_MAP.top,
+    POSITION_MAP.topLeft,
+    POSITION_MAP.topRight,
+    POSITION_MAP.right,
+    POSITION_MAP.rightTop,
+    POSITION_MAP.rightBottom,
+    POSITION_MAP.bottom,
+    POSITION_MAP.bottomLeft,
+    POSITION_MAP.bottomRight,
+    POSITION_MAP.left,
+    POSITION_MAP.leftTop,
+    POSITION_MAP.leftBottom
 ]);
 const TOP_POSITION_PRIORITY = objectValues([
     POSITION_MAP.top,
@@ -1598,15 +1631,9 @@ const POSITION_TO_CSS_MAP = {
     bottomLeft: 'bottom-left',
     bottomRight: 'bottom-right'
 };
-const DEFAULT_4_POSITIONS_TO_CSS_MAP = {
-    top: 'top',
-    bottom: 'bottom',
-    right: 'right',
-    left: 'left'
-};
 function arrayMap(array, iteratee) {
     let index = -1;
-    const length = array == null ? 0 : array.length;
+    const length = array === null ? 0 : array.length;
     const result = Array(length);
     while (++index < length) {
         result[index] = iteratee(array[index], index, array);
@@ -1614,12 +1641,10 @@ function arrayMap(array, iteratee) {
     return result;
 }
 function baseValues(object, props) {
-    return arrayMap(props, (key) => {
-        return object[key];
-    });
+    return arrayMap(props, (key) => object[key]);
 }
 function objectValues(object) {
-    return object == null ? [] : baseValues(object, Object.keys(object));
+    return object === null ? [] : baseValues(object, Object.keys(object));
 }
 
 const fadeAnimation = trigger('fadeAnimation', [
@@ -1710,36 +1735,43 @@ class McPseudoCheckbox {
         this.disabled = false;
     }
 }
-McPseudoCheckbox.decorators = [
-    { type: Component, args: [{
-                selector: 'mc-pseudo-checkbox',
-                template: "<i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n<i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n",
-                host: {
-                    class: 'mc-pseudo-checkbox',
-                    '[class.mc-indeterminate]': 'state === "indeterminate"',
-                    '[class.mc-checked]': 'state === "checked"',
-                    '[class.mc-disabled]': 'disabled'
-                },
-                preserveWhitespaces: false,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                encapsulation: ViewEncapsulation.None,
-                styles: [".mc-pseudo-checkbox{position:relative;display:inline-block;box-sizing:border-box;width:var(--mc-checkbox-size-width,16px);height:var(--mc-checkbox-size-width,16px);border-radius:3px;border-width:var(--mc-checkbox-size-border-width,1px);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.mc-pseudo-checkbox .mc-checkbox-checkmark,.mc-pseudo-checkbox .mc-checkbox-mixedmark{display:none;position:absolute;top:calc(-1 * var(--mc-checkbox-size-border-width, 1px));left:calc(-1 * var(--mc-checkbox-size-border-width, 1px))}.mc-pseudo-checkbox.mc-pseudo-checkbox-checked,.mc-pseudo-checkbox.mc-pseudo-checkbox-indeterminate{border-color:transparent}.mc-pseudo-checkbox.mc-checked .mc-checkbox-checkmark,.mc-pseudo-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:inline-block}.mc-pseudo-checkbox.mc-disabled{cursor:default}"]
-            },] }
-];
-McPseudoCheckbox.propDecorators = {
-    state: [{ type: Input }],
-    disabled: [{ type: Input }]
-};
+/** @nocollapse */ McPseudoCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPseudoCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McPseudoCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: { state: "state", disabled: "disabled" }, host: { properties: { "class.mc-indeterminate": "state === \"indeterminate\"", "class.mc-checked": "state === \"checked\"", "class.mc-disabled": "disabled" }, classAttribute: "mc-pseudo-checkbox" }, ngImport: i0, template: "<i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n<i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n", styles: [".mc-pseudo-checkbox{position:relative;display:inline-block;box-sizing:border-box;width:16px;width:var(--mc-checkbox-size-width, 16px);height:16px;height:var(--mc-checkbox-size-width, 16px);border-radius:3px;border-width:1px;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.mc-pseudo-checkbox .mc-checkbox-checkmark,.mc-pseudo-checkbox .mc-checkbox-mixedmark{display:none;position:absolute;top:calc(-1 * 1px);top:calc(-1 * var(--mc-checkbox-size-border-width, 1px));left:calc(-1 * 1px);left:calc(-1 * var(--mc-checkbox-size-border-width, 1px))}.mc-pseudo-checkbox.mc-pseudo-checkbox-checked,.mc-pseudo-checkbox.mc-pseudo-checkbox-indeterminate{border-color:transparent}.mc-pseudo-checkbox.mc-checked .mc-checkbox-checkmark{display:inline-block}.mc-pseudo-checkbox.mc-indeterminate .mc-checkbox-mixedmark{display:inline-block}.mc-pseudo-checkbox.mc-disabled{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPseudoCheckbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mc-pseudo-checkbox',
+                    templateUrl: 'pseudo-checkbox.partial.html',
+                    styleUrls: ['pseudo-checkbox.scss'],
+                    host: {
+                        class: 'mc-pseudo-checkbox',
+                        '[class.mc-indeterminate]': 'state === "indeterminate"',
+                        '[class.mc-checked]': 'state === "checked"',
+                        '[class.mc-disabled]': 'disabled'
+                    },
+                    preserveWhitespaces: false,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], propDecorators: { state: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
 
 class McPseudoCheckboxModule {
 }
-McPseudoCheckboxModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule],
-                exports: [McPseudoCheckbox],
-                declarations: [McPseudoCheckbox]
-            },] }
-];
+/** @nocollapse */ McPseudoCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPseudoCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McPseudoCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPseudoCheckboxModule, declarations: [McPseudoCheckbox], imports: [CommonModule], exports: [McPseudoCheckbox] });
+/** @nocollapse */ McPseudoCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPseudoCheckboxModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPseudoCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [McPseudoCheckbox],
+                    declarations: [McPseudoCheckbox]
+                }]
+        }] });
 
 class McMeasureScrollbarService {
     constructor(document) {
@@ -1774,16 +1806,17 @@ class McMeasureScrollbarService {
         this._scrollBarWidth = width;
     }
 }
-/** @nocollapse */ McMeasureScrollbarService.ɵprov = i0.ɵɵdefineInjectable({ factory: function McMeasureScrollbarService_Factory() { return new McMeasureScrollbarService(i0.ɵɵinject(i1.DOCUMENT)); }, token: McMeasureScrollbarService, providedIn: "root" });
-McMeasureScrollbarService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root'
-            },] }
-];
-/** @nocollapse */
-McMeasureScrollbarService.ctorParameters = () => [
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-];
+/** @nocollapse */ McMeasureScrollbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McMeasureScrollbarService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ McMeasureScrollbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McMeasureScrollbarService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McMeasureScrollbarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }]; } });
 
 /** @docs-private */
 class McOptgroupBase {
@@ -1801,24 +1834,26 @@ class McOptgroup extends McOptgroupMixinBase {
         this.labelId = `mc-optgroup-label-${uniqueOptgroupIdCounter++}`;
     }
 }
-McOptgroup.decorators = [
-    { type: Component, args: [{
-                selector: 'mc-optgroup',
-                exportAs: 'mcOptgroup',
-                template: "<label class=\"mc-optgroup-label\" [id]=\"labelId\">{{ label }}</label>\n<ng-content select=\"mc-option, mc-list-option, ng-container\"></ng-content>\n",
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                inputs: ['disabled'],
-                host: {
-                    class: 'mc-optgroup',
-                    '[class.mc-disabled]': 'disabled'
-                },
-                styles: [".mc-optgroup-label{padding-left:var(--mc-optgroup-size-padding-left,17px);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}"]
-            },] }
-];
-McOptgroup.propDecorators = {
-    label: [{ type: Input }]
-};
+/** @nocollapse */ McOptgroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOptgroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McOptgroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McOptgroup, selector: "mc-optgroup", inputs: { disabled: "disabled", label: "label" }, host: { properties: { "class.mc-disabled": "disabled" }, classAttribute: "mc-optgroup" }, exportAs: ["mcOptgroup"], usesInheritance: true, ngImport: i0, template: "<label class=\"mc-optgroup-label\" [id]=\"labelId\">{{ label }}</label>\n<ng-content select=\"mc-option, mc-list-option, ng-container\"></ng-content>\n", styles: [".mc-optgroup-label{padding-left:17px;padding-left:var(--mc-optgroup-size-padding-left, 17px);-webkit-user-select:none;user-select:none;cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOptgroup, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mc-optgroup',
+                    exportAs: 'mcOptgroup',
+                    templateUrl: 'optgroup.html',
+                    styleUrls: ['./optgroup.scss'],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    inputs: ['disabled'],
+                    host: {
+                        class: 'mc-optgroup',
+                        '[class.mc-disabled]': 'disabled'
+                    }
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }] } });
 
 /**
  * Option IDs need to be unique across components, so this counter exists outside of
@@ -1994,40 +2029,45 @@ class McOption {
         this.onSelectionChange.emit(new McOptionSelectionChange(this, isUserInput));
     }
 }
-McOption.decorators = [
-    { type: Component, args: [{
-                selector: 'mc-option',
-                exportAs: 'mcOption',
-                host: {
-                    '[attr.tabindex]': 'getTabIndex()',
-                    class: 'mc-option',
-                    '[class.mc-selected]': 'selected',
-                    '[class.mc-option-multiple]': 'multiple',
-                    '[class.mc-active]': 'active',
-                    '[class.mc-disabled]': 'disabled',
-                    '[id]': 'id',
-                    '(click)': 'selectViaInteraction()',
-                    '(keydown)': 'handleKeydown($event)'
-                },
-                template: "<mc-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : ''\"\n    [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<span class=\"mc-option-text\"><ng-content></ng-content></span>\n\n<div class=\"mc-option-overlay\"></div>\n",
-                encapsulation: ViewEncapsulation.None,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                styles: [".mc-option{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--mc-option-size-height,32px);border:var(--mc-option-size-border-width,2px) solid transparent;cursor:pointer;outline:none;padding-left:var(--mc-option-size-horizontal-padding,16px);padding-right:var(--mc-option-size-horizontal-padding,16px);-webkit-tap-highlight-color:transparent}.mc-option.mc-disabled{cursor:default}.mc-option .mc-pseudo-checkbox{margin-right:8px}.mc-option .mc-option-overlay{position:absolute;top:calc(-1 * var(--mc-option-size-border-width, 2px));left:calc(-1 * var(--mc-option-size-border-width, 2px));right:calc(-1 * var(--mc-option-size-border-width, 2px));bottom:calc(-1 * var(--mc-option-size-border-width, 2px));pointer-events:none;border-radius:inherit}.mc-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}"]
-            },] }
-];
-/** @nocollapse */
-McOption.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [MC_OPTION_PARENT_COMPONENT,] }] },
-    { type: McOptgroup, decorators: [{ type: Optional }] }
-];
-McOption.propDecorators = {
-    value: [{ type: Input }],
-    showCheckbox: [{ type: Input }],
-    onSelectionChange: [{ type: Output }],
-    disabled: [{ type: Input }]
-};
+/** @nocollapse */ McOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MC_OPTION_PARENT_COMPONENT, optional: true }, { token: McOptgroup, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McOption, selector: "mc-option", inputs: { value: "value", showCheckbox: "showCheckbox", disabled: "disabled" }, outputs: { onSelectionChange: "onSelectionChange" }, host: { listeners: { "click": "selectViaInteraction()", "keydown": "handleKeydown($event)" }, properties: { "attr.tabindex": "getTabIndex()", "class.mc-selected": "selected", "class.mc-option-multiple": "multiple", "class.mc-active": "active", "class.mc-disabled": "disabled", "id": "id" }, classAttribute: "mc-option" }, exportAs: ["mcOption"], ngImport: i0, template: "<mc-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<span class=\"mc-option-text\"><ng-content></ng-content></span>\n\n<div class=\"mc-option-overlay\"></div>\n", styles: [".mc-option{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:32px;height:var(--mc-option-size-height, 32px);border:2px solid transparent;border:var(--mc-option-size-border-width, 2px) solid transparent;cursor:pointer;outline:none;padding-left:16px;padding-left:var(--mc-option-size-horizontal-padding, 16px);padding-right:16px;padding-right:var(--mc-option-size-horizontal-padding, 16px);-webkit-tap-highlight-color:transparent}.mc-option.mc-disabled{cursor:default}.mc-option .mc-pseudo-checkbox{margin-right:8px}.mc-option .mc-option-overlay{position:absolute;top:calc(-1 * 2px);top:calc(-1 * var(--mc-option-size-border-width, 2px));left:calc(-1 * 2px);left:calc(-1 * var(--mc-option-size-border-width, 2px));right:calc(-1 * 2px);right:calc(-1 * var(--mc-option-size-border-width, 2px));bottom:calc(-1 * 2px);bottom:calc(-1 * var(--mc-option-size-border-width, 2px));pointer-events:none;border-radius:inherit}.mc-option-text{display:inline-block;flex-grow:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["state", "disabled"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOption, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mc-option',
+                    exportAs: 'mcOption',
+                    host: {
+                        '[attr.tabindex]': 'getTabIndex()',
+                        class: 'mc-option',
+                        '[class.mc-selected]': 'selected',
+                        '[class.mc-option-multiple]': 'multiple',
+                        '[class.mc-active]': 'active',
+                        '[class.mc-disabled]': 'disabled',
+                        '[id]': 'id',
+                        '(click)': 'selectViaInteraction()',
+                        '(keydown)': 'handleKeydown($event)'
+                    },
+                    styleUrls: ['option.scss'],
+                    templateUrl: 'option.html',
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [MC_OPTION_PARENT_COMPONENT]
+                }] }, { type: McOptgroup, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { value: [{
+                type: Input
+            }], showCheckbox: [{
+                type: Input
+            }], onSelectionChange: [{
+                type: Output
+            }], disabled: [{
+                type: Input
+            }] } });
 /**
  * Counts the amount of option group labels that precede the specified option.
  * @param optionIndex Index of the option at which to start counting.
@@ -2068,15 +2108,141 @@ function getOptionScrollPosition(optionIndex, optionHeight, currentScrollPositio
     return currentScrollPosition;
 }
 
+const MC_OPTION_ACTION_PARENT = new InjectionToken('MC_OPTION_ACTION_PARENT');
+class McOptionActionBase {
+}
+// tslint:disable-next-line:naming-convention
+const McOptionActionMixinBase = mixinTabIndex(mixinDisabled(McOptionActionBase));
+class McOptionActionComponent extends McOptionActionMixinBase {
+    constructor(elementRef, focusMonitor, option) {
+        super();
+        this.elementRef = elementRef;
+        this.focusMonitor = focusMonitor;
+        this.option = option;
+        this.hasFocus = false;
+        this.destroy = new Subject();
+        this.focusMonitor.monitor(this.elementRef.nativeElement);
+    }
+    get active() {
+        var _a;
+        return this.hasFocus || !!((_a = this.option.dropdownTrigger) === null || _a === void 0 ? void 0 : _a.opened);
+    }
+    ngAfterViewInit() {
+        if (!this.option.dropdownTrigger) {
+            return;
+        }
+        this.option.dropdownTrigger.restoreFocus = false;
+        this.option.dropdownTrigger.dropdownClosed
+            .pipe(takeUntil(this.destroy))
+            .subscribe(() => {
+            this.preventShowingTooltip();
+            const destroyReason = this.option.dropdownTrigger.lastDestroyReason === 'keydown' ?
+                'keyboard' :
+                'program';
+            this.focus(destroyReason);
+        });
+    }
+    ngOnDestroy() {
+        this.destroy.next();
+        this.destroy.complete();
+        this.focusMonitor.stopMonitoring(this.elementRef.nativeElement);
+    }
+    focus(origin, options) {
+        if (this.focusMonitor && origin) {
+            this.focusMonitor.focusVia(this.elementRef.nativeElement, origin, options);
+        }
+        else {
+            this.elementRef.nativeElement.focus();
+        }
+        this.hasFocus = true;
+    }
+    onFocus($event) {
+        $event.stopPropagation();
+        this.hasFocus = true;
+    }
+    onBlur() {
+        this.hasFocus = false;
+    }
+    onClick($event) {
+        $event.stopPropagation();
+    }
+    onKeyDown($event) {
+        if ([SPACE, ENTER].includes($event.keyCode) && this.option.dropdownTrigger) {
+            this.option.dropdownTrigger.openedBy = 'keyboard';
+            this.option.dropdownTrigger.toggle();
+        }
+        else if ($event.shiftKey && $event.keyCode === TAB) {
+            this.hasFocus = false;
+            this.option.focus();
+        }
+        else if ($event.keyCode === TAB) {
+            return;
+        }
+        $event.preventDefault();
+        $event.stopPropagation();
+    }
+    preventShowingTooltip() {
+        if (!this.option.tooltipTrigger) {
+            return;
+        }
+        this.option.tooltipTrigger.disabled = true;
+        setTimeout(() => this.option.tooltipTrigger.disabled = false);
+    }
+}
+/** @nocollapse */ McOptionActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOptionActionComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: MC_OPTION_ACTION_PARENT }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McOptionActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: McOptionActionComponent, selector: "mc-option-action", inputs: { disabled: "disabled" }, host: { listeners: { "focus": "onFocus($event)", "blur": "onBlur()", "click": "onClick($event)", "keydown": "onKeyDown($event)" }, properties: { "class.mc-opened": "false", "attr.disabled": "disabled || null", "attr.tabIndex": "-1" }, classAttribute: "mc-option-action" }, queries: [{ propertyName: "customIcon", first: true, predicate: ["customIcon"], descendants: true }], exportAs: ["mcOptionAction"], usesInheritance: true, ngImport: i0, template: `
+        <ng-container [ngSwitch]="!!customIcon">
+            <i class="mc mc-icon mc-ellipsis_16" *ngSwitchCase="false"></i>
+            <ng-content select="[mc-icon]" *ngSwitchCase="true"></ng-content>
+        </ng-container>
+    `, isInline: true, styles: [".mc-option-action{box-sizing:unset;position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:-2px;width:28px;height:100%;cursor:pointer;outline:none;border:2px solid transparent;background:transparent}.mc-option-action[disabled]{cursor:default}\n"], directives: [{ type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOptionActionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mc-option-action',
+                    exportAs: 'mcOptionAction',
+                    template: `
+        <ng-container [ngSwitch]="!!customIcon">
+            <i class="mc mc-icon mc-ellipsis_16" *ngSwitchCase="false"></i>
+            <ng-content select="[mc-icon]" *ngSwitchCase="true"></ng-content>
+        </ng-container>
+    `,
+                    styleUrls: ['./action.scss'],
+                    host: {
+                        class: 'mc-option-action',
+                        '[class.mc-opened]': 'false',
+                        '[attr.disabled]': 'disabled || null',
+                        '[attr.tabIndex]': '-1',
+                        '(focus)': 'onFocus($event)',
+                        '(blur)': 'onBlur()',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeyDown($event)'
+                    },
+                    inputs: ['disabled'],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.FocusMonitor }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MC_OPTION_ACTION_PARENT]
+                }] }]; }, propDecorators: { customIcon: [{
+                type: ContentChild,
+                args: ['customIcon']
+            }] } });
+
 class McOptionModule {
 }
-McOptionModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [CommonModule, McPseudoCheckboxModule],
-                exports: [McOption, McOptgroup],
-                declarations: [McOption, McOptgroup]
-            },] }
-];
+/** @nocollapse */ McOptionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McOptionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOptionModule, declarations: [McOption, McOptgroup, McOptionActionComponent], imports: [CommonModule, McPseudoCheckboxModule], exports: [McOption, McOptgroup, McOptionActionComponent] });
+/** @nocollapse */ McOptionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOptionModule, imports: [[CommonModule, McPseudoCheckboxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McOptionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, McPseudoCheckboxModule],
+                    declarations: [McOption, McOptgroup, McOptionActionComponent],
+                    exports: [McOption, McOptgroup, McOptionActionComponent]
+                }]
+        }] });
 
 class McFormElement {
     constructor(element) {
@@ -2097,22 +2263,21 @@ class McFormElement {
         }
     }
 }
-McFormElement.decorators = [
-    { type: Directive, args: [{
-                selector: '.mc-form__row, .mc-form__fieldset, .mc-form__legend',
-                exportAs: 'mcFormElement',
-                host: {
-                    '[class.mc-form-row_margin]': 'margin'
-                }
-            },] }
-];
-/** @nocollapse */
-McFormElement.ctorParameters = () => [
-    { type: ElementRef }
-];
-McFormElement.propDecorators = {
-    elements: [{ type: ContentChildren, args: [McFormElement,] }]
-};
+/** @nocollapse */ McFormElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McFormElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McFormElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McFormElement, selector: ".mc-form__row, .mc-form__fieldset, .mc-form__legend", host: { properties: { "class.mc-form-row_margin": "margin" } }, queries: [{ propertyName: "elements", predicate: McFormElement }], exportAs: ["mcFormElement"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McFormElement, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '.mc-form__row, .mc-form__fieldset, .mc-form__legend',
+                    exportAs: 'mcFormElement',
+                    host: {
+                        '[class.mc-form-row_margin]': 'margin'
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { elements: [{
+                type: ContentChildren,
+                args: [McFormElement]
+            }] } });
 class McForm {
     ngAfterContentInit() {
         this.handleElements(this.elements);
@@ -2127,37 +2292,391 @@ class McForm {
         });
     }
 }
-McForm.decorators = [
-    { type: Directive, args: [{
-                selector: '.mc-form-vertical, .mc-form-horizontal',
-                exportAs: 'mcForm',
-                host: {
-                    class: 'mc-form'
-                }
-            },] }
-];
-McForm.propDecorators = {
-    elements: [{ type: ContentChildren, args: [McFormElement,] }]
-};
+/** @nocollapse */ McForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McForm.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McForm, selector: ".mc-form-vertical, .mc-form-horizontal", host: { classAttribute: "mc-form" }, queries: [{ propertyName: "elements", predicate: McFormElement }], exportAs: ["mcForm"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McForm, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '.mc-form-vertical, .mc-form-horizontal',
+                    exportAs: 'mcForm',
+                    host: {
+                        class: 'mc-form'
+                    }
+                }]
+        }], propDecorators: { elements: [{
+                type: ContentChildren,
+                args: [McFormElement]
+            }] } });
 
 class McFormsModule {
 }
-McFormsModule.decorators = [
-    { type: NgModule, args: [{
-                exports: [
-                    McForm,
-                    McFormElement
-                ],
-                declarations: [
-                    McForm,
-                    McFormElement
-                ]
-            },] }
-];
+/** @nocollapse */ McFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McFormsModule, declarations: [McForm,
+        McFormElement], exports: [McForm,
+        McFormElement] });
+/** @nocollapse */ McFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McFormsModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        McForm,
+                        McFormElement
+                    ],
+                    declarations: [
+                        McForm,
+                        McFormElement
+                    ]
+                }]
+        }] });
+
+var PopUpPlacements;
+(function (PopUpPlacements) {
+    PopUpPlacements["Top"] = "top";
+    PopUpPlacements["TopLeft"] = "topLeft";
+    PopUpPlacements["TopRight"] = "topRight";
+    PopUpPlacements["Right"] = "right";
+    PopUpPlacements["RightTop"] = "rightTop";
+    PopUpPlacements["RightBottom"] = "rightBottom";
+    PopUpPlacements["Left"] = "left";
+    PopUpPlacements["LeftTop"] = "leftTop";
+    PopUpPlacements["LeftBottom"] = "leftBottom";
+    PopUpPlacements["Bottom"] = "bottom";
+    PopUpPlacements["BottomLeft"] = "bottomLeft";
+    PopUpPlacements["BottomRight"] = "bottomRight";
+})(PopUpPlacements || (PopUpPlacements = {}));
+var PopUpVisibility;
+(function (PopUpVisibility) {
+    PopUpVisibility["Initial"] = "initial";
+    PopUpVisibility["Visible"] = "visible";
+    PopUpVisibility["Hidden"] = "hidden";
+})(PopUpVisibility || (PopUpVisibility = {}));
+var PopUpTriggers;
+(function (PopUpTriggers) {
+    PopUpTriggers["Click"] = "click";
+    PopUpTriggers["Focus"] = "focus";
+    PopUpTriggers["Hover"] = "hover";
+})(PopUpTriggers || (PopUpTriggers = {}));
+var PopUpSizes;
+(function (PopUpSizes) {
+    PopUpSizes["Small"] = "small";
+    PopUpSizes["Normal"] = "normal";
+    PopUpSizes["Large"] = "large";
+})(PopUpSizes || (PopUpSizes = {}));
+
+// tslint:disable-next-line:naming-convention
+class McPopUp {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.classMap = {};
+        this.visibility = PopUpVisibility.Initial;
+        this.visibleChange = new EventEmitter();
+        /** Subject for notifying that the tooltip has been hidden from the view */
+        this.onHideSubject = new Subject();
+        this.closeOnInteraction = false;
+    }
+    ngOnDestroy() {
+        clearTimeout(this.showTimeoutId);
+        clearTimeout(this.hideTimeoutId);
+        this.onHideSubject.complete();
+    }
+    isTemplateRef(value) {
+        return value instanceof TemplateRef;
+    }
+    show(delay) {
+        if (this.hideTimeoutId) {
+            clearTimeout(this.hideTimeoutId);
+        }
+        this.closeOnInteraction = true;
+        this.showTimeoutId = setTimeout(() => {
+            this.showTimeoutId = undefined;
+            this.visibility = PopUpVisibility.Visible;
+            this.visibleChange.emit(true);
+            // Mark for check so if any parent component has set the
+            // ChangeDetectionStrategy to OnPush it will be checked anyways
+            this.markForCheck();
+        }, delay);
+    }
+    hide(delay) {
+        if (this.showTimeoutId) {
+            clearTimeout(this.showTimeoutId);
+        }
+        this.hideTimeoutId = setTimeout(() => {
+            this.hideTimeoutId = undefined;
+            this.visibility = PopUpVisibility.Hidden;
+            this.visibleChange.emit(false);
+            this.onHideSubject.next();
+            // Mark for check so if any parent component has set the
+            // ChangeDetectionStrategy to OnPush it will be checked anyways
+            this.markForCheck();
+        }, delay);
+    }
+    isVisible() {
+        return this.visibility === PopUpVisibility.Visible;
+    }
+    updateClassMap(placement, customClass, classMap) {
+        this.classMap = Object.assign({ [`${this.prefix}_placement-${placement}`]: true, [customClass]: !!customClass }, classMap);
+    }
+    /** Returns an observable that notifies when the tooltip has been hidden from view. */
+    afterHidden() {
+        return this.onHideSubject.asObservable();
+    }
+    markForCheck() {
+        this.changeDetectorRef.markForCheck();
+    }
+    animationStart() {
+        this.closeOnInteraction = false;
+    }
+    animationDone({ toState }) {
+        if (toState === PopUpVisibility.Hidden && !this.isVisible()) {
+            this.onHideSubject.next();
+        }
+        if (toState === PopUpVisibility.Visible || toState === PopUpVisibility.Hidden) {
+            this.closeOnInteraction = true;
+        }
+    }
+    handleBodyInteraction() {
+        if (this.closeOnInteraction) {
+            this.hide(0);
+        }
+    }
+}
+/** @nocollapse */ McPopUp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPopUp, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McPopUp.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McPopUp, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPopUp, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+const VIEWPORT_MARGIN = 8;
+// tslint:disable-next-line:naming-convention
+class McPopUpTrigger {
+    constructor(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction) {
+        this.overlay = overlay;
+        this.elementRef = elementRef;
+        this.ngZone = ngZone;
+        this.scrollDispatcher = scrollDispatcher;
+        this.hostView = hostView;
+        this.scrollStrategy = scrollStrategy;
+        this.direction = direction;
+        this.isOpen = false;
+        this.enterDelay = 0;
+        this.leaveDelay = 0;
+        this.placement = PopUpPlacements.Top;
+        this.placementPriority = null;
+        this.visible = false;
+        // tslint:disable-next-line:naming-convention orthodox-getter-and-setter
+        this._disabled = false;
+        this.listeners = new Map();
+        this.destroyed = new Subject();
+        this.detach = () => {
+            if (this.overlayRef && this.overlayRef.hasAttached()) {
+                this.overlayRef.detach();
+            }
+            this.instance = null;
+        };
+        this.onPositionChange = ($event) => {
+            if (!this.instance) {
+                return;
+            }
+            let newPlacement = this.placement;
+            const { originX, originY, overlayX, overlayY } = $event.connectionPair;
+            Object.keys(this.availablePositions).some((key) => {
+                if (originX === this.availablePositions[key].originX && originY === this.availablePositions[key].originY &&
+                    overlayX === this.availablePositions[key].overlayX && overlayY === this.availablePositions[key].overlayY) {
+                    newPlacement = key;
+                    return true;
+                }
+                return false;
+            });
+            this.placementChange.emit(newPlacement);
+            this.updateClassMap(newPlacement);
+            if ($event.scrollableViewProperties.isOverlayClipped && this.instance.isVisible()) {
+                // After position changes occur and the overlay is clipped by
+                // a parent scrollable then close the tooltip.
+                this.ngZone.run(() => this.hide());
+            }
+        };
+        this.addEventListener = (listener, event) => {
+            this.elementRef.nativeElement.addEventListener(event, listener);
+        };
+        this.removeEventListener = (listener, event) => {
+            this.elementRef.nativeElement.removeEventListener(event, listener);
+        };
+        this.availablePositions = POSITION_MAP;
+    }
+    ngOnInit() {
+        this.initListeners();
+    }
+    ngOnDestroy() {
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+        }
+        this.listeners.forEach(this.removeEventListener);
+        this.listeners.clear();
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
+    updatePlacement(value) {
+        if (POSITION_TO_CSS_MAP[value]) {
+            this.placement = value;
+            this.updateClassMap();
+        }
+        else {
+            this.placement = PopUpPlacements.Top;
+            console.warn(`Unknown position: ${value}. Will used default position: ${this.placement}`);
+        }
+        if (this.visible) {
+            this.updatePosition();
+        }
+    }
+    updatePlacementPriority(value) {
+        if (value && value.length > 0) {
+            this.placementPriority = value;
+        }
+        else {
+            this.placementPriority = null;
+        }
+    }
+    updateVisible(externalValue) {
+        const value = coerceBooleanProperty(externalValue);
+        if (this.visible !== value) {
+            this.visible = value;
+            if (value) {
+                this.show();
+            }
+            else {
+                this.hide();
+            }
+        }
+    }
+    handleKeydown(event) {
+        if (this.isOpen && event.keyCode === ESCAPE) { // tslint:disable-line
+            this.hide();
+        }
+    }
+    handleTouchend() {
+        this.hide();
+    }
+    show(delay = this.enterDelay) {
+        if (this.disabled || this.instance) {
+            return;
+        }
+        this.overlayRef = this.createOverlay();
+        this.detach();
+        this.portal = this.portal || new ComponentPortal(this.getOverlayHandleComponentType(), this.hostView);
+        this.instance = this.overlayRef.attach(this.portal).instance;
+        this.instance.afterHidden()
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(this.detach);
+        this.updateClassMap();
+        this.updateData();
+        this.instance.visibleChange
+            .pipe(takeUntil(this.destroyed), distinctUntilChanged())
+            .subscribe((value) => {
+            this.visible = value;
+            this.visibleChange.emit(value);
+            this.isOpen = value;
+        });
+        this.updatePosition();
+        this.instance.show(delay);
+    }
+    hide(delay = this.leaveDelay) {
+        if (this.instance) {
+            this.instance.hide(delay);
+        }
+    }
+    /** Create the overlay config and position strategy */
+    createOverlay() {
+        if (this.overlayRef) {
+            return this.overlayRef;
+        }
+        // Create connected position strategy that listens for scroll events to reposition.
+        const strategy = this.overlay.position()
+            .flexibleConnectedTo(this.elementRef)
+            .withTransformOriginOn(this.originSelector)
+            .withFlexibleDimensions(false)
+            .withViewportMargin(VIEWPORT_MARGIN)
+            .withPositions([...EXTENDED_OVERLAY_POSITIONS])
+            .withScrollableContainers(this.scrollDispatcher.getAncestorScrollContainers(this.elementRef));
+        strategy.positionChanges
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(this.onPositionChange);
+        this.overlayRef = this.overlay.create(Object.assign(Object.assign({}, this.overlayConfig), { direction: this.direction, positionStrategy: strategy, scrollStrategy: this.scrollStrategy() }));
+        this.closingActions()
+            .pipe(takeUntil(this.destroyed))
+            .pipe(delay(0))
+            .subscribe(() => this.hide());
+        this.overlayRef.outsidePointerEvents()
+            .subscribe(() => this.instance.handleBodyInteraction());
+        this.overlayRef.detachments()
+            .pipe(takeUntil(this.destroyed))
+            .subscribe(this.detach);
+        return this.overlayRef;
+    }
+    initListeners() {
+        this.clearListeners();
+        if (this.trigger.includes(PopUpTriggers.Click)) {
+            this.listeners
+                .set('click', () => this.show())
+                .forEach(this.addEventListener);
+        }
+        if (this.trigger.includes(PopUpTriggers.Hover)) {
+            this.listeners
+                .set('mouseenter', () => this.show())
+                .set('mouseleave', () => this.hide())
+                .forEach(this.addEventListener);
+        }
+        if (this.trigger.includes(PopUpTriggers.Focus)) {
+            this.listeners
+                .set('focus', () => this.show())
+                .set('blur', () => this.hide())
+                .forEach(this.addEventListener);
+        }
+    }
+    /** Updates the position of the current popover. */
+    updatePosition(reapplyPosition = false) {
+        this.overlayRef = this.createOverlay();
+        const position = this.overlayRef.getConfig().positionStrategy
+            .withPositions(this.getPrioritizedPositions())
+            .withPush(true);
+        if (reapplyPosition) {
+            setTimeout(() => position.reapplyLastPosition());
+        }
+    }
+    getPriorityPlacementStrategy(value) {
+        const result = [];
+        const possiblePositions = Object.keys(this.availablePositions);
+        if (Array.isArray(value)) {
+            value.forEach((position) => {
+                if (possiblePositions.includes(position)) {
+                    result.push(this.availablePositions[position]);
+                }
+            });
+        }
+        else if (possiblePositions.includes(value)) {
+            result.push(this.availablePositions[value]);
+        }
+        return result;
+    }
+    getPrioritizedPositions() {
+        if (this.placementPriority) {
+            return this.getPriorityPlacementStrategy(this.placementPriority);
+        }
+        return POSITION_PRIORITY_STRATEGY[this.placement];
+    }
+    clearListeners() {
+        this.listeners.forEach(this.removeEventListener);
+        this.listeners.clear();
+    }
+}
+/** @nocollapse */ McPopUpTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPopUpTrigger, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McPopUpTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: McPopUpTrigger, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: McPopUpTrigger, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i1$2.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$2.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined }, { type: i2$1.Directionality }]; } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AnimationCurves, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, DEFAULT_4_POSITIONS, DEFAULT_4_POSITIONS_TO_CSS_MAP, DEFAULT_MC_LOCALE_ID, DateFormatter, EXTENDED_OVERLAY_POSITIONS, ErrorStateMatcher, LEFT_BOTTOM_POSITION_PRIORITY, LEFT_POSITION_PRIORITY, LEFT_TOP_POSITION_PRIORITY, MC_LABEL_GLOBAL_OPTIONS, MC_LOCALE_ID, MC_OPTION_PARENT_COMPONENT, MC_SANITY_CHECKS, MC_SELECT_SCROLL_STRATEGY, MC_SELECT_SCROLL_STRATEGY_PROVIDER, MC_VALIDATION, McCommonModule, McDecimalPipe, McForm, McFormElement, McFormattersModule, McFormsModule, McHighlightModule, McHighlightPipe, McLine, McLineModule, McLineSetter, McMeasureScrollbarService, McOptgroup, McOptgroupBase, McOptgroupMixinBase, McOption, McOptionModule, McOptionSelectionChange, McPseudoCheckbox, McPseudoCheckboxModule, MultipleMode, NUMBER_FORMAT_REGEXP, POSITION_MAP, POSITION_PRIORITY_STRATEGY, POSITION_TO_CSS_MAP, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, SELECT_PANEL_INDENT_PADDING_X, SELECT_PANEL_MAX_HEIGHT, SELECT_PANEL_PADDING_X, SELECT_PANEL_VIEWPORT_PADDING, ShowOnDirtyErrorStateMatcher, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, ThemePalette, countGroupLabelsBeforeOption, fadeAnimation, getMcSelectDynamicMultipleError, getMcSelectNonArrayValueError, getMcSelectNonFunctionValueError, getOptionScrollPosition, isBoolean, mcSelectAnimations, mcSelectScrollStrategyProviderFactory, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, selectEvents, setMosaicValidation, setMosaicValidationForFormControl, setMosaicValidationForModelControl, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay, mcSanityChecksFactory as ɵa };
+export { AnimationCurves, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, DEFAULT_MC_LOCALE_ID, DateFormatter, EXTENDED_OVERLAY_POSITIONS, ErrorStateMatcher, LEFT_BOTTOM_POSITION_PRIORITY, LEFT_POSITION_PRIORITY, LEFT_TOP_POSITION_PRIORITY, MC_LABEL_GLOBAL_OPTIONS, MC_LOCALE_ID, MC_OPTION_ACTION_PARENT, MC_OPTION_PARENT_COMPONENT, MC_SANITY_CHECKS, MC_SELECT_SCROLL_STRATEGY, MC_SELECT_SCROLL_STRATEGY_PROVIDER, MC_VALIDATION, McCommonModule, McDecimalPipe, McForm, McFormElement, McFormattersModule, McFormsModule, McHighlightModule, McHighlightPipe, McLine, McLineModule, McLineSetter, McMeasureScrollbarService, McOptgroup, McOptgroupBase, McOptgroupMixinBase, McOption, McOptionActionBase, McOptionActionComponent, McOptionActionMixinBase, McOptionModule, McOptionSelectionChange, McPopUp, McPopUpTrigger, McPseudoCheckbox, McPseudoCheckboxModule, MultipleMode, NUMBER_FORMAT_REGEXP, POSITION_MAP, POSITION_PRIORITY_STRATEGY, POSITION_TO_CSS_MAP, PopUpPlacements, PopUpSizes, PopUpTriggers, PopUpVisibility, RIGHT_BOTTOM_POSITION_PRIORITY, RIGHT_POSITION_PRIORITY, RIGHT_TOP_POSITION_PRIORITY, SELECT_PANEL_INDENT_PADDING_X, SELECT_PANEL_MAX_HEIGHT, SELECT_PANEL_PADDING_X, SELECT_PANEL_VIEWPORT_PADDING, ShowOnDirtyErrorStateMatcher, TOP_LEFT_POSITION_PRIORITY, TOP_POSITION_PRIORITY, TOP_RIGHT_POSITION_PRIORITY, ThemePalette, countGroupLabelsBeforeOption, fadeAnimation, getMcSelectDynamicMultipleError, getMcSelectNonArrayValueError, getMcSelectNonFunctionValueError, getOptionScrollPosition, isBoolean, mcSelectAnimations, mcSelectScrollStrategyProviderFactory, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, selectEvents, setMosaicValidation, setMosaicValidationForFormControl, setMosaicValidationForModelControl, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay };
 //# sourceMappingURL=ptsecurity-mosaic-core.js.map