@ng-matero/extensions 13.0.3 → 13.2.1

package/_all-theme.scss

@@ -2,6 +2,7 @@
 @use './alert/alert-theme';
 @use './colorpicker/colorpicker-theme';
 @use './datetimepicker/datetimepicker-theme';
+@use './drawer/drawer-theme';
 @use './grid/grid-theme';
 @use './loader/loader-theme';
 @use './popover/popover-theme';
@@ -18,6 +19,7 @@
   @include alert-theme.theme($theme);
   @include colorpicker-theme.theme($theme);
   @include datetimepicker-theme.theme($theme);
+  @include drawer-theme.theme($theme);
   @include grid-theme.theme($theme);
   @include loader-theme.theme($theme);
   @include popover-theme.theme($theme);

package/_index.scss

@@ -5,6 +5,7 @@
 @forward './alert/alert-theme' as alert-* show alert-theme;
 @forward './colorpicker/colorpicker-theme' as colorpicker-* show colorpicker-theme;
 @forward './datetimepicker/datetimepicker-theme' as datetimepicker-* show datetimepicker-theme;
+@forward './drawer/drawer-theme' as drawer-* show drawer-theme;
 @forward './grid/grid-theme' as grid-* show grid-theme;
 @forward './loader/loader-theme' as loader-* show loader-theme;
 @forward './popover/popover-theme' as popover-* show popover-theme;

package/_theming.scss

@@ -5,6 +5,7 @@
 @forward './alert/alert-theme.import';
 @forward './colorpicker/colorpicker-theme.import';
 @forward './datetimepicker/datetimepicker-theme.import';
+@forward './drawer/drawer-theme.import';
 @forward './grid/grid-theme.import';
 @forward './loader/loader-theme.import';
 @forward './popover/popover-theme.import';

package/button/button-loading.directive.d.ts

