@ng-matero/extensions 19.2.1 → 19.3.0

package/checkbox-group/checkbox-group.d.ts

@@ -4,9 +4,9 @@ import { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';
 import { MtxCheckboxGroupOption } from './interfaces';
 import * as i0 from "@angular/core";
 export declare class MtxCheckboxBase {
-    label?: any;
-    value?: any;
-    constructor(label?: any, value?: any);
+    label?: any | undefined;
+    value?: any | undefined;
+    constructor(label?: any | undefined, value?: any | undefined);
 }
 export declare class MtxCheckboxGroup implements AfterViewInit, OnDestroy, ControlValueAccessor {
     private _changeDetectorRef;

package/colorpicker/colorpicker-animations.d.ts

@@ -1,8 +1,9 @@
-import { AnimationTriggerMetadata } from '@angular/animations';
 /**
  * Animations used by the colorpicker.
  * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
  */
 export declare const mtxColorpickerAnimations: {
-    readonly transformPanel: AnimationTriggerMetadata;
+    readonly transformPanel: any;
 };

package/colorpicker/colorpicker-content.scss

@@ -1,4 +1,35 @@
+/* stylelint-disable keyframes-name-pattern */
+@keyframes _mtx-colorpicker-content-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes _mtx-colorpicker-content-exit {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 .mtx-colorpicker-content {
   display: block;
   border-radius: 4px;
+
+  &.mtx-colorpicker-content-animations-enabled {
+    animation: _mtx-colorpicker-content-dropdown-enter 120ms cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+
+.mtx-colorpicker-content-exit.mtx-colorpicker-content-animations-enabled {
+  animation: _mtx-colorpicker-content-exit 100ms linear;
 }

package/colorpicker/colorpicker.d.ts

@@ -1,5 +1,5 @@
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
-import { EventEmitter, InjectionToken, OnChanges, OnDestroy, TemplateRef } from '@angular/core';
+import { ElementRef, EventEmitter, InjectionToken, OnChanges, OnDestroy, TemplateRef } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 import { Subject } from 'rxjs';
 import { ColorEvent } from 'ngx-color';
@@ -7,26 +7,43 @@ import { ColorFormat, MtxColorpickerInput } from './colorpicker-input';
 import * as i0 from "@angular/core";
 /** Injection token that determines the scroll handling while the panel is open. */
 export declare const MTX_COLORPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
 export declare function MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
 /** Possible positions for the colorpicker dropdown along the X axis. */
 export type ColorpickerDropdownPositionX = 'start' | 'end';
 /** Possible positions for the colorpicker dropdown along the Y axis. */
 export type ColorpickerDropdownPositionY = 'above' | 'below';
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
 export declare const MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
     deps: (typeof Overlay)[];
     useFactory: typeof MTX_COLORPICKER_SCROLL_STRATEGY_FACTORY;
 };
 export declare class MtxColorpickerContent implements OnDestroy {
+    protected _elementRef: ElementRef<HTMLElement>;
+    protected _animationsDisabled: boolean;
     private _changeDetectorRef;
+    private _ngZone;
+    private _eventCleanups;
+    private _animationFallback;
     color: ThemePalette;
     picker: MtxColorpicker;
-    /** Current state of the animation. */
-    _animationState: 'enter-dropdown' | 'void';
     /** Emits when an animation has finished. */
     readonly _animationDone: Subject<void>;
-    _startExitAnimation(): void;
+    /** Whether there is an in-progress animation. */
+    _isAnimating: boolean;
+    constructor();
     ngOnDestroy(): void;
+    _startExitAnimation(): void;
+    private _handleAnimationEvent;
     getColorString(e: ColorEvent): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxColorpickerContent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxColorpickerContent, "mtx-colorpicker-content", ["mtxColorpickerContent"], { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;

package/core/tokens/m2/mtx/_select.scss

@@ -40,6 +40,7 @@ $prefix: (mtx, select);
 
     multiple-value-background-color: mat.get-theme-color($theme, background, unselected-chip),
     multiple-value-outline-color: $divider-color,
+    multiple-value-disabled-outline-color: mat.private-safe-color-change($divider-color, $alpha: 0.06),
     multiple-value-icon-hover-background-color: $divider-color,
 
     clear-icon-color: $secondary-text-color,

package/core/tokens/m3/mtx/_select.scss

@@ -28,6 +28,10 @@ $prefix: (mtx, select);
 
     multiple-value-background-color: token-definition.hardcode(transparent, $exclude-hardcoded),
     multiple-value-outline-color: map.get($systems, md-sys-color, outline),
+    multiple-value-disabled-outline-color: mat.private-safe-color-change(
+      map.get($systems, md-sys-color, outline),
+      $alpha: 0.38
+    ),
     multiple-value-icon-hover-background-color: map.get($systems, md-sys-color, outline-variant),
 
     clear-icon-color: map.get($systems, md-sys-color, on-surface),

package/datetimepicker/calendar.d.ts

@@ -51,7 +51,6 @@ export declare class MtxCalendar<D> implements AfterViewChecked, AfterContentIni
     timeView: MtxTimeView<D>;
     _AMPM: MtxAMPM;
     _clockView: MtxClockView;
-    _calendarState: string;
     /** A portal containing the header component. */
     _calendarHeaderPortal: Portal<any>;
     private _intlChanges;
@@ -140,10 +139,8 @@ export declare class MtxCalendar<D> implements AfterViewChecked, AfterContentIni
     _previousEnabled(): boolean;
     /** Whether the next period button is enabled. */
     _nextEnabled(): boolean;
-    _calendarStateDone(): void;
     /** Whether the two dates represent the same view in the current view mode (month or year). */
     private _isSameView;
-    private calendarState;
     private _2digit;
     /** Returns the component instance that corresponds to the current calendar view. */
     private _getCurrentViewComponent;

package/datetimepicker/datetimepicker-animations.d.ts

@@ -1,10 +1,11 @@
-import { AnimationTriggerMetadata } from '@angular/animations';
 /**
  * Animations used by the Material datetimepicker.
  * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
  */
 export declare const mtxDatetimepickerAnimations: {
-    readonly transformPanel: AnimationTriggerMetadata;
-    readonly fadeInCalendar: AnimationTriggerMetadata;
-    readonly slideCalendar: AnimationTriggerMetadata;
+    readonly transformPanel: any;
+    readonly fadeInCalendar: any;
+    readonly slideCalendar: any;
 };

package/datetimepicker/datetimepicker-content.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable keyframes-name-pattern */
 @use '@angular/material' as mat;
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mtx/datetimepicker' as tokens-mtx-datetimepicker;
@@ -32,6 +33,40 @@ $touch-min-height: 300px;
 $touch-max-width: 750px;
 $touch-max-height: 850px;
 
+@keyframes _mtx-datetimepicker-content-dropdown-enter {
+  from {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes _mtx-datetimepicker-content-dialog-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes _mtx-datetimepicker-content-exit {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 @mixin landscape-calendar-size {
   .mtx-calendar {
     width: $non-touch-calendar-landscape-width;
@@ -58,6 +93,10 @@ $touch-max-height: 850px;
     @include token-utils.create-token-slot(color, container-text-color);
   }
 
+  &.mtx-datetimepicker-content-animations-enabled {
+    animation: _mtx-datetimepicker-content-dropdown-enter 120ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
   .mtx-calendar {
     width: $non-touch-calendar-portrait-width;
     height: $non-touch-calendar-portrait-height;
@@ -81,7 +120,7 @@ $touch-max-height: 850px;
 
     // Hide the button while the overlay is animating, because it's rendered
     // outside of it and it seems to cause scrollbars in some cases (see #21493).
-    .ng-animating & {
+    .mtx-datetimepicker-content-animating & {
       display: none;
     }
   }
@@ -121,6 +160,10 @@ $touch-max-height: 850px;
   // Prevents the content from jumping around on Windows while the animation is running.
   overflow: visible;
 
+  &.mtx-datetimepicker-content-animations-enabled {
+    animation: _mtx-datetimepicker-content-dialog-enter 150ms cubic-bezier(0, 0, 0.2, 1);
+  }
+
   .mtx-datetimepicker-content-container {
     min-height: $touch-min-height;
     max-height: $touch-max-height;
@@ -140,6 +183,10 @@ $touch-max-height: 850px;
   }
 }
 
+.mtx-datetimepicker-content-exit.mtx-datetimepicker-content-animations-enabled {
+  animation: _mtx-datetimepicker-content-exit 100ms linear;
+}
+
 @media all and (orientation: landscape) {
   .mtx-datetimepicker-content-touch {
     .mtx-datetimepicker-content-container[mode='auto'],

package/datetimepicker/datetimepicker.d.ts

@@ -1,6 +1,6 @@
 import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
 import { ComponentType, TemplatePortal } from '@angular/cdk/portal';
-import { AfterViewInit, EventEmitter, InjectionToken, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, ElementRef, EventEmitter, InjectionToken, OnDestroy } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 import { Subject } from 'rxjs';
 import { MtxCalendar } from './calendar';
@@ -16,7 +16,17 @@ export type DatetimepickerDropdownPositionX = 'start' | 'end';
 export type DatetimepickerDropdownPositionY = 'above' | 'below';
 /** Injection token that determines the scroll handling while the calendar is open. */
 export declare const MTX_DATETIMEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
 export declare function MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
+/**
+ * @docs-private
+ * @deprecated No longer used, will be removed.
+ * @breaking-change 21.0.0
+ */
 export declare const MTX_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     provide: InjectionToken<() => ScrollStrategy>;
     deps: (typeof Overlay)[];
@@ -46,17 +56,23 @@ export declare const MTX_DATETIMEPICKER_DEFAULT_OPTIONS: InjectionToken<MtxDatet
  * future. (e.g. confirmation buttons).
  * @docs-private
  */
-export declare class MtxDatetimepickerContent<D> implements OnInit, AfterViewInit, OnDestroy {
+export declare class MtxDatetimepickerContent<D> implements AfterViewInit, OnDestroy {
+    protected _elementRef: ElementRef<HTMLElement>;
+    protected _animationsDisabled: boolean;
     private _changeDetectorRef;
+    private _ngZone;
+    private _stateChanges;
+    private _eventCleanups;
+    private _animationFallback;
     _calendar: MtxCalendar<D>;
     color: ThemePalette;
     datetimepicker: MtxDatetimepicker<D>;
     /** Whether the datetimepicker is above or below the input. */
     _isAbove: boolean;
-    /** Current state of the animation. */
-    _animationState: 'enter-dropdown' | 'enter-dialog' | 'void';
     /** Emits when an animation has finished. */
     readonly _animationDone: Subject<void>;
+    /** Whether there is an in-progress animation. */
+    _isAnimating: boolean;
     /** Id of the label for the `role="dialog"` element. */
     _dialogLabelId: string | null;
     /** Portal with projected action buttons. */
@@ -69,13 +85,13 @@ export declare class MtxDatetimepickerContent<D> implements OnInit, AfterViewIni
     _closeButtonText: string;
     /** Whether the close button currently has focus. */
     _closeButtonFocused: boolean;
+    _viewChanged(view: MtxCalendarView): void;
     /** Inserted by Angular inject() migration for backwards compatibility */
     constructor(...args: unknown[]);
-    _viewChanged(view: MtxCalendarView): void;
-    ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     _startExitAnimation(): void;
+    private _handleAnimationEvent;
     _handleUserSelection(): void;
     /**
      * Assigns a new portal containing the datetimepicker actions.

package/datetimepicker/month-view.d.ts

@@ -42,7 +42,6 @@ export declare class MtxMonthView<D> implements AfterContentInit {
         narrow: string;
         id: number;
     }[];
-    _calendarState: string;
     /** Inserted by Angular inject() migration for backwards compatibility */
     constructor(...args: unknown[]);
     private _activeDate;
@@ -58,7 +57,6 @@ export declare class MtxMonthView<D> implements AfterContentInit {
     ngAfterContentInit(): void;
     /** Handles when a new date is selected. */
     _dateSelected(date: number): void;
-    _calendarStateDone(): void;
     /** Initializes this month view. */
     private _init;
     /** Initializes the weekdays. */
@@ -70,7 +68,6 @@ export declare class MtxMonthView<D> implements AfterContentInit {
      * Returns null if the given Date is in another month.
      */
     private _getDateInCurrentMonth;
-    private calendarState;
     /** Handles keydown events on the calendar body when calendar is in month view. */
     _handleCalendarBodyKeydown(event: KeyboardEvent): void;
     /** Focuses the active cell after the microtask queue is empty. */

package/drawer/drawer-animations.d.ts

@@ -1,5 +1,8 @@
-import { AnimationTriggerMetadata } from '@angular/animations';
-/** Animations used by the drawer. */
+/**
+ * Animations used by the drawer.
+ * @deprecated No longer used. Will be removed.
+ * @breaking-change 21.0.0
+ */
 export declare const mtxDrawerAnimations: {
-    readonly drawerState: AnimationTriggerMetadata;
+    readonly drawerState: any;
 };

package/drawer/drawer-container.d.ts

@@ -1,4 +1,3 @@
-import { AnimationEvent } from '@angular/animations';
 import { CdkDialogContainer } from '@angular/cdk/dialog';
 import { CdkPortalOutlet } from '@angular/cdk/portal';
 import { EventEmitter, OnDestroy } from '@angular/core';
@@ -11,10 +10,14 @@ import * as i0 from "@angular/core";
 export declare class MtxDrawerContainer extends CdkDialogContainer<MtxDrawerConfig> implements OnDestroy {
     /** The portal outlet inside of this container into which the content will be loaded. */
     _portalOutlet: CdkPortalOutlet;
+    protected _animationsDisabled: boolean;
     /** The state of the drawer animations. */
     _animationState: 'void' | 'visible' | 'hidden';
     /** Emits whenever the state of the animation changes. */
-    _animationStateChanged: EventEmitter<AnimationEvent>;
+    _animationStateChanged: EventEmitter<{
+        toState: "visible" | "hidden";
+        phase: "start" | "done";
+    }>;
     /** Whether the component has been destroyed. */
     private _destroyed;
     get _drawerPosition(): string;
@@ -24,8 +27,8 @@ export declare class MtxDrawerContainer extends CdkDialogContainer<MtxDrawerConf
     /** Begin animation of the bottom sheet exiting from view. */
     exit(): void;
     ngOnDestroy(): void;
-    _onAnimationDone(event: AnimationEvent): void;
-    _onAnimationStart(event: AnimationEvent): void;
+    private _simulateAnimation;
+    protected _handleAnimationEvent(isStart: boolean, animationName: string): void;
     protected _captureInitialFocus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<MtxDrawerContainer, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MtxDrawerContainer, "mtx-drawer-container", never, {}, {}, never, never, true, never>;

package/drawer/drawer-container.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable keyframes-name-pattern */
 @use '@angular/cdk' as cdk;
 @use '@angular/material' as mat;
 @use '../core/tokens/token-utils';
@@ -5,6 +6,30 @@
 
 $_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
 
+@keyframes _mtx-drawer-enter {
+  from {
+    box-shadow: none;
+    visibility: hidden;
+  }
+
+  to {
+    transform: none;
+    visibility: visible;
+  }
+}
+
+@keyframes _mtx-drawer-exit {
+  from {
+    transform: none;
+    visibility: visible;
+  }
+
+  to {
+    box-shadow: none;
+    visibility: hidden;
+  }
+}
+
 .mtx-drawer-container {
   display: block;
   width: 100%;
@@ -13,6 +38,10 @@ $_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
   outline: 0;
   box-sizing: border-box;
 
+  // We don't use this, but it's useful for consumers to position
+  // elements (e.g. close buttons) inside the bottom sheet.
+  position: relative;
+
   @include token-utils.use-tokens($_tokens...) {
     @include token-utils.create-token-slot(background-color, container-background-color);
     @include token-utils.create-token-slot(color, container-text-color);
@@ -24,9 +53,33 @@ $_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
   }
 }
 
-.mtx-drawer-right {
-  transform: translateX(100%);
+.mtx-drawer-container-animations-enabled {
+  &.mtx-drawer-container-enter {
+    animation: _mtx-drawer-enter 150ms cubic-bezier(0, 0, 0.2, 1) forwards;
+  }
+
+  &.mtx-drawer-container-exit {
+    animation: _mtx-drawer-exit 400ms cubic-bezier(0.25, 0.8, 0.25, 1) backwards;
+  }
+
+  &.mtx-drawer-right {
+    transform: translateX(100%);
+  }
+
+  &.mtx-drawer-left {
+    transform: translateX(-100%);
+  }
+
+  &.mtx-drawer-bottom {
+    transform: translateY(100%);
+  }
 
+  &.mtx-drawer-top {
+    transform: translateY(-100%);
+  }
+}
+
+.mtx-drawer-right {
   @include token-utils.use-tokens($_tokens...) {
     @include token-utils.create-token-slot(border-top-left-radius, container-shape);
     @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
@@ -34,8 +87,6 @@ $_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
 }
 
 .mtx-drawer-left {
-  transform: translateX(-100%);
-
   @include token-utils.use-tokens($_tokens...) {
     @include token-utils.create-token-slot(border-top-right-radius, container-shape);
     @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);
@@ -43,8 +94,6 @@ $_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
 }
 
 .mtx-drawer-bottom {
-  transform: translateY(100%);
-
   @include token-utils.use-tokens($_tokens...) {
     @include token-utils.create-token-slot(border-top-left-radius, container-shape);
     @include token-utils.create-token-slot(border-top-right-radius, container-shape);
@@ -52,8 +101,6 @@ $_tokens: tokens-mtx-drawer.$prefix, tokens-mtx-drawer.get-token-slots();
 }
 
 .mtx-drawer-top {
-  transform: translateY(-100%);
-
   @include token-utils.use-tokens($_tokens...) {
     @include token-utils.create-token-slot(border-bottom-left-radius, container-shape);
     @include token-utils.create-token-slot(border-bottom-right-radius, container-shape);

package/fesm2022/mtxAlert.mjs

@@ -22,10 +22,10 @@ class MtxAlert {
         this._changeDetectorRef.markForCheck();
         this.closed.emit(this);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", 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: "19.1.6", ngImport: i0, type: MtxAlert, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxAlert, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-alert', exportAs: 'mtxAlert', host: {
                         'class': 'mtx-alert',
@@ -47,11 +47,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
             }] } });
 
 class MtxAlertModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert], exports: [MtxAlert] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert], exports: [MtxAlert] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxAlertModule, imports: [CommonModule, MtxAlert] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxAlertModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxAlertModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MtxAlert],

package/fesm2022/mtxButton.mjs

@@ -42,10 +42,10 @@ class MatButtonLoading {
             this.spinner = null;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MatButtonLoading, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.1.6", 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.2.2", ngImport: i0, type: MatButtonLoading, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.2", 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: "19.1.6", ngImport: i0, type: MatButtonLoading, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MatButtonLoading, decorators: [{
             type: Directive,
             args: [{
                     selector: `[mat-button][loading],
@@ -67,11 +67,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
             }] } });
 
 class MtxButtonModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading], exports: [MatButtonLoading] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading], exports: [MatButtonLoading] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxButtonModule, imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, MatButtonModule, MatProgressSpinnerModule, MatButtonLoading],

package/fesm2022/mtxCheckboxGroup.mjs

@@ -59,6 +59,8 @@ class MtxCheckboxGroup {
         this._items = value.map(option => {
             return option instanceof Object ? { ...option } : new MtxCheckboxBase(option, option);
         });
+        // update the state of selectAll when items changed
+        this.writeValue(this.selectedItems);
     }
     get compareWith() {
         return this._compareWith;
@@ -196,8 +198,8 @@ class MtxCheckboxGroup {
         }
         this._getSelectedItems(index);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: MtxCheckboxGroup, isStandalone: true, selector: "mtx-checkbox-group", inputs: { trackBy: "trackBy", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", showSelectAll: ["showSelectAll", "showSelectAll", booleanAttribute], selectAllLabel: "selectAllLabel", compareWith: "compareWith", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { change: "change" }, host: { classAttribute: "mtx-checkbox-group" }, providers: [
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCheckboxGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: MtxCheckboxGroup, isStandalone: true, selector: "mtx-checkbox-group", inputs: { trackBy: "trackBy", items: "items", bindLabel: "bindLabel", bindValue: "bindValue", showSelectAll: ["showSelectAll", "showSelectAll", booleanAttribute], selectAllLabel: "selectAllLabel", compareWith: "compareWith", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { change: "change" }, host: { classAttribute: "mtx-checkbox-group" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef((() => MtxCheckboxGroup)),
@@ -205,7 +207,7 @@ class MtxCheckboxGroup {
             },
         ], queries: [{ propertyName: "_checkboxes", predicate: i0.forwardRef(() => MatCheckbox), descendants: true }], exportAs: ["mtxCheckboxGroup"], ngImport: i0, template: "@if (showSelectAll) {\n  <mat-checkbox\n    class=\"mtx-checkbox-master\"\n    [checked]=\"selectAll\"\n    [(indeterminate)]=\"selectAllIndeterminate\"\n    [disabled]=\"disabled\"\n    (change)=\"_updateMasterCheckboxState($event, -1)\"\n  >\n    {{ selectAllLabel }}\n  </mat-checkbox>\n}\n\n@for (option of items; track _trackBy(i, option); let i = $index) {\n  <mat-checkbox\n    class=\"mtx-checkbox-normal\"\n    [(ngModel)]=\"option.checked\"\n    [ngModelOptions]=\"{ standalone: true }\"\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  >\n    {{ option[bindLabel] | toObservable | async }}\n  </mat-checkbox>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxCheckboxGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCheckboxGroup, decorators: [{
             type: Component,
             args: [{ selector: 'mtx-checkbox-group', exportAs: 'mtxCheckboxGroup', host: {
                         class: 'mtx-checkbox-group',
@@ -242,11 +244,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
             }] } });
 
 class MtxCheckboxGroupModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxCheckboxGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.6", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup], exports: [MtxCheckboxGroup, MtxPipesModule] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup, MtxPipesModule] }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCheckboxGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup], exports: [MtxCheckboxGroup, MtxPipesModule] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCheckboxGroupModule, imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup, MtxPipesModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: MtxCheckboxGroupModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: MtxCheckboxGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule, MatCheckboxModule, MtxPipesModule, MtxCheckboxGroup],