@ng-matero/extensions 13.0.1 → 13.1.0

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/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.1.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.1.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.1.0", ngImport: i0, type: MtxAlertComponent, decorators: [{
+/** @nocollapse */ /** @nocollapse */ MtxAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", 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.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.2.6", ngImport: i0, type: MtxAlertComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-alert', exportAs: 'mtxAlert', host: {
                         '[class.mtx-alert]': 'true',

package/esm2020/alert/alert.module.mjs

@@ -4,10 +4,10 @@ import { MtxAlertComponent } from './alert.component';
 import * as i0 from "@angular/core";
 export class MtxAlertModule {
 }
-/** @nocollapse */ /** @nocollapse */ MtxAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ MtxAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxAlertModule, declarations: [MtxAlertComponent], imports: [CommonModule], exports: [MtxAlertComponent] });
-/** @nocollapse */ /** @nocollapse */ MtxAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxAlertModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxAlertModule, decorators: [{
+/** @nocollapse */ /** @nocollapse */ MtxAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ MtxAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxAlertModule, declarations: [MtxAlertComponent], imports: [CommonModule], exports: [MtxAlertComponent] });
+/** @nocollapse */ /** @nocollapse */ MtxAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxAlertModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/esm2020/button/button-loading.directive.mjs

@@ -56,9 +56,9 @@ export class MatButtonLoadingDirective {
         }
     }
 }
