@ptsecurity/mosaic 14.7.1 → 15.0.0

package/fesm2015/ptsecurity-mosaic-core.mjs

@@ -1,28 +1,81 @@
-import * as i0 from '@angular/core';
-import { Version, InjectionToken, isDevMode, NgModule, Optional, Inject, Directive, Injectable, Pipe, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, EventEmitter, ViewChild, Output, ContentChild, ContentChildren, TemplateRef } from '@angular/core';
+import { trigger, state, style, transition, animate, group } from '@angular/animations';
 import * as i2$1 from '@angular/cdk/bidi';
 import { BidiModule } from '@angular/cdk/bidi';
+import * as i0 from '@angular/core';
+import { InjectionToken, isDevMode, NgModule, Optional, Inject, inject, LOCALE_ID, Injectable, Pipe, Directive, ContentChildren, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, EventEmitter, ViewChild, Output, ContentChild, TemplateRef, Version } from '@angular/core';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
-import MessageFormat from '@messageformat/core';
-import * as i1 from '@ptsecurity/cdk/datetime';
-import { MC_DATE_LOCALE } from '@ptsecurity/cdk/datetime';
+import * as i1 from '@mosaic-design/date-adapter';
+import { DateAdapter as DateAdapter$1 } from '@mosaic-design/date-adapter';
+import { DateFormatter as DateFormatter$1 } from '@mosaic-design/date-formatter';
 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 { Subject } from 'rxjs';
 import { takeUntil, distinctUntilChanged, delay } from 'rxjs/operators';
 import * as i1$1 from '@angular/cdk/a11y';
 import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1$2 from '@angular/cdk/overlay';
+import { Overlay } from '@angular/cdk/overlay';
 
-const VERSION = new Version('14.7.1+sha-dad4a73');
+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)'))
+]);
 
-function isBoolean(val) { return typeof val === 'boolean'; }
-function toBoolean(value) {
-    return value != null && `${value}` !== 'false';
-}
+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;
 
 // Injection token that configures whether the Mosaic sanity checks are enabled.
 const MC_SANITY_CHECKS = new InjectionToken('mc-sanity-checks', {
@@ -88,10 +141,10 @@ class McCommonModule {
         }
     }
 }
-/** @nocollapse */ McCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCommonModule, deps: [{ token: MC_SANITY_CHECKS, optional: true }], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ McCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: McCommonModule, imports: [BidiModule], exports: [BidiModule] });
-/** @nocollapse */ McCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCommonModule, imports: [BidiModule, BidiModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McCommonModule, decorators: [{
+/** @nocollapse */ McCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McCommonModule, deps: [{ token: MC_SANITY_CHECKS, optional: true }], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: McCommonModule, imports: [BidiModule], exports: [BidiModule] });
+/** @nocollapse */ McCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McCommonModule, imports: [BidiModule, BidiModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McCommonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [BidiModule],
@@ -125,12 +178,12 @@ function mixinDisabled(base) {
 var ThemePalette;
 (function (ThemePalette) {
     ThemePalette["Primary"] = "primary";
-    ThemePalette["Second"] = "second";
+    ThemePalette["Secondary"] = "secondary";
     ThemePalette["Error"] = "error";
     ThemePalette["Info"] = "info";
     ThemePalette["Warning"] = "warning";
     ThemePalette["Success"] = "success";
-    ThemePalette["Default"] = "second";
+    ThemePalette["Default"] = "secondary";
     ThemePalette["Empty"] = "";
 })(ThemePalette || (ThemePalette = {}));
 function mixinColor(base, defaultColor = ThemePalette.Default) {
@@ -193,73 +246,20 @@ function mixinErrorState(base) {
     };
 }
 
-/**
- * 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 */ McLine.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McLine, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ McLine.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: McLine, selector: "[mc-line], [mcLine]", host: { classAttribute: "mc-line" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", 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);
-        }
-    }
+const MC_DATE_FORMATS = new InjectionToken('mc-date-formats');
+
+/** InjectionToken for datepicker that can be used to override default locale code. */
+const MC_DATE_LOCALE = new InjectionToken('MC_DATE_LOCALE', {
+    providedIn: 'root',
+    factory: MC_DATE_LOCALE_FACTORY
+});
+/** @docs-private */
+// tslint:disable-next-line:naming-convention
+function MC_DATE_LOCALE_FACTORY() {
+    return inject(LOCALE_ID);
 }
-class McLineModule {
+class DateAdapter extends DateAdapter$1 {
 }
-/** @nocollapse */ McLineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McLineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ McLineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: McLineModule, declarations: [McLine], exports: [McLine] });
-/** @nocollapse */ McLineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McLineModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", 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 {
@@ -267,9 +267,9 @@ class ShowOnDirtyErrorStateMatcher {
         return !!(control && control.invalid && (control.dirty || (form && form.submitted)));
     }
 }
-/** @nocollapse */ ShowOnDirtyErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ ShowOnDirtyErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ShowOnDirtyErrorStateMatcher });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, decorators: [{
+/** @nocollapse */ ShowOnDirtyErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ ShowOnDirtyErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ShowOnDirtyErrorStateMatcher });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ShowOnDirtyErrorStateMatcher, decorators: [{
             type: Injectable
         }] });
 /** Provider that defines how form controls behave with regards to displaying error messages. */
@@ -278,1229 +278,126 @@ class ErrorStateMatcher {
         return !!(control && control.invalid && (control.touched || (form && form.submitted)));
     }
 }
