@ng-matero/extensions 18.4.1 → 19.0.0

package/datetimepicker/multi-year-view.d.ts

@@ -1,6 +1,6 @@
 import { AfterContentInit, EventEmitter } from '@angular/core';
-import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
-import { MtxCalendarCell } from './calendar-body';
+import { DatetimeAdapter } from '@ng-matero/extensions/core';
+import { MtxCalendarBody, MtxCalendarCell } from './calendar-body';
 import { MtxDatetimepickerType } from './datetimepicker-types';
 import * as i0 from "@angular/core";
 export declare const yearsPerPage = 24;
@@ -11,6 +11,7 @@ export declare const yearsPerRow = 4;
  */
 export declare class MtxMultiYearView<D> implements AfterContentInit {
     _adapter: DatetimeAdapter<D>;
+    private _dir;
     private _dateFormats;
     type: MtxDatetimepickerType;
     /** A function used to filter which dates are selectable. */
@@ -19,6 +20,10 @@ export declare class MtxMultiYearView<D> implements AfterContentInit {
     selectedChange: EventEmitter<D>;
     /** Emits when any date is selected. */
     readonly _userSelection: EventEmitter<void>;
+    /** Emits when any date is activated. */
+    readonly activeDateChange: EventEmitter<D>;
+    /** The body of calendar table */
+    _mtxCalendarBody: MtxCalendarBody;
     /** Grid of calendar cells representing the years in the range. */
     _years: MtxCalendarCell[][];
     /** The label for this year range (e.g. "2000-2020"). */
@@ -30,15 +35,15 @@ export declare class MtxMultiYearView<D> implements AfterContentInit {
      * Null if the selected Date is in a different range.
      */
     _selectedYear: number | null;
-    _calendarState: string;
-    constructor(_adapter: DatetimeAdapter<D>, _dateFormats: MtxDatetimeFormats);
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     /** The date to display in this multi year view */
     get activeDate(): D;
     set activeDate(value: D);
     private _activeDate;
     /** The currently selected date. */
-    get selected(): D;
-    set selected(value: D);
+    get selected(): D | null;
+    set selected(value: D | null);
     private _selected;
     /** The minimum selectable date. */
     get minDate(): D | null;
@@ -52,30 +57,25 @@ export declare class MtxMultiYearView<D> implements AfterContentInit {
     /** Handles when a new year is selected. */
     _yearSelected(year: number): void;
     _getActiveCell(): number;
-    _calendarStateDone(): void;
     /** Initializes this year view. */
     private _init;
     /** Creates an MtxCalendarCell for the given year. */
     private _createCellForYear;
     /** Whether the given year is enabled. */
     private _shouldEnableYear;
-    /**
-     * Gets the year in this years range that the given Date falls on.
-     * Returns null if the given Date is not in this range.
-     */
-    private _getYearInCurrentRange;
-    /**
-     * Validate if the current year is in the current range
-     * Returns true if is in range else returns false
-     */
-    private _isInRange;
     /**
      * @param obj The object to check.
      * @returns The given object if it is both a date instance and valid, otherwise null.
      */
-    private _getValidDateOrNull;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxMultiYearView<any>, [{ optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxMultiYearView<any>, "mtx-multi-year-view", ["mtxMultiYearView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; }, never, never, true, never>;
+    _getValidDateOrNull(obj: any): D | null;
+    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
+    _handleCalendarBodyKeydown(event: KeyboardEvent): void;
+    /** Focuses the active cell after the microtask queue is empty. */
+    _focusActiveCell(): void;
+    /** Determines whether the user has the RTL layout direction. */
+    private _isRtl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxMultiYearView<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxMultiYearView<any>, "mtx-multi-year-view", ["mtxMultiYearView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
 }
 export declare function isSameMultiYearView<D>(dateAdapter: DatetimeAdapter<D>, date1: D, date2: D, minDate: D | null, maxDate: D | null): boolean;
 /**

package/datetimepicker/public-api.d.ts

@@ -1,6 +1,4 @@
 export * from './datetimepicker-module';
-export * from './clock';
-export * from './time';
 export * from './calendar';
 export * from './calendar-body';
 export * from './datetimepicker';
@@ -10,6 +8,8 @@ export * from './datetimepicker-toggle';
 export * from './month-view';
 export * from './year-view';
 export * from './multi-year-view';
+export * from './time-view';
+export * from './clock';
 export * from './datetimepicker-animations';
 export * from './datetimepicker-types';
 export * from './datetimepicker-intl';

package/datetimepicker/{time.d.ts → time-view.d.ts}

@@ -1,8 +1,7 @@
 import { NumberInput } from '@angular/cdk/coercion';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { ElementRef, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
 import { SubscriptionLike } from 'rxjs';
-import { DatetimeAdapter } from '@ng-matero/extensions/core';
 import { MtxClockView } from './clock';
 import { MtxDatetimepickerFilterType } from './datetimepicker-filtertype';
 import { MtxDatetimepickerIntl } from './datetimepicker-intl';
@@ -23,7 +22,8 @@ export declare class MtxTimeInput implements OnDestroy {
     private keyDownListener;
     private keyPressListener;
     private inputEventListener;
-    constructor(element: ElementRef, cdr: ChangeDetectorRef);
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     get hasFocus(): any;
     get inputElement(): HTMLInputElement;
     get valid(): boolean;
@@ -55,9 +55,10 @@ export declare class MtxTimeInput implements OnDestroy {
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxTimeInput, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MtxTimeInput, "input.mtx-time-input", ["mtxTimeInput"], { "timeInterval": { "alias": "timeInterval"; "required": false; }; "timeMin": { "alias": "timeMin"; "required": false; }; "timeMax": { "alias": "timeMax"; "required": false; }; "timeValue": { "alias": "timeValue"; "required": false; }; }, { "timeValueChanged": "timeValueChanged"; }, never, never, true, never>;
 }
-export declare class MtxTime<D> implements OnChanges, AfterViewInit, OnDestroy {
+export declare class MtxTimeView<D> implements OnChanges, OnDestroy {
     private _adapter;
     private _changeDetectorRef;
+    private _elementRef;
     protected _datetimepickerIntl: MtxDatetimepickerIntl;
     /** Emits when the currently selected date changes. */
     readonly selectedChange: EventEmitter<D>;
@@ -71,10 +72,14 @@ export declare class MtxTime<D> implements OnChanges, AfterViewInit, OnDestroy {
     readonly clockViewChange: EventEmitter<MtxClockView>;
     /** A function used to filter which dates are selectable. */
     dateFilter: (date: D, type: MtxDatetimepickerFilterType) => boolean;
+    /** Input for action buttons. */
+    timeInput: boolean;
     /** Step over minutes. */
     interval: number;
     /** Input for action buttons. */
     actionsPortal: TemplatePortal | null;
+    /** Prevent user to select same date time */
+    preventSameDateTimeSelection: boolean;
     /** Whether the time input should be auto-focused after view init. */
     autoFocus: boolean;
     protected hourInputElement: ElementRef<HTMLInputElement> | undefined;
@@ -112,22 +117,29 @@ export declare class MtxTime<D> implements OnChanges, AfterViewInit, OnDestroy {
     get hour(): string;
     get minute(): string;
     prefixWithZero(value: number): string;
-    constructor(_adapter: DatetimeAdapter<D>, _changeDetectorRef: ChangeDetectorRef, _datetimepickerIntl: MtxDatetimepickerIntl);
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     ngOnChanges(changes: SimpleChanges): void;
-    ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    focusInputElement(): void;
+    /** Handles keydown events on the calendar body when calendar is in clock view. */
+    _handleCalendarBodyKeydown(event: KeyboardEvent): void;
+    _focusInputElement(): void;
     _handleHourInputChange(value: NumberInput): void;
     _updateHourForAmPm(value: number): number;
     _handleMinuteInputChange(value: NumberInput): void;
     _handleFocus(clockView: MtxClockView): void;
+    _dialTimeSelected(date: D): void;
     _timeSelected(date: D): void;
     _onActiveDateChange(date: D): void;
     _handleSelection(): void;
     _handleOk(): void;
     _handleCancel(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxTime<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxTime<any>, "mtx-time", ["mtxTime"], { "dateFilter": { "alias": "dateFilter"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "actionsPortal": { "alias": "actionsPortal"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "AMPM": { "alias": "AMPM"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "clockView": { "alias": "clockView"; "required": false; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; "ampmChange": "ampmChange"; "clockViewChange": "clockViewChange"; }, never, never, true, never>;
+    /** Focuses the active cell after the microtask queue is empty. */
+    _focusActiveCell(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxTimeView<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxTimeView<any>, "mtx-time-view", ["mtxTime"], { "dateFilter": { "alias": "dateFilter"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "actionsPortal": { "alias": "actionsPortal"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "autoFocus": { "alias": "autoFocus"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "AMPM": { "alias": "AMPM"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "clockView": { "alias": "clockView"; "required": false; }; }, { "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; "_userSelection": "_userSelection"; "ampmChange": "ampmChange"; "clockViewChange": "clockViewChange"; }, never, never, true, never>;
+    static ngAcceptInputType_timeInput: unknown;
+    static ngAcceptInputType_preventSameDateTimeSelection: unknown;
     static ngAcceptInputType_autoFocus: unknown;
     static ngAcceptInputType_twelvehour: unknown;
 }

package/datetimepicker/{time.scss → time-view.scss}

@@ -9,7 +9,7 @@ $time-ampm-width: 40px;
 
 $_tokens: tokens-mtx-datetimepicker.$prefix, tokens-mtx-datetimepicker.get-token-slots();
 
-.mtx-time {
+.mtx-time-view {
   display: block;
   outline: none;
   user-select: none;

package/datetimepicker/year-view.d.ts

@@ -1,6 +1,6 @@
 import { AfterContentInit, EventEmitter } from '@angular/core';
-import { DatetimeAdapter, MtxDatetimeFormats } from '@ng-matero/extensions/core';
-import { MtxCalendarCell } from './calendar-body';
+import { DatetimeAdapter } from '@ng-matero/extensions/core';
+import { MtxCalendarBody, MtxCalendarCell } from './calendar-body';
 import { MtxDatetimepickerType } from './datetimepicker-types';
 import * as i0 from "@angular/core";
 /**
@@ -9,6 +9,7 @@ import * as i0 from "@angular/core";
  */
 export declare class MtxYearView<D> implements AfterContentInit {
     _adapter: DatetimeAdapter<D>;
+    private _dir;
     private _dateFormats;
     type: MtxDatetimepickerType;
     /** A function used to filter which dates are selectable. */
@@ -17,6 +18,10 @@ export declare class MtxYearView<D> implements AfterContentInit {
     selectedChange: EventEmitter<D>;
     /** Emits when any date is selected. */
     readonly _userSelection: EventEmitter<void>;
+    /** Emits when any date is activated. */
+    readonly activeDateChange: EventEmitter<D>;
+    /** The body of calendar table */
+    _mtxCalendarBody: MtxCalendarBody;
     /** Grid of calendar cells representing the months of the year. */
     _months: MtxCalendarCell[][];
     /** The label for this year (e.g. "2017"). */
@@ -28,20 +33,19 @@ export declare class MtxYearView<D> implements AfterContentInit {
      * Null if the selected Date is in a different year.
      */
     _selectedMonth: number | null;
-    _calendarState: string;
-    constructor(_adapter: DatetimeAdapter<D>, _dateFormats: MtxDatetimeFormats);
-    private _activeDate;
+    /** Inserted by Angular inject() migration for backwards compatibility */
+    constructor(...args: unknown[]);
     /** The date to display in this year view (everything other than the year is ignored). */
     get activeDate(): D;
     set activeDate(value: D);
-    private _selected;
+    private _activeDate;
     /** The currently selected date. */
-    get selected(): D;
-    set selected(value: D);
+    get selected(): D | null;
+    set selected(value: D | null);
+    private _selected;
     ngAfterContentInit(): void;
     /** Handles when a new month is selected. */
     _monthSelected(month: number): void;
-    _calendarStateDone(): void;
     /** Initializes this month view. */
     private _init;
     /**
@@ -53,6 +57,12 @@ export declare class MtxYearView<D> implements AfterContentInit {
     private _createCellForMonth;
     /** Whether the given month is enabled. */
     private _isMonthEnabled;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxYearView<any>, [{ optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MtxYearView<any>, "mtx-year-view", ["mtxYearView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; }, never, never, true, never>;
+    /** Handles keydown events on the calendar body when calendar is in year view. */
+    _handleCalendarBodyKeydown(event: KeyboardEvent): void;
+    /** Focuses the active cell after the microtask queue is empty. */
+    _focusActiveCell(): void;
+    /** Determines whether the user has the RTL layout direction. */
+    private _isRtl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxYearView<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MtxYearView<any>, "mtx-year-view", ["mtxYearView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectedChange": "selectedChange"; "_userSelection": "_userSelection"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
 }

package/dialog/dialog-container.d.ts

@@ -2,9 +2,8 @@ import { MatDialogRef } from '@angular/material/dialog';
 import { MtxDialogData } from './dialog-config';
 import * as i0 from "@angular/core";
 export declare class MtxDialogContainer {
-    dialogRef: MatDialogRef<MtxDialogContainer>;
+    dialogRef: MatDialogRef<MtxDialogContainer, any>;
     data: MtxDialogData;
-    constructor(dialogRef: MatDialogRef<MtxDialogContainer>, data: MtxDialogData);
     _onClick(fn: () => void): void;
     _onClose(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDialogContainer, never>;

package/dialog/dialog.d.ts

@@ -6,7 +6,6 @@ import { MtxDialogData } from './dialog-config';
 import * as i0 from "@angular/core";
 export declare class MtxDialog {
     dialog: MatDialog;
-    constructor(dialog: MatDialog);
     originalOpen(componentOrTemplateRef: (ComponentType<any> | TemplateRef<any>) | undefined, config: any): import("@angular/material/dialog").MatDialogRef<any, any>;
     open(config: MtxDialogData, componentOrTemplateRef?: ComponentType<any> | TemplateRef<any>): import("@angular/material/dialog").MatDialogRef<any, any>;
     alert(title: string | Observable<string>, description?: string | Observable<string>, onOk?: () => void): void;

package/drawer/_drawer-theme.scss

@@ -11,8 +11,10 @@
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mtx-drawer.$prefix,
-        tokens-mtx-drawer.get-unthemable-tokens());
+      @include token-utils.create-token-values(
+        tokens-mtx-drawer.$prefix,
+        tokens-mtx-drawer.get-unthemable-tokens()
+      );
     }
   }
 }
@@ -23,8 +25,10 @@
   }
   @else {
     @include mat.private-current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mtx-drawer.$prefix,
-        tokens-mtx-drawer.get-color-tokens($theme));
+      @include token-utils.create-token-values(
+        tokens-mtx-drawer.$prefix,
+        tokens-mtx-drawer.get-color-tokens($theme)
+      );
     }
   }
 }
@@ -43,13 +47,20 @@
   @else {}
 }
 
-@mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values(
-    $tokens,
-    (prefix: tokens-mtx-drawer.$prefix, tokens: tokens-mtx-drawer.get-token-slots()),
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return (
+    (
+      namespace: tokens-mtx-drawer.$prefix,
+      tokens: tokens-mtx-drawer.get-token-slots(),
+    ),
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+}
+
 @mixin theme($theme) {
   @include mat.private-check-duplicate-theme-styles($theme, 'mtx-drawer') {
     @if mat.get-theme-version($theme) == 1 {

package/drawer/drawer-container.d.ts

@@ -1,9 +1,7 @@
 import { AnimationEvent } from '@angular/animations';
-import { FocusMonitor, FocusTrapFactory, InteractivityChecker } from '@angular/cdk/a11y';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
-import { OverlayRef } from '@angular/cdk/overlay';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
-import { ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
+import { EventEmitter, OnDestroy } from '@angular/core';
 import { MtxDrawerConfig } from './drawer-config';
 import * as i0 from "@angular/core";
 /**
@@ -20,7 +18,6 @@ export declare class MtxDrawerContainer extends CdkDialogContainer<MtxDrawerConf
     /** Whether the component has been destroyed. */
     private _destroyed;
     get _drawerPosition(): string;
-    constructor(elementRef: ElementRef, focusTrapFactory: FocusTrapFactory, document: any, config: MtxDrawerConfig, checker: InteractivityChecker, ngZone: NgZone, overlayRef: OverlayRef, focusMonitor?: FocusMonitor);
     protected _contentAttached(): void;
     /** Begin animation of bottom sheet entrance into view. */
     enter(): void;
@@ -30,6 +27,6 @@ export declare class MtxDrawerContainer extends CdkDialogContainer<MtxDrawerConf
     _onAnimationDone(event: AnimationEvent): void;
     _onAnimationStart(event: AnimationEvent): void;
     protected _captureInitialFocus(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerContainer, [null, null, { optional: true; }, null, null, null, null, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerContainer, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxDrawerContainer, "mtx-drawer-container", never, {}, {}, never, never, true, never>;
 }

package/drawer/drawer.d.ts

@@ -1,6 +1,5 @@
-import { Overlay } from '@angular/cdk/overlay';
 import { ComponentType } from '@angular/cdk/portal';
-import { InjectionToken, Injector, OnDestroy, TemplateRef } from '@angular/core';
+import { InjectionToken, OnDestroy, TemplateRef } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { MtxDrawerConfig } from './drawer-config';
 import { MtxDrawerRef } from './drawer-ref';
@@ -15,7 +14,7 @@ export declare const MTX_DRAWER_DEFAULT_OPTIONS: InjectionToken<MtxDrawerConfig<
 export declare class MtxDrawer implements OnDestroy {
     private _overlay;
     private _parentDrawer;
-    private _defaultOptions?;
+    private _defaultOptions;
     private readonly _openDrawersAtThisLevel;
     private readonly _afterAllDismissedAtThisLevel;
     private readonly _afterOpenedAtThisLevel;
@@ -30,7 +29,6 @@ export declare class MtxDrawer implements OnDestroy {
      * Will emit on subscribe if there are no open drawers to begin with.
      */
     readonly afterAllDismissed: Observable<void>;
-    constructor(_overlay: Overlay, injector: Injector, _parentDrawer: MtxDrawer, _defaultOptions?: MtxDrawerConfig | undefined);
     /**
      * Opens a drawer containing the given component.
      * @param component Type of the component to load into the drawer.
@@ -56,6 +54,6 @@ export declare class MtxDrawer implements OnDestroy {
     getDrawerById(id: string): MtxDrawerRef<any> | undefined;
     ngOnDestroy(): void;
     private _dismissDrawers;
-    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawer, [null, null, { optional: true; skipSelf: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawer, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<MtxDrawer>;
 }

package/fesm2022/mtxAlert.mjs

@@ -1,14 +1,11 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Input, Output, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, Input, Output, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatIconButton } from '@angular/material/button';
 
 class MtxAlert {
-    get _hostClassList() {
-        return `mtx-alert-${this.type} mat-elevation-z${this.elevation}`;
-    }
-    constructor(_changeDetectorRef) {
-        this._changeDetectorRef = _changeDetectorRef;
+    constructor() {
+        this._changeDetectorRef = inject(ChangeDetectorRef);
         /** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */
         this.type = 'default';
         /** Whether to display an inline close button. */
@@ -18,21 +15,24 @@ class MtxAlert {
         /** Event emitted when the alert closed. */
         this.closed = new EventEmitter();
     }
+    get _hostClassList() {
+        return `mtx-alert-${this.type} mat-elevation-z${this.elevation}`;
+    }
     _onClosed() {
         this._changeDetectorRef.markForCheck();
         this.closed.emit(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxAlert, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: MtxAlert, isStandalone: true, selector: "mtx-alert", inputs: { type: "type", dismissible: ["dismissible", "dismissible", booleanAttribute], elevation: "elevation" }, outputs: { closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class.mtx-alert-dismissible": "dismissible", "class": "this._hostClassList" }, classAttribute: "mtx-alert" }, exportAs: ["mtxAlert"], ngImport: i0, template: "<ng-content></ng-content>\n@if (dismissible) {\n  <div class=\"mtx-alert-close\">\n    <button mat-icon-button type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n        <path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />\n      </svg>\n    </button>\n  </div>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--mtx-alert-outline-color, var(--mat-app-outline-variant));border-radius:var(--mtx-alert-container-shape, var(--mat-app-corner-small));background-color:var(--mtx-alert-background-color, var(--mat-app-surface-container));color:var(--mtx-alert-text-color, var(--mat-app-on-surface))}.mtx-alert.mtx-alert-info{border-color:var(--mtx-alert-info-outline-color);background-color:var(--mtx-alert-info-background-color);color:var(--mtx-alert-info-text-color)}.mtx-alert.mtx-alert-success{border-color:var(--mtx-alert-success-outline-color);background-color:var(--mtx-alert-success-background-color);color:var(--mtx-alert-success-text-color)}.mtx-alert.mtx-alert-warning{border-color:var(--mtx-alert-warning-outline-color);background-color:var(--mtx-alert-warning-background-color);color:var(--mtx-alert-warning-text-color)}.mtx-alert.mtx-alert-danger{border-color:var(--mtx-alert-danger-outline-color);background-color:var(--mtx-alert-danger-background-color);color:var(--mtx-alert-danger-text-color)}.mtx-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-dismissible{padding-right:3rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: MtxAlert, isStandalone: true, selector: "mtx-alert", inputs: { type: "type", dismissible: ["dismissible", "dismissible", booleanAttribute], elevation: "elevation" }, outputs: { closed: "closed" }, host: { attributes: { "role": "alert" }, properties: { "class.mtx-alert-dismissible": "dismissible", "class": "this._hostClassList" }, classAttribute: "mtx-alert" }, exportAs: ["mtxAlert"], ngImport: i0, template: "<ng-content></ng-content>\n@if (dismissible) {\n  <div class=\"mtx-alert-close\">\n    <button mat-icon-button type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n        />\n      </svg>\n    </button>\n  </div>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--mtx-alert-outline-color, var(--mat-sys-outline-variant));border-radius:var(--mtx-alert-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-alert-background-color, var(--mat-sys-surface-container));color:var(--mtx-alert-text-color, var(--mat-sys-on-surface))}.mtx-alert.mtx-alert-info{border-color:var(--mtx-alert-info-outline-color, light-dark(#abc7ff, #005cbb));background-color:var(--mtx-alert-info-background-color, light-dark(#d7e3ff, #002f65));color:var(--mtx-alert-info-text-color, light-dark(#002f65, #d7e3ff))}.mtx-alert.mtx-alert-success{border-color:var(--mtx-alert-success-outline-color, light-dark(#02e600, #026e00));background-color:var(--mtx-alert-success-background-color, light-dark(#cbffb8, #013a00));color:var(--mtx-alert-success-text-color, light-dark(#013a00, #cbffb8))}.mtx-alert.mtx-alert-warning{border-color:var(--mtx-alert-warning-outline-color, light-dark(#cdcd00, #626200));background-color:var(--mtx-alert-warning-background-color, light-dark(#fffeac, #323200));color:var(--mtx-alert-warning-text-color, light-dark(#323200, #fffeac))}.mtx-alert.mtx-alert-danger{border-color:var(--mtx-alert-danger-outline-color, light-dark(#ffb4a8, #c00100));background-color:var(--mtx-alert-danger-background-color, light-dark(#ffdad4, #690100));color:var(--mtx-alert-danger-text-color, light-dark(#690100, #ffdad4))}.mtx-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-dismissible{padding-right:3rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxAlert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxAlert, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-alert', exportAs: 'mtxAlert', host: {
                         'class': 'mtx-alert',
                         '[class.mtx-alert-dismissible]': 'dismissible',
                         'role': 'alert',
-                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatIconButton], template: "<ng-content></ng-content>\n@if (dismissible) {\n  <div class=\"mtx-alert-close\">\n    <button mat-icon-button type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n        <path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />\n      </svg>\n    </button>\n  </div>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--mtx-alert-outline-color, var(--mat-app-outline-variant));border-radius:var(--mtx-alert-container-shape, var(--mat-app-corner-small));background-color:var(--mtx-alert-background-color, var(--mat-app-surface-container));color:var(--mtx-alert-text-color, var(--mat-app-on-surface))}.mtx-alert.mtx-alert-info{border-color:var(--mtx-alert-info-outline-color);background-color:var(--mtx-alert-info-background-color);color:var(--mtx-alert-info-text-color)}.mtx-alert.mtx-alert-success{border-color:var(--mtx-alert-success-outline-color);background-color:var(--mtx-alert-success-background-color);color:var(--mtx-alert-success-text-color)}.mtx-alert.mtx-alert-warning{border-color:var(--mtx-alert-warning-outline-color);background-color:var(--mtx-alert-warning-background-color);color:var(--mtx-alert-warning-text-color)}.mtx-alert.mtx-alert-danger{border-color:var(--mtx-alert-danger-outline-color);background-color:var(--mtx-alert-danger-background-color);color:var(--mtx-alert-danger-text-color)}.mtx-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-dismissible{padding-right:3rem}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { _hostClassList: [{
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIconButton], template: "<ng-content></ng-content>\n@if (dismissible) {\n  <div class=\"mtx-alert-close\">\n    <button mat-icon-button type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n        />\n      </svg>\n    </button>\n  </div>\n}\n", styles: [".mtx-alert{position:relative;display:block;padding:.75rem 1rem;margin-bottom:1rem;line-height:1.5;border:1px solid var(--mtx-alert-outline-color, var(--mat-sys-outline-variant));border-radius:var(--mtx-alert-container-shape, var(--mat-sys-corner-small));background-color:var(--mtx-alert-background-color, var(--mat-sys-surface-container));color:var(--mtx-alert-text-color, var(--mat-sys-on-surface))}.mtx-alert.mtx-alert-info{border-color:var(--mtx-alert-info-outline-color, light-dark(#abc7ff, #005cbb));background-color:var(--mtx-alert-info-background-color, light-dark(#d7e3ff, #002f65));color:var(--mtx-alert-info-text-color, light-dark(#002f65, #d7e3ff))}.mtx-alert.mtx-alert-success{border-color:var(--mtx-alert-success-outline-color, light-dark(#02e600, #026e00));background-color:var(--mtx-alert-success-background-color, light-dark(#cbffb8, #013a00));color:var(--mtx-alert-success-text-color, light-dark(#013a00, #cbffb8))}.mtx-alert.mtx-alert-warning{border-color:var(--mtx-alert-warning-outline-color, light-dark(#cdcd00, #626200));background-color:var(--mtx-alert-warning-background-color, light-dark(#fffeac, #323200));color:var(--mtx-alert-warning-text-color, light-dark(#323200, #fffeac))}.mtx-alert.mtx-alert-danger{border-color:var(--mtx-alert-danger-outline-color, light-dark(#ffb4a8, #c00100));background-color:var(--mtx-alert-danger-background-color, light-dark(#ffdad4, #690100));color:var(--mtx-alert-danger-text-color, light-dark(#690100, #ffdad4))}.mtx-alert-close{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem}[dir=rtl] .mtx-alert-close{right:auto;left:0}.mtx-alert-dismissible{padding-right:3rem}\n"] }]
+        }], propDecorators: { _hostClassList: [{
                 type: HostBinding,
                 args: ['class']
             }], type: [{
@@ -47,11 +47,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class MtxAlertModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert], exports: [MtxAlert] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert], exports: [MtxAlert] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MtxAlert],

package/fesm2022/mtxAlert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mtxAlert.mjs","sources":["../../../projects/extensions/alert/alert.ts","../../../projects/extensions/alert/alert.html","../../../projects/extensions/alert/alert-module.ts","../../../projects/extensions/alert/mtxAlert.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Input,\n  Output,\n  ViewEncapsulation,\n  booleanAttribute,\n} from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\n\nexport type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';\n\n@Component({\n  selector: 'mtx-alert',\n  exportAs: 'mtxAlert',\n  host: {\n    'class': 'mtx-alert',\n    '[class.mtx-alert-dismissible]': 'dismissible',\n    'role': 'alert',\n  },\n  templateUrl: './alert.html',\n  styleUrl: './alert.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  standalone: true,\n  imports: [MatIconButton],\n})\nexport class MtxAlert {\n  @HostBinding('class')\n  get _hostClassList() {\n    return `mtx-alert-${this.type} mat-elevation-z${this.elevation}`;\n  }\n\n  /** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */\n  @Input() type: MtxAlertType = 'default';\n\n  /** Whether to display an inline close button. */\n  @Input({ transform: booleanAttribute }) dismissible = false;\n\n  /** The alert's elevation (0~24). */\n  @Input() elevation = 0;\n\n  /** Event emitted when the alert closed. */\n  @Output() closed = new EventEmitter<MtxAlert>();\n\n  constructor(private _changeDetectorRef: ChangeDetectorRef) {}\n\n  _onClosed(): void {\n    this._changeDetectorRef.markForCheck();\n    this.closed.emit(this);\n  }\n}\n","<ng-content></ng-content>\n@if (dismissible) {\n  <div class=\"mtx-alert-close\">\n    <button mat-icon-button type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n        <path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />\n      </svg>\n    </button>\n  </div>\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxAlert } from './alert';\n\n@NgModule({\n  imports: [CommonModule, MtxAlert],\n  exports: [MtxAlert],\n})\nexport class MtxAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"mtxAlert.mjs","sources":["../../../projects/extensions/alert/alert.ts","../../../projects/extensions/alert/alert.html","../../../projects/extensions/alert/alert-module.ts","../../../projects/extensions/alert/mtxAlert.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Input,\n  Output,\n  ViewEncapsulation,\n  booleanAttribute,\n  inject,\n} from '@angular/core';\nimport { MatIconButton } from '@angular/material/button';\n\nexport type MtxAlertType = 'default' | 'info' | 'success' | 'warning' | 'danger';\n\n@Component({\n  selector: 'mtx-alert',\n  exportAs: 'mtxAlert',\n  host: {\n    'class': 'mtx-alert',\n    '[class.mtx-alert-dismissible]': 'dismissible',\n    'role': 'alert',\n  },\n  templateUrl: './alert.html',\n  styleUrl: './alert.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [MatIconButton],\n})\nexport class MtxAlert {\n  private _changeDetectorRef = inject(ChangeDetectorRef);\n\n  @HostBinding('class')\n  get _hostClassList() {\n    return `mtx-alert-${this.type} mat-elevation-z${this.elevation}`;\n  }\n\n  /** The alert's type. Can be `default`, `info`, `success`, `warning` or `danger`. */\n  @Input() type: MtxAlertType = 'default';\n\n  /** Whether to display an inline close button. */\n  @Input({ transform: booleanAttribute }) dismissible = false;\n\n  /** The alert's elevation (0~24). */\n  @Input() elevation = 0;\n\n  /** Event emitted when the alert closed. */\n  @Output() closed = new EventEmitter<MtxAlert>();\n\n  _onClosed(): void {\n    this._changeDetectorRef.markForCheck();\n    this.closed.emit(this);\n  }\n}\n","<ng-content></ng-content>\n@if (dismissible) {\n  <div class=\"mtx-alert-close\">\n    <button mat-icon-button type=\"button\" aria-label=\"Close\" (click)=\"_onClosed()\">\n      <svg viewBox=\"0 0 24 24\" width=\"24px\" height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n        <path\n          d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\"\n        />\n      </svg>\n    </button>\n  </div>\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { MtxAlert } from './alert';\n\n@NgModule({\n  imports: [CommonModule, MtxAlert],\n  exports: [MtxAlert],\n})\nexport class MtxAlertModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/mtxButton.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { booleanAttribute, Directive, Input, NgModule } from '@angular/core';
+import { inject, ElementRef, ViewContainerRef, Renderer2, booleanAttribute, Directive, Input, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatProgressSpinner, MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 class MatButtonLoading {
-    constructor(_elementRef, _viewContainerRef, _renderer) {
-        this._elementRef = _elementRef;
-        this._viewContainerRef = _viewContainerRef;
-        this._renderer = _renderer;
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._viewContainerRef = inject(ViewContainerRef);
+        this._renderer = inject(Renderer2);
         this.loading = false;
         this.disabled = false;
     }
@@ -42,10 +42,10 @@ class MatButtonLoading {
             this.spinner = null;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatButtonLoading, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "18.2.0", type: MatButtonLoading, isStandalone: true, selector: "[mat-button][loading],\n             [mat-raised-button][loading],\n             [mat-stroked-button][loading],\n             [mat-flat-button][loading],\n             [mat-icon-button][loading],\n             [mat-fab][loading],\n             [mat-mini-fab][loading]", inputs: { loading: ["loading", "loading", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], color: "color" }, usesOnChanges: true, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MatButtonLoading, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.4", type: MatButtonLoading, isStandalone: true, selector: "[mat-button][loading],\n             [mat-raised-button][loading],\n             [mat-stroked-button][loading],\n             [mat-flat-button][loading],\n             [mat-icon-button][loading],\n             [mat-fab][loading],\n             [mat-mini-fab][loading]", inputs: { loading: ["loading", "loading", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], color: "color" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MatButtonLoading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MatButtonLoading, decorators: [{
             type: Directive,
             args: [{
                     selector: `[mat-button][loading],
@@ -55,9 +55,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
              [mat-icon-button][loading],
              [mat-fab][loading],
              [mat-mini-fab][loading]`,
-                    standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.Renderer2 }], propDecorators: { loading: [{
+        }], propDecorators: { loading: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
             }], disabled: [{
@@ -68,11 +67,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             }] } });
 
 class MtxButtonModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading], exports: [MatButtonLoading] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading], exports: [MatButtonLoading] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: MtxButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MtxButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading],