cmat 0.0.42 → 0.0.44

package/animations/dropdown.css

@@ -0,0 +1,16 @@
+.dropdown-animation {
+    opacity: 0;
+    height: 0;
+    border: 0;
+    padding: 0;
+    visibility: hidden;
+    transition: all 250ms ease-out;
+}
+
+.dropdown-animation.open {
+    opacity: 1;
+    height: inherit;
+    border: inherit;
+    padding: inherit;
+    visibility: inherit;    
+}

package/animations/expand-collapse.css

@@ -0,0 +1,27 @@
+.expand-collapse-animation {
+    display: grid !important;
+    grid-template-rows: 1fr;
+    overflow: hidden;
+    transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    @starting-style {
+        grid-template-rows: 0fr;
+    }
+
+    &>div {
+        min-height: 0;
+        transition: opacity 225ms ease-in-out;
+    }
+}
+
+.expand-collapse-animation.collapsed {
+    grid-template-rows: 0fr;
+
+     &>div {
+        opacity: 0;
+    }
+}
+
+.expand-collapse-animation-leaving {
+    grid-template-rows: 0fr;
+}

package/animations/fade.css

@@ -0,0 +1,105 @@
+.fade-in-animation {
+    opacity: 1;
+    transition: opacity 225ms cubic-bezier(0.0, 0.0, 0.2, 1);
+
+    @starting-style {
+        opacity: 0;
+    }
+}
+
+.fade-in-top-animation {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    transition: all 225ms cubic-bezier(0.0, 0.0, 0.2, 1);
+
+    @starting-style {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+.fade-in-bottom-animation {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    transition: all 225ms cubic-bezier(0.0, 0.0, 0.2, 1);
+
+    @starting-style {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+.fade-in-left-animation {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    transition: all 225ms cubic-bezier(0.0, 0.0, 0.2, 1);
+
+    @starting-style {
+        opacity: 0;
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+.fade-in-right-animation {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    transition: all 225ms cubic-bezier(0.0, 0.0, 0.2, 1);
+
+    @starting-style {
+        opacity: 0;
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+.fade-out-animation {
+    opacity: 0;
+    transition: opacity 195ms cubic-bezier(0.4, 0.0, 1, 1);
+
+    @starting-style {
+        opacity: 1;
+    }
+}
+
+.fade-out-top-animation {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+    transition: all 195ms cubic-bezier(0.4, 0.0, 1, 1);
+
+    @starting-style {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fade-out-bottom-animation {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+    transition: all 195ms cubic-bezier(0.4, 0.0, 1, 1);
+
+    @starting-style {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fade-out-left-animation {
+    opacity: 0;
+    transform: translate3d(-100%, 0, 0);
+    transition: all 195ms cubic-bezier(0.4, 0.0, 1, 1);
+
+    @starting-style {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.fade-out-right-animation {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+    transition: all 195ms cubic-bezier(0.4, 0.0, 1, 1);
+
+    @starting-style {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+}

package/animations/shake.css

@@ -0,0 +1,9 @@
+.shake-animation {
+  animation: shake 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
+
+@keyframes shake {
+  0%, 100% { transform: translate3d(0, 0, 0); }
+  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
+  20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
+}

package/animations/slide.css

@@ -0,0 +1,71 @@
+.slide-in-top-animation {
+    transform: translate3d(0, 0, 0);
+    transition: all 225ms cubic-bezier(0.0, 0.0, 0.2, 1);
+
+    @starting-style {
+        transform: translate3d(0, -100%, 0);
+    }
+}
+
+.slide-in-bottom-animation {
+    transform: translate3d(0, 0, 0);
+    transition: all 225ms cubic-bezier(0.0, 0.0, 0.2, 1);
+
+    @starting-style {
+        transform: translate3d(0, 100%, 0);
+    }
+}
+
+.slide-in-left-animation {
+    transform: translate3d(0, 0, 0);
+    transition: all 225ms cubic-bezier(0.0, 0.0, 0.2, 1);
+
+    @starting-style {
+        transform: translate3d(-100%, 0, 0);
+    }
+}
+
+.slide-in-right-animation {
+    transform: translate3d(0, 0, 0);
+    transition: all 225ms cubic-bezier(0.0, 0.0, 0.2, 1);
+
+    @starting-style {
+        transform: translate3d(100%, 0, 0);
+    }
+}
+
+.slide-out-top-animation {
+    transform: translate3d(0, -100%, 0);
+    transition: all 195ms cubic-bezier(0.4, 0.0, 1, 1);
+
+    @starting-style {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.slide-out-bottom-animation {
+    transform: translate3d(0, 100%, 0);
+    transition: all 195ms cubic-bezier(0.4, 0.0, 1, 1);
+
+    @starting-style {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.slide-out-left-animation {
+    transform: translate3d(-100%, 0, 0);
+    transition: all 195ms cubic-bezier(0.4, 0.0, 1, 1);
+
+    @starting-style {
+        transform: translate3d(0, 0, 0);
+    }
+}
+
+.slide-out-right-animation {
+    transform: translate3d(100%, 0, 0);
+    transition: all 195ms cubic-bezier(0.4, 0.0, 1, 1);
+
+    @starting-style {
+        transform: translate3d(0, 0, 0);
+    }
+}

package/animations/zoom.css

@@ -0,0 +1,21 @@
+.zoom-in-animation {
+    opacity: 1;
+    transform: scale(1);
+    transition: all 225ms cubic-bezier(0.0, 0.0, 0.2, 1);
+
+    @starting-style {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+}
+
+.zoom-out-animation {
+    opacity: 0;
+    transform: scale(0.5);
+    transition: all 195ms cubic-bezier(0.4, 0.0, 1, 1);
+
+    @starting-style {
+        opacity: 1;
+        transform: scale(1);
+    }
+}

package/components/drawer/index.d.ts

@@ -19,14 +19,14 @@ declare class CmatDrawerComponent implements OnChanges, OnInit, OnDestroy {
     readonly modeChanged: EventEmitter<CmatDrawerMode>;
     readonly openedChanged: EventEmitter<boolean>;
     readonly positionChanged: EventEmitter<CmatDrawerPosition>;
-    private _animationBuilder;
     private _elementRef;
     private _renderer2;
     private _cmatDrawerService;
     private _animationsEnabled;
     private _hovered;
     private _overlay;
-    private _player;
+    private _overlayClickDestroyFn;
+    private _changeDetectorRef;
     get classList(): any;
     get styleList(): any;
     onMouseenter(): void;

package/components/image-viewer/index.d.ts

@@ -1,4 +1,3 @@
-import { AnimationEvent } from '@angular/animations';
 import * as i0 from '@angular/core';
 import { ElementRef, TemplateRef, EventEmitter } from '@angular/core';
 import { SafeUrl } from '@angular/platform-browser';
@@ -22,14 +21,6 @@ declare class CmatImageComponent {
      * 启动预览功能。
      */
     preview: boolean;
-    /**
-     * 切换时显示动画
-     */
-    showTransitionOptions: string;
-    /**
-     * 切换时隐藏动画
-     */
-    hideTransitionOptions: string;
     /**
      * 监听预览显示/隐藏.
      */
@@ -38,21 +29,24 @@ declare class CmatImageComponent {
      * 如果加载图像文件时发生错误，则会触发此事件.
      */
     imageErrorEvent: EventEmitter<Event>;
-    mask: ElementRef | undefined;
-    previewButton: ElementRef | undefined;
-    closeButton: ElementRef | undefined;
     el: ElementRef<any>;
     maskVisible: boolean;
     previewVisible: boolean;
     rotate: number;
     scale: number;
-    container: HTMLElement | void | null | undefined;
-    wrapper: HTMLElement | void | null | undefined;
+    private _loadingPreview;
+    private _closePreviewByEscape;
     private _document;
     private _changeDetectorRef;
     private _zoomSettings;
     get isZoomOutDisabled(): boolean;
     get isZoomInDisabled(): boolean;
+    private _mask?;
+    set mask(value: ElementRef<HTMLDivElement> | undefined);
+    private _previewButton?;
+    set previewButton(value: ElementRef<HTMLButtonElement> | undefined);
+    private _closeButton?;
+    set closeButton(value: ElementRef<HTMLButtonElement> | undefined);
     onKeydownHandler(): void;
     onImageClick(): void;
     onMaskKeydown(event: KeyboardEvent): void;
@@ -61,8 +55,6 @@ declare class CmatImageComponent {
     rotateLeft(): void;
     zoomIn(): void;
     zoomOut(): void;
-    onAnimationStart(event: AnimationEvent): void;
-    onAnimationEnd(event: AnimationEvent): void;
     handleToolbarClick(event: MouseEvent): void;
     appendContainer(): void;
     imagePreviewStyle(): {
@@ -71,7 +63,7 @@ declare class CmatImageComponent {
     closePreview(): void;
     imageError(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CmatImageComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CmatImageComponent, "cmat-image", never, { "imageClass": { "alias": "imageClass"; "required": false; }; "imageStyle": { "alias": "imageStyle"; "required": false; }; "src": { "alias": "src"; "required": false; }; "srcSet": { "alias": "srcSet"; "required": false; }; "previewImageSrc": { "alias": "previewImageSrc"; "required": false; }; "previewImageSrcSet": { "alias": "previewImageSrcSet"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; "showTransitionOptions": { "alias": "showTransitionOptions"; "required": false; }; "hideTransitionOptions": { "alias": "hideTransitionOptions"; "required": false; }; }, { "previewShowChange": "previewShowChange"; "imageErrorEvent": "imageErrorEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatImageComponent, "cmat-image", never, { "imageClass": { "alias": "imageClass"; "required": false; }; "imageStyle": { "alias": "imageStyle"; "required": false; }; "src": { "alias": "src"; "required": false; }; "srcSet": { "alias": "srcSet"; "required": false; }; "previewImageSrc": { "alias": "previewImageSrc"; "required": false; }; "previewImageSrcSet": { "alias": "previewImageSrcSet"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "preview": { "alias": "preview"; "required": false; }; }, { "previewShowChange": "previewShowChange"; "imageErrorEvent": "imageErrorEvent"; }, never, never, true, never>;
     static ngAcceptInputType_preview: unknown;
 }
 

package/components/material-datetimepicker/index.d.ts

@@ -127,6 +127,7 @@ declare class CmatDatetimepickerCalendarComponent<D> implements AfterContentInit
     private _intl;
     private _adapter;
     private _dateFormats;
+    private _changeDetectorRef;
     private _currentView;
     private _intlChanges;
     private _clampedActiveDate;
@@ -136,6 +137,7 @@ declare class CmatDatetimepickerCalendarComponent<D> implements AfterContentInit
     private _minDate;
     private _maxDate;
     private _timeInput;
+    private _calendarAnimationListener;
     constructor();
     get type(): CmatDatetimepickerType;
     set type(value: CmatDatetimepickerType);
@@ -209,7 +211,7 @@ declare class CmatDatetimepickerCalendarComponent<D> implements AfterContentInit
     /** Whether the next period button is enabled. */
     nextEnabled(): boolean;
     focusActiveCell(): void;
-    calendarStateDone(): void;
+    calendarStateDone(event: AnimationEvent): void;
     /** Whether the two dates represent the same view in the current view mode (month or year). */
     private _isSameView;
     /** Handles keydown events on the calendar body when calendar is in month view. */
@@ -384,12 +386,6 @@ declare const CMAT_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
     deps: (typeof Overlay)[];
     useFactory: typeof CMAT_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY;
 };
-/**
- * Component used as the content for the datepicker dialog and popup. We use this instead of using
- * MatCalendar directly as the content so we can control the initial focus. This also gives us a
- * place to put additional features of the popup that are not part of the calendar itself in the
- * future. (e.g. confirmation buttons).
- */
 declare class CmatDatetimepickerContentComponent<D> implements OnInit, AfterContentInit, OnDestroy {
     _calendar: CmatDatetimepickerCalendarComponent<D>;
     color: ThemePalette;
@@ -397,13 +393,14 @@ declare class CmatDatetimepickerContentComponent<D> implements OnInit, AfterCont
     /** Whether the datetimepicker is above or below the input. */
     isAbove: boolean;
     /** Current state of the animation. */
-    animationState: 'enter-dropdown' | 'enter-dialog' | 'void';
+    animationState: 'enter-dropdown' | 'enter-dialog' | 'leave';
     /** Emits when an animation has finished. */
     readonly animationDone: Subject<void>;
     /** Id of the label for the `role="dialog"` element. */
     dialogLabelId: string | null;
     protected _elementRef: ElementRef<any>;
     private _changeDetectorRef;
+    private _animationEndListener;
     ngOnInit(): void;
     ngAfterContentInit(): void;
     startExitAnimation(): void;
@@ -533,7 +530,7 @@ declare class CmatDatetimepickerComponent<D> implements OnDestroy {
     select(date: D): void;
     viewChange(type: CmatCalendarView): void;
     /**
-     * Forwards relevant values from the datetimepicker to the
+     *  relevant values from the datetimepicker to the
      * datetimepicker content inside the overlay.
      */
     private _forwardContentValues;
@@ -643,7 +640,7 @@ declare class CmatDatetimepickerToggleComponent<D> implements AfterContentInit,
 /**
  * An internal component used to display a single month in the datepicker.
  */
-declare class CmatDatetimepickerMonthViewComponent<D> implements AfterContentInit {
+declare class CmatDatetimepickerMonthViewComponent<D> implements AfterContentInit, OnDestroy {
     type: CmatDatetimepickerType;
     userSelection: EventEmitter<void>;
     /** A function used to filter which dates are selectable. */
@@ -671,6 +668,9 @@ declare class CmatDatetimepickerMonthViewComponent<D> implements AfterContentIni
     private _dateFormats;
     private _activeDate;
     private _selected;
+    private _elementRef;
+    private _changeDetectorRef;
+    private _calendarAnimationListener;
     constructor();
     /**
      * The date to display in this month view (everything other than the month and year is ignored).
@@ -681,9 +681,10 @@ declare class CmatDatetimepickerMonthViewComponent<D> implements AfterContentIni
     get selected(): D;
     set selected(value: D);
     ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     /** Handles when a new date is selected. */
     dateSelected(date: number): void;
-    calendarStateDone(): void;
+    calendarStateDone(event: AnimationEvent): void;
     /** Initializes this month view. */
     private _init;
     /** Creates MdCalendarCells for the dates in this month. */
@@ -701,7 +702,7 @@ declare class CmatDatetimepickerMonthViewComponent<D> implements AfterContentIni
 /**
  * An internal component used to display a single year in the datepicker.
  */
-declare class CmatDatetimepickerYearViewComponent<D> implements AfterContentInit {
+declare class CmatDatetimepickerYearViewComponent<D> implements AfterContentInit, OnDestroy {
     userSelection: EventEmitter<void>;
     type: CmatDatetimepickerType;
     /** A function used to filter which dates are selectable. */
@@ -724,6 +725,9 @@ declare class CmatDatetimepickerYearViewComponent<D> implements AfterContentInit
     private _dateFormats;
     private _activeDate;
     private _selected;
+    private _changeDetectorRef;
+    private _elementRef;
+    private _calendarAnimationListener;
     constructor();
     /** The date to display in this year view (everything other than the year is ignored). */
     get activeDate(): D;
@@ -732,9 +736,10 @@ declare class CmatDatetimepickerYearViewComponent<D> implements AfterContentInit
     get selected(): D;
     set selected(value: D);
     ngAfterContentInit(): void;
+    ngOnDestroy(): void;
     /** Handles when a new month is selected. */
     monthSelected(month: number): void;
-    calendarStateDone(): void;
+    calendarStateDone(event: AnimationEvent): void;
     /** Initializes this month view. */
     private _init;
     /**
@@ -746,6 +751,7 @@ declare class CmatDatetimepickerYearViewComponent<D> implements AfterContentInit
     private _createCellForMonth;
     /** Whether the given month is enabled. */
     private _isMonthEnabled;
+    private _changeCalendarState;
     static ɵfac: i0.ɵɵFactoryDeclaration<CmatDatetimepickerYearViewComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CmatDatetimepickerYearViewComponent<any>, "cmat-datetimepicker-year-view", ["cmatDatetimepickerYearView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "userSelection": "userSelection"; "selectedChange": "selectedChange"; }, never, never, true, never>;
 }

package/components/navigation/index.d.ts

@@ -83,7 +83,6 @@ declare class CmatVerticalNavigationComponent implements OnChanges, OnInit, Afte
     onCollapsableItemCollapsed: ReplaySubject<CmatNavigationItem>;
     onCollapsableItemExpanded: ReplaySubject<CmatNavigationItem>;
     onRefreshed: ReplaySubject<boolean>;
-    private _animationBuilder;
     private _changeDetectorRef;
     private _elementRef;
     private _renderer2;
@@ -96,7 +95,6 @@ declare class CmatVerticalNavigationComponent implements OnChanges, OnInit, Afte
     private readonly _handleOverlayClick;
     private _hovered;
     private _overlay;
-    private _player;
     private _scrollStrategy;
     private _unsubscribeAll;
     constructor();

package/components/password-strength/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnInit, OnChanges, EventEmitter, SimpleChanges } from '@angular/core';
+import { OnInit, OnChanges, EventEmitter, SimpleChanges, AfterViewInit } from '@angular/core';
 import { AbstractControl, ValidatorFn, FormControl } from '@angular/forms';
 import { ThemePalette } from '@angular/material/core';
 
@@ -75,7 +75,7 @@ declare class CmatPasswordStrengthComponent implements OnInit, OnChanges {
     static ɵcmp: i0.ɵɵComponentDeclaration<CmatPasswordStrengthComponent, "cmat-password-strength", ["cmatPasswordStrength"], { "password": { "alias": "password"; "required": false; }; "externalError": { "alias": "externalError"; "required": false; }; "enableLengthRule": { "alias": "enableLengthRule"; "required": false; }; "enableLowerCaseLetterRule": { "alias": "enableLowerCaseLetterRule"; "required": false; }; "enableUpperCaseLetterRule": { "alias": "enableUpperCaseLetterRule"; "required": false; }; "enableDigitRule": { "alias": "enableDigitRule"; "required": false; }; "enableSpecialCharRule": { "alias": "enableSpecialCharRule"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "customValidator": { "alias": "customValidator"; "required": false; }; "warnThreshold": { "alias": "warnThreshold"; "required": false; }; "accentThreshold": { "alias": "accentThreshold"; "required": false; }; }, { "strengthChanged": "strengthChanged"; }, never, never, true, never>;
 }
 
-declare class CmatPasswordStrengthInfoComponent implements OnInit {
+declare class CmatPasswordStrengthInfoComponent implements OnInit, AfterViewInit {
     passwordComponent: CmatPasswordStrengthComponent;
     enableScoreInfo: boolean;
     lowerCaseCriteriaMsg: string;
@@ -84,7 +84,12 @@ declare class CmatPasswordStrengthInfoComponent implements OnInit {
     specialCharsCriteriaMsg: string;
     customCharsCriteriaMsg: string;
     minCharsCriteriaMsg: string;
+    pageLoaded: boolean;
+    private _changeDetectorRef;
     ngOnInit(): void;
+    ngAfterViewInit(): void;
+    getEnterIndex(itemType: string): number;
+    getLeaveIndex(itemType: string): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<CmatPasswordStrengthInfoComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<CmatPasswordStrengthInfoComponent, "cmat-password-strength-info", ["cmatPasswordStrengthInfo"], { "passwordComponent": { "alias": "passwordComponent"; "required": false; }; "enableScoreInfo": { "alias": "enableScoreInfo"; "required": false; }; "lowerCaseCriteriaMsg": { "alias": "lowerCaseCriteriaMsg"; "required": false; }; "upperCaseCriteriaMsg": { "alias": "upperCaseCriteriaMsg"; "required": false; }; "digitsCriteriaMsg": { "alias": "digitsCriteriaMsg"; "required": false; }; "specialCharsCriteriaMsg": { "alias": "specialCharsCriteriaMsg"; "required": false; }; "customCharsCriteriaMsg": { "alias": "customCharsCriteriaMsg"; "required": false; }; "minCharsCriteriaMsg": { "alias": "minCharsCriteriaMsg"; "required": false; }; }, {}, never, never, true, never>;
 }

package/components/popover/index.d.ts

@@ -1,7 +1,6 @@
-import { AnimationEvent } from '@angular/animations';
 import { BooleanInput } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { TemplateRef, EventEmitter, ElementRef, OnDestroy, AfterViewInit } from '@angular/core';
+import { TemplateRef, EventEmitter, ElementRef, OnDestroy, OnChanges, AfterViewInit, SimpleChanges } from '@angular/core';
 import { Direction } from '@angular/cdk/bidi';
 import { Subject } from 'rxjs';
 
@@ -171,7 +170,7 @@ declare class CmatPopoverComponent implements CmatPopoverPanel, OnDestroy {
  * This directive is intended to be used in conjunction with an cmat-popover tag. It is
  * responsible for toggling the display of the provided popover instance.
  */
-declare class CmatPopoverTriggerDirective implements AfterViewInit, OnDestroy {
+declare class CmatPopoverTriggerDirective implements OnChanges, AfterViewInit, OnDestroy {
     ariaHaspopup: boolean;
     /** References the popover instance that the trigger is associated with. */
     popover: CmatPopoverPanel;
@@ -208,6 +207,7 @@ declare class CmatPopoverTriggerDirective implements AfterViewInit, OnDestroy {
     onMouseEnter(): void;
     onMouseLeave(): void;
     handleMousedown(event: MouseEvent): void;
+    ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     /** Toggles the popover between the open and closed states. */

package/fesm2022/cmat-components-adapter.mjs

@@ -250,10 +250,10 @@ class CNativeDatetimeAdapter extends DatetimeAdapter {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CNativeDatetimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CNativeDatetimeAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CNativeDatetimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CNativeDatetimeAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CNativeDatetimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CNativeDatetimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -355,10 +355,10 @@ class DayjsDatetimeAdapter extends DatetimeAdapter {
     _getDateInNextMonth(date) {
         return super.clone(date).date(1).add(1, 'month');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DayjsDatetimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DayjsDatetimeAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DayjsDatetimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DayjsDatetimeAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DayjsDatetimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DayjsDatetimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -556,10 +556,10 @@ class DayjsDateAdapter extends DateAdapter {
         dayjs.extend(localeData);
         this.setLocale(dateLocale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DayjsDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DayjsDateAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DayjsDateAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DayjsDateAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DayjsDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: DayjsDateAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 

package/fesm2022/cmat-components-breadcrumb.mjs

@@ -12,10 +12,10 @@ import { Subject, BehaviorSubject } from 'rxjs';
  * Usage: refer to the demo - app.component.html
  */
 class CmatBreadcrumbItemDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CmatBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.7", type: CmatBreadcrumbItemDirective, isStandalone: true, selector: "[cmatBreadcrumbItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.4", type: CmatBreadcrumbItemDirective, isStandalone: true, selector: "[cmatBreadcrumbItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CmatBreadcrumbItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatBreadcrumbItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatBreadcrumbItem]'
@@ -338,10 +338,10 @@ class CmatBreadcrumbService {
         }
         return config || {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CmatBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CmatBreadcrumbService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatBreadcrumbService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CmatBreadcrumbService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatBreadcrumbService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -412,10 +412,10 @@ class CmatBreadcrumbComponent {
             };
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CmatBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CmatBreadcrumbComponent, isStandalone: true, selector: "cmat-breadcrumb", inputs: { autoGenerate: "autoGenerate", preserveQueryParams: "preserveQueryParams", preserveFragment: "preserveFragment", class: "class", anchorTarget: "anchorTarget", separator: "separator" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CmatBreadcrumbItemDirective, descendants: true, read: TemplateRef }], exportAs: ["cmatBreadcrumb"], ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"m-0\" [ngClass]=\"class\">\r\n  <ol class=\"flex items-center flex-wrap m-0 p-0\">\r\n    @for (\r\n      breadcrumb of breadcrumbs$ | async; track\r\n      $index; let isLast = $last; let isFirst = $first; let index = $index; let count = $count) {\r\n      <li class=\"list-none\">\r\n        @if (!isLast) {\r\n          <a class=\"cmat-breadcrumb-link\"\r\n            rel=\"noopener noreferrer\"\r\n            [ngClass]=\"{ 'pointer-events-none cursor-not-allowed': breadcrumb.disable }\" [attr.aria-disabled]=\"breadcrumb.disable\"\r\n          [attr.tabIndex]=\"breadcrumb.disable ? -1 : 0\" [routerLink]=\"\r\n            breadcrumb.routeInterceptor\r\n              ? breadcrumb.routeInterceptor( breadcrumb,breadcrumb.routeLink)\r\n              : breadcrumb.routeLink\" [queryParams]=\"preserveQueryParams ? breadcrumb.queryParams : undefined\"\r\n            [fragment]=\"preserveFragment ? breadcrumb.fragment : undefined\"\r\n            [target]=\"anchorTarget ? anchorTarget : '_self'\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n          @if (!itemTemplate) {\r\n            {{\r\n            breadcrumb.label\r\n            }}\r\n          }\r\n        </a>\r\n      }\r\n      @if (isLast) {\r\n        <span class=\"flex items-center\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n        @if (!itemTemplate) {\r\n          {{\r\n          breadcrumb.label\r\n          }}\r\n        }\r\n      </span>\r\n    }\r\n  </li>\r\n  @if (!isLast) {\r\n    <li class=\"flex select-none mx-4\" aria-hidden=\"true\" role=\"separator\">\r\n      <ng-container *ngTemplateOutlet=\"separatorTemplate\"></ng-container>\r\n      @if (separatorTemplate===null) {\r\n        {{ separator }}\r\n      }\r\n    </li>\r\n  }\r\n}\r\n</ol>\r\n</nav>", styles: ["cmat-breadcrumb .cmat-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}cmat-breadcrumb .cmat-breadcrumb-link:hover{text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CmatBreadcrumbComponent, isStandalone: true, selector: "cmat-breadcrumb", inputs: { autoGenerate: "autoGenerate", preserveQueryParams: "preserveQueryParams", preserveFragment: "preserveFragment", class: "class", anchorTarget: "anchorTarget", separator: "separator" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: CmatBreadcrumbItemDirective, descendants: true, read: TemplateRef }], exportAs: ["cmatBreadcrumb"], ngImport: i0, template: "<nav aria-label=\"breadcrumb\" class=\"m-0\" [ngClass]=\"class\">\r\n  <ol class=\"flex items-center flex-wrap m-0 p-0\">\r\n    @for (\r\n      breadcrumb of breadcrumbs$ | async; track\r\n      $index; let isLast = $last; let isFirst = $first; let index = $index; let count = $count) {\r\n      <li class=\"list-none\">\r\n        @if (!isLast) {\r\n          <a class=\"cmat-breadcrumb-link\"\r\n            rel=\"noopener noreferrer\"\r\n            [ngClass]=\"{ 'pointer-events-none cursor-not-allowed': breadcrumb.disable }\" [attr.aria-disabled]=\"breadcrumb.disable\"\r\n          [attr.tabIndex]=\"breadcrumb.disable ? -1 : 0\" [routerLink]=\"\r\n            breadcrumb.routeInterceptor\r\n              ? breadcrumb.routeInterceptor( breadcrumb,breadcrumb.routeLink)\r\n              : breadcrumb.routeLink\" [queryParams]=\"preserveQueryParams ? breadcrumb.queryParams : undefined\"\r\n            [fragment]=\"preserveFragment ? breadcrumb.fragment : undefined\"\r\n            [target]=\"anchorTarget ? anchorTarget : '_self'\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n          @if (!itemTemplate) {\r\n            {{\r\n            breadcrumb.label\r\n            }}\r\n          }\r\n        </a>\r\n      }\r\n      @if (isLast) {\r\n        <span class=\"flex items-center\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n        @if (!itemTemplate) {\r\n          {{\r\n          breadcrumb.label\r\n          }}\r\n        }\r\n      </span>\r\n    }\r\n  </li>\r\n  @if (!isLast) {\r\n    <li class=\"flex select-none mx-4\" aria-hidden=\"true\" role=\"separator\">\r\n      <ng-container *ngTemplateOutlet=\"separatorTemplate\"></ng-container>\r\n      @if (separatorTemplate===null) {\r\n        {{ separator }}\r\n      }\r\n    </li>\r\n  }\r\n}\r\n</ol>\r\n</nav>", styles: ["cmat-breadcrumb .cmat-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}cmat-breadcrumb .cmat-breadcrumb-link:hover{text-decoration-line:underline}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CmatBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatBreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-breadcrumb', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatBreadcrumb', imports: [NgClass, AsyncPipe, RouterLink, NgTemplateOutlet], template: "<nav aria-label=\"breadcrumb\" class=\"m-0\" [ngClass]=\"class\">\r\n  <ol class=\"flex items-center flex-wrap m-0 p-0\">\r\n    @for (\r\n      breadcrumb of breadcrumbs$ | async; track\r\n      $index; let isLast = $last; let isFirst = $first; let index = $index; let count = $count) {\r\n      <li class=\"list-none\">\r\n        @if (!isLast) {\r\n          <a class=\"cmat-breadcrumb-link\"\r\n            rel=\"noopener noreferrer\"\r\n            [ngClass]=\"{ 'pointer-events-none cursor-not-allowed': breadcrumb.disable }\" [attr.aria-disabled]=\"breadcrumb.disable\"\r\n          [attr.tabIndex]=\"breadcrumb.disable ? -1 : 0\" [routerLink]=\"\r\n            breadcrumb.routeInterceptor\r\n              ? breadcrumb.routeInterceptor( breadcrumb,breadcrumb.routeLink)\r\n              : breadcrumb.routeLink\" [queryParams]=\"preserveQueryParams ? breadcrumb.queryParams : undefined\"\r\n            [fragment]=\"preserveFragment ? breadcrumb.fragment : undefined\"\r\n            [target]=\"anchorTarget ? anchorTarget : '_self'\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n          @if (!itemTemplate) {\r\n            {{\r\n            breadcrumb.label\r\n            }}\r\n          }\r\n        </a>\r\n      }\r\n      @if (isLast) {\r\n        <span class=\"flex items-center\">\r\n          <ng-container *ngTemplateOutlet=\"\r\n              itemTemplate;\r\n              context: {\r\n                $implicit: breadcrumb.label,\r\n                info: breadcrumb.info,\r\n                last: isLast,\r\n                first: isFirst,\r\n                index: index,\r\n                count: count\r\n              }\r\n            \"></ng-container>\r\n        @if (!itemTemplate) {\r\n          {{\r\n          breadcrumb.label\r\n          }}\r\n        }\r\n      </span>\r\n    }\r\n  </li>\r\n  @if (!isLast) {\r\n    <li class=\"flex select-none mx-4\" aria-hidden=\"true\" role=\"separator\">\r\n      <ng-container *ngTemplateOutlet=\"separatorTemplate\"></ng-container>\r\n      @if (separatorTemplate===null) {\r\n        {{ separator }}\r\n      }\r\n    </li>\r\n  }\r\n}\r\n</ol>\r\n</nav>", styles: ["cmat-breadcrumb .cmat-breadcrumb-link{display:flex;align-items:center;white-space:nowrap;color:inherit;text-decoration:none;transition:text-decoration .3s;cursor:pointer}cmat-breadcrumb .cmat-breadcrumb-link:hover{text-decoration-line:underline}\n"] }]
         }], propDecorators: { itemTemplate: [{