-/** @nocollapse */ ErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ ErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: ErrorStateMatcher, decorators: [{
+/** @nocollapse */ ErrorStateMatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ErrorStateMatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ ErrorStateMatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: ErrorStateMatcher, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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}}
-                }`
-            }
-        }
-    },
-    durationTemplates: {
-        shortest: {
-            FULL: '{D, duration}{SHOW_MILLISECONDS, select, yes{,{MILLISECONDS}} other {}}',
-            ONLY_MINUTES: '{HOURS}:{MINUTES, number, ::integer-width/00}'
-        },
-        long: {
-            SEPARATOR: '',
-            YEARS: `{years, plural,
-                =1 {# year}
-                other {# years}
-            }`,
-            MONTHS: `{months, plural,
-                =1 {# month}
-                other {# months}
-            }`,
-            WEEKS: `{weeks, plural,
-                =1 {# week}
-                other {# weeks}
-            }`,
-            DAYS: `{days, plural,
-                =1 {# day}
-                other {# days}
-            }`,
-            HOURS: `{hours, plural,
-                =1 {# hour}
-                other {# hours}
-            }`,
-            MINUTES: `{minutes, plural,
-                =1 {# minute}
-                other {# minutes}
-            }`,
-            SECONDS: `{seconds, plural,
-                =1 {# second}
-                other {# seconds}
-            }`,
-            YEARS_FRACTION: `{years} years`,
-            MONTHS_FRACTION: `{months} months`
-        },
-        short: {
-            SEPARATOR: '',
-            YEARS: `{years} y`,
-            MONTHS: `{months} mo`,
-            WEEKS: `{weeks} w`,
-            DAYS: `{days} d`,
-            HOURS: `{hours} h`,
-            MINUTES: `{minutes} min`,
-            SECONDS: `{SHOW_MILLISECONDS, select, yes
-                {{seconds}.{milliseconds} s}
-                other
-                {{seconds} s}
-            }`,
-            YEARS_FRACTION: '{years} y',
-            MONTHS_FRACTION: '{months} mo'
-        }
-    }
-};
-
-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}}
-                }`
-            }
-        }
-    },
-    durationTemplates: {
-        shortest: {
-            FULL: '{D, duration}{SHOW_MILLISECONDS, select, yes{,{MILLISECONDS}} other {}}',
-            ONLY_MINUTES: '{HOURS}:{MINUTES, number, ::integer-width/00}'
-        },
-        long: {
-            SEPARATOR: 'и',
-            YEARS: `{years, plural,
-                one {# год}
-                few {# года}
-                many {# лет}
-                other {}
-            }`,
-            MONTHS: `{months, plural,
-                one {# месяц}
-                few {# месяца}
-                many {# месяцев}
-                other {}
-            }`,
-            WEEKS: `{weeks, plural,
-                one {# неделя}
-                few {# недели}
-                many {# недель}
-                other {}
-            }`,
-            DAYS: `{days, plural,
-                one {# день}
-                few {# дня}
-                many {# дней}
-                other {}
-            }`,
-            HOURS: `{hours, plural,
-                one {# час}
-                few {# часа}
-                many {# часов}
-                other {}
-            }`,
-            MINUTES: `{minutes, plural,
-                one {# минута}
-                few {# минуты}
-                many {# минут}
-                other {}
-            }`,
-            SECONDS: `{seconds, plural,
-                one {# секунда}
-                few {# секунды}
-                many {# секунд}
-                other {}
-            }`,
-            YEARS_FRACTION: `{floorValue, plural,
-                =1 {{years, number, ::#,#} года}
-                one {{years, number, ::#,#} год}
-                few {{years, number, ::#,#} года}
-                other {{years, number, ::#,#} лет}
-            }`,
-            MONTHS_FRACTION: `{floorValue, plural,
-                =1 {{months, number, ::#,#} месяца}
-                one {{months, number, ::#,#} месяц}
-                few {{months, number, ::#,#} месяца}
-                other {{months, number, ::#,#} месяцев}
-            }`
-        },
-        short: {
-            SEPARATOR: '',
-            YEARS: `{years, plural,
-                one {# г}
-                few {# г}
-                many {# л}
-                other {}
-            }`,
-            MONTHS: `{months} мес`,
-            WEEKS: `{weeks} нед`,
-            DAYS: `{days} д`,
-            HOURS: `{hours} ч`,
-            MINUTES: `{minutes} мин`,
-            SECONDS: `{SHOW_MILLISECONDS, select, yes
-                {{seconds},{milliseconds} с}
-                other
-                {{seconds} с}
-            }`,
-            YEARS_FRACTION: `{floorValue, plural,
-                one {{years, number, ::#,#} г}
-                few {{years, number, ::#,#} г}
-                other {{years, number, ::#,#} л}
-            }`,
-            MONTHS_FRACTION: `{floorValue, plural,
-                =1 {{months, number, ::#,#} мес}
-                other {{months, number, ::#,#} мес}
-            }`
-        }
-    }
-};
-
-// tslint:disable:no-magic-numbers
-class DateFormatter {
+class DateFormatter extends DateFormatter$1 {
     constructor(adapter, locale) {
+        super(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);
+}
+/** @nocollapse */ DateFormatter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DateFormatter, deps: [{ token: i1.DateAdapter }, { token: MC_DATE_LOCALE }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ DateFormatter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DateFormatter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: DateFormatter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: i1.DateAdapter }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MC_DATE_LOCALE]
+                    }] }];
+    } });
+
+class AbsoluteDateFormatterPipe {
+    constructor(adapter, formatter) {
+        this.adapter = adapter;
+        this.formatter = formatter;
     }
-    /**
-     * @param date - date
-     * @param template - template
-     * @param seconds - use seconds
-     * @param milliseconds - use milliseconds
-     * @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);
+    transform(value, currYear) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.absoluteLongDate(date, currYear) : '';
     }
-    /**
-     * @param date - date
-     * @returns relative date in short format
-     */
-    relativeShortDate(date) {
-        return this.relativeDate(date, this.config.relativeTemplates.short);
+}
+/** @nocollapse */ AbsoluteDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteDateFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ AbsoluteDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteDateFormatterPipe, name: "absoluteLongDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteDateFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'absoluteLongDate' }]
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
+class AbsoluteDateTimeFormatterPipe {
+    constructor(adapter, formatter) {
+        this.adapter = adapter;
+        this.formatter = formatter;
     }
-    /**
-     * @param date - date
-     * @returns relative date in long format
-     */
-    relativeLongDate(date) {
-        return this.relativeDate(date, this.config.relativeTemplates.long);
+    transform(value, options) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.absoluteLongDateTime(date, options) : '';
     }
-    /**
-     * @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);
+}
+/** @nocollapse */ AbsoluteDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ AbsoluteDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, name: "absoluteLongDateTime" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'absoluteLongDateTime' }]
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
+class AbsoluteDateShortFormatterPipe {
+    constructor(adapter, formatter) {
+        this.adapter = adapter;
+        this.formatter = formatter;
     }
-    /**
-     * @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);
+    transform(value, currYear) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.absoluteShortDate(date, currYear) : '';
     }
-    /**
-     * @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
-     * @param currYear - should current year be shown as well
-     */
-    absoluteDate(date, params, datetime = false, seconds = false, milliseconds = false, currYear = 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), currYear);
-        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);
+}
+/** @nocollapse */ AbsoluteDateShortFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteDateShortFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ AbsoluteDateShortFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteDateShortFormatterPipe, name: "absoluteShortDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteDateShortFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'absoluteShortDate' }]
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
+class AbsoluteShortDateTimeFormatterPipe {
+    constructor(adapter, formatter) {
+        this.adapter = adapter;
+        this.formatter = formatter;
     }
-    /**
-     * @param date - date
-     * @param currYear - should the year be shown forced
-     * @returns absolute date in short format
-     */
-    absoluteShortDate(date, currYear = false) {
-        return this.absoluteDate(date, this.config.absoluteTemplates.short, false, false, false, currYear);
+    transform(value, options) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.absoluteShortDateTime(date, options) : '';
     }
-    /**
-     * @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, options === null || options === void 0 ? void 0 : options.currYear);
+}
+/** @nocollapse */ AbsoluteShortDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ AbsoluteShortDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, name: "absoluteShortDateTime" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'absoluteShortDateTime' }]
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
+class RelativeDateFormatterPipe {
+    constructor(adapter, formatter) {
+        this.adapter = adapter;
+        this.formatter = formatter;
     }
-    /**
-     * @param date - date
-     * @param currYear - should the year be shown forced
-     * @returns absolute date in long format
-     */
-    absoluteLongDate(date, currYear = false) {
-        return this.absoluteDate(date, this.config.absoluteTemplates.long, false, false, false, currYear);
+    transform(value) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.relativeLongDate(date) : '';
     }
-    /**
-     * @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, options === null || options === void 0 ? void 0 : options.currYear);
+}
+/** @nocollapse */ RelativeDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RelativeDateFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ RelativeDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: RelativeDateFormatterPipe, name: "relativeLongDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RelativeDateFormatterPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'relativeLongDate' }]
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
+class RelativeDateTimeFormatterPipe {
+    constructor(adapter, formatter) {
+        this.adapter = adapter;
+        this.formatter = formatter;
     }
-    /**
-     * @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
-     * @param seconds - use seconds
-     * @param milliseconds - use milliseconds
-     * @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);
-    }
-    /**
-     * @param startDate - start date
-     * @param endDate - end date
-     * @param seconds - add seconds to formatted value
-     * @param milliseconds - add milliseconds to formatted value
-     * @returns formatted duration as string like 48:02:25
-     */
-    durationShortest(startDate, endDate, seconds = true, milliseconds = false) {
-        this.checkDates(startDate, endDate);
-        if (startDate > endDate) {
-            throw new Error(this.invalidDateErrorText);
-        }
-        const durationObject = this.adapter.durationObjectFromDates(startDate, endDate, ['hours', 'minutes', 'seconds', 'milliseconds']);
-        const roundedSeconds = Math.floor(this.adapter.durationAs(durationObject, 'seconds'));
-        if (seconds) {
-            return this.compileMessage(this.config.durationTemplates.shortest.FULL, {
-                D: roundedSeconds,
-                SHOW_MILLISECONDS: milliseconds ? 'yes' : 'no',
-                MILLISECONDS: durationObject.milliseconds
-            });
-        }
-        return roundedSeconds - (roundedSeconds % 60) ? this.compileMessage(this.config.durationTemplates.shortest.ONLY_MINUTES, {
-            HOURS: durationObject.hours,
-            MINUTES: durationObject.minutes
-        }) : '';
-    }
-    /**
-     * @param startDate - start date
-     * @param endDate - end date
-     * @param units - if defined, units to show will be specified
-     * @param fraction - shows fraction part for years and months
-     * @param template - specify template
-     * @returns formatted duration as string
-     */
-    duration(startDate, endDate, units, fraction, template) {
-        this.checkDates(startDate, endDate);
-        if (startDate > endDate) {
-            throw new Error(this.invalidDateErrorText);
-        }
-        const values = this.adapter.durationObjectFromDates(startDate, endDate, units, fraction);
-        const variables = Object.assign({}, values);
-        variables.SHOW_MILLISECONDS = values.milliseconds ? 'yes' : 'no';
-        return Object
-            .keys(values)
-            .reduce((acc, unit, index, arr) => {
-            if (fraction) {
-                variables.floorValue = Math.floor(values[unit]);
-                acc.push(this.compileMessage(template[`${unit.toUpperCase()}_FRACTION`], variables));
-            }
-            else {
-                if (arr.length > 1 && index === arr.length - 1) {
-                    acc.push(this.compileMessage(template.SEPARATOR, variables));
-                }
-                acc.push(this.compileMessage(template[unit.toUpperCase()], variables));
-            }
-            return acc;
-        }, [])
-            .filter((text) => !!text)
-            .join(' ');
-    }
-    durationLong(startDate, endDate, units = [], fraction = false) {
-        return this.duration(startDate, endDate, units, fraction, this.config.durationTemplates.long);
-    }
-    durationShort(startDate, endDate, units = [], fraction = false) {
-        return this.duration(startDate, endDate, units, fraction, this.config.durationTemplates.short);
-    }
-    checkDates(...args) {
-        args.forEach((date) => {
-            if (!this.adapter.isDateInstance(date) || !this.adapter.isValid(date)) {
-                throw new Error(this.invalidDateErrorText);
-            }
-        });
-    }
-    compileMessage(message, variables) {
-        return this.messageFormat.compile(message)(variables);
-    }
-    /**
-     * @param date - date for compile
-     * @param variables - date template variables
-     * @param currYearForced - param for absolute days formatting
-     * @returns compiledVariables
-     */
-    compileVariables(date, variables, currYearForced = false) {
-        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 = (currYearForced && 'no') || this.hasSame(date, this.adapter.today(), 'year');
-        return compiledVariables;
-    }
-    isBeforeYesterday(date) {
-        return this.adapter.daysFromToday(date) <= -2;
-    }
-    isYesterday(date) {
-        return this.adapter.daysFromToday(date) === -1;
-    }
-    isToday(date) {
-        return this.adapter.daysFromToday(date) === 0;
-    }
-    isTomorrow(date) {
-        return this.adapter.daysFromToday(date) === 1;
-    }
-    isAfterTomorrow(date) {
-        return this.adapter.daysFromToday(date) >= 2;
-    }
-    hasSame(startDate, endDate, unit) {
-        return this.adapter.hasSame(startDate, endDate, unit) ? 'yes' : 'no';
-    }
-}
-/** @nocollapse */ DateFormatter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateFormatter, deps: [{ token: i1.DateAdapter }, { token: MC_DATE_LOCALE }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ DateFormatter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateFormatter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DateFormatter, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () {
-        return [{ type: i1.DateAdapter }, { type: undefined, decorators: [{
-                        type: Inject,
-                        args: [MC_DATE_LOCALE]
-                    }] }];
-    } });
-
-class AbsoluteDateFormatterPipe {
-    constructor(adapter, formatter) {
-        this.adapter = adapter;
-        this.formatter = formatter;
-    }
-    transform(value, currYear) {
-        const date = this.adapter.deserialize(value);
-        return date ? this.formatter.absoluteLongDate(date, currYear) : '';
-    }
-}
-/** @nocollapse */ AbsoluteDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteDateFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ AbsoluteDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteDateFormatterPipe, name: "absoluteLongDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteDateFormatterPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'absoluteLongDate' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
-class AbsoluteDateTimeFormatterPipe {
-    constructor(adapter, formatter) {
-        this.adapter = adapter;
-        this.formatter = formatter;
-    }
-    transform(value, options) {
-        const date = this.adapter.deserialize(value);
-        return date ? this.formatter.absoluteLongDateTime(date, options) : '';
-    }
-}
-/** @nocollapse */ AbsoluteDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ AbsoluteDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, name: "absoluteLongDateTime" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteDateTimeFormatterPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'absoluteLongDateTime' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
-class AbsoluteDateShortFormatterPipe {
-    constructor(adapter, formatter) {
-        this.adapter = adapter;
-        this.formatter = formatter;
-    }
-    transform(value, currYear) {
-        const date = this.adapter.deserialize(value);
-        return date ? this.formatter.absoluteShortDate(date, currYear) : '';
-    }
-}
-/** @nocollapse */ AbsoluteDateShortFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteDateShortFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ AbsoluteDateShortFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteDateShortFormatterPipe, name: "absoluteShortDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteDateShortFormatterPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'absoluteShortDate' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
-class AbsoluteShortDateTimeFormatterPipe {
-    constructor(adapter, formatter) {
-        this.adapter = adapter;
-        this.formatter = formatter;
-    }
-    transform(value, options) {
-        const date = this.adapter.deserialize(value);
-        return date ? this.formatter.absoluteShortDateTime(date, options) : '';
-    }
-}
-/** @nocollapse */ AbsoluteShortDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ AbsoluteShortDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, name: "absoluteShortDateTime" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: AbsoluteShortDateTimeFormatterPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'absoluteShortDateTime' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
-class RelativeDateFormatterPipe {
-    constructor(adapter, formatter) {
-        this.adapter = adapter;
-        this.formatter = formatter;
-    }
-    transform(value) {
-        const date = this.adapter.deserialize(value);
-        return date ? this.formatter.relativeLongDate(date) : '';
-    }
-}
-/** @nocollapse */ RelativeDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RelativeDateFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ RelativeDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RelativeDateFormatterPipe, name: "relativeLongDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RelativeDateFormatterPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'relativeLongDate' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
-class RelativeDateTimeFormatterPipe {
-    constructor(adapter, formatter) {
-        this.adapter = adapter;
-        this.formatter = formatter;
-    }
-    transform(value, options) {
-        const date = this.adapter.deserialize(value);
-        return date ? this.formatter.relativeLongDateTime(date, options) : '';
+    transform(value, options) {
+        const date = this.adapter.deserialize(value);
+        return date ? this.formatter.relativeLongDateTime(date, options) : '';
     }
 }
-/** @nocollapse */ RelativeDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RelativeDateTimeFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ RelativeDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RelativeDateTimeFormatterPipe, name: "relativeLongDateTime" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RelativeDateTimeFormatterPipe, decorators: [{
+/** @nocollapse */ RelativeDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RelativeDateTimeFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ RelativeDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: RelativeDateTimeFormatterPipe, name: "relativeLongDateTime" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RelativeDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'relativeLongDateTime' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
 class RelativeShortDateFormatterPipe {
     constructor(adapter, formatter) {
         this.adapter = adapter;
@@ -1511,12 +408,12 @@ class RelativeShortDateFormatterPipe {
         return date ? this.formatter.relativeShortDate(date) : '';
     }
 }
-/** @nocollapse */ RelativeShortDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RelativeShortDateFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ RelativeShortDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RelativeShortDateFormatterPipe, name: "relativeShortDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RelativeShortDateFormatterPipe, decorators: [{
+/** @nocollapse */ RelativeShortDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RelativeShortDateFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ RelativeShortDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: RelativeShortDateFormatterPipe, name: "relativeShortDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RelativeShortDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'relativeShortDate' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
 class RelativeShortDateTimeFormatterPipe {
     constructor(adapter, formatter) {
         this.adapter = adapter;
@@ -1527,12 +424,12 @@ class RelativeShortDateTimeFormatterPipe {
         return date ? this.formatter.relativeShortDateTime(date, options) : '';
     }
 }
-/** @nocollapse */ RelativeShortDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ RelativeShortDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, name: "relativeShortDateTime" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, decorators: [{
+/** @nocollapse */ RelativeShortDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ RelativeShortDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, name: "relativeShortDateTime" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RelativeShortDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'relativeShortDateTime' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
 class RangeDateFormatterPipe {
     constructor(adapter, formatter) {
         this.adapter = adapter;
@@ -1544,12 +441,12 @@ class RangeDateFormatterPipe {
         return this.formatter.rangeLongDate(date1, date2);
     }
 }
-/** @nocollapse */ RangeDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RangeDateFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ RangeDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RangeDateFormatterPipe, name: "rangeLongDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RangeDateFormatterPipe, decorators: [{
+/** @nocollapse */ RangeDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RangeDateFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ RangeDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: RangeDateFormatterPipe, name: "rangeLongDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RangeDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rangeLongDate' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
 class RangeShortDateFormatterPipe {
     constructor(adapter, formatter) {
         this.adapter = adapter;
@@ -1561,12 +458,12 @@ class RangeShortDateFormatterPipe {
         return this.formatter.rangeShortDate(date1, date2);
     }
 }
-/** @nocollapse */ RangeShortDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RangeShortDateFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ RangeShortDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RangeShortDateFormatterPipe, name: "rangeShortDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RangeShortDateFormatterPipe, decorators: [{
+/** @nocollapse */ RangeShortDateFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RangeShortDateFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ RangeShortDateFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: RangeShortDateFormatterPipe, name: "rangeShortDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RangeShortDateFormatterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rangeShortDate' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
 class RangeDateTimeFormatterPipe {
     constructor(adapter, formatter) {
         this.adapter = adapter;
@@ -1578,12 +475,12 @@ class RangeDateTimeFormatterPipe {
         return this.formatter.rangeLongDateTime(date1, date2, options);
     }
 }
-/** @nocollapse */ RangeDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RangeDateTimeFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ RangeDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RangeDateTimeFormatterPipe, name: "rangeLongDateTime" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RangeDateTimeFormatterPipe, decorators: [{
+/** @nocollapse */ RangeDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RangeDateTimeFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ RangeDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: RangeDateTimeFormatterPipe, name: "rangeLongDateTime" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RangeDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rangeLongDateTime' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
 class RangeMiddleDateTimeFormatterPipe {
     constructor(adapter, formatter) {
         this.adapter = adapter;
@@ -1595,12 +492,12 @@ class RangeMiddleDateTimeFormatterPipe {
         return this.formatter.rangeMiddleDateTime(date1, date2, options);
     }
 }
-/** @nocollapse */ RangeMiddleDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ RangeMiddleDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, name: "rangeMiddleDateTime" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, decorators: [{
+/** @nocollapse */ RangeMiddleDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ RangeMiddleDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, name: "rangeMiddleDateTime" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RangeMiddleDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rangeMiddleDateTime' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
 class RangeShortDateTimeFormatterPipe {
     constructor(adapter, formatter) {
         this.adapter = adapter;
@@ -1612,12 +509,12 @@ class RangeShortDateTimeFormatterPipe {
         return this.formatter.rangeShortDateTime(date1, date2, options);
     }
 }
-/** @nocollapse */ RangeShortDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RangeShortDateTimeFormatterPipe, deps: [{ token: i1.DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ RangeShortDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: RangeShortDateTimeFormatterPipe, name: "rangeShortDateTime" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: RangeShortDateTimeFormatterPipe, decorators: [{
+/** @nocollapse */ RangeShortDateTimeFormatterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RangeShortDateTimeFormatterPipe, deps: [{ token: DateAdapter }, { token: DateFormatter }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ RangeShortDateTimeFormatterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: RangeShortDateTimeFormatterPipe, name: "rangeShortDateTime" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: RangeShortDateTimeFormatterPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rangeShortDateTime' }]
-        }], ctorParameters: function () { return [{ type: i1.DateAdapter }, { type: DateFormatter }]; } });
+        }], ctorParameters: function () { return [{ type: DateAdapter }, { type: DateFormatter }]; } });
 
 /* tslint:disable:naming-convention */
 const MC_LOCALE_ID = new InjectionToken('McLocaleId');
@@ -1714,10 +611,10 @@ class McDecimalPipe {
         }
     }
 }
-/** @nocollapse */ McDecimalPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McDecimalPipe, deps: [{ token: MC_LOCALE_ID, optional: true }, { token: MC_NUMBER_FORMATTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ McDecimalPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: McDecimalPipe, name: "mcNumber" });
-/** @nocollapse */ McDecimalPipe.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McDecimalPipe, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McDecimalPipe, decorators: [{
+/** @nocollapse */ McDecimalPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McDecimalPipe, deps: [{ token: MC_LOCALE_ID, optional: true }, { token: MC_NUMBER_FORMATTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ McDecimalPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: McDecimalPipe, name: "mcNumber" });
+/** @nocollapse */ McDecimalPipe.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McDecimalPipe, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McDecimalPipe, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }, {
@@ -1739,8 +636,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
 
 class McFormattersModule {
 }
-/** @nocollapse */ McFormattersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McFormattersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ McFormattersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: McFormattersModule, declarations: [McDecimalPipe,
+/** @nocollapse */ McFormattersModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McFormattersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McFormattersModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: McFormattersModule, declarations: [McDecimalPipe,
         AbsoluteDateFormatterPipe,
         AbsoluteDateTimeFormatterPipe,
         AbsoluteDateShortFormatterPipe,
@@ -1767,8 +664,8 @@ class McFormattersModule {
         RangeDateTimeFormatterPipe,
         RangeShortDateTimeFormatterPipe,
         RangeMiddleDateTimeFormatterPipe] });
-/** @nocollapse */ McFormattersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McFormattersModule, providers: [DateFormatter] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McFormattersModule, decorators: [{
+/** @nocollapse */ McFormattersModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McFormattersModule, providers: [DateFormatter] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McFormattersModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1807,9 +704,90 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-const validationTooltipShowDelay = 10;
-const validationTooltipHideDelay = 3000;
-const MC_VALIDATION = new InjectionToken('McUseValidation', { factory: () => ({ useValidation: true }) });
+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 */ McFormElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McFormElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McFormElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", 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: "15.2.2", 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 */ McForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McForm.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", 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: "15.2.2", 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 */ McFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: McFormsModule, declarations: [McForm,
+        McFormElement], exports: [McForm,
+        McFormElement] });
+/** @nocollapse */ McFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McFormsModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McFormsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        McForm,
+                        McFormElement
+                    ],
+                    declarations: [
+                        McForm,
+                        McFormElement
+                    ]
+                }]
+        }] });
 
 function escapeRegExp(value) {
     if (value) {
@@ -1825,19 +803,19 @@ class McHighlightPipe {
         return value.replace(new RegExp(`(${escapeRegExp(args)})`, 'gi'), '<mark class="mc-highlight">$1</mark>');
     }
 }
-/** @nocollapse */ McHighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-/** @nocollapse */ McHighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: McHighlightPipe, name: "mcHighlight" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McHighlightPipe, decorators: [{
+/** @nocollapse */ McHighlightPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McHighlightPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ McHighlightPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: McHighlightPipe, name: "mcHighlight" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McHighlightPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'mcHighlight' }]
         }] });
 
 class McHighlightModule {
 }
-/** @nocollapse */ McHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ McHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: McHighlightModule, declarations: [McHighlightPipe], imports: [CommonModule], exports: [McHighlightPipe] });
-/** @nocollapse */ McHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McHighlightModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McHighlightModule, decorators: [{
+/** @nocollapse */ McHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: McHighlightModule, declarations: [McHighlightPipe], imports: [CommonModule], exports: [McHighlightPipe] });
+/** @nocollapse */ McHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McHighlightModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McHighlightModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],
@@ -1846,371 +824,104 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-const selectEvents = 'selectEvents';
+/** InjectionToken that can be used to specify the global label options. */
+const MC_LABEL_GLOBAL_OPTIONS = new InjectionToken('mc-label-global-options');
 
 /**
- * Returns an exception to be thrown when attempting to change a select's `multiple` option
- * after initialization.
- * @docs-private
+ * 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.
  */
-function getMcSelectDynamicMultipleError() {
-    return Error('Cannot change `multiple` mode of select after initialization.');
+class McLine {
 }
+/** @nocollapse */ McLine.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McLine, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McLine.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: McLine, selector: "[mc-line], [mcLine]", host: { classAttribute: "mc-line" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McLine, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mc-line], [mcLine]',
+                    host: { class: 'mc-line' }
+                }]
+        }] });
 /**
- * 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.
+ * Helper that takes a query list of lines and sets the correct class on the host.
  * @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'
+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);
+        });
     }
-};
-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);
+    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);
+        }
     }
-    return result;
-}
-function baseValues(object, props) {
-    return arrayMap(props, (key) => object[key]);
 }
-function objectValues(object) {
-    return object === null ? [] : baseValues(object, Object.keys(object));
+class McLineModule {
 }
+/** @nocollapse */ McLineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McLineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McLineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: McLineModule, declarations: [McLine], exports: [McLine] });
+/** @nocollapse */ McLineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McLineModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McLineModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    exports: [McLine],
+                    declarations: [McLine]
+                }]
+        }] });
 