-/** @nocollapse */ /** @nocollapse */ MatButtonLoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatButtonLoadingDirective, deps: [{ token: i1.MatButton }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ MatButtonLoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MatButtonLoadingDirective, selector: "button[mat-button][loading],\n             button[mat-raised-button][loading],\n             button[mat-stroked-button][loading],\n             button[mat-flat-button][loading],\n             button[mat-icon-button][loading],\n             button[mat-fab][loading],\n             button[mat-mini-fab][loading]", inputs: { loading: "loading", disabled: "disabled", color: "color" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MatButtonLoadingDirective, decorators: [{
+/** @nocollapse */ /** @nocollapse */ MatButtonLoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatButtonLoadingDirective, deps: [{ token: i1.MatButton }, { token: i0.ComponentFactoryResolver }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MatButtonLoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: MatButtonLoadingDirective, selector: "button[mat-button][loading],\n             button[mat-raised-button][loading],\n             button[mat-stroked-button][loading],\n             button[mat-flat-button][loading],\n             button[mat-icon-button][loading],\n             button[mat-fab][loading],\n             button[mat-mini-fab][loading]", inputs: { loading: "loading", disabled: "disabled", color: "color" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MatButtonLoadingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: `button[mat-button][loading],

package/esm2020/button/button.module.mjs

@@ -6,10 +6,10 @@ import { MatButtonLoadingDirective } from './button-loading.directive';
 import * as i0 from "@angular/core";
 export class MtxButtonModule {
 }
-/** @nocollapse */ /** @nocollapse */ MtxButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ MtxButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxButtonModule, declarations: [MatButtonLoadingDirective], imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule], exports: [MatButtonLoadingDirective] });
-/** @nocollapse */ /** @nocollapse */ MtxButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxButtonModule, imports: [[CommonModule, MatButtonModule, MatProgressSpinnerModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxButtonModule, decorators: [{
+/** @nocollapse */ /** @nocollapse */ MtxButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ MtxButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxButtonModule, declarations: [MatButtonLoadingDirective], imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule], exports: [MatButtonLoadingDirective] });
+/** @nocollapse */ /** @nocollapse */ MtxButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxButtonModule, imports: [[CommonModule, MatButtonModule, MatProgressSpinnerModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule],

package/esm2020/checkbox-group/checkbox-group.component.mjs

@@ -192,15 +192,15 @@ export class MtxCheckboxGroupComponent {
         this._getSelectedItems(index);
     }
 }
-/** @nocollapse */ /** @nocollapse */ MtxCheckboxGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxCheckboxGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ MtxCheckboxGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MtxCheckboxGroupComponent, selector: "mtx-checkbox-group", inputs: { items: "items", bindLabel: "bindLabel", bindValue: "bindValue", showSelectAll: "showSelectAll", selectAllLabel: "selectAllLabel", compareWith: "compareWith", disabled: "disabled" }, outputs: { change: "change" }, host: { classAttribute: "mtx-checkbox-group" }, providers: [
+/** @nocollapse */ /** @nocollapse */ MtxCheckboxGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxCheckboxGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxCheckboxGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: MtxCheckboxGroupComponent, selector: "mtx-checkbox-group", inputs: { items: "items", bindLabel: "bindLabel", bindValue: "bindValue", showSelectAll: "showSelectAll", selectAllLabel: "selectAllLabel", compareWith: "compareWith", disabled: "disabled" }, outputs: { change: "change" }, host: { classAttribute: "mtx-checkbox-group" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef((() => MtxCheckboxGroupComponent)),
             multi: true,
         },
     ], queries: [{ propertyName: "_checkboxes", predicate: i0.forwardRef(function () { return MatCheckbox; }), descendants: true }], exportAs: ["mtxCheckboxGroup"], ngImport: i0, template: "<mat-checkbox class=\"mtx-checkbox-master\"\n              *ngIf=\"showSelectAll\"\n              [checked]=\"selectAll\"\n              [(indeterminate)]=\"selectAllIndeterminate\"\n              [disabled]=\"disabled\"\n              (change)=\"_updateMasterCheckboxState($event, -1);\">\n  {{selectAllLabel}}\n</mat-checkbox>\n\n<mat-checkbox class=\"mtx-checkbox-normal\"\n              *ngFor=\"let option of items; let i = index;\"\n              [(ngModel)]=\"option.checked\"\n              [aria-describedby]=\"option.ariaDescribedby\"\n              [aria-label]=\"option.ariaLabel\"\n              [aria-labelledby]=\"option.ariaLabelledby\"\n              [color]=\"option.color\"\n              [disabled]=\"option.disabled || disabled\"\n              [disableRipple]=\"option.disableRipple\"\n              [labelPosition]=\"option.labelPosition\"\n              [required]=\"option.required\"\n              (change)=\"_updateNormalCheckboxState($event, i)\">\n  {{option[bindLabel] | toObservable | async}}\n</mat-checkbox>\n", styles: [".mtx-checkbox-group{display:block}.mtx-checkbox-group .mat-checkbox{margin-right:16px}[dir=rtl] .mtx-checkbox-group .mat-checkbox{margin-right:auto;margin-left:16px}\n"], components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatCheckboxRequiredValidator, selector: "mat-checkbox[required][formControlName],             mat-checkbox[required][formControl], mat-checkbox[required][ngModel]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], pipes: { "async": i3.AsyncPipe, "toObservable": i5.MtxToObservablePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxCheckboxGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxCheckboxGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-checkbox-group', exportAs: 'mtxCheckboxGroup', host: {
                         class: 'mtx-checkbox-group',

package/esm2020/checkbox-group/checkbox-group.module.mjs

@@ -7,10 +7,10 @@ import { MtxCheckboxGroupComponent } from './checkbox-group.component';
 import * as i0 from "@angular/core";
 export class MtxCheckboxGroupModule {
 }
-/** @nocollapse */ /** @nocollapse */ MtxCheckboxGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxCheckboxGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ MtxCheckboxGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxCheckboxGroupModule, declarations: [MtxCheckboxGroupComponent], imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule], exports: [MtxCheckboxGroupComponent, MtxPipesModule] });
-/** @nocollapse */ /** @nocollapse */ MtxCheckboxGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxCheckboxGroupModule, imports: [[CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule], MtxPipesModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxCheckboxGroupModule, decorators: [{
+/** @nocollapse */ /** @nocollapse */ MtxCheckboxGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxCheckboxGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ MtxCheckboxGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxCheckboxGroupModule, declarations: [MtxCheckboxGroupComponent], imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule], exports: [MtxCheckboxGroupComponent, MtxPipesModule] });
+/** @nocollapse */ /** @nocollapse */ MtxCheckboxGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxCheckboxGroupModule, imports: [[CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule], MtxPipesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxCheckboxGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule],

package/esm2020/colorpicker/colorpicker-input.mjs

@@ -183,13 +183,13 @@ export class MtxColorpickerInput {
         this._elementRef.nativeElement.value = value ? value : '';
     }
 }
-/** @nocollapse */ /** @nocollapse */ MtxColorpickerInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxColorpickerInput, deps: [{ token: i0.ElementRef }, { token: i1.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ MtxColorpickerInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: { mtxColorpicker: "mtxColorpicker", disabled: "disabled", value: "value", format: "format" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker.id) || null", "disabled": "disabled" }, classAttribute: "mtx-colorpicker-input" }, providers: [
+/** @nocollapse */ /** @nocollapse */ MtxColorpickerInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxColorpickerInput, deps: [{ token: i0.ElementRef }, { token: i1.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxColorpickerInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: { mtxColorpicker: "mtxColorpicker", disabled: "disabled", value: "value", format: "format" }, outputs: { colorChange: "colorChange", colorInput: "colorInput" }, host: { listeners: { "input": "_onInput($event.target.value)", "change": "_onChange()", "blur": "_onBlur()", "keydown": "_onKeydown($event)" }, properties: { "attr.aria-haspopup": "_picker ? \"dialog\" : null", "attr.aria-owns": "(_picker?.opened && _picker.id) || null", "disabled": "disabled" }, classAttribute: "mtx-colorpicker-input" }, providers: [
         MTX_COLORPICKER_VALUE_ACCESSOR,
         MTX_COLORPICKER_VALIDATORS,
         { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: MtxColorpickerInput },
     ], exportAs: ["mtxColorpickerInput"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxColorpickerInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxColorpickerInput, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[mtxColorpicker]',

package/esm2020/colorpicker/colorpicker-module.mjs

@@ -11,8 +11,8 @@ import { ColorChromeModule } from 'ngx-color/chrome';
 import * as i0 from "@angular/core";
 export class MtxColorpickerModule {
 }
-/** @nocollapse */ /** @nocollapse */ MtxColorpickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-/** @nocollapse */ /** @nocollapse */ MtxColorpickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxColorpickerModule, declarations: [MtxColorpicker,
+/** @nocollapse */ /** @nocollapse */ MtxColorpickerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxColorpickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ MtxColorpickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxColorpickerModule, declarations: [MtxColorpicker,
         MtxColorpickerContent,
         MtxColorpickerInput,
         MtxColorpickerToggle,
@@ -26,7 +26,7 @@ export class MtxColorpickerModule {
         MtxColorpickerInput,
         MtxColorpickerToggle,
         MtxColorpickerToggleIcon] });
-/** @nocollapse */ /** @nocollapse */ MtxColorpickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxColorpickerModule, providers: [MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [[
+/** @nocollapse */ /** @nocollapse */ MtxColorpickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxColorpickerModule, providers: [MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER], imports: [[
             CommonModule,
             OverlayModule,
             A11yModule,
@@ -34,7 +34,7 @@ export class MtxColorpickerModule {
             MatButtonModule,
             ColorChromeModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxColorpickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxColorpickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/esm2020/colorpicker/colorpicker-toggle.mjs

@@ -7,9 +7,9 @@ import * as i2 from "@angular/common";
 /** Can be used to override the icon of a `mtxColorpickerToggle`. */
 export class MtxColorpickerToggleIcon {
 }
-/** @nocollapse */ /** @nocollapse */ MtxColorpickerToggleIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-/** @nocollapse */ /** @nocollapse */ MtxColorpickerToggleIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.0", type: MtxColorpickerToggleIcon, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
+/** @nocollapse */ /** @nocollapse */ MtxColorpickerToggleIcon.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxColorpickerToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ MtxColorpickerToggleIcon.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.6", type: MtxColorpickerToggleIcon, selector: "[mtxColorpickerToggleIcon]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxColorpickerToggleIcon, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mtxColorpickerToggleIcon]',
@@ -57,9 +57,9 @@ export class MtxColorpickerToggle {
         this._stateChanges = merge([pickerDisabled, inputDisabled, datepickerToggled]).subscribe(() => this._changeDetectorRef.markForCheck());
     }
 }
-/** @nocollapse */ /** @nocollapse */ MtxColorpickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxColorpickerToggle, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ MtxColorpickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.0", type: MtxColorpickerToggle, selector: "mtx-colorpicker-toggle", inputs: { picker: ["for", "picker"], tabIndex: "tabIndex", disabled: "disabled", disableRipple: "disableRipple" }, host: { listeners: { "focus": "_button.focus()" }, properties: { "attr.tabindex": "disabled ? null : -1", "class.mtx-colorpicker-toggle-active": "picker && picker.opened", "class.mat-accent": "picker && picker.color === \"accent\"", "class.mat-warn": "picker && picker.color === \"warn\"" }, classAttribute: "mtx-colorpicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxColorpickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxColorpickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\"\n        (click)=\"open($event)\">\n\n  <svg *ngIf=\"!_customIcon\"\n       class=\"mtx-colorpicker-toggle-default-icon\"\n       viewBox=\"0 0 24 24\"\n       width=\"24px\"\n       height=\"24px\"\n       fill=\"currentColor\"\n       focusable=\"false\">\n    <path\n          d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\" />\n  </svg>\n\n  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-colorpicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-colorpicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-colorpicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-colorpicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-colorpicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-colorpicker-toggle-default-icon{margin:auto}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.0", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
+/** @nocollapse */ /** @nocollapse */ MtxColorpickerToggle.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxColorpickerToggle, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MtxColorpickerToggle.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.6", type: MtxColorpickerToggle, selector: "mtx-colorpicker-toggle", inputs: { picker: ["for", "picker"], tabIndex: "tabIndex", disabled: "disabled", disableRipple: "disableRipple" }, host: { listeners: { "focus": "_button.focus()" }, properties: { "attr.tabindex": "disabled ? null : -1", "class.mtx-colorpicker-toggle-active": "picker && picker.opened", "class.mat-accent": "picker && picker.color === \"accent\"", "class.mat-warn": "picker && picker.color === \"warn\"" }, classAttribute: "mtx-colorpicker-toggle" }, queries: [{ propertyName: "_customIcon", first: true, predicate: MtxColorpickerToggleIcon, descendants: true }], viewQueries: [{ propertyName: "_button", first: true, predicate: ["button"], descendants: true }], exportAs: ["mtxColorpickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button #button\n        mat-icon-button\n        type=\"button\"\n        [attr.aria-haspopup]=\"picker ? 'dialog' : null\"\n        [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n        [disabled]=\"disabled\"\n        [disableRipple]=\"disableRipple\"\n        (click)=\"open($event)\">\n\n  <svg *ngIf=\"!_customIcon\"\n       class=\"mtx-colorpicker-toggle-default-icon\"\n       viewBox=\"0 0 24 24\"\n       width=\"24px\"\n       height=\"24px\"\n       fill=\"currentColor\"\n       focusable=\"false\">\n    <path\n          d=\"M17.5,12A1.5,1.5 0 0,1 16,10.5A1.5,1.5 0 0,1 17.5,9A1.5,1.5 0 0,1 19,10.5A1.5,1.5 0 0,1 17.5,12M14.5,8A1.5,1.5 0 0,1 13,6.5A1.5,1.5 0 0,1 14.5,5A1.5,1.5 0 0,1 16,6.5A1.5,1.5 0 0,1 14.5,8M9.5,8A1.5,1.5 0 0,1 8,6.5A1.5,1.5 0 0,1 9.5,5A1.5,1.5 0 0,1 11,6.5A1.5,1.5 0 0,1 9.5,8M6.5,12A1.5,1.5 0 0,1 5,10.5A1.5,1.5 0 0,1 6.5,9A1.5,1.5 0 0,1 8,10.5A1.5,1.5 0 0,1 6.5,12M12,3A9,9 0 0,0 3,12A9,9 0 0,0 12,21A1.5,1.5 0 0,0 13.5,19.5C13.5,19.11 13.35,18.76 13.11,18.5C12.88,18.23 12.73,17.88 12.73,17.5A1.5,1.5 0 0,1 14.23,16H16A5,5 0 0,0 21,11C21,6.58 16.97,3 12,3Z\" />\n  </svg>\n\n  <ng-content select=\"[mtxColorpickerToggleIcon]\"></ng-content>\n</button>\n", styles: [".mat-form-field-appearance-legacy .mat-form-field-prefix .mtx-colorpicker-toggle-default-icon,.mat-form-field-appearance-legacy .mat-form-field-suffix .mtx-colorpicker-toggle-default-icon{width:1em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mtx-colorpicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mtx-colorpicker-toggle-default-icon{display:block;width:1.5em;height:1.5em}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mtx-colorpicker-toggle-default-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mtx-colorpicker-toggle-default-icon{margin:auto}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.6", ngImport: i0, type: MtxColorpickerToggle, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-colorpicker-toggle', host: {
                         'class': 'mtx-colorpicker-toggle',