@ptsecurity/mosaic 12.3.0 → 13.1.1

package/fesm2015/ptsecurity-mosaic-core.mjs

@@ -0,0 +1,2704 @@
+import * as i0 from '@angular/core';
+import { Version, InjectionToken, isDevMode, NgModule, Optional, Inject, Directive, Injectable, Pipe, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, Output, ContentChild, ContentChildren, TemplateRef } from '@angular/core';
+import * as i2$1 from '@angular/cdk/bidi';
+import { BidiModule } from '@angular/cdk/bidi';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { Subject } from 'rxjs';
+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 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, TAB, ESCAPE } from '@ptsecurity/cdk/keycodes';
+import { takeUntil, distinctUntilChanged, delay } from 'rxjs/operators';
+import * as i1$1 from '@angular/cdk/a11y';
+import { ComponentPortal } from '@angular/cdk/portal';
+
+const VERSION = new Version('{{VERSION}}');
+
+function isBoolean(val) { return typeof val === 'boolean'; }
+function toBoolean(value) {
+    return value != null && `${value}` !== 'false';
+}
+
+// Injection token that configures whether the Mosaic sanity checks are enabled.
+const MC_SANITY_CHECKS = new InjectionToken('mc-sanity-checks', {
+    providedIn: 'root',
+    factory: mcSanityChecksFactory
+});
+function mcSanityChecksFactory() {
+    return true;
+}
+/**
+ * Module that captures anything that should be loaded and/or run for *all* Mosaic
+ * components. This includes Bidi, etc.
+ *
+ * This module should be imported to each top-level component module (e.g., McTabsModule).
+ */
+class McCommonModule {
+    constructor(_sanityChecksEnabled) {
+        this._sanityChecksEnabled = _sanityChecksEnabled;
+        // Whether we've done the global sanity checks (e.g. a theme is loaded, there is a doctype).
+        this.hasDoneGlobalChecks = false;
+        // Reference to the global `document` object.
+        // tslint:disable-next-line: orthodox-getter-and-setter
+        this._document = typeof document === 'object' && document ? document : null;
+        // Reference to the global 'window' object.
+        // tslint:disable-next-line: orthodox-getter-and-setter
+        this._window = typeof window === 'object' && window ? window : null;
+        if (this.areChecksEnabled() && !this.hasDoneGlobalChecks) {
+            this.checkDoctypeIsDefined();
+            this.checkThemeIsPresent();
+            this.hasDoneGlobalChecks = true;
+        }
+    }
+    // Whether any sanity checks are enabled
+    areChecksEnabled() {
+        return this._sanityChecksEnabled && isDevMode() && !this.isTestEnv();
+    }
+    // Whether the code is running in tests.
+    isTestEnv() {
+        // tslint:disable-next-line
+        return this._window && (this._window['__karma__'] || this._window['jasmine']);
+    }
+    checkDoctypeIsDefined() {
+        if (this._document && !this._document.doctype) {
+            console.warn('Current document does not have a doctype. This may cause ' +
+                'some Mosaic components not to behave as expected.');
+        }
+    }
+    checkThemeIsPresent() {
+        if (this._document && typeof getComputedStyle === 'function') {
+            const testElement = this._document.createElement('div');
+            testElement.classList.add('mc-theme-loaded-marker');
+            this._document.body.appendChild(testElement);
+            const computedStyle = getComputedStyle(testElement);
+            // In some situations, the computed style of the test element can be null. For example in
+            // Firefox, the computed style is null if an application is running inside of a hidden iframe.
+            // See: https://bugzilla.mozilla.org/show_bug.cgi?id=548397
+            if (computedStyle && computedStyle.display !== 'none') {
+                console.warn('Could not find Mosaic core theme. Most Mosaic ' +
+                    'components may not work as expected. For more info refer ' +
+                    'to the theming guide: link there');
+            }
+            this._document.body.removeChild(testElement);
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McCommonModule, deps: [{ token: MC_SANITY_CHECKS, optional: true }], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McCommonModule, imports: [BidiModule], exports: [BidiModule] });
+/** @nocollapse */ /** @nocollapse */ McCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McCommonModule, imports: [[BidiModule], BidiModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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 {
+        constructor(...args) {
+            // tslint:disable-next-line
+            super(...args);
+            this._disabled = false;
+        }
+        get disabled() {
+            return this._disabled;
+        }
+        set disabled(value) {
+            this._disabled = coerceBooleanProperty(value);
+        }
+    };
+}
+
+var ThemePalette;
+(function (ThemePalette) {
+    ThemePalette["Primary"] = "primary";
+    ThemePalette["Second"] = "second";
+    ThemePalette["Error"] = "error";
+    ThemePalette["Default"] = "second";
+    ThemePalette["Empty"] = "";
+})(ThemePalette || (ThemePalette = {}));
+function mixinColor(base, defaultColor = ThemePalette.Default) {
+    return class extends base {
+        constructor(...args) {
+            super(...args);
+            this.color = defaultColor;
+        }
+        get color() { return this._color; }
+        set color(value) {
+            const colorPalette = value || defaultColor;
+            if (colorPalette !== this._color) {
+                if (this._color) {
+                    this._elementRef.nativeElement.classList.remove(`mc-${this._color}`);
+                }
+                if (colorPalette) {
+                    this._elementRef.nativeElement.classList.add(`mc-${colorPalette}`);
+                }
+                this._color = colorPalette;
+            }
+        }
+    };
+}
+
+function mixinTabIndex(base, defaultTabIndex = 0) {
+    return class extends base {
+        constructor(...args) {
+            super(...args);
+            this.defaultTabIndex = defaultTabIndex;
+            this._tabIndex = defaultTabIndex;
+        }
+        get tabIndex() {
+            return this.disabled ? -1 : this._tabIndex;
+        }
+        set tabIndex(value) {
+            // If the specified tabIndex value is null or undefined, fall back to the default value.
+            this._tabIndex = value != null ? coerceNumberProperty(value) : this.defaultTabIndex;
+        }
+    };
+}
+
+/**
+ * Mixin to augment a directive with updateErrorState method.
+ * For component with `errorState` and need to update `errorState`.
+ */
+function mixinErrorState(base) {
+    return class extends base {
+        constructor(...args) {
+            super(...args);
+            /** Whether the component is in an error state. */
+            this.errorState = false;
+            /**
+             * Stream that emits whenever the state of the input changes such that the wrapping
+             * `MatFormField` needs to run change detection.
+             */
+            this.stateChanges = new Subject();
+        }
+        updateErrorState() {
+            const oldState = this.errorState;
+            const parent = this.parentFormGroup || this.parentForm;
+            const matcher = this.errorStateMatcher || this.defaultErrorStateMatcher;
+            const control = this.ngControl ? this.ngControl.control : null;
+            const newState = matcher.isErrorState(control, parent);
+            if (newState !== oldState) {
+                this.errorState = newState;
+                this.stateChanges.next();
+            }
+        }
+    };
+}
+
+/**
+ * Shared directive to count lines inside a text area, such as a list item.
+ * Line elements can be extracted with a @ContentChildren(McLine) query, then
+ * counted by checking the query list's length.
+ */
+class McLine {
+}
+/** @nocollapse */ /** @nocollapse */ McLine.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McLine, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McLine.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: McLine, selector: "[mc-line], [mcLine]", host: { classAttribute: "mc-line" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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
+ */
+class McLineSetter {
+    constructor(_lines, _element) {
+        this._lines = _lines;
+        this._element = _element;
+        this.setLineClass(this._lines.length);
+        this._lines.changes.subscribe(() => {
+            this.setLineClass(this._lines.length);
+        });
+    }
+    setLineClass(count) {
+        const minLineClassNumber = 2;
+        const maxLineClassNumber = 3;
+        this.resetClasses();
+        if (count === minLineClassNumber || count === maxLineClassNumber) {
+            this.setClass(`mc-${count}-line`, true);
+        }
+        else if (count > maxLineClassNumber) {
+            this.setClass(`mc-multi-line`, true);
+        }
+    }
+    resetClasses() {
+        this.setClass('mc-2-line', false);
+        this.setClass('mc-3-line', false);
+        this.setClass('mc-multi-line', false);
+    }
+    setClass(className, isAdd) {
+        if (isAdd) {
+            this._element.nativeElement.classList.add(className);
+        }
+        else {
+            this._element.nativeElement.classList.remove(className);
+        }
+    }
+}
+class McLineModule {
+}
+/** @nocollapse */ /** @nocollapse */ McLineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McLineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McLineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McLineModule, declarations: [McLine], exports: [McLine] });
+/** @nocollapse */ /** @nocollapse */ McLineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McLineModule, imports: [[]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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 {
+    isErrorState(control, form) {
+        return !!(control && control.invalid && (control.dirty || (form && form.submitted)));
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ShowOnDirtyErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ ShowOnDirtyErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ShowOnDirtyErrorStateMatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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 */ /** @nocollapse */ ErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ ErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: ErrorStateMatcher, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const SECONDS_TEMPLATE$1 = `{
+    SHOW_MILLISECONDS,
+    select,
+        yes{:{SECONDS}{MILLISECONDS}}
+        other{{
+            SHOW_SECONDS,
+            select,
+                yes{:{SECONDS}}
+                other{}
+        }}
+}`;
+const enUS = {
+    relativeTemplates: {
+        short: {
+            BEFORE_YESTERDAY: `{CURRENT_YEAR, select, yes{{SHORT_DATE}, {TIME}} other{{SHORT_DATE}, {YEAR}}}${SECONDS_TEMPLATE$1}`,
+            YESTERDAY: `Yesterday, {TIME}${SECONDS_TEMPLATE$1}`,
+            TODAY: `Today, {TIME}${SECONDS_TEMPLATE$1}`,
+            TOMORROW: `Tomorrow, {TIME}${SECONDS_TEMPLATE$1}`,
+            AFTER_TOMORROW: `{CURRENT_YEAR, select, yes{{SHORT_DATE}, {TIME}} other{{SHORT_DATE}, {YEAR}}}${SECONDS_TEMPLATE$1}`
+        },
+        long: {
+            BEFORE_YESTERDAY: `{CURRENT_YEAR, select, yes{{DATE}, {TIME}} other{{DATE}, {YEAR}}}${SECONDS_TEMPLATE$1}`,
+            YESTERDAY: `Yesterday, {TIME}${SECONDS_TEMPLATE$1}`,
+            TODAY: `Today, {TIME}${SECONDS_TEMPLATE$1}`,
+            TOMORROW: `Tomorrow, {TIME}${SECONDS_TEMPLATE$1}`,
+            AFTER_TOMORROW: `{CURRENT_YEAR, select, yes{{DATE}, {TIME}} other{{DATE}, {YEAR}}}${SECONDS_TEMPLATE$1}`
+        }
+    },
+    absoluteTemplates: {
+        short: {
+            DATE: '{CURRENT_YEAR, select, yes{{SHORT_DATE}} other{{SHORT_DATE}, {YEAR}}}',
+            DATETIME: `{
+                CURRENT_YEAR,
+                select,
+                    yes{{SHORT_DATE}, {TIME}}
+                    other{{SHORT_DATE}, {YEAR}, {TIME}}
+            }${SECONDS_TEMPLATE$1}`
+        },
+        long: {
+            DATE: '{CURRENT_YEAR, select, yes{{DATE}} other{{DATE}, {YEAR}}}',
+            DATETIME: `{
+                CURRENT_YEAR,
+                select,
+                    yes{{DATE}, {TIME}}
+                    other{{DATE}, {YEAR}, {TIME}}
+            }${SECONDS_TEMPLATE$1}`
+        }
+    },
+    rangeTemplates: {
+        closedRange: {
+            short: {
+                START_DATE: '{CURRENT_YEAR, select, yes{{SHORT_DATE}} other{{SHORT_DATE}, {YEAR}}}',
+                END_DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{DAY}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{SHORT_DATE}}
+                                other{{SHORT_DATE}, {YEAR}}
+                        }}
+                }`,
+                DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{START_DATE}{DASH}{END_DATE}}
+                        other{{START_DATE}{LONG_DASH}{END_DATE}}
+                }`,
+                START_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{TIME}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{SHORT_DATE}, {TIME}}
+                                other{{SHORT_DATE}, {YEAR}, {TIME}}
+                        }}
+                }${SECONDS_TEMPLATE$1}`,
+                END_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{TIME}${SECONDS_TEMPLATE$1}, {SHORT_DATE}}
+                                other{{TIME}${SECONDS_TEMPLATE$1}, {SHORT_DATE}, {YEAR}}
+                        }}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{SHORT_DATE}, {TIME}}
+                                other{{SHORT_DATE}, {YEAR}, {TIME}}
+                        }${SECONDS_TEMPLATE$1}}
+                }`,
+                DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{START_DATETIME}{DASH}{END_DATETIME}}
+                        other{{START_DATETIME}{LONG_DASH}{END_DATETIME}}
+                }`
+            },
+            middle: {
+                START_DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{DAY}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}}
+                                other{{DATE}, {YEAR}}
+                        }}
+                }`,
+                END_DATE: '{CURRENT_YEAR, select, yes{{DATE}} other{{DATE}, {YEAR}}}',
+                DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{START_DATE}{DASH}{END_DATE}}
+                        other{{START_DATE}{LONG_DASH}{END_DATE}}
+                }`,
+                START_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{TIME}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}, {TIME}}
+                                other{{DATE}, {YEAR}, {TIME}}
+                        }}
+                }${SECONDS_TEMPLATE$1}`,
+                END_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{TIME}${SECONDS_TEMPLATE$1}, {DATE}}
+                                other{{TIME}${SECONDS_TEMPLATE$1}, {DATE}, {YEAR}}
+                        }}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}, {TIME}}
+                                other{{DATE}, {YEAR}, {TIME}}
+                        }${SECONDS_TEMPLATE$1}}
+                }`,
+                DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{START_DATETIME}{DASH}{END_DATETIME}}
+                        other{{START_DATETIME}{LONG_DASH}{END_DATETIME}}
+                }`
+            },
+            long: {
+                START_DATE: '{CURRENT_YEAR, select, yes{{DATE}} other{{DATE}, {YEAR}}}',
+                END_DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{DAY}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}}
+                                other{{DATE}, {YEAR}}
+                        }}
+                }`,
+                DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{START_DATE}{DASH}{END_DATE}}
+                        other{{START_DATE}{LONG_DASH}{END_DATE}}
+                }`,
+                START_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}, from{NBSP}{TIME}}
+                                other{{DATE}, {YEAR}, from{NBSP}{TIME}}
+                        }}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}, {TIME}}
+                                other{{DATE}, {YEAR}, {TIME}}
+                        }}
+                }${SECONDS_TEMPLATE$1}`,
+                END_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{to{NBSP}{TIME}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}, {TIME}}
+                                other{{DATE}, {YEAR}, {TIME}}
+                        }}
+                }${SECONDS_TEMPLATE$1}`,
+                DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{START_DATETIME} {END_DATETIME}}
+                        other{From {START_DATETIME} to{NBSP}{END_DATETIME}}
+                }`
+            }
+        },
+        openedRange: {
+            short: {
+                START_DATE: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{SHORT_DATE}}
+                        other{{SHORT_DATE} {YEAR}}
+                }`,
+                END_DATE: '{CURRENT_YEAR, select, yes{{SHORT_DATE}} other{{SHORT_DATE} {YEAR}}}',
+                DATE: `{
+                    RANGE_TYPE,
+                    select,
+                        onlyStart{From{NBSP}{START_DATE}}
+                        other{Until{NBSP}{END_DATE}}
+                }`,
+                START_DATETIME: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{SHORT_DATE}, {TIME}}
+                        other{{SHORT_DATE} {YEAR}, {TIME}}
+                }${SECONDS_TEMPLATE$1}`,
+                END_DATETIME: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{SHORT_DATE}, {TIME}}
+                        other{{SHORT_DATE} {YEAR}, {TIME}}
+                }${SECONDS_TEMPLATE$1}`,
+                DATETIME: `{
+                    RANGE_TYPE,
+                    select,
+                        onlyStart{From{NBSP}{START_DATETIME}}
+                        other{Until{NBSP}{END_DATETIME}}
+                }`
+            },
+            long: {
+                START_DATE: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{DATE}}
+                        other{{DATE} {YEAR}}
+                }`,
+                END_DATE: '{CURRENT_YEAR, select, yes{{DATE}} other{{DATE} {YEAR}}}',
+                DATE: `{
+                    RANGE_TYPE,
+                    select,
+                        onlyStart{From{NBSP}{START_DATE}}
+                        other{Until{NBSP}{END_DATE}}
+                }`,
+                START_DATETIME: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{DATE}, {TIME}}
+                        other{{DATE} {YEAR}, {TIME}}
+                }${SECONDS_TEMPLATE$1}`,
+                END_DATETIME: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{DATE}, {TIME}}
+                        other{{DATE} {YEAR}, {TIME}}
+                }${SECONDS_TEMPLATE$1}`,
+                DATETIME: `{
+                    RANGE_TYPE,
+                    select,
+                        onlyStart{From{NBSP}{START_DATETIME}}
+                        other{Until{NBSP}{END_DATETIME}}
+                }`
+            }
+        }
+    }
+};
+
+const SECONDS_TEMPLATE = `{
+    SHOW_MILLISECONDS,
+    select,
+        yes{:{SECONDS}{MILLISECONDS}}
+        other{{
+            SHOW_SECONDS,
+            select,
+                yes{:{SECONDS}}
+                other{}
+        }}
+}`;
+const ruRU = {
+    relativeTemplates: {
+        short: {
+            BEFORE_YESTERDAY: `{CURRENT_YEAR, select, yes{{SHORT_DATE}, {TIME}} other{{SHORT_DATE} {YEAR}}}${SECONDS_TEMPLATE}`,
+            YESTERDAY: `Вчера, {TIME}${SECONDS_TEMPLATE}`,
+            TODAY: `Сегодня, {TIME}${SECONDS_TEMPLATE}`,
+            TOMORROW: `Завтра, {TIME}${SECONDS_TEMPLATE}`,
+            AFTER_TOMORROW: `{CURRENT_YEAR, select, yes{{SHORT_DATE}, {TIME}} other{{SHORT_DATE} {YEAR}}}${SECONDS_TEMPLATE}`
+        },
+        long: {
+            BEFORE_YESTERDAY: `{CURRENT_YEAR, select, yes{{DATE}, {TIME}} other{{DATE} {YEAR}}}${SECONDS_TEMPLATE}`,
+            YESTERDAY: `Вчера, {TIME}${SECONDS_TEMPLATE}`,
+            TODAY: `Сегодня, {TIME}${SECONDS_TEMPLATE}`,
+            TOMORROW: `Завтра, {TIME}${SECONDS_TEMPLATE}`,
+            AFTER_TOMORROW: `{CURRENT_YEAR, select, yes{{DATE}, {TIME}} other{{DATE} {YEAR}}}${SECONDS_TEMPLATE}`
+        }
+    },
+    absoluteTemplates: {
+        short: {
+            DATE: '{CURRENT_YEAR, select, yes{{SHORT_DATE}} other{{SHORT_DATE} {YEAR}}}',
+            DATETIME: `{
+                CURRENT_YEAR,
+                select,
+                    yes{{SHORT_DATE}, {TIME}}
+                    other{{SHORT_DATE} {YEAR}, {TIME}}
+            }${SECONDS_TEMPLATE}`
+        },
+        long: {
+            DATE: '{CURRENT_YEAR, select, yes{{DATE}} other{{DATE} {YEAR}}}',
+            DATETIME: `{
+                CURRENT_YEAR,
+                select,
+                    yes{{DATE}, {TIME}}
+                    other{{DATE} {YEAR}, {TIME}}
+            }${SECONDS_TEMPLATE}`
+        }
+    },
+    rangeTemplates: {
+        closedRange: {
+            short: {
+                START_DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{DAY}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{SHORT_DATE}}
+                                other{{SHORT_DATE} {YEAR}}
+                        }}
+                }`,
+                END_DATE: '{CURRENT_YEAR, select, yes{{SHORT_DATE}} other{{SHORT_DATE} {YEAR}}}',
+                DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{START_DATE}{DASH}{END_DATE}}
+                        other{{START_DATE}{LONG_DASH}{END_DATE}}
+                }`,
+                START_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{TIME}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{SHORT_DATE}, {TIME}}
+                                other{{SHORT_DATE} {YEAR}, {TIME}}
+                        }}
+                }${SECONDS_TEMPLATE}`,
+                END_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{TIME}${SECONDS_TEMPLATE}, {SHORT_DATE}}
+                                other{{TIME}${SECONDS_TEMPLATE}, {SHORT_DATE} {YEAR}}
+                        }}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{SHORT_DATE}, {TIME}}
+                                other{{SHORT_DATE} {YEAR}, {TIME}}
+                        }${SECONDS_TEMPLATE}}
+                }`,
+                DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{START_DATETIME}{DASH}{END_DATETIME}}
+                        other{{START_DATETIME}{LONG_DASH}{END_DATETIME}}
+                }`
+            },
+            middle: {
+                START_DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{DAY}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}}
+                                other{{DATE} {YEAR}}
+                        }}
+                }`,
+                END_DATE: '{CURRENT_YEAR, select, yes{{DATE}} other{{DATE} {YEAR}}}',
+                DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{START_DATE}{DASH}{END_DATE}}
+                        other{{START_DATE}{LONG_DASH}{END_DATE}}
+                }`,
+                START_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{TIME}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}, {TIME}}
+                                other{{DATE} {YEAR}, {TIME}}
+                        }}
+                }${SECONDS_TEMPLATE}`,
+                END_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{TIME}${SECONDS_TEMPLATE}, {DATE}}
+                                other{{TIME}${SECONDS_TEMPLATE}, {DATE} {YEAR}}
+                        }}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}, {TIME}}
+                                other{{DATE} {YEAR}, {TIME}}
+                        }${SECONDS_TEMPLATE}}
+                }`,
+                DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{START_DATETIME}{DASH}{END_DATETIME}}
+                        other{{START_DATETIME}{LONG_DASH}{END_DATETIME}}
+                }`
+            },
+            long: {
+                START_DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{DAY}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}}
+                                other{{DATE} {YEAR}}
+                        }}
+                }`,
+                END_DATE: '{CURRENT_YEAR, select, yes{{DATE}} other{{DATE} {YEAR}}}',
+                DATE: `{
+                    SAME_MONTH,
+                    select,
+                        yes{{START_DATE}{DASH}{END_DATE}}
+                        other{{START_DATE}{LONG_DASH}{END_DATE}}
+                }`,
+                START_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}, с{NBSP}{TIME}}
+                                other{{DATE} {YEAR}, с{NBSP}{TIME}}
+                        }}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}, {TIME}}
+                                other{{DATE} {YEAR}, {TIME}}
+                        }}
+                }${SECONDS_TEMPLATE}`,
+                END_DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{по{NBSP}{TIME}}
+                        other{{
+                            CURRENT_YEAR,
+                            select,
+                                yes{{DATE}, {TIME}}
+                                other{{DATE} {YEAR}, {TIME}}
+                        }}
+                }${SECONDS_TEMPLATE}`,
+                DATETIME: `{
+                    SAME_DAY,
+                    select,
+                        yes{{START_DATETIME} {END_DATETIME}}
+                        other{С{NBSP}{START_DATETIME} по{NBSP}{END_DATETIME}}
+                }`
+            }
+        },
+        openedRange: {
+            short: {
+                START_DATE: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{SHORT_DATE}}
+                        other{{SHORT_DATE} {YEAR}}
+                }`,
+                END_DATE: '{CURRENT_YEAR, select, yes{{SHORT_DATE}} other{{SHORT_DATE} {YEAR}}}',
+                DATE: `{
+                    RANGE_TYPE,
+                    select,
+                        onlyStart{С{NBSP}{START_DATE}}
+                        other{По{NBSP}{END_DATE}}
+                }`,
+                START_DATETIME: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{SHORT_DATE}, {TIME}}
+                        other{{SHORT_DATE} {YEAR}, {TIME}}
+                }${SECONDS_TEMPLATE}`,
+                END_DATETIME: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{SHORT_DATE}, {TIME}}
+                        other{{SHORT_DATE} {YEAR}, {TIME}}
+                }${SECONDS_TEMPLATE}`,
+                DATETIME: `{
+                    RANGE_TYPE,
+                    select,
+                        onlyStart{С{NBSP}{START_DATETIME}}
+                        other{По{NBSP}{END_DATETIME}}
+                }`
+            },
+            long: {
+                START_DATE: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{DATE}}
+                        other{{DATE} {YEAR}}
+                }`,
+                END_DATE: '{CURRENT_YEAR, select, yes{{DATE}} other{{DATE} {YEAR}}}',
+                DATE: `{
+                    RANGE_TYPE,
+                    select,
+                        onlyStart{С{NBSP}{START_DATE}}
+                        other{По{NBSP}{END_DATE}}
+                }`,
+                START_DATETIME: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{DATE}, {TIME}}
+                        other{{DATE} {YEAR}, {TIME}}
+                }${SECONDS_TEMPLATE}`,
+                END_DATETIME: `{
+                    CURRENT_YEAR,
+                    select,
+                        yes{{DATE}, {TIME}}
+                        other{{DATE} {YEAR}, {TIME}}
+                }${SECONDS_TEMPLATE}`,
+                DATETIME: `{
+                    RANGE_TYPE,
+                    select,
+                        onlyStart{С{NBSP}{START_DATETIME}}
+                        other{По{NBSP}{END_DATETIME}}
+                }`
+            }
+        }
+    }
+};
+
+// tslint:disable:no-magic-numbers
+class DateFormatter {
+    constructor(adapter, locale) {
+        this.adapter = adapter;
+        this.invalidDateErrorText = 'Invalid date';
+        this.config = locale === 'en' ? enUS : ruRU;
+        this.messageFormat = new MessageFormat(locale);
+    }
+    setLocale(locale) {
+        this.config = locale === 'en' ? enUS : ruRU;
+        this.adapter.setLocale(locale);
+    }
+    /**
+     * @param date - date
+     * @param template - template
+     * @returns relative date by template
+     */
+    relativeDate(date, template, seconds = false, milliseconds = false) {
+        if (!this.adapter.isDateInstance(date)) {
+            throw new Error(this.invalidDateErrorText);
+        }
+        let newTemplate;
+        const templateVariables = Object.assign(Object.assign({}, this.adapter.config.variables), template.variables);
+        if (this.isBeforeYesterday(date)) {
+            newTemplate = template.BEFORE_YESTERDAY;
+        }
+        else if (this.isYesterday(date)) {
+            newTemplate = template.YESTERDAY;
+        }
+        else if (this.isToday(date)) {
+            newTemplate = template.TODAY;
+        }
+        else if (this.isTomorrow(date)) {
+            newTemplate = template.TOMORROW;
+        }
+        else if (this.isAfterTomorrow(date)) {
+            newTemplate = template.AFTER_TOMORROW;
+        }
+        const variables = this.compileVariables(date, templateVariables);
+        variables.SHOW_SECONDS = seconds ? 'yes' : 'no';
+        variables.SHOW_MILLISECONDS = milliseconds ? 'yes' : 'no';
+        return this.messageFormat.compile(newTemplate)(variables);
+    }
+    /**
+     * @param date - date
+     * @returns relative date in short format
+     */
+    relativeShortDate(date) {
+        return this.relativeDate(date, this.config.relativeTemplates.short);
+    }
+    /**
+     * @param date - date
+     * @returns relative date in long format
+     */
+    relativeLongDate(date) {
+        return this.relativeDate(date, this.config.relativeTemplates.long);
+    }
+    /**
+     * @param date - date
+     * @param options - DateTimeOptions
+     * @returns relative date in short format with time
+     */
+    relativeShortDateTime(date, options) {
+        return this.relativeDate(date, this.config.relativeTemplates.short, options === null || options === void 0 ? void 0 : options.seconds, options === null || options === void 0 ? void 0 : options.milliseconds);
+    }
+    /**
+     * @param date - date
+     * @param options - DateTimeOptions
+     * @returns relative date in long format with time
+     */
+    relativeLongDateTime(date, options) {
+        return this.relativeDate(date, this.config.relativeTemplates.long, options === null || options === void 0 ? void 0 : options.seconds, options === null || options === void 0 ? void 0 : options.milliseconds);
+    }
+    /**
+     * @param date - date
+     * @param params - parameters
+     * @param datetime - should time be shown as well
+     * @param seconds - should time with seconds be shown as well
+     * @param milliseconds - should time with milliseconds be shown as well
+     * @returns absolute date in common format
+     */
+    absoluteDate(date, params, datetime = false, seconds = false, milliseconds = false) {
+        if (!this.adapter.isDateInstance(date)) {
+            throw new Error(this.invalidDateErrorText);
+        }
+        const variables = this.compileVariables(date, Object.assign(Object.assign({}, this.adapter.config.variables), params.variables));
+        variables.SHOW_SECONDS = seconds ? 'yes' : 'no';
+        variables.SHOW_MILLISECONDS = milliseconds ? 'yes' : 'no';
+        const template = datetime ? params.DATETIME : params.DATE;
+        return this.messageFormat.compile(template)(variables);
+    }
+    /**
+     * @param date - date
+     * @returns absolute date in short format
+     */
+    absoluteShortDate(date) {
+        return this.absoluteDate(date, this.config.absoluteTemplates.short);
+    }
+    /**
+     * @param date - date
+     * @param options - DateTimeOptions
+     * @returns absolute date in short format with time
+     */
+    absoluteShortDateTime(date, options) {
+        return this.absoluteDate(date, this.config.absoluteTemplates.short, true, options === null || options === void 0 ? void 0 : options.seconds, options === null || options === void 0 ? void 0 : options.milliseconds);
+    }
+    /**
+     * @param date - date
+     * @returns absolute date in long format
+     */
+    absoluteLongDate(date) {
+        return this.absoluteDate(date, this.config.absoluteTemplates.long);
+    }
+    /**
+     * @param date - date
+     * @param options - DateTimeOptions
+     * @returns absolute date in long format with time
+     */
+    absoluteLongDateTime(date, options) {
+        return this.absoluteDate(date, this.config.absoluteTemplates.long, true, options === null || options === void 0 ? void 0 : options.seconds, options === null || options === void 0 ? void 0 : options.milliseconds);
+    }
+    /**
+     * @param startDate - start date
+     * @param endDate - end date
+     * @param template - template
+     * @returns opened date
+     */
+    openedRangeDate(startDate, endDate, template) {
+        if (!this.adapter.isDateInstance(startDate) && !this.adapter.isDateInstance(endDate)) {
+            throw new Error(this.invalidDateErrorText);
+        }
+        const variables = Object.assign(Object.assign({}, this.adapter.config.variables), template.variables);
+        let params = {};
+        if (startDate) {
+            const startDateVariables = this.compileVariables(startDate, variables);
+            params = Object.assign(Object.assign({}, variables), { START_DATE: this.messageFormat.compile(template.START_DATE)(startDateVariables), RANGE_TYPE: 'onlyStart' });
+        }
+        else if (endDate) {
+            const endDateVariables = this.compileVariables(endDate, variables);
+            params = Object.assign(Object.assign({}, variables), { END_DATE: this.messageFormat.compile(template.END_DATE)(endDateVariables), RANGE_TYPE: 'onlyEnd' });
+        }
+        return this.messageFormat.compile(template.DATE)(params);
+    }
+    /**
+     * @param startDate - start date
+     * @param endDate - end date
+     * @param template - template
+     * @param seconds - should time with seconds be shown as well
+     * @param milliseconds - should time with milliseconds be shown as well
+     * @returns opened date
+     */
+    openedRangeDateTime(startDate, endDate, template, seconds = false, milliseconds = false) {
+        if (!this.adapter.isDateInstance(startDate) && !this.adapter.isDateInstance(endDate)) {
+            throw new Error(this.invalidDateErrorText);
+        }
+        const variables = Object.assign(Object.assign({}, this.adapter.config.variables), template.variables);
+        let params = {};
+        if (startDate) {
+            const startDateVariables = this.compileVariables(startDate, variables);
+            startDateVariables.SHOW_SECONDS = seconds ? 'yes' : 'no';
+            startDateVariables.SHOW_MILLISECONDS = milliseconds ? 'yes' : 'no';
+            params = Object.assign(Object.assign({}, variables), { START_DATETIME: this.messageFormat.compile(template.START_DATETIME)(startDateVariables), RANGE_TYPE: 'onlyStart' });
+        }
+        else if (endDate) {
+            const endDateVariables = this.compileVariables(endDate, variables);
+            endDateVariables.SHOW_SECONDS = seconds ? 'yes' : 'no';
+            endDateVariables.SHOW_MILLISECONDS = milliseconds ? 'yes' : 'no';
+            params = Object.assign(Object.assign({}, variables), { END_DATETIME: this.messageFormat.compile(template.END_DATETIME)(endDateVariables), RANGE_TYPE: 'onlyEnd' });
+        }
+        return this.messageFormat.compile(template.DATETIME)(params);
+    }
+    /**
+     * @param startDate - start date
+     * @param endDate - end date
+     * @param template - template
+     * @returns range date in template format
+     */
+    rangeDate(startDate, endDate, template) {
+        if (!this.adapter.isDateInstance(startDate) || !this.adapter.isDateInstance(endDate)) {
+            throw new Error(this.invalidDateErrorText);
+        }
+        const variables = Object.assign(Object.assign({}, this.adapter.config.variables), template.variables);
+        const sameMonth = this.hasSame(startDate, endDate, 'month');
+        const startDateVariables = this.compileVariables(startDate, variables);
+        startDateVariables.SAME_MONTH = sameMonth;
+        const endDateVariables = this.compileVariables(endDate, variables);
+        endDateVariables.SAME_MONTH = sameMonth;
+        const bothCurrentYear = startDateVariables.CURRENT_YEAR === 'yes' && endDateVariables.CURRENT_YEAR === 'yes';
+        startDateVariables.CURRENT_YEAR = bothCurrentYear ? 'yes' : 'no';
+        endDateVariables.CURRENT_YEAR = bothCurrentYear ? 'yes' : 'no';
+        const params = Object.assign(Object.assign({}, variables), { START_DATE: this.messageFormat.compile(template.START_DATE)(startDateVariables), END_DATE: this.messageFormat.compile(template.END_DATE)(endDateVariables), SAME_MONTH: sameMonth });
+        return this.messageFormat.compile(template.DATE)(params);
+    }
+    /**
+     * @param startDate - start date
+     * @param endDate - end date
+     * @param template - template
+     * @returns range date in template format with time
+     */
+    rangeDateTime(startDate, endDate, template, seconds = false, milliseconds = false) {
+        if (!this.adapter.isDateInstance(startDate) || !this.adapter.isDateInstance(endDate)) {
+            throw new Error(this.invalidDateErrorText);
+        }
+        const variables = Object.assign(Object.assign({}, this.adapter.config.variables), template.variables);
+        const sameMonth = this.hasSame(startDate, endDate, 'month');
+        const sameDay = this.hasSame(startDate, endDate, 'day');
+        const startDateVariables = this.compileVariables(startDate, variables);
+        startDateVariables.SAME_MONTH = sameMonth;
+        startDateVariables.SAME_DAY = sameDay;
+        startDateVariables.SHOW_SECONDS = seconds ? 'yes' : 'no';
+        startDateVariables.SHOW_MILLISECONDS = milliseconds ? 'yes' : 'no';
+        const endDateVariables = this.compileVariables(endDate, variables);
+        endDateVariables.SAME_MONTH = sameMonth;
+        endDateVariables.SAME_DAY = sameDay;
+        endDateVariables.SHOW_SECONDS = seconds ? 'yes' : 'no';
+        endDateVariables.SHOW_MILLISECONDS = milliseconds ? 'yes' : 'no';
+        const bothCurrentYear = startDateVariables.CURRENT_YEAR === 'yes' && endDateVariables.CURRENT_YEAR === 'yes';
+        startDateVariables.CURRENT_YEAR = bothCurrentYear ? 'yes' : 'no';
+        endDateVariables.CURRENT_YEAR = bothCurrentYear ? 'yes' : 'no';
+        const params = Object.assign(Object.assign({}, variables), { START_DATETIME: this.messageFormat.compile(template.START_DATETIME)(startDateVariables), END_DATETIME: this.messageFormat.compile(template.END_DATETIME)(endDateVariables), SAME_MONTH: sameMonth, SAME_DAY: sameDay });
+        return this.messageFormat.compile(template.DATETIME)(params);
+    }
+    /**
+     * @param startDate - start date
+     * @param endDate - end date
+     * @returns range date in short format
+     */
+    rangeShortDate(startDate, endDate) {
+        const rangeTemplates = this.config.rangeTemplates;
+        if (startDate && endDate) {
+            return this.rangeDate(startDate, endDate, rangeTemplates.closedRange.short);
+        }
+        return this.openedRangeDate(startDate, endDate || null, rangeTemplates.openedRange.short);
+    }
+    /**
+     * @param startDate - start date
+     * @param endDate - end date
+     * @param options - DateTimeOptions
+     * @returns range date in short format with time
+     */
+    rangeShortDateTime(startDate, endDate, options) {
+        const rangeTemplates = this.config.rangeTemplates;
+        if (startDate && endDate) {
+            return this.rangeDateTime(startDate, endDate, rangeTemplates.closedRange.short, options === null || options === void 0 ? void 0 : options.seconds, options === null || options === void 0 ? void 0 : options.milliseconds);
+        }
+        return this.openedRangeDateTime(startDate, endDate || null, rangeTemplates.openedRange.short, options === null || options === void 0 ? void 0 : options.seconds, options === null || options === void 0 ? void 0 : options.milliseconds);
+    }
+    /**
+     * @param startDate - start date
+     * @param endDate - end date
+     * @returns range date in long format
+     */
+    rangeLongDate(startDate, endDate) {
+        const rangeTemplates = this.config.rangeTemplates;
+        if (startDate && endDate) {
+            return this.rangeDate(startDate, endDate, rangeTemplates.closedRange.long);
+        }
+        return this.openedRangeDate(startDate, endDate || null, rangeTemplates.openedRange.long);
+    }
+    /**
+     * @param startDate - start date
+     * @param endDate - end date
+     * @param options - DateTimeOptions
+     * @returns range date in long format with time
+     */
+    rangeLongDateTime(startDate, endDate, options) {
+        const rangeTemplates = this.config.rangeTemplates;
+        if (startDate && endDate) {
+            return this.rangeDateTime(startDate, endDate, rangeTemplates.closedRange.long, options === null || options === void 0 ? void 0 : options.seconds, options === null || options === void 0 ? void 0 : options.milliseconds);
+        }
+        return this.openedRangeDateTime(startDate, endDate || null, rangeTemplates.openedRange.long);
+    }
+    /**
+     * @param startDate - start date
+     * @param endDate - end date
+     * @param options - DateTimeOptions
+     * @returns range middle date with time
+     */
+    rangeMiddleDateTime(startDate, endDate, options) {
+        return this.rangeDateTime(startDate, endDate, this.config.rangeTemplates.closedRange.middle, options === null || options === void 0 ? void 0 : options.seconds, options === null || options === void 0 ? void 0 : options.milliseconds);
+    }
+    compileVariables(date, variables) {
+        const compiledVariables = {};
+        // tslint:disable-next-line:no-for-in
+        for (const key in variables) {
+            if (!variables.hasOwnProperty(key)) {
+                continue;
+            }
+            const value = variables[key];
+            compiledVariables[key] = this.adapter.format(date, value);
+        }
+        compiledVariables.CURRENT_YEAR = this.hasSame(date, this.adapter.today(), 'year');
+        return compiledVariables;
+    }
+    isBeforeYesterday(date) {
+        return this.adapter.daysFromToday(date) <= -2;
+    }
+    isYesterday(date) {
+        const interval = this.adapter.daysFromToday(date);
+        return interval > -2 && interval <= -1;
+    }
+    isToday(date) {
+        return this.adapter.daysFromToday(date) === 0;
+    }
+    isTomorrow(date) {
+        const interval = this.adapter.daysFromToday(date);
+        return interval >= 1 && interval < 2;
+    }
+    isAfterTomorrow(date) {
+        return this.adapter.daysFromToday(date) >= 2;
+    }
+    hasSame(startDate, endDate, unit) {
+        return this.adapter.hasSame(startDate, endDate, unit) ? 'yes' : 'no';
+    }
+}
+/** @nocollapse */ /** @nocollapse */ DateFormatter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DateFormatter, deps: [{ token: i1.DateAdapter }, { token: MC_DATE_LOCALE }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ DateFormatter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DateFormatter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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');
+const DEFAULT_MC_LOCALE_ID = 'ru';
+function isEmpty(value) {
+    return value == null || value === '' || value !== value;
+}
+function strToNumber(value) {
+    if (typeof value === 'string' && !isNaN(Number(value) - parseFloat(value))) {
+        return Number(value);
+    }
+    if (typeof value !== 'number') {
+        throw new Error(`${value} is not a number`);
+    }
+    return value;
+}
+const NUMBER_FORMAT_REGEXP = /^(\d+)?\.((\d+)(-(\d+))?)?$/;
+const minIntGroupPosition = 1;
+const minFractionGroupPosition = 3;
+const maxFractionGroupPosition = 5;
+class ParsedDigitsInfo {
+}
+function parseDigitsInfo(digitsInfo) {
+    const parts = digitsInfo.match(NUMBER_FORMAT_REGEXP);
+    if (parts === null) {
+        throw new Error(`${digitsInfo} is not a valid digit info`);
+    }
+    const minIntPart = parts[minIntGroupPosition];
+    const minFractionPart = parts[minFractionGroupPosition];
+    const maxFractionPart = parts[maxFractionGroupPosition];
+    const result = new ParsedDigitsInfo();
+    if (minIntPart != null) {
+        result.minimumIntegerDigits = parseInt(minIntPart);
+    }
+    if (minFractionPart != null) {
+        result.minimumFractionDigits = parseInt(minFractionPart);
+    }
+    if (maxFractionPart != null) {
+        result.maximumFractionDigits = parseInt(maxFractionPart);
+    }
+    else if (minFractionPart != null && result.minimumFractionDigits > result.maximumFractionDigits) {
+        result.maximumFractionDigits = result.minimumFractionDigits;
+    }
+    return result;
+}
+class McDecimalPipe {
+    constructor(_locale) {
+        this._locale = _locale;
+    }
+    /**
+     * @param value The number to be formatted.
+     * @param digitsInfo Decimal representation options, specified by a string
+     * in the following format:<br>
+     * <code>{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}</code>.
+     *   - `minIntegerDigits`: The minimum number of integer digits before the decimal point.
+     * Default is `1`.
+     *   - `minFractionDigits`: The minimum number of digits after the decimal point.
+     * Default is `0`.
+     *   - `maxFractionDigits`: The maximum number of digits after the decimal point.
+     * Default is `3`.
+     * @param locale A locale code for the locale format rules to use.
+     * When not supplied, uses the value of `MC_LOCALE_ID`, which is `ru` by default.
+     */
+    transform(value, digitsInfo, locale) {
+        if (isEmpty(value)) {
+            return null;
+        }
+        const currentLocale = locale || this._locale || DEFAULT_MC_LOCALE_ID;
+        let parsedDigitsInfo;
+        if (digitsInfo) {
+            parsedDigitsInfo = parseDigitsInfo(digitsInfo);
+        }
+        const options = Object.assign({ useGrouping: true, minimumIntegerDigits: 1, minimumFractionDigits: 0, maximumFractionDigits: 3 }, parsedDigitsInfo);
+        try {
+            const num = strToNumber(value);
+            return Intl.NumberFormat.call(this, currentLocale, options).format(num);
+        }
+        catch (error) {
+            throw Error(`InvalidPipeArgument: McDecimalPipe for pipe '${JSON.stringify(error.message)}'`);
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McDecimalPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McDecimalPipe, deps: [{ token: MC_LOCALE_ID, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ /** @nocollapse */ McDecimalPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McDecimalPipe, name: "mcNumber" });
+/** @nocollapse */ /** @nocollapse */ McDecimalPipe.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McDecimalPipe, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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 {
+}
+/** @nocollapse */ /** @nocollapse */ McFormattersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McFormattersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McFormattersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McFormattersModule, declarations: [McDecimalPipe], exports: [McDecimalPipe] });
+/** @nocollapse */ /** @nocollapse */ McFormattersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McFormattersModule, providers: [DateFormatter] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McFormattersModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [McDecimalPipe],
+                    declarations: [McDecimalPipe],
+                    providers: [DateFormatter]
+                }]
+        }] });
+
+const validationTooltipShowDelay = 10;
+const validationTooltipHideDelay = 3000;
+const MC_VALIDATION = new InjectionToken('McUseValidation', { factory: () => ({ useValidation: true }) });
+function setValidState(control, validator) {
+    if (!control) {
+        return;
+    }
+    control.clearValidators();
+    control.updateValueAndValidity({ emitEvent: false });
+    control.setValidators(validator);
+}
+/** This function do next:
+ * - run validation on submitting parent form
+ * - prevent validation in required validator if form doesn't submitted
+ * - if control has focus validation will be prevented
+ */
+function setMosaicValidation(component) {
+    const ngControl = component.ngControl;
+    if (!ngControl) {
+        return;
+    }
+    const parentForm = component.parentForm || component.parentFormGroup;
+    if (parentForm) {
+        parentForm.ngSubmit.subscribe(() => {
+            // tslint:disable-next-line: no-unnecessary-type-assertion
+            ngControl.control.updateValueAndValidity({ emitEvent: false });
+        });
+    }
+    if (component.ngModel) {
+        setMosaicValidationForModelControl(component, component.rawValidators, parentForm);
+    }
+    else if (component.formControlName || component.ngControl) {
+        setMosaicValidationForFormControl(component, parentForm, ngControl);
+    }
+}
+function setMosaicValidationForModelControl(component, validators, parentForm) {
+    if (!validators) {
+        return;
+    }
+    validators.forEach((validator) => {
+        // tslint:disable-next-line: no-unbound-method
+        const originalValidate = validator.validate;
+        if (validator instanceof RequiredValidator) {
+            // changed required validation logic
+            validator.validate = (control) => {
+                if (parentForm && !parentForm.submitted) {
+                    return null;
+                }
+                return originalValidate.call(validator, control);
+            };
+        }
+        else {
+            // changed all other validation logic
+            validator.validate = (control) => {
+                if (component.focused) {
+                    return null;
+                }
+                return originalValidate.call(validator, control);
+            };
+        }
+    });
+}
+function setMosaicValidationForFormControl(component, parentForm, ngControl) {
+    const originalValidator = ngControl.control.validator;
+    // changed required validation logic after initialization
+    if (ngControl.invalid && ngControl.errors.required) {
+        Promise.resolve().then(() => setValidState(ngControl.control, originalValidator));
+    }
+    // check dynamic updates
+    ngControl.statusChanges
+        .subscribe(() => {
+        // changed required validation logic
+        if (ngControl.invalid && (parentForm && !parentForm.submitted) && ngControl.errors.required) {
+            setValidState(ngControl.control, originalValidator);
+        }
+        // changed all other validation logic
+        if (ngControl.invalid && component.focused) {
+            setValidState(ngControl.control, originalValidator);
+        }
+    });
+}
+
+class McHighlightPipe {
+    transform(value, args) {
+        if (!args) {
+            return value;
+        }
+        return value.replace(new RegExp(`(${args})`, 'gi'), '<mark class="mc-highlight">$1</mark>');
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McHighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ /** @nocollapse */ McHighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McHighlightPipe, name: "mcHighlight" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McHighlightPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'mcHighlight' }]
+        }] });
+
+class McHighlightModule {
+}
+/** @nocollapse */ /** @nocollapse */ McHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McHighlightModule, declarations: [McHighlightPipe], imports: [CommonModule], exports: [McHighlightPipe] });
+/** @nocollapse */ /** @nocollapse */ McHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McHighlightModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McHighlightModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [McHighlightPipe],
+                    declarations: [McHighlightPipe]
+                }]
+        }] });
+
+const selectEvents = 'selectEvents';
+
+/**
+ * Returns an exception to be thrown when attempting to change a select's `multiple` option
+ * after initialization.
+ * @docs-private
+ */
+function getMcSelectDynamicMultipleError() {
+    return Error('Cannot change `multiple` mode of select after initialization.');
+}
+/**
+ * Returns an exception to be thrown when attempting to assign a non-array value to a select
+ * in `multiple` mode. Note that `undefined` and `null` are still valid values to allow for
+ * resetting the value.
+ * @docs-private
+ */
+function getMcSelectNonArrayValueError() {
+    return Error('Value must be an array in multiple-selection mode.');
+}
+/**
+ * Returns an exception to be thrown when assigning a non-function value to the comparator
+ * used to determine if a value corresponds to an option. Note that whether the function
+ * actually takes two values and returns a boolean is not checked.
+ */
+function getMcSelectNonFunctionValueError() {
+    return Error('`compareWith` must be a function.');
+}
+
+/** The max height of the select's overlay panel */
+const SELECT_PANEL_MAX_HEIGHT = 224;
+/** The panel's padding on the x-axis */
+const SELECT_PANEL_PADDING_X = 1;
+/** The panel's x axis padding if it is indented (e.g. there is an option group). */
+/* tslint:disable-next-line:no-magic-numbers */
+const SELECT_PANEL_INDENT_PADDING_X = SELECT_PANEL_PADDING_X * 2;
+/**
+ * The select panel will only "fit" inside the viewport if it is positioned at
+ * this value or more away from the viewport boundary.
+ */
+const SELECT_PANEL_VIEWPORT_PADDING = 8;
+/** Injection token that determines the scroll handling while a select is open. */
+const MC_SELECT_SCROLL_STRATEGY = new InjectionToken('mc-select-scroll-strategy');
+/** @docs-private */
+function mcSelectScrollStrategyProviderFactory(overlay) {
+    return () => overlay.scrollStrategies.reposition();
+}
+/** @docs-private */
+const MC_SELECT_SCROLL_STRATEGY_PROVIDER = {
+    provide: MC_SELECT_SCROLL_STRATEGY,
+    deps: [Overlay],
+    useFactory: mcSelectScrollStrategyProviderFactory
+};
+
+const POSITION_MAP = {
+    top: {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom'
+    },
+    topCenter: {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom'
+    },
+    topLeft: {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom'
+    },
+    topRight: {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom'
+    },
+    right: {
+        originX: 'end',
+        originY: 'center',
+        overlayX: 'start',
+        overlayY: 'center'
+    },
+    rightTop: {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'top'
+    },
+    rightBottom: {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'bottom'
+    },
+    bottom: {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top'
+    },
+    bottomCenter: {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top'
+    },
+    bottomLeft: {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top'
+    },
+    bottomRight: {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top'
+    },
+    left: {
+        originX: 'start',
+        originY: 'center',
+        overlayX: 'end',
+        overlayY: 'center'
+    },
+    leftTop: {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'top'
+    },
+    leftBottom: {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'bottom'
+    }
+};
+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
+]);
+const TOP_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.top,
+    POSITION_MAP.bottom,
+    POSITION_MAP.rightBottom,
+    POSITION_MAP.leftBottom,
+    POSITION_MAP.bottomLeft,
+    POSITION_MAP.bottomRight
+]);
+const BOTTOM_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.bottom,
+    POSITION_MAP.top,
+    POSITION_MAP.topLeft,
+    POSITION_MAP.topRight,
+    POSITION_MAP.rightBottom,
+    POSITION_MAP.leftBottom
+]);
+const RIGHT_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.right,
+    POSITION_MAP.left,
+    POSITION_MAP.leftTop,
+    POSITION_MAP.leftBottom,
+    POSITION_MAP.top,
+    POSITION_MAP.bottom
+]);
+const LEFT_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.left,
+    POSITION_MAP.right,
+    POSITION_MAP.rightTop,
+    POSITION_MAP.rightBottom,
+    POSITION_MAP.top,
+    POSITION_MAP.bottom
+]);
+const RIGHT_TOP_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.rightTop,
+    POSITION_MAP.leftTop,
+    POSITION_MAP.left,
+    POSITION_MAP.leftBottom,
+    POSITION_MAP.topLeft,
+    POSITION_MAP.bottomLeft
+]);
+const RIGHT_BOTTOM_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.rightBottom,
+    POSITION_MAP.leftBottom,
+    POSITION_MAP.left,
+    POSITION_MAP.leftTop,
+    POSITION_MAP.topLeft,
+    POSITION_MAP.bottomLeft
+]);
+const LEFT_TOP_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.leftTop,
+    POSITION_MAP.rightTop,
+    POSITION_MAP.right,
+    POSITION_MAP.rightBottom,
+    POSITION_MAP.topRight,
+    POSITION_MAP.bottomRight
+]);
+const LEFT_BOTTOM_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.leftBottom,
+    POSITION_MAP.rightBottom,
+    POSITION_MAP.right,
+    POSITION_MAP.rightTop,
+    POSITION_MAP.topRight,
+    POSITION_MAP.bottomRight
+]);
+const TOP_LEFT_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.topLeft,
+    POSITION_MAP.topRight,
+    POSITION_MAP.bottomLeft,
+    POSITION_MAP.bottom,
+    POSITION_MAP.bottomRight,
+    POSITION_MAP.leftBottom,
+    POSITION_MAP.rightBottom
+]);
+const TOP_RIGHT_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.topRight,
+    POSITION_MAP.topLeft,
+    POSITION_MAP.bottomRight,
+    POSITION_MAP.bottom,
+    POSITION_MAP.bottomLeft,
+    POSITION_MAP.leftBottom,
+    POSITION_MAP.rightBottom
+]);
+const BOTTOM_RIGHT_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.bottomRight,
+    POSITION_MAP.bottomLeft,
+    POSITION_MAP.topRight,
+    POSITION_MAP.top,
+    POSITION_MAP.topLeft,
+    POSITION_MAP.leftTop,
+    POSITION_MAP.rightTop
+]);
+const BOTTOM_LEFT_POSITION_PRIORITY = objectValues([
+    POSITION_MAP.bottomLeft,
+    POSITION_MAP.bottomRight,
+    POSITION_MAP.topLeft,
+    POSITION_MAP.top,
+    POSITION_MAP.topRight,
+    POSITION_MAP.rightTop,
+    POSITION_MAP.leftTop
+]);
+const POSITION_PRIORITY_STRATEGY = {
+    top: TOP_POSITION_PRIORITY,
+    topLeft: TOP_LEFT_POSITION_PRIORITY,
+    topRight: TOP_RIGHT_POSITION_PRIORITY,
+    bottom: BOTTOM_POSITION_PRIORITY,
+    bottomLeft: BOTTOM_LEFT_POSITION_PRIORITY,
+    bottomRight: BOTTOM_RIGHT_POSITION_PRIORITY,
+    left: LEFT_POSITION_PRIORITY,
+    leftTop: LEFT_TOP_POSITION_PRIORITY,
+    leftBottom: LEFT_BOTTOM_POSITION_PRIORITY,
+    right: RIGHT_POSITION_PRIORITY,
+    rightTop: RIGHT_TOP_POSITION_PRIORITY,
+    rightBottom: RIGHT_BOTTOM_POSITION_PRIORITY
+};
+const POSITION_TO_CSS_MAP = {
+    top: 'top',
+    topLeft: 'top-left',
+    topRight: 'top-right',
+    right: 'right',
+    rightTop: 'right-top',
+    rightBottom: 'right-bottom',
+    left: 'left',
+    leftTop: 'left-top',
+    leftBottom: 'left-bottom',
+    bottom: 'bottom',
+    bottomLeft: 'bottom-left',
+    bottomRight: 'bottom-right'
+};
+function arrayMap(array, iteratee) {
+    let index = -1;
+    const length = array === null ? 0 : array.length;
+    const result = Array(length);
+    while (++index < length) {
+        result[index] = iteratee(array[index], index, array);
+    }
+    return result;
+}
+function baseValues(object, props) {
+    return arrayMap(props, (key) => object[key]);
+}
+function objectValues(object) {
+    return object === null ? [] : baseValues(object, Object.keys(object));
+}
+
+const fadeAnimation = trigger('fadeAnimation', [
+    state('void', style({ opacity: 0 })),
+    state('true', style({ opacity: 1 })),
+    state('false', style({ opacity: 0 })),
+    transition('* => true', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
+    transition('* => void', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)'))
+]);
+
+var AnimationCurves;
+(function (AnimationCurves) {
+    AnimationCurves["StandardCurve"] = "cubic-bezier(0.4,0.0,0.2,1)";
+    AnimationCurves["DecelerationCurve"] = "cubic-bezier(0.0,0.0,0.2,1)";
+    AnimationCurves["AccelerationCurve"] = "cubic-bezier(0.4,0.0,1,1)";
+    AnimationCurves["SharpCurve"] = "cubic-bezier(0.4,0.0,0.6,1)";
+})(AnimationCurves || (AnimationCurves = {}));
+
+/**
+ * The following are all the animations for the mc-select component, with each
+ * const containing the metadata for one animation.
+ *
+ */
+const mcSelectAnimations = {
+    /**
+     * This animation transforms the select's overlay panel on and off the page.
+     *
+     * When the panel is attached to the DOM, it expands its width by the amount of padding, scales it
+     * up to 100% on the Y axis, fades in its border, and translates slightly up and to the
+     * side to ensure the option text correctly overlaps the trigger text.
+     *
+     * When the panel is removed from the DOM, it simply fades out linearly.
+     */
+    transformPanel: trigger('transformPanel', [
+        state('void', style({
+            transform: 'scaleY(0)',
+            minWidth: '100%',
+            opacity: 0
+        })),
+        transition('void => *', group([
+            animate('150ms cubic-bezier(0.25, 0.8, 0.25, 1)')
+        ])),
+        transition('* => void', [
+            animate('250ms 100ms linear', style({ opacity: 0 }))
+        ])
+    ]),
+    /**
+     * This animation fades in the background color and text content of the
+     * select's options. It is time delayed to occur 100ms after the overlay
+     * panel has transformed in.
+     */
+    fadeInContent: trigger('fadeInContent', [
+        state('showing', style({ opacity: 1 })),
+        transition('void => showing', [
+            style({ opacity: 0 }),
+            animate('150ms 100ms cubic-bezier(0.55, 0, 0.55, 0.2)')
+        ])
+    ])
+};
+const transformPanel = mcSelectAnimations.transformPanel;
+const fadeInContent = mcSelectAnimations.fadeInContent;
+
+/** InjectionToken that can be used to specify the global label options. */
+const MC_LABEL_GLOBAL_OPTIONS = new InjectionToken('mc-label-global-options');
+
+var MultipleMode;
+(function (MultipleMode) {
+    MultipleMode["CHECKBOX"] = "checkbox";
+    MultipleMode["KEYBOARD"] = "keyboard";
+})(MultipleMode || (MultipleMode = {}));
+
+/**
+ * Component that shows a simplified checkbox without including any kind of "real" checkbox.
+ * Meant to be used when the checkbox is purely decorative and a large number of them will be
+ * included, such as for the options in a multi-select. Uses no SVGs or complex animations.
+ * Note that theming is meant to be handled by the parent element, e.g.
+ * `mc-primary .mc-pseudo-checkbox`.
+ *
+ * Note that this component will be completely invisible to screen-reader users. This is *not*
+ * interchangeable with `<mc-checkbox>` and should *not* be used if the user would directly
+ * interact with the checkbox. The pseudo-checkbox should only be used as an implementation detail
+ * of more complex components that appropriately handle selected / checked state.
+ * @docs-private
+ */
+class McPseudoCheckbox {
+    constructor() {
+        this.state = 'unchecked';
+        this.disabled = false;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McPseudoCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McPseudoCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McPseudoCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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: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}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McPseudoCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'mc-pseudo-checkbox', 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, 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: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}\n"] }]
+        }], propDecorators: { state: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }] } });
+
+class McPseudoCheckboxModule {
+}
+/** @nocollapse */ /** @nocollapse */ McPseudoCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McPseudoCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McPseudoCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McPseudoCheckboxModule, declarations: [McPseudoCheckbox], imports: [CommonModule], exports: [McPseudoCheckbox] });
+/** @nocollapse */ /** @nocollapse */ McPseudoCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McPseudoCheckboxModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McPseudoCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [McPseudoCheckbox],
+                    declarations: [McPseudoCheckbox]
+                }]
+        }] });
+
+class McMeasureScrollbarService {
+    constructor(document) {
+        this.document = document;
+        this.scrollbarMeasure = {
+            position: 'absolute',
+            top: '-9999px',
+            width: '50px',
+            height: '50px',
+            overflow: 'scroll'
+        };
+        this.initScrollBarWidth();
+    }
+    get scrollBarWidth() {
+        if (this._scrollBarWidth) {
+            return this._scrollBarWidth;
+        }
+        this.initScrollBarWidth();
+        return this._scrollBarWidth;
+    }
+    initScrollBarWidth() {
+        const scrollDiv = this.document.createElement('div');
+        // tslint:disable-next-line
+        for (const scrollProp in this.scrollbarMeasure) {
+            if (this.scrollbarMeasure.hasOwnProperty(scrollProp)) {
+                scrollDiv.style[scrollProp] = this.scrollbarMeasure[scrollProp];
+            }
+        }
+        this.document.body.appendChild(scrollDiv);
+        const width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+        this.document.body.removeChild(scrollDiv);
+        this._scrollBarWidth = width;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McMeasureScrollbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McMeasureScrollbarService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ McMeasureScrollbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McMeasureScrollbarService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McMeasureScrollbarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    } });
+
+/** @docs-private */
+class McOptgroupBase {
+}
+// tslint:disable-next-line: naming-convention
+const McOptgroupMixinBase = mixinDisabled(McOptgroupBase);
+let uniqueOptgroupIdCounter = 0;
+/**
+ * Component that is used to group instances of `mc-option`.
+ */
+class McOptgroup extends McOptgroupMixinBase {
+    constructor() {
+        super(...arguments);
+        /** Unique id for the underlying label. */
+        this.labelId = `mc-optgroup-label-${uniqueOptgroupIdCounter++}`;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McOptgroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McOptgroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McOptgroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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: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: "13.3.0", ngImport: i0, type: McOptgroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mc-optgroup', exportAs: 'mcOptgroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['disabled'], host: {
+                        class: 'mc-optgroup',
+                        '[class.mc-disabled]': 'disabled'
+                    }, 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:var(--mc-optgroup-size-padding-left, 17px);-webkit-user-select:none;user-select:none;cursor:default}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }] } });
+
+/**
+ * Option IDs need to be unique across components, so this counter exists outside of
+ * the component definition.
+ */
+let uniqueIdCounter = 0;
+/** Event object emitted by McOption when selected or deselected. */
+class McOptionSelectionChange {
+    constructor(source, isUserInput = false) {
+        this.source = source;
+        this.isUserInput = isUserInput;
+    }
+}
+/**
+ * Injection token used to provide the parent component to options.
+ */
+const MC_OPTION_PARENT_COMPONENT = new InjectionToken('MC_OPTION_PARENT_COMPONENT');
+/**
+ * Single option inside of a `<mc-select>` element.
+ */
+class McOption {
+    constructor(element, changeDetectorRef, parent, group) {
+        this.element = element;
+        this.changeDetectorRef = changeDetectorRef;
+        this.parent = parent;
+        this.group = group;
+        /** Event emitted when the option is selected or deselected. */
+        // tslint:disable-next-line:no-output-on-prefix
+        this.onSelectionChange = new EventEmitter();
+        /** Emits when the state of the option changes and any parents have to be notified. */
+        this.stateChanges = new Subject();
+        this._id = `mc-option-${uniqueIdCounter++}`;
+        this._selected = false;
+        this._disabled = false;
+        this._active = false;
+        this.mostRecentViewValue = '';
+    }
+    get showCheckbox() {
+        return this._showCheckbox === undefined ? this.multiple : this._showCheckbox;
+    }
+    set showCheckbox(value) {
+        this._showCheckbox = coerceBooleanProperty(value);
+    }
+    /**
+     * The displayed value of the option. It is necessary to show the selected option in the
+     * select's trigger.
+     */
+    get viewValue() {
+        // TODO: Add input property alternative for node envs.
+        return (this.getHostElement().textContent || '').trim();
+    }
+    /** Whether the wrapping component is in multiple selection mode. */
+    get multiple() {
+        return this.parent && this.parent.multiple;
+    }
+    get id() {
+        return this._id;
+    }
+    get selected() {
+        return this._selected;
+    }
+    get disabled() {
+        return (this.group && this.group.disabled) || this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = coerceBooleanProperty(value);
+    }
+    /**
+     * Whether or not the option is currently active and ready to be selected.
+     * An active option displays styles as if it is focused, but the
+     * focus is actually retained somewhere else. This comes in handy
+     * for components like autocomplete where focus must remain on the input.
+     */
+    get active() {
+        return this._active;
+    }
+    ngAfterViewChecked() {
+        // Since parent components could be using the option's label to display the selected values
+        // (e.g. `mc-select`) and they don't have a way of knowing if the option's label has changed
+        // we have to check for changes in the DOM ourselves and dispatch an event. These checks are
+        // relatively cheap, however we still limit them only to selected options in order to avoid
+        // hitting the DOM too often.
+        if (this._selected) {
+            const viewValue = this.viewValue;
+            if (viewValue !== this.mostRecentViewValue) {
+                this.mostRecentViewValue = viewValue;
+                this.stateChanges.next();
+            }
+        }
+    }
+    ngOnDestroy() {
+        this.stateChanges.complete();
+    }
+    getHeight() {
+        // tslint:disable-next-line:naming-convention
+        const DOMRect = this.element.nativeElement.getClientRects()[0];
+        return DOMRect ? DOMRect.height : 0;
+    }
+    select() {
+        if (!this._selected) {
+            this._selected = true;
+            this.changeDetectorRef.markForCheck();
+            this.emitSelectionChangeEvent();
+        }
+    }
+    deselect() {
+        if (this._selected) {
+            this._selected = false;
+            this.changeDetectorRef.markForCheck();
+            this.emitSelectionChangeEvent();
+        }
+    }
+    focus() {
+        const element = this.getHostElement();
+        if (typeof element.focus === 'function') {
+            element.focus();
+        }
+    }
+    /**
+     * This method sets display styles on the option to make it appear
+     * active. This is used by the ActiveDescendantKeyManager so key
+     * events will display the proper options as active on arrow key events.
+     */
+    setActiveStyles() {
+        if (!this._active) {
+            this._active = true;
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    /**
+     * This method removes display styles on the option that made it appear
+     * active. This is used by the ActiveDescendantKeyManager so key
+     * events will display the proper options as active on arrow key events.
+     */
+    setInactiveStyles() {
+        if (this._active) {
+            this._active = false;
+            this.changeDetectorRef.markForCheck();
+        }
+    }
+    /** Gets the label to be used when determining whether the option should be focused. */
+    getLabel() {
+        return this.viewValue;
+    }
+    /** Ensures the option is selected when activated from the keyboard. */
+    handleKeydown(event) {
+        // tslint:disable-next-line
+        if (event.keyCode === ENTER || event.keyCode === SPACE) {
+            this.selectViaInteraction();
+            // Prevent the page from scrolling down and form submits.
+            event.preventDefault();
+        }
+    }
+    /**
+     * `Selects the option while indicating the selection came from the user. Used to
+     * determine if the select's view -> model callback should be invoked.`
+     */
+    selectViaInteraction() {
+        if (!this.disabled) {
+            this._selected = this.multiple ? !this._selected : true;
+            this.changeDetectorRef.markForCheck();
+            this.emitSelectionChangeEvent(true);
+        }
+    }
+    getTabIndex() {
+        return this.disabled ? '-1' : '0';
+    }
+    getHostElement() {
+        return this.element.nativeElement;
+    }
+    /** Emits the selection change event. */
+    emitSelectionChangeEvent(isUserInput = false) {
+        this.onSelectionChange.emit(new McOptionSelectionChange(this, isUserInput));
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", 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 */ /** @nocollapse */ McOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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: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}\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: "13.3.0", 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)'
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, 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: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}\n"] }]
+        }], 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.
+ * @param options Flat list of all of the options.
+ * @param optionGroups Flat list of all of the option groups.
+ * @docs-private
+ */
+function countGroupLabelsBeforeOption(optionIndex, options, optionGroups) {
+    if (optionGroups.length) {
+        const optionsArray = options.toArray();
+        const groups = optionGroups.toArray();
+        let groupCounter = 0;
+        for (let i = 0; i < optionIndex + 1; i++) {
+            if (optionsArray[i].group && optionsArray[i].group === groups[groupCounter]) {
+                groupCounter++;
+            }
+        }
+        return groupCounter;
+    }
+    return 0;
+}
+/**
+ * Determines the position to which to scroll a panel in order for an option to be into view.
+ * @param optionIndex Index of the option to be scrolled into the view.
+ * @param optionHeight Height of the options.
+ * @param currentScrollPosition Current scroll position of the panel.
+ * @param panelHeight Height of the panel.
+ * @docs-private
+ */
+function getOptionScrollPosition(optionIndex, optionHeight, currentScrollPosition, panelHeight) {
+    const optionOffset = optionIndex * optionHeight;
+    if (optionOffset < currentScrollPosition) {
+        return optionOffset;
+    }
+    if (optionOffset + optionHeight > currentScrollPosition + panelHeight) {
+        return Math.max(0, optionOffset - panelHeight + optionHeight);
+    }
+    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 */ /** @nocollapse */ McOptionActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McOptionActionComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: MC_OPTION_ACTION_PARENT }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McOptionActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", 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-expanded": "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: "13.3.0", 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>
+    `, host: {
+                        class: 'mc-option-action',
+                        '[class.mc-expanded]': '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, 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"] }]
+        }], 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 {
+}
+/** @nocollapse */ /** @nocollapse */ McOptionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McOptionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McOptionModule, declarations: [McOption, McOptgroup, McOptionActionComponent], imports: [CommonModule, McPseudoCheckboxModule], exports: [McOption, McOptgroup, McOptionActionComponent] });
+/** @nocollapse */ /** @nocollapse */ McOptionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McOptionModule, imports: [[CommonModule, McPseudoCheckboxModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McOptionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, McPseudoCheckboxModule],
+                    declarations: [McOption, McOptgroup, McOptionActionComponent],
+                    exports: [McOption, McOptgroup, McOptionActionComponent]
+                }]
+        }] });
+
+class McFormElement {
+    constructor(element) {
+        this.element = element;
+        this.margin = false;
+        this.isRow = false;
+        this.isFieldSet = false;
+        this.hasLegend = false;
+        this.isHorizontal = false;
+    }
+    ngAfterContentInit() {
+        const classList = this.element.nativeElement.classList;
+        this.isRow = classList.contains('mc-form__row');
+        this.isHorizontal = classList.contains('mc-horizontal');
+        this.isFieldSet = classList.contains('mc-form__fieldset');
+        if (this.isFieldSet && this.element.nativeElement.firstElementChild) {
+            this.hasLegend = this.element.nativeElement.firstElementChild.classList.contains('mc-form__legend');
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McFormElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McFormElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McFormElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", 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: "13.3.0", 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);
+    }
+    handleElements(elements) {
+        elements.forEach((element, index) => {
+            const nextElement = elements.get(index + 1);
+            if (element.isFieldSet && !element.isHorizontal) {
+                this.handleElements(element.elements);
+            }
+            element.margin = !!(nextElement && !nextElement.hasLegend);
+        });
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McForm.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", 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: "13.3.0", 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 {
+}
+/** @nocollapse */ /** @nocollapse */ McFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ McFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McFormsModule, declarations: [McForm,
+        McFormElement], exports: [McForm,
+        McFormElement] });
+/** @nocollapse */ /** @nocollapse */ McFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McFormsModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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();
+    }
+    detectChanges() {
+        this.changeDetectorRef.detectChanges();
+    }
+    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 */ /** @nocollapse */ McPopUp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McPopUp, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McPopUp.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: McPopUp, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McPopUp, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
+
+// 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;
+        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);
+            this.instance.detectChanges();
+        };
+        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)
+            .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 */ /** @nocollapse */ McPopUpTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: McPopUpTrigger, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ McPopUpTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.0", type: McPopUpTrigger, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", 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_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, VERSION, countGroupLabelsBeforeOption, fadeAnimation, getMcSelectDynamicMultipleError, getMcSelectNonArrayValueError, getMcSelectNonFunctionValueError, getOptionScrollPosition, isBoolean, mcSelectAnimations, mcSelectScrollStrategyProviderFactory, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, selectEvents, setMosaicValidation, setMosaicValidationForFormControl, setMosaicValidationForModelControl, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay };
+//# sourceMappingURL=ptsecurity-mosaic-core.mjs.map