-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 = {}));
-
+/** @docs-private */
+class McOptgroupBase {
+}
+// tslint:disable-next-line: naming-convention
+const McOptgroupMixinBase = mixinDisabled(McOptgroupBase);
+let uniqueOptgroupIdCounter = 0;
 /**
- * The following are all the animations for the mc-select component, with each
- * const containing the metadata for one animation.
- *
+ * Component that is used to group instances of `mc-option`.
  */
-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 = {}));
+class McOptgroup extends McOptgroupMixinBase {
+    constructor() {
+        super(...arguments);
+        /** Unique id for the underlying label. */
+        this.labelId = `mc-optgroup-label-${uniqueOptgroupIdCounter++}`;
+    }
+}
+/** @nocollapse */ McOptgroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McOptgroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McOptgroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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, mc-timezone-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: "15.2.2", 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, mc-timezone-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
+            }] } });
 
 // Boilerplate for applying mixins to McPseudoCheckbox.
 /** @docs-private */
@@ -2241,111 +952,22 @@ class McPseudoCheckbox extends McPseudoCheckboxMixinBase {
         this.disabled = false;
     }
 }
-/** @nocollapse */ McPseudoCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McPseudoCheckbox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McPseudoCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: { color: "color", state: "state", disabled: "disabled" }, host: { properties: { "class.mc-indeterminate": "state === \"indeterminate\"", "class.mc-checked": "state === \"checked\"", "class.mc-disabled": "disabled" }, classAttribute: "mc-pseudo-checkbox" }, usesInheritance: true, ngImport: i0, template: "<i class=\"mc-checkbox-checkmark mc mc-check_16\"></i>\n<i class=\"mc-checkbox-mixedmark mc mc-minus_16\"></i>\n", styles: [".mc-pseudo-checkbox{position:relative;display:inline-block;box-sizing:border-box;width:16px;width:var(--mc-checkbox-size-width, 16px);height:16px;height:var(--mc-checkbox-size-width, 16px);border-radius:3px;border-width:1px;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.mc-pseudo-checkbox .mc-checkbox-checkmark,.mc-pseudo-checkbox .mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;top:calc(-1 * var(--mc-checkbox-size-border-width, 1px));left:-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: "14.2.12", ngImport: i0, type: McPseudoCheckbox, decorators: [{
+/** @nocollapse */ McPseudoCheckbox.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McPseudoCheckbox, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McPseudoCheckbox.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", type: McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: { color: "color", state: "state", disabled: "disabled" }, host: { properties: { "class.mc-indeterminate": "state === \"indeterminate\"", "class.mc-checked": "state === \"checked\"", "class.mc-disabled": "disabled" }, classAttribute: "mc-pseudo-checkbox" }, usesInheritance: true, 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: "15.2.2", 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, inputs: ['color'], 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:16px;width:var(--mc-checkbox-size-width, 16px);height:16px;height:var(--mc-checkbox-size-width, 16px);border-radius:3px;border-width:1px;border-width:var(--mc-checkbox-size-border-width, 1px);border-style:solid;cursor:pointer;vertical-align:middle;flex-shrink:0}.mc-pseudo-checkbox .mc-checkbox-checkmark,.mc-pseudo-checkbox .mc-checkbox-mixedmark{display:none;position:absolute;top:-1px;top:calc(-1 * var(--mc-checkbox-size-border-width, 1px));left:-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"] }]
+                    }, preserveWhitespaces: false, inputs: ['color'], 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"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { state: [{
                 type: Input
             }], disabled: [{
                 type: Input
             }] } });
 