@@ -1,14 +1,12 @@
-import { ComponentFactoryResolver, OnChanges, Renderer2, SimpleChanges, ViewContainerRef } from '@angular/core';
+import { OnChanges, Renderer2, SimpleChanges, ViewContainerRef } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 import { ThemePalette } from '@angular/material/core';
 import { MatButton } from '@angular/material/button';
 import * as i0 from "@angular/core";
 export declare class MatButtonLoadingDirective implements OnChanges {
     private matButton;
-    private componentFactoryResolver;
     private viewContainerRef;
     private renderer;
-    private spinnerFactory;
     private spinner;
     get loading(): boolean;
     set loading(value: boolean);
@@ -17,7 +15,7 @@ export declare class MatButtonLoadingDirective implements OnChanges {
     set disabled(value: boolean);
     private _disabled;
     color: ThemePalette;
-    constructor(matButton: MatButton, componentFactoryResolver: ComponentFactoryResolver, viewContainerRef: ViewContainerRef, renderer: Renderer2);
+    constructor(matButton: MatButton, viewContainerRef: ViewContainerRef, renderer: Renderer2);
     ngOnChanges(changes: SimpleChanges): void;
     private createSpinner;
     private destroySpinner;

package/checkbox-group/checkbox-group.component.scss

@@ -0,0 +1,12 @@
+.mtx-checkbox-group {
+  display: block;
+
+  .mat-checkbox {
+    margin-right: 16px;
+
+    [dir='rtl'] & {
+      margin-right: auto;
+      margin-left: 16px;
+    }
+  }
+}

package/datetimepicker/_datetimepicker-theme.scss

@@ -8,7 +8,7 @@
 $selected-today-box-shadow-width: 1px;
 $calendar-body-font-size: 13px !default;
 $calendar-weekday-table-font-size: 11px !default;
-$calendar-header-font-size: 30px !default;
+$calendar-header-font-size: 28px !default;
 $clock-font-size: 14px !default;
 
 @mixin color($config-or-theme) {
@@ -167,7 +167,7 @@ $clock-font-size: 14px !default;
   }
 
   .mtx-calendar-header-ampm-container {
-    font-size: .75em;
+    font-size: .65em;
   }
 
   .mtx-clock {

package/datetimepicker/calendar.scss

@@ -44,16 +44,19 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 }
 
 .mtx-calendar-header-year {
-  height: 32px;
-  line-height: 32px;
+  line-height: 24px;
 
   > * {
     vertical-align: middle;
   }
+
+  + .mtx-calendar-header-date-time {
+    margin-top: 4px;
+  }
 }
 
 .mtx-calendar-header-date-time {
-  line-height: 34px;
+  line-height: 36px;
 
   [mode='landscape'] & {
     white-space: normal;
@@ -77,8 +80,7 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
 }
 
 .mtx-calendar-header-time {
-  display: inline-block;
-  padding-left: 8px;
+  display: inline-flex;
 
   &:not(.active) {
     opacity: .6;
@@ -91,16 +93,42 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
     }
   }
 
-  [dir='rtl'] & {
-    padding-right: 8px;
+  [mode='landscape'] & {
+    display: flex;
+    flex-direction: column;
   }
+}
+
+.mtx-calendar-header-hour-minute-container {
+  padding: 0 8px;
 
   [mode='landscape'] & {
-    display: block;
     padding: 0;
   }
 }
 
+.mtx-calendar-header-hour-minute-separator {
+  display: inline-block;
+  width: 8px;
+  text-align: center;
+}
+
+.mtx-calendar-header-ampm-container {
+  display: inline-flex;
+  flex-direction: column;
+  line-height: 18px;
+
+  [mode='landscape'] & {
+    flex-direction: row;
+  }
+}
+
+.mtx-calendar-header-ampm {
+  [mode='landscape'] & {
+    padding: 4px;
+  }
+}
+
 .mtx-calendar-content {
   width: 100%;
   padding: $calendar-padding;
@@ -176,8 +204,20 @@ $calendar-next-icon-transform: translateX(-2px) rotate(45deg);
     }
 
     .mtx-calendar-header-time {
-      display: block;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .mtx-calendar-header-hour-minute-container {
       padding: 0;
     }
+
+    .mtx-calendar-header-ampm-container {
+      flex-direction: row;
+    }
+
+    .mtx-calendar-header-ampm {
+      padding: 4px;
+    }
   }
 }

package/datetimepicker/datetimepicker-content.scss

@@ -1,7 +1,7 @@
 $calendar-padding: 8px;
 $non-touch-calendar-cell-size: 40px;
 $non-touch-calendar-portrait-width: $non-touch-calendar-cell-size * 7 + $calendar-padding * 2;
-$non-touch-calendar-portrait-height: 404px;
+$non-touch-calendar-portrait-height: 424px;
 $non-touch-calendar-landscape-width: 446px;
 $non-touch-calendar-landscape-height: 328px;
 

package/dialog/dialog.component.scss

@@ -0,0 +1,27 @@
+.mtx-dialog-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0 0 20px;
+  font: 500 20px/32px Roboto, 'Helvetica Neue', sans-serif;
+  letter-spacing: normal;
+}
+
+.mtx-dialog-content {
+  display: block;
+  max-height: 65vh;
+  padding: 0 24px;
+  margin: 0 -24px;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mtx-dialog-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  min-height: 52px;
+  padding: 8px 0;
+  margin-bottom: -24px;
+}

package/drawer/_drawer-theme.import.scss

@@ -0,0 +1,2 @@
+@forward 'drawer-theme' hide color, theme, typography;
+@forward 'drawer-theme' as mtx-drawer-* hide mtx-drawer-density;

package/drawer/_drawer-theme.scss

@@ -0,0 +1,40 @@
+@use 'sass:map';
+@use '../core/theming/theming';
+@use '../core/theming/palette';
+@use '../core/style/private';
+
+@mixin color($config-or-theme) {
+  $config: theming.get-color-config($config-or-theme);
+  $background: map.get($config, background);
+  $foreground: map.get($config, foreground);
+
+  .mtx-drawer-container {
+    @include private.private-theme-elevation(16, $config);
+
+    background: theming.get-color-from-palette($background, dialog);
+    color: theming.get-color-from-palette($foreground, text);
+  }
+}
+
+@mixin typography($config-or-theme) {}
+
+@mixin _density($config-or-theme) {}
+
+@mixin theme($theme-or-color-config) {
+  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+  @include theming.private-check-duplicate-theme-styles($theme, 'mtx-drawer') {
+    $color: theming.get-color-config($theme);
+    $density: theming.get-density-config($theme);
+    $typography: theming.get-typography-config($theme);
+
+    @if $color != null {
+      @include color($color);
+    }
+    @if $density != null {
+      @include _density($density);
+    }
+    @if $typography != null {
+      @include typography($typography);
+    }
+  }
+}

package/drawer/drawer-animation.d.ts

@@ -0,0 +1,5 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+/** Animations used by the drawer. */
+export declare const mtxDrawerAnimations: {
+    readonly drawerState: AnimationTriggerMetadata;
+};

package/drawer/drawer-config.d.ts

@@ -0,0 +1,53 @@
+import { Direction } from '@angular/cdk/bidi';
+import { ScrollStrategy } from '@angular/cdk/overlay';
+import { ViewContainerRef } from '@angular/core';
+/** Options for where to set focus to automatically on dialog open */
+export declare type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';
+/** Possible overrides for a drawer's position. */
+export declare type DrawerPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Configuration used when opening a drawer.
+ */
+export declare class MtxDrawerConfig<D = any> {
+    /** The view container to place the overlay for the drawer into. */
+    viewContainerRef?: ViewContainerRef;
+    /** Extra CSS classes to be added to the drawer container. */
+    panelClass?: string | string[];
+    /** Text layout direction for the drawer. */
+    direction?: Direction;
+    /** Data being injected into the child component. */
+    data?: D | null;
+    /** Whether the drawer has a backdrop. */
+    hasBackdrop?: boolean;
+    /** Custom class for the backdrop. */
+    backdropClass?: string;
+    /** Whether the user can use escape or clicking outside to close the drawer. */
+    disableClose?: boolean;
+    /** Aria label to assign to the drawer element. */
+    ariaLabel?: string | null;
+    /**
+     * Whether the drawer should close when the user goes backwards/forwards in history.
+     * Note that this usually doesn't include clicking on links (unless the user is using
+     * the `HashLocationStrategy`).
+     */
+    closeOnNavigation?: boolean;
+    /**
+     * Where the drawer should focus on open.
+     * @breaking-change 14.0.0 Remove boolean option from autoFocus. Use string or
+     * AutoFocusTarget instead.
+     */
+    autoFocus?: AutoFocusTarget | string | boolean;
+    /**
+     * Whether the drawer should restore focus to the
+     * previously-focused element, after it's closed.
+     */
+    restoreFocus?: boolean;
+    /** Scroll strategy to be used for the drawer. */
+    scrollStrategy?: ScrollStrategy;
+    /** Position of the drawer */
+    position?: DrawerPosition;
+    /** Width of the drawer. */
+    width?: string;
+    /** Height of the drawer. */
+    height?: string;
+}

package/drawer/drawer-container.d.ts

@@ -0,0 +1,83 @@
+import { AnimationEvent } from '@angular/animations';
+import { FocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, DomPortal, TemplatePortal } from '@angular/cdk/portal';
+import { ChangeDetectorRef, ComponentRef, ElementRef, EmbeddedViewRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
+import { MtxDrawerConfig } from './drawer-config';
+import * as i0 from "@angular/core";
+/**
+ * Internal component that wraps user-provided drawer content.
+ * @docs-private
+ */
+export declare class MtxDrawerContainer extends BasePortalOutlet implements OnDestroy {
+    private _elementRef;
+    private _changeDetectorRef;
+    private _focusTrapFactory;
+    private readonly _interactivityChecker;
+    private readonly _ngZone;
+    /** The drawer configuration. */
+    drawerConfig: MtxDrawerConfig;
+    private _breakpointSubscription;
+    /** The portal outlet inside of this container into which the content will be loaded. */
+    _portalOutlet: CdkPortalOutlet;
+    /** The state of the drawer animations. */
+    _animationState: 'void' | 'visible' | 'hidden';
+    /** Emits whenever the state of the animation changes. */
+    _animationStateChanged: EventEmitter<AnimationEvent>;
+    /** The class that traps and manages focus within the drawer. */
+    private _focusTrap;
+    /** Element that was focused before the drawer was opened. */
+    private _elementFocusedBeforeOpened;
+    /** Server-side rendering-compatible reference to the global document object. */
+    private _document;
+    /** Whether the component has been destroyed. */
+    private _destroyed;
+    get drawerPosition(): string;
+    get drawerWidth(): string | undefined;
+    get drawerHeight(): string | undefined;
+    constructor(_elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _focusTrapFactory: FocusTrapFactory, _interactivityChecker: InteractivityChecker, _ngZone: NgZone, breakpointObserver: BreakpointObserver, document: any, 
+    /** The drawer configuration. */
+    drawerConfig: MtxDrawerConfig);
+    /** Attach a component portal as content to this drawer container. */
+    attachComponentPortal<T>(portal: ComponentPortal<T>): ComponentRef<T>;
+    /** Attach a template portal as content to this drawer container. */
+    attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C>;
+    /**
+     * Attaches a DOM portal to the drawer container.
+     * @deprecated To be turned into a method.
+     * @breaking-change 10.0.0
+     */
+    attachDomPortal: (portal: DomPortal) => void;
+    /** Begin animation of drawer entrance into view. */
+    enter(): void;
+    /** Begin animation of the drawer exiting from view. */
+    exit(): void;
+    ngOnDestroy(): void;
+    _onAnimationDone(event: AnimationEvent): void;
+    _onAnimationStart(event: AnimationEvent): void;
+    private _toggleClass;
+    private _validatePortalAttached;
+    private _setPanelClass;
+    /**
+     * Focuses the provided element. If the element is not focusable, it will add a tabIndex
+     * attribute to forcefully focus it. The attribute is removed after focus is moved.
+     * @param element The element to focus.
+     */
+    private _forceFocus;
+    /**
+     * Focuses the first element that matches the given selector within the focus trap.
+     * @param selector The CSS selector for the element to set focus to.
+     */
+    private _focusByCssSelector;
+    /**
+     * Moves the focus inside the focus trap. When autoFocus is not set to 'bottom-sheet',
+     * if focus cannot be moved then focus will go to the drawer container.
+     */
+    private _trapFocus;
+    /** Restores focus to the element that was focused before the drawer was opened. */
+    private _restoreFocus;
+    /** Saves a reference to the element that was focused before the drawer was opened. */
+    private _savePreviouslyFocusedElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerContainer, [null, null, null, null, null, null, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxDrawerContainer, "mtx-drawer-container", never, {}, {}, never, never>;
+}

package/drawer/drawer-container.scss

@@ -0,0 +1,32 @@
+@use '@angular/cdk' as cdk;
+
+.mtx-drawer-container {
+  display: block;
+  outline: 0;
+
+  @include cdk.high-contrast(active, off) {
+    outline: 1px solid;
+  }
+}
+
+.mtx-drawer-content-wrapper {
+  box-sizing: border-box;
+  padding: 8px 16px;
+  overflow: auto;
+}
+
+.mtx-drawer-right {
+  transform: translateX(100%);
+}
+
+.mtx-drawer-left {
+  transform: translateX(-100%);
+}
+
+.mtx-drawer-bottom {
+  transform: translateY(100%);
+}
+
+.mtx-drawer-top {
+  transform: translateY(-100%);
+}

package/drawer/drawer-module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./drawer-container";
+import * as i2 from "@angular/cdk/overlay";
+import * as i3 from "@angular/cdk/portal";
+import * as i4 from "@angular/material/core";
+export declare class MtxDrawerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MtxDrawerModule, [typeof i1.MtxDrawerContainer], [typeof i2.OverlayModule, typeof i3.PortalModule, typeof i4.MatCommonModule], [typeof i1.MtxDrawerContainer, typeof i4.MatCommonModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<MtxDrawerModule>;
+}

package/drawer/drawer-ref.d.ts

@@ -0,0 +1,44 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { Observable } from 'rxjs';
+import { MtxDrawerContainer } from './drawer-container';
+/**
+ * Reference to a drawer dispatched from the drawer service.
+ */
+export declare class MtxDrawerRef<T = any, R = any> {
+    private _overlayRef;
+    /** Instance of the component making up the content of the drawer. */
+    instance: T;
+    /**
+     * Instance of the component into which the drawer content is projected.
+     * @docs-private
+     */
+    containerInstance: MtxDrawerContainer;
+    /** Whether the user is allowed to close the drawer. */
+    disableClose: boolean | undefined;
+    /** Subject for notifying the user that the drawer has been dismissed. */
+    private readonly _afterDismissed;
+    /** Subject for notifying the user that the drawer has opened and appeared. */
+    private readonly _afterOpened;
+    /** Result to be passed down to the `afterDismissed` stream. */
+    private _result;
+    /** Handle to the timeout that's running as a fallback in case the exit animation doesn't fire. */
+    private _closeFallbackTimeout;
+    constructor(containerInstance: MtxDrawerContainer, _overlayRef: OverlayRef);
+    /**
+     * Dismisses the drawer.
+     * @param result Data to be passed back to the drawer opener.
+     */
+    dismiss(result?: R): void;
+    /** Gets an observable that is notified when the drawer is finished closing. */
+    afterDismissed(): Observable<R | undefined>;
+    /** Gets an observable that is notified when the drawer has opened and appeared. */
+    afterOpened(): Observable<void>;
+    /**
+     * Gets an observable that emits when the overlay's backdrop has been clicked.
+     */
+    backdropClick(): Observable<MouseEvent>;
+    /**
+     * Gets an observable that emits when keydown events are targeted on the overlay.
+     */
+    keydownEvents(): Observable<KeyboardEvent>;
+}

package/drawer/drawer.d.ts

@@ -0,0 +1,61 @@
+import { Overlay } from '@angular/cdk/overlay';
+import { ComponentType } from '@angular/cdk/portal';
+import { Injector, TemplateRef, InjectionToken, OnDestroy } from '@angular/core';
+import { MtxDrawerConfig } from './drawer-config';
+import { MtxDrawerRef } from './drawer-ref';
+import * as i0 from "@angular/core";
+/** Injection token that can be used to access the data that was passed in to a drawer. */
+export declare const MTX_DRAWER_DATA: InjectionToken<any>;
+/** Injection token that can be used to specify default drawer options. */
+export declare const MTX_DRAWER_DEFAULT_OPTIONS: InjectionToken<MtxDrawerConfig<any>>;
+/**
+ * Service to trigger Material Design bottom sheets.
+ */
+export declare class MtxDrawer implements OnDestroy {
+    private _overlay;
+    private _injector;
+    private _parentDrawer;
+    private _defaultOptions?;
+    private _drawerRefAtThisLevel;
+    /** Reference to the currently opened drawer. */
+    get _openedDrawerRef(): MtxDrawerRef<any> | null;
+    set _openedDrawerRef(value: MtxDrawerRef<any> | null);
+    constructor(_overlay: Overlay, _injector: Injector, _parentDrawer: MtxDrawer, _defaultOptions?: MtxDrawerConfig<any> | undefined);
+    /**
+     * Opens a drawer containing the given component.
+     * @param component Type of the component to load into the drawer.
+     * @param config Extra configuration options.
+     * @returns Reference to the newly-opened drawer.
+     */
+    open<T, D = any, R = any>(component: ComponentType<T>, config?: MtxDrawerConfig<D>): MtxDrawerRef<T, R>;
+    /**
+     * Opens a drawer containing the given template.
+     * @param template TemplateRef to instantiate as the drawer content.
+     * @param config Extra configuration options.
+     * @returns Reference to the newly-opened drawer.
+     */
+    open<T, D = any, R = any>(template: TemplateRef<T>, config?: MtxDrawerConfig<D>): MtxDrawerRef<T, R>;
+    /**
+     * Dismisses the currently-visible drawer.
+     * @param result Data to pass to the drawer instance.
+     */
+    dismiss<R = any>(result?: R): void;
+    ngOnDestroy(): void;
+    /**
+     * Attaches the drawer container component to the overlay.
+     */
+    private _attachContainer;
+    /**
+     * Creates a new overlay and places it in the correct location.
+     * @param config The user-specified drawer config.
+     */
+    private _createOverlay;
+    /**
+     * Creates an injector to be used inside of a drawer component.
+     * @param config Config that was used to create the drawer.
+     * @param drawerRef Reference to the drawer.
+     */
+    private _createInjector;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawer, [null, null, { optional: true; skipSelf: true; }, { optional: true; }]>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<MtxDrawer>;
+}

package/drawer/mtxDrawer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ng-matero/extensions/drawer" />
+export * from './public-api';

package/drawer/package.json

@@ -0,0 +1,10 @@
+{
+  "module": "../fesm2015/mtxDrawer.mjs",
+  "es2020": "../fesm2020/mtxDrawer.mjs",
+  "esm2020": "../esm2020/drawer/mtxDrawer.mjs",
+  "fesm2020": "../fesm2020/mtxDrawer.mjs",
+  "fesm2015": "../fesm2015/mtxDrawer.mjs",
+  "typings": "mtxDrawer.d.ts",
+  "sideEffects": false,
+  "name": "@ng-matero/extensions/drawer"
+}

package/drawer/public-api.d.ts

@@ -0,0 +1,6 @@
+export * from './drawer-module';
+export * from './drawer';
+export * from './drawer-config';
+export * from './drawer-container';
+export * from './drawer-animation';
+export * from './drawer-ref';

package/esm2020/alert/alert.component.mjs

@@ -28,9 +28,9 @@ export class MtxAlertComponent {
         this.closed.emit(this);
     }
 }
-/** @nocollapse */ /** @nocollapse */ MtxAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxAlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ MtxAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.0", type: MtxAlertComponent, selector: "mtx-alert", inputs: { type: "type", dismissible: "dismissible", elevation: "elevation" }, outputs: { closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class.mtx-alert": "true", "class.mtx-alert-dismissible": "dismissible", "class": "this.hostClassList" } }, exportAs: ["mtxAlert"], ngImport: i0, template: "<ng-content></ng-content>\n<ng-template [ngIf]=\"dismissible\">\n  <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</ng-template>\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.mtx-alert-close{position:absolute;top:0;bottom:0;right:0;padding:0 1.25rem;font-size:1.5rem;line-height:1;color:inherit;opacity:.5;background-color:transparent;border:0;cursor:pointer}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-close:hover{opacity:.75}.mtx-alert-dismissible{padding-right:4rem}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImport: i0, type: MtxAlertComponent, decorators: [{
+/** @nocollapse */ MtxAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: MtxAlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ MtxAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: MtxAlertComponent, selector: "mtx-alert", inputs: { type: "type", dismissible: "dismissible", elevation: "elevation" }, outputs: { closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class.mtx-alert": "true", "class.mtx-alert-dismissible": "dismissible", "class": "this.hostClassList" } }, exportAs: ["mtxAlert"], ngImport: i0, template: "<ng-content></ng-content>\n<ng-template [ngIf]=\"dismissible\">\n  <button type=\"button\" class=\"mtx-alert-close\" aria-label=\"Close\" (click)=\"_onClosed()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</ng-template>\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.mtx-alert-close{position:absolute;top:0;bottom:0;right:0;padding:0 1.25rem;font-size:1.5rem;line-height:1;color:inherit;opacity:.5;background-color:transparent;border:0;cursor:pointer}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-close:hover{opacity:.75}.mtx-alert-dismissible{padding-right:4rem}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: MtxAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-alert', exportAs: 'mtxAlert', host: {
                         '[class.mtx-alert]': 'true',
@@ -49,4 +49,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.0", ngImpor
             }], closed: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZXh0ZW5zaW9ucy9hbGVydC9hbGVydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9leHRlbnNpb25zL2FsZXJ0L2FsZXJ0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksRUFFWixXQUFXLEdBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFnQixxQkFBcUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDOzs7QUFpQjVFLE1BQU0sT0FBTyxpQkFBaUI7SUF3QjVCLFlBQW9CLGtCQUFxQztRQUFyQyx1QkFBa0IsR0FBbEIsa0JBQWtCLENBQW1CO1FBbkJ6RCxxQkFBcUI7UUFDWixTQUFJLEdBQWlCLFNBQVMsQ0FBQztRQVVoQyxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUU3Qix5QkFBeUI7UUFDaEIsY0FBUyxHQUFHLENBQUMsQ0FBQztRQUV2QixtRkFBbUY7UUFDekUsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFxQixDQUFDO0lBRUcsQ0FBQztJQXZCN0QsSUFBMEIsYUFBYTtRQUNyQyxPQUFPLGFBQWEsSUFBSSxDQUFDLElBQUksbUJBQW1CLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuRSxDQUFDO0lBS0QsZ0RBQWdEO0lBQ2hELElBQ0ksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMzQixDQUFDO0lBQ0QsSUFBSSxXQUFXLENBQUMsS0FBYztRQUM1QixJQUFJLENBQUMsWUFBWSxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFXRCxTQUFTO1FBQ1AsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3pCLENBQUM7O29KQTdCVSxpQkFBaUI7d0lBQWpCLGlCQUFpQix5VkMzQjlCLGtQQU1BOzJGRHFCYSxpQkFBaUI7a0JBYjdCLFNBQVM7K0JBQ0UsV0FBVyxZQUNYLFVBQVUsUUFDZDt3QkFDSixtQkFBbUIsRUFBRSxNQUFNO3dCQUMzQiwrQkFBK0IsRUFBRSxhQUFhO3dCQUM5QyxNQUFNLEVBQUUsT0FBTztxQkFDaEIsaUJBR2MsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTTt3R0FHckIsYUFBYTtzQkFBdEMsV0FBVzt1QkFBQyxPQUFPO2dCQUtYLElBQUk7c0JBQVosS0FBSztnQkFJRixXQUFXO3NCQURkLEtBQUs7Z0JBVUcsU0FBUztzQkFBakIsS0FBSztnQkFHSSxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgSG9zdEJpbmRpbmcsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQm9vbGVhbklucHV0LCBjb2VyY2VCb29sZWFuUHJvcGVydHkgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuXG5leHBvcnQgdHlwZSBNdHhBbGVydFR5cGUgPSAnZGVmYXVsdCcgfCAnaW5mbycgfCAnc3VjY2VzcycgfCAnd2FybmluZycgfCAnZGFuZ2VyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbXR4LWFsZXJ0JyxcbiAgZXhwb3J0QXM6ICdtdHhBbGVydCcsXG4gIGhvc3Q6IHtcbiAgICAnW2NsYXNzLm10eC1hbGVydF0nOiAndHJ1ZScsXG4gICAgJ1tjbGFzcy5tdHgtYWxlcnQtZGlzbWlzc2libGVdJzogJ2Rpc21pc3NpYmxlJyxcbiAgICAncm9sZSc6ICdhbGVydCcsXG4gIH0sXG4gIHRlbXBsYXRlVXJsOiAnLi9hbGVydC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FsZXJ0LmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBNdHhBbGVydENvbXBvbmVudCB7XG4gIEBIb3N0QmluZGluZygnY2xhc3MnKSBnZXQgaG9zdENsYXNzTGlzdCgpIHtcbiAgICByZXR1cm4gYG10eC1hbGVydC0ke3RoaXMudHlwZX0gbWF0LWVsZXZhdGlvbi16JHt0aGlzLmVsZXZhdGlvbn1gO1xuICB9XG5cbiAgLyoqIFRoZSBhbGVydCB0eXBlICovXG4gIEBJbnB1dCgpIHR5cGU6IE10eEFsZXJ0VHlwZSA9ICdkZWZhdWx0JztcblxuICAvKiogV2hldGhlciBkaXNwbGF5cyBhbiBpbmxpbmUgYENsb3NlYCBidXR0b24gKi9cbiAgQElucHV0KClcbiAgZ2V0IGRpc21pc3NpYmxlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9kaXNtaXNzaWJsZTtcbiAgfVxuICBzZXQgZGlzbWlzc2libGUodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9kaXNtaXNzaWJsZSA9IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh2YWx1ZSk7XG4gIH1cbiAgcHJpdmF0ZSBfZGlzbWlzc2libGUgPSBmYWxzZTtcblxuICAvKiogTWF0ZXJpYWwgZWxldmF0aW9uICovXG4gIEBJbnB1dCgpIGVsZXZhdGlvbiA9IDA7XG5cbiAgLyoqIFRoaXMgZXZlbnQgZmlyZXMgd2hlbiBhbGVydCBjbG9zZWQsICRldmVudCBpcyBhbiBpbnN0YW5jZSBvZiBBbGVydCBjb21wb25lbnQgKi9cbiAgQE91dHB1dCgpIGNsb3NlZCA9IG5ldyBFdmVudEVtaXR0ZXI8TXR4QWxlcnRDb21wb25lbnQ+KCk7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBfY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIF9vbkNsb3NlZCgpOiB2b2lkIHtcbiAgICB0aGlzLl9jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgICB0aGlzLmNsb3NlZC5lbWl0KHRoaXMpO1xuICB9XG5cbiAgc3RhdGljIG5nQWNjZXB0SW5wdXRUeXBlX2Rpc21pc3NpYmxlOiBCb29sZWFuSW5wdXQ7XG59XG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48bmctdGVtcGxhdGUgW25nSWZdPVwiZGlzbWlzc2libGVcIj5cbiAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJtdHgtYWxlcnQtY2xvc2VcIiBhcmlhLWxhYmVsPVwiQ2xvc2VcIiAoY2xpY2spPVwiX29uQ2xvc2VkKClcIj5cbiAgICA8c3BhbiBhcmlhLWhpZGRlbj1cInRydWVcIj4mdGltZXM7PC9zcGFuPlxuICA8L2J1dHRvbj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvZXh0ZW5zaW9ucy9hbGVydC9hbGVydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9leHRlbnNpb25zL2FsZXJ0L2FsZXJ0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsdUJBQXVCLEVBQ3ZCLGlCQUFpQixFQUNqQixLQUFLLEVBQ0wsTUFBTSxFQUNOLFlBQVksRUFFWixXQUFXLEdBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFnQixxQkFBcUIsRUFBRSxNQUFNLHVCQUF1QixDQUFDOzs7QUFpQjVFLE1BQU0sT0FBTyxpQkFBaUI7SUF3QjVCLFlBQW9CLGtCQUFxQztRQUFyQyx1QkFBa0IsR0FBbEIsa0JBQWtCLENBQW1CO1FBbkJ6RCxxQkFBcUI7UUFDWixTQUFJLEdBQWlCLFNBQVMsQ0FBQztRQVVoQyxpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUU3Qix5QkFBeUI7UUFDaEIsY0FBUyxHQUFHLENBQUMsQ0FBQztRQUV2QixtRkFBbUY7UUFDekUsV0FBTSxHQUFHLElBQUksWUFBWSxFQUFxQixDQUFDO0lBRUcsQ0FBQztJQXZCN0QsSUFBMEIsYUFBYTtRQUNyQyxPQUFPLGFBQWEsSUFBSSxDQUFDLElBQUksbUJBQW1CLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuRSxDQUFDO0lBS0QsZ0RBQWdEO0lBQ2hELElBQ0ksV0FBVztRQUNiLE9BQU8sSUFBSSxDQUFDLFlBQVksQ0FBQztJQUMzQixDQUFDO0lBQ0QsSUFBSSxXQUFXLENBQUMsS0FBYztRQUM1QixJQUFJLENBQUMsWUFBWSxHQUFHLHFCQUFxQixDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFXRCxTQUFTO1FBQ1AsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQ3pCLENBQUM7O2lJQTdCVSxpQkFBaUI7cUhBQWpCLGlCQUFpQix5VkMzQjlCLGtQQU1BOzJGRHFCYSxpQkFBaUI7a0JBYjdCLFNBQVM7K0JBQ0UsV0FBVyxZQUNYLFVBQVUsUUFDZDt3QkFDSixtQkFBbUIsRUFBRSxNQUFNO3dCQUMzQiwrQkFBK0IsRUFBRSxhQUFhO3dCQUM5QyxNQUFNLEVBQUUsT0FBTztxQkFDaEIsaUJBR2MsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTTt3R0FHckIsYUFBYTtzQkFBdEMsV0FBVzt1QkFBQyxPQUFPO2dCQUtYLElBQUk7c0JBQVosS0FBSztnQkFJRixXQUFXO3NCQURkLEtBQUs7Z0JBVUcsU0FBUztzQkFBakIsS0FBSztnQkFHSSxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBDaGFuZ2VEZXRlY3RvclJlZixcbiAgSG9zdEJpbmRpbmcsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQm9vbGVhbklucHV0LCBjb2VyY2VCb29sZWFuUHJvcGVydHkgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuXG5leHBvcnQgdHlwZSBNdHhBbGVydFR5cGUgPSAnZGVmYXVsdCcgfCAnaW5mbycgfCAnc3VjY2VzcycgfCAnd2FybmluZycgfCAnZGFuZ2VyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbXR4LWFsZXJ0JyxcbiAgZXhwb3J0QXM6ICdtdHhBbGVydCcsXG4gIGhvc3Q6IHtcbiAgICAnW2NsYXNzLm10eC1hbGVydF0nOiAndHJ1ZScsXG4gICAgJ1tjbGFzcy5tdHgtYWxlcnQtZGlzbWlzc2libGVdJzogJ2Rpc21pc3NpYmxlJyxcbiAgICAncm9sZSc6ICdhbGVydCcsXG4gIH0sXG4gIHRlbXBsYXRlVXJsOiAnLi9hbGVydC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2FsZXJ0LmNvbXBvbmVudC5zY3NzJ10sXG4gIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBNdHhBbGVydENvbXBvbmVudCB7XG4gIEBIb3N0QmluZGluZygnY2xhc3MnKSBnZXQgaG9zdENsYXNzTGlzdCgpIHtcbiAgICByZXR1cm4gYG10eC1hbGVydC0ke3RoaXMudHlwZX0gbWF0LWVsZXZhdGlvbi16JHt0aGlzLmVsZXZhdGlvbn1gO1xuICB9XG5cbiAgLyoqIFRoZSBhbGVydCB0eXBlICovXG4gIEBJbnB1dCgpIHR5cGU6IE10eEFsZXJ0VHlwZSA9ICdkZWZhdWx0JztcblxuICAvKiogV2hldGhlciBkaXNwbGF5cyBhbiBpbmxpbmUgYENsb3NlYCBidXR0b24gKi9cbiAgQElucHV0KClcbiAgZ2V0IGRpc21pc3NpYmxlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9kaXNtaXNzaWJsZTtcbiAgfVxuICBzZXQgZGlzbWlzc2libGUodmFsdWU6IGJvb2xlYW4pIHtcbiAgICB0aGlzLl9kaXNtaXNzaWJsZSA9IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh2YWx1ZSk7XG4gIH1cbiAgcHJpdmF0ZSBfZGlzbWlzc2libGUgPSBmYWxzZTtcblxuICAvKiogTWF0ZXJpYWwgZWxldmF0aW9uICovXG4gIEBJbnB1dCgpIGVsZXZhdGlvbiA9IDA7XG5cbiAgLyoqIFRoaXMgZXZlbnQgZmlyZXMgd2hlbiBhbGVydCBjbG9zZWQsICRldmVudCBpcyBhbiBpbnN0YW5jZSBvZiBBbGVydCBjb21wb25lbnQgKi9cbiAgQE91dHB1dCgpIGNsb3NlZCA9IG5ldyBFdmVudEVtaXR0ZXI8TXR4QWxlcnRDb21wb25lbnQ+KCk7XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBfY2hhbmdlRGV0ZWN0b3JSZWY6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIF9vbkNsb3NlZCgpOiB2b2lkIHtcbiAgICB0aGlzLl9jaGFuZ2VEZXRlY3RvclJlZi5tYXJrRm9yQ2hlY2soKTtcbiAgICB0aGlzLmNsb3NlZC5lbWl0KHRoaXMpO1xuICB9XG5cbiAgc3RhdGljIG5nQWNjZXB0SW5wdXRUeXBlX2Rpc21pc3NpYmxlOiBCb29sZWFuSW5wdXQ7XG59XG4iLCI8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG48bmctdGVtcGxhdGUgW25nSWZdPVwiZGlzbWlzc2libGVcIj5cbiAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCIgY2xhc3M9XCJtdHgtYWxlcnQtY2xvc2VcIiBhcmlhLWxhYmVsPVwiQ2xvc2VcIiAoY2xpY2spPVwiX29uQ2xvc2VkKClcIj5cbiAgICA8c3BhbiBhcmlhLWhpZGRlbj1cInRydWVcIj4mdGltZXM7PC9zcGFuPlxuICA8L2J1dHRvbj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=