-class McPseudoCheckboxModule {
-}
-/** @nocollapse */ McPseudoCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McPseudoCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ McPseudoCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: McPseudoCheckboxModule, declarations: [McPseudoCheckbox], imports: [CommonModule], exports: [McPseudoCheckbox] });
-/** @nocollapse */ McPseudoCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McPseudoCheckboxModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", 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 */ McMeasureScrollbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McMeasureScrollbarService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-/** @nocollapse */ McMeasureScrollbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McMeasureScrollbarService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", 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 */ McOptgroup.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McOptgroup, deps: null, target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McOptgroup.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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, mc-timezone-option, ng-container\"></ng-content>\n", styles: [".mc-optgroup-label{padding-left:17px;padding-left:var(--mc-optgroup-size-padding-left, 17px);-webkit-user-select:none;user-select:none;cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", 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, mc-timezone-option, ng-container\"></ng-content>\n", styles: [".mc-optgroup-label{padding-left:17px;padding-left:var(--mc-optgroup-size-padding-left, 17px);-webkit-user-select:none;user-select:none;cursor:default}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }] } });
-
 /**
  * Option IDs need to be unique across components, so this counter exists outside of
  * the component definition.
@@ -2520,9 +1142,9 @@ class McOption {
         this.onSelectionChange.emit(new McOptionSelectionChange(this, isUserInput));
     }
 }
-/** @nocollapse */ McOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MC_OPTION_PARENT_COMPONENT, optional: true }, { token: McOptgroup, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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" }, viewQueries: [{ propertyName: "textElement", first: true, predicate: ["mcTextElement"], descendants: true }], 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 #mcTextElement class=\"mc-option-text\"><ng-content></ng-content></span>\n\n<div class=\"mc-option-overlay\"></div>\n", styles: [".mc-option{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:32px;height:var(--mc-option-size-height, 32px);border:2px solid transparent;border:var(--mc-option-size-border-width, 2px) solid transparent;cursor:pointer;outline:none;padding-left:12px;padding-left:var(--mc-option-size-horizontal-padding, 12px);padding-right:12px;padding-right:var(--mc-option-size-horizontal-padding, 12px);-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:-2px;top:calc(-1 * var(--mc-option-size-border-width, 2px));left:-2px;left:calc(-1 * var(--mc-option-size-border-width, 2px));right:-2px;right:calc(-1 * var(--mc-option-size-border-width, 2px));bottom:-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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["color", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McOption, decorators: [{
+/** @nocollapse */ McOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: MC_OPTION_PARENT_COMPONENT, optional: true }, { token: McOptgroup, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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" }, viewQueries: [{ propertyName: "textElement", first: true, predicate: ["mcTextElement"], descendants: true }], 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 #mcTextElement 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, 12px);padding-right:var(--mc-option-size-horizontal-padding, 12px);-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"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["color", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McOption, decorators: [{
             type: Component,
             args: [{ selector: 'mc-option', exportAs: 'mcOption', host: {
                         '[attr.tabindex]': 'getTabIndex()',
@@ -2534,7 +1156,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         '[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 #mcTextElement class=\"mc-option-text\"><ng-content></ng-content></span>\n\n<div class=\"mc-option-overlay\"></div>\n", styles: [".mc-option{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:32px;height:var(--mc-option-size-height, 32px);border:2px solid transparent;border:var(--mc-option-size-border-width, 2px) solid transparent;cursor:pointer;outline:none;padding-left:12px;padding-left:var(--mc-option-size-horizontal-padding, 12px);padding-right:12px;padding-right:var(--mc-option-size-horizontal-padding, 12px);-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:-2px;top:calc(-1 * var(--mc-option-size-border-width, 2px));left:-2px;left:calc(-1 * var(--mc-option-size-border-width, 2px));right:-2px;right:calc(-1 * var(--mc-option-size-border-width, 2px));bottom:-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"] }]
+                    }, 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 #mcTextElement 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, 12px);padding-right:var(--mc-option-size-horizontal-padding, 12px);-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
@@ -2678,14 +1300,14 @@ class McOptionActionComponent extends McOptionActionMixinBase {
         setTimeout(() => this.option.tooltipTrigger.disabled = false);
     }
 }
-/** @nocollapse */ McOptionActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McOptionActionComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: MC_OPTION_ACTION_PARENT }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ McOptionActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", 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: `
+/** @nocollapse */ McOptionActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McOptionActionComponent, deps: [{ token: i0.ElementRef }, { token: i1$1.FocusMonitor }, { token: MC_OPTION_ACTION_PARENT }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ McOptionActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.2", 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:content-box;box-sizing:initial;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"], dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McOptionActionComponent, decorators: [{
+    `, 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"], dependencies: [{ kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McOptionActionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mc-option-action', exportAs: 'mcOptionAction', template: `
         <ng-container [ngSwitch]="!!customIcon">
@@ -2701,7 +1323,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                         '(blur)': 'onBlur()',
                         '(click)': 'onClick($event)',
                         '(keydown)': 'onKeyDown($event)'
-                    }, inputs: ['disabled'], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mc-option-action{box-sizing:content-box;box-sizing:initial;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"] }]
+                    }, 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,
@@ -2712,12 +1334,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 args: ['customIcon']
             }] } });
 
+var MultipleMode;
+(function (MultipleMode) {
+    MultipleMode["CHECKBOX"] = "checkbox";
+    MultipleMode["KEYBOARD"] = "keyboard";
+})(MultipleMode || (MultipleMode = {}));
+
+class McPseudoCheckboxModule {
+}
+/** @nocollapse */ McPseudoCheckboxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McPseudoCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McPseudoCheckboxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: McPseudoCheckboxModule, declarations: [McPseudoCheckbox], imports: [CommonModule], exports: [McPseudoCheckbox] });
+/** @nocollapse */ McPseudoCheckboxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McPseudoCheckboxModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McPseudoCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    exports: [McPseudoCheckbox],
+                    declarations: [McPseudoCheckbox]
+                }]
+        }] });
+
 class McOptionModule {
 }
-/** @nocollapse */ McOptionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ McOptionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: McOptionModule, declarations: [McOption, McOptgroup, McOptionActionComponent], imports: [CommonModule, McPseudoCheckboxModule], exports: [McOption, McOptgroup, McOptionActionComponent] });
-/** @nocollapse */ McOptionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McOptionModule, imports: [CommonModule, McPseudoCheckboxModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McOptionModule, decorators: [{
+/** @nocollapse */ McOptionModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McOptionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ McOptionModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.2", ngImport: i0, type: McOptionModule, declarations: [McOption, McOptgroup, McOptionActionComponent], imports: [CommonModule, McPseudoCheckboxModule], exports: [McOption, McOptgroup, McOptionActionComponent] });
+/** @nocollapse */ McOptionModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McOptionModule, imports: [CommonModule, McPseudoCheckboxModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McOptionModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, McPseudoCheckboxModule],
@@ -2726,90 +1368,249 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImpo
                 }]
         }] });
 
-class McFormElement {
-    constructor(element) {
-        this.element = element;
-        this.margin = false;
-        this.isRow = false;
-        this.isFieldSet = false;
-        this.hasLegend = false;
-        this.isHorizontal = false;
+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'
     }
-    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');
-        }
+};
+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;
 }
-/** @nocollapse */ McFormElement.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McFormElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ McFormElement.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", 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: "14.2.12", 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);
-        });
-    }
+function baseValues(object, props) {
+    return arrayMap(props, (key) => object[key]);
 }
-/** @nocollapse */ McForm.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McForm, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ McForm.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", 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: "14.2.12", 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 {
+function objectValues(object) {
+    return object === null ? [] : baseValues(object, Object.keys(object));
 }
-/** @nocollapse */ McFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ McFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.12", ngImport: i0, type: McFormsModule, declarations: [McForm,
-        McFormElement], exports: [McForm,
-        McFormElement] });
-/** @nocollapse */ McFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McFormsModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McFormsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        McForm,
-                        McFormElement
-                    ],
-                    declarations: [
-                        McForm,
-                        McFormElement
-                    ]
-                }]
-        }] });
 
 var PopUpPlacements;
 (function (PopUpPlacements) {
@@ -2925,9 +1726,9 @@ class McPopUp {
         }
     }
 }
-/** @nocollapse */ McPopUp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McPopUp, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ McPopUp.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: McPopUp, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McPopUp, decorators: [{
+/** @nocollapse */ McPopUp.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McPopUp, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McPopUp.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: McPopUp, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McPopUp, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; } });
 
@@ -3156,15 +1957,126 @@ class McPopUpTrigger {
         });
     }
 }
-/** @nocollapse */ McPopUpTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McPopUpTrigger, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ McPopUpTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.12", type: McPopUpTrigger, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: McPopUpTrigger, decorators: [{
+/** @nocollapse */ McPopUpTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McPopUpTrigger, deps: "invalid", target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ McPopUpTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.2", type: McPopUpTrigger, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", 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 }]; } });
 
+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
+};
+
+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 */ McMeasureScrollbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McMeasureScrollbarService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ McMeasureScrollbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McMeasureScrollbarService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.2", ngImport: i0, type: McMeasureScrollbarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }];
+    } });
+
+function isBoolean(val) { return typeof val === 'boolean'; }
+function toBoolean(value) {
+    return value != null && `${value}` !== 'false';
+}
+
+const validationTooltipShowDelay = 10;
+const validationTooltipHideDelay = 3000;
+const MC_VALIDATION = new InjectionToken('McUseValidation', { factory: () => ({ useValidation: true }) });
+
+const VERSION = new Version('15.0.0+sha-e73ad01');
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterPipe, 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_NUMBER_FORMATTER_DEFAULT_OPTIONS, MC_NUMBER_FORMATTER_OPTIONS, 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, McPseudoCheckboxBase, McPseudoCheckboxMixinBase, 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, RangeDateFormatterPipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterPipe, 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, escapeRegExp, fadeAnimation, getMcSelectDynamicMultipleError, getMcSelectNonArrayValueError, getMcSelectNonFunctionValueError, getOptionScrollPosition, isBoolean, mcSelectAnimations, mcSelectScrollStrategyProviderFactory, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, selectEvents, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay };
+export { AbsoluteDateFormatterPipe, AbsoluteDateShortFormatterPipe, AbsoluteDateTimeFormatterPipe, AbsoluteShortDateTimeFormatterPipe, AnimationCurves, BOTTOM_LEFT_POSITION_PRIORITY, BOTTOM_POSITION_PRIORITY, BOTTOM_RIGHT_POSITION_PRIORITY, DEFAULT_MC_LOCALE_ID, DateAdapter, DateFormatter, EXTENDED_OVERLAY_POSITIONS, ErrorStateMatcher, LEFT_BOTTOM_POSITION_PRIORITY, LEFT_POSITION_PRIORITY, LEFT_TOP_POSITION_PRIORITY, MC_DATE_FORMATS, MC_DATE_LOCALE, MC_DATE_LOCALE_FACTORY, MC_LABEL_GLOBAL_OPTIONS, MC_LOCALE_ID, MC_NUMBER_FORMATTER_DEFAULT_OPTIONS, MC_NUMBER_FORMATTER_OPTIONS, 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, McPseudoCheckboxBase, McPseudoCheckboxMixinBase, 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, RangeDateFormatterPipe, RangeDateTimeFormatterPipe, RangeMiddleDateTimeFormatterPipe, RangeShortDateFormatterPipe, RangeShortDateTimeFormatterPipe, RelativeDateFormatterPipe, RelativeDateTimeFormatterPipe, RelativeShortDateFormatterPipe, RelativeShortDateTimeFormatterPipe, 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, escapeRegExp, fadeAnimation, getMcSelectDynamicMultipleError, getMcSelectNonArrayValueError, getMcSelectNonFunctionValueError, getOptionScrollPosition, isBoolean, mcSelectAnimations, mcSelectScrollStrategyProviderFactory, mixinColor, mixinDisabled, mixinErrorState, mixinTabIndex, selectEvents, toBoolean, validationTooltipHideDelay, validationTooltipShowDelay };
 //# sourceMappingURL=ptsecurity-mosaic-core.mjs.map