cmat 0.0.22 → 0.0.24

package/components/select-tree/select-tree.component.d.ts

@@ -41,8 +41,8 @@ export declare class CmatSelectTreeComponent implements MatFormFieldControl<any>
     private _matSelect;
     private _unsubscribeAll;
     constructor(ngControl: NgControl, _changeDetectorRef: ChangeDetectorRef);
-    set matSelect(m: MatSelect);
     tree: CdkTree<CmatSelectTreeNode>;
+    set matSelect(m: MatSelect);
     clickedOut(): void;
     getLevel: (dataNode: CmatSelectTreeFlatNode) => number;
     childrenAccessor: (node: CmatSelectTreeNode) => CmatSelectTreeNode[];

package/fesm2022/cmat-animations.mjs

@@ -1,4 +1,4 @@
-import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
+import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
 
 const dropdown = trigger('dropdown', [
     state('*', style({

package/fesm2022/cmat-components-adapter.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/material/core';
 import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Optional, Inject } from '@angular/core';
+import { InjectionToken, Optional, Inject, Injectable } from '@angular/core';
 import dayjs from 'dayjs';
 import localeData from 'dayjs/plugin/localeData';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
@@ -249,10 +249,10 @@ class CNativeDatetimeAdapter extends DatetimeAdapter {
         }
         return result;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CNativeDatetimeAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CNativeDatetimeAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CNativeDatetimeAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CNativeDatetimeAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CNativeDatetimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CNativeDatetimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -357,10 +357,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: "19.1.6", ngImport: i0, type: DayjsDatetimeAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DayjsDatetimeAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DayjsDatetimeAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: i1.DateAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DayjsDatetimeAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DayjsDatetimeAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DayjsDatetimeAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
@@ -563,10 +563,10 @@ class DayjsDateAdapter extends DateAdapter {
         dayjs.extend(localeData);
         this.setLocale(dateLocale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DayjsDateAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: CMAT_DAYJS_DATE_ADAPTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DayjsDateAdapter }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DayjsDateAdapter, deps: [{ token: MAT_DATE_LOCALE, optional: true }, { token: CMAT_DAYJS_DATE_ADAPTER_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DayjsDateAdapter }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: DayjsDateAdapter, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: DayjsDateAdapter, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional

package/fesm2022/cmat-components-breadcrumb.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, Injectable, TemplateRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ContentChild, Input } from '@angular/core';
+import { Directive, Injectable, TemplateRef, Input, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { NgClass, AsyncPipe, NgTemplateOutlet } from '@angular/common';
 import * as i1 from '@angular/router';
 import { GuardsCheckEnd, RouterLink } from '@angular/router';
@@ -13,10 +13,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: "19.1.6", ngImport: i0, type: CmatBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: CmatBreadcrumbItemDirective, isStandalone: true, selector: "[cmatBreadcrumbItem]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatBreadcrumbItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: CmatBreadcrumbItemDirective, isStandalone: true, selector: "[cmatBreadcrumbItem]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatBreadcrumbItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatBreadcrumbItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatBreadcrumbItem]',
@@ -340,10 +340,10 @@ class CmatBreadcrumbService {
         }
         return config || {};
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatBreadcrumbService, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatBreadcrumbService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatBreadcrumbService, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatBreadcrumbService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatBreadcrumbService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatBreadcrumbService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -414,10 +414,10 @@ class CmatBreadcrumbComponent {
             };
         })));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatBreadcrumbComponent, deps: [{ token: CmatBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", 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: "pipe", type: AsyncPipe, name: "async" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatBreadcrumbComponent, deps: [{ token: CmatBreadcrumbService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", 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: "pipe", type: AsyncPipe, name: "async" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatBreadcrumbComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", 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"] }]
         }], ctorParameters: () => [{ type: CmatBreadcrumbService }], propDecorators: { itemTemplate: [{

package/fesm2022/cmat-components-card.mjs

@@ -1,6 +1,6 @@
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBinding } from '@angular/core';
+import { HostBinding, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { cmatAnimations } from 'cmat/animations';
 
 class CmatCardComponent {
@@ -31,12 +31,12 @@ class CmatCardComponent {
             this.flippable = coerceBooleanProperty(changes['flippable'].currentValue);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: CmatCardComponent, isStandalone: true, selector: "cmat-card", inputs: { expanded: "expanded", face: "face", flippable: "flippable" }, host: { properties: { "class": "this.classList" } }, exportAs: ["cmatCard"], usesOnChanges: true, ngImport: i0, template: "<!-- Flippable card -->\r\n@if (flippable) {\r\n  <!-- Front -->\r\n  <div class=\"cmat-card-front\">\r\n    <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n  </div>\r\n  <!-- Back -->\r\n  <div class=\"cmat-card-back overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\r\n    <ng-content select=\"[cmatCardBack]\"></ng-content>\r\n  </div>\r\n}\r\n\r\n<!-- Normal card -->\r\n@if (!flippable) {\r\n  <!-- Content -->\r\n  <ng-content></ng-content>\r\n  <!-- Expansion -->\r\n  @if (expanded) {\r\n    <div class=\"cmat-card-expansion\" [@expandCollapse]>\r\n      <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n    </div>\r\n  }\r\n}", styles: ["cmat-card{position:relative;display:flex;overflow:hidden;border-radius:1rem}cmat-card.cmat-card-flippable{border-width:0!important;border-radius:1rem;overflow:visible;transform-style:preserve-3d;transition:transform 1s;perspective:600px;background:transparent!important}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-front{visibility:hidden;opacity:0;transform:rotateY(180deg)}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-back{visibility:visible;opacity:1;transform:rotateY(360deg)}cmat-card.cmat-card-flippable .cmat-card-front,cmat-card.cmat-card-flippable .cmat-card-back{display:flex;flex-direction:column;flex:1 1 auto;z-index:10;transition:transform .5s ease-out 0s,visibility 0s ease-in .2s,opacity 0s ease-in .2s;backface-visibility:hidden;border-radius:1rem}cmat-card.cmat-card-flippable .cmat-card-front{position:relative;opacity:1;visibility:visible;transform:rotateY(0);overflow:hidden}cmat-card.cmat-card-flippable .cmat-card-back{position:absolute;inset:0;opacity:0;visibility:hidden;transform:rotateY(180deg)}\n"], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: CmatCardComponent, isStandalone: true, selector: "cmat-card", inputs: { expanded: "expanded", face: "face", flippable: "flippable" }, host: { properties: { "class": "this.classList" } }, exportAs: ["cmatCard"], usesOnChanges: true, ngImport: i0, template: "<!-- Flippable card -->\r\n@if (flippable) {\r\n  <!-- Front -->\r\n  <div class=\"cmat-card-front\">\r\n    <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n  </div>\r\n  <!-- Back -->\r\n  <div class=\"cmat-card-back overflow-y-auto scrollbar-custom\">\r\n    <ng-content select=\"[cmatCardBack]\"></ng-content>\r\n  </div>\r\n}\r\n\r\n<!-- Normal card -->\r\n@if (!flippable) {\r\n  <!-- Content -->\r\n  <ng-content></ng-content>\r\n  <!-- Expansion -->\r\n  @if (expanded) {\r\n    <div class=\"cmat-card-expansion\" [@expandCollapse]>\r\n      <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n    </div>\r\n  }\r\n}", styles: ["cmat-card{position:relative;display:flex;overflow:hidden;border-radius:1rem}cmat-card.cmat-card-flippable{border-width:0!important;border-radius:1rem;overflow:visible;transform-style:preserve-3d;transition:transform 1s;perspective:600px;background:transparent!important}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-front{visibility:hidden;opacity:0;transform:rotateY(180deg)}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-back{visibility:visible;opacity:1;transform:rotateY(360deg)}cmat-card.cmat-card-flippable .cmat-card-front,cmat-card.cmat-card-flippable .cmat-card-back{display:flex;flex-direction:column;flex:1 1 auto;z-index:10;transition:transform .5s ease-out 0s,visibility 0s ease-in .2s,opacity 0s ease-in .2s;backface-visibility:hidden;border-radius:1rem}cmat-card.cmat-card-flippable .cmat-card-front{position:relative;opacity:1;visibility:visible;transform:rotateY(0);overflow:hidden}cmat-card.cmat-card-flippable .cmat-card-back{position:absolute;inset:0;opacity:0;visibility:hidden;transform:rotateY(180deg)}\n"], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-card', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: cmatAnimations, exportAs: 'cmatCard', imports: [], template: "<!-- Flippable card -->\r\n@if (flippable) {\r\n  <!-- Front -->\r\n  <div class=\"cmat-card-front\">\r\n    <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n  </div>\r\n  <!-- Back -->\r\n  <div class=\"cmat-card-back overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\r\n    <ng-content select=\"[cmatCardBack]\"></ng-content>\r\n  </div>\r\n}\r\n\r\n<!-- Normal card -->\r\n@if (!flippable) {\r\n  <!-- Content -->\r\n  <ng-content></ng-content>\r\n  <!-- Expansion -->\r\n  @if (expanded) {\r\n    <div class=\"cmat-card-expansion\" [@expandCollapse]>\r\n      <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n    </div>\r\n  }\r\n}", styles: ["cmat-card{position:relative;display:flex;overflow:hidden;border-radius:1rem}cmat-card.cmat-card-flippable{border-width:0!important;border-radius:1rem;overflow:visible;transform-style:preserve-3d;transition:transform 1s;perspective:600px;background:transparent!important}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-front{visibility:hidden;opacity:0;transform:rotateY(180deg)}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-back{visibility:visible;opacity:1;transform:rotateY(360deg)}cmat-card.cmat-card-flippable .cmat-card-front,cmat-card.cmat-card-flippable .cmat-card-back{display:flex;flex-direction:column;flex:1 1 auto;z-index:10;transition:transform .5s ease-out 0s,visibility 0s ease-in .2s,opacity 0s ease-in .2s;backface-visibility:hidden;border-radius:1rem}cmat-card.cmat-card-flippable .cmat-card-front{position:relative;opacity:1;visibility:visible;transform:rotateY(0);overflow:hidden}cmat-card.cmat-card-flippable .cmat-card-back{position:absolute;inset:0;opacity:0;visibility:hidden;transform:rotateY(180deg)}\n"] }]
+            args: [{ selector: 'cmat-card', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: cmatAnimations, exportAs: 'cmatCard', imports: [], template: "<!-- Flippable card -->\r\n@if (flippable) {\r\n  <!-- Front -->\r\n  <div class=\"cmat-card-front\">\r\n    <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n  </div>\r\n  <!-- Back -->\r\n  <div class=\"cmat-card-back overflow-y-auto scrollbar-custom\">\r\n    <ng-content select=\"[cmatCardBack]\"></ng-content>\r\n  </div>\r\n}\r\n\r\n<!-- Normal card -->\r\n@if (!flippable) {\r\n  <!-- Content -->\r\n  <ng-content></ng-content>\r\n  <!-- Expansion -->\r\n  @if (expanded) {\r\n    <div class=\"cmat-card-expansion\" [@expandCollapse]>\r\n      <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n    </div>\r\n  }\r\n}", styles: ["cmat-card{position:relative;display:flex;overflow:hidden;border-radius:1rem}cmat-card.cmat-card-flippable{border-width:0!important;border-radius:1rem;overflow:visible;transform-style:preserve-3d;transition:transform 1s;perspective:600px;background:transparent!important}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-front{visibility:hidden;opacity:0;transform:rotateY(180deg)}cmat-card.cmat-card-flippable.cmat-card-face-back .cmat-card-back{visibility:visible;opacity:1;transform:rotateY(360deg)}cmat-card.cmat-card-flippable .cmat-card-front,cmat-card.cmat-card-flippable .cmat-card-back{display:flex;flex-direction:column;flex:1 1 auto;z-index:10;transition:transform .5s ease-out 0s,visibility 0s ease-in .2s,opacity 0s ease-in .2s;backface-visibility:hidden;border-radius:1rem}cmat-card.cmat-card-flippable .cmat-card-front{position:relative;opacity:1;visibility:visible;transform:rotateY(0);overflow:hidden}cmat-card.cmat-card-flippable .cmat-card-back{position:absolute;inset:0;opacity:0;visibility:hidden;transform:rotateY(180deg)}\n"] }]
         }], propDecorators: { expanded: [{
                 type: Input
             }], face: [{

package/fesm2022/cmat-components-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cmat-components-card.mjs","sources":["../../../projects/cmat/components/card/card.component.ts","../../../projects/cmat/components/card/card.component.html","../../../projects/cmat/components/card/cmat-components-card.ts"],"sourcesContent":["import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\r\nimport { ChangeDetectionStrategy, Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';\r\nimport { cmatAnimations } from 'cmat/animations';\r\nimport { CmatCardFace } from './card.types';\r\n\r\n@Component({\r\n    selector: 'cmat-card',\r\n    templateUrl: './card.component.html',\r\n    styleUrls: ['./card.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    animations: cmatAnimations,\r\n    exportAs: 'cmatCard',\r\n    imports: []\r\n})\r\nexport class CmatCardComponent implements OnChanges {\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static ngAcceptInputType_expanded: BooleanInput;\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static ngAcceptInputType_flippable: BooleanInput;\r\n\r\n    @Input() expanded: boolean = false;\r\n    @Input() face: CmatCardFace = 'front';\r\n    @Input() flippable: boolean = false;\r\n\r\n    @HostBinding('class') get classList(): any {\r\n        /* eslint-disable @typescript-eslint/naming-convention */\r\n        return {\r\n            'cmat-card-expanded': this.expanded,\r\n            'cmat-card-face-back': this.flippable && this.face === 'back',\r\n            'cmat-card-face-front': this.flippable && this.face === 'front',\r\n            'cmat-card-flippable': this.flippable\r\n        };\r\n        /* eslint-enable @typescript-eslint/naming-convention */\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        // Expanded\r\n        if ('expanded' in changes) {\r\n            // Coerce the value to a boolean\r\n            this.expanded = coerceBooleanProperty(changes['expanded'].currentValue);\r\n        }\r\n\r\n        // Flippable\r\n        if ('flippable' in changes) {\r\n            // Coerce the value to a boolean\r\n            this.flippable = coerceBooleanProperty(changes['flippable'].currentValue);\r\n        }\r\n    }\r\n}\r\n","<!-- Flippable card -->\r\n@if (flippable) {\r\n  <!-- Front -->\r\n  <div class=\"cmat-card-front\">\r\n    <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n  </div>\r\n  <!-- Back -->\r\n  <div class=\"cmat-card-back overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\r\n    <ng-content select=\"[cmatCardBack]\"></ng-content>\r\n  </div>\r\n}\r\n\r\n<!-- Normal card -->\r\n@if (!flippable) {\r\n  <!-- Content -->\r\n  <ng-content></ng-content>\r\n  <!-- Expansion -->\r\n  @if (expanded) {\r\n    <div class=\"cmat-card-expansion\" [@expandCollapse]>\r\n      <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n    </div>\r\n  }\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAea,iBAAiB,CAAA;AAV9B,IAAA,WAAA,GAAA;QAgBa,IAAQ,CAAA,QAAA,GAAY,KAAK;QACzB,IAAI,CAAA,IAAA,GAAiB,OAAO;QAC5B,IAAS,CAAA,SAAA,GAAY,KAAK;AA0BtC;AAxBG,IAAA,IAA0B,SAAS,GAAA;;QAE/B,OAAO;YACH,oBAAoB,EAAE,IAAI,CAAC,QAAQ;YACnC,qBAAqB,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YAC7D,sBAAsB,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAC/D,qBAAqB,EAAE,IAAI,CAAC;SAC/B;;;AAIL,IAAA,WAAW,CAAC,OAAsB,EAAA;;AAE9B,QAAA,IAAI,UAAU,IAAI,OAAO,EAAE;;AAEvB,YAAA,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;AAI3E,QAAA,IAAI,WAAW,IAAI,OAAO,EAAE;;AAExB,YAAA,IAAI,CAAC,SAAS,GAAG,qBAAqB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;;;8GA/BxE,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECf9B,+qBAsBC,EAAA,MAAA,EAAA,CAAA,kiCAAA,CAAA,EAAA,UAAA,EDXe,cAAc,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAIjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAV7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAGN,aAAA,EAAA,iBAAiB,CAAC,IAAI,EACpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACnC,UAAA,EAAA,cAAc,EAChB,QAAA,EAAA,UAAU,WACX,EAAE,EAAA,QAAA,EAAA,+qBAAA,EAAA,MAAA,EAAA,CAAA,kiCAAA,CAAA,EAAA;8BAQF,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBAEyB,SAAS,EAAA,CAAA;sBAAlC,WAAW;uBAAC,OAAO;;;AEzBxB;;AAEG;;;;"}
+{"version":3,"file":"cmat-components-card.mjs","sources":["../../../projects/cmat/components/card/card.component.ts","../../../projects/cmat/components/card/card.component.html","../../../projects/cmat/components/card/cmat-components-card.ts"],"sourcesContent":["import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\r\nimport { ChangeDetectionStrategy, Component, HostBinding, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';\r\nimport { cmatAnimations } from 'cmat/animations';\r\nimport { CmatCardFace } from './card.types';\r\n\r\n@Component({\r\n    selector: 'cmat-card',\r\n    templateUrl: './card.component.html',\r\n    styleUrls: ['./card.component.scss'],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush,\r\n    animations: cmatAnimations,\r\n    exportAs: 'cmatCard',\r\n    imports: []\r\n})\r\nexport class CmatCardComponent implements OnChanges {\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static ngAcceptInputType_expanded: BooleanInput;\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static ngAcceptInputType_flippable: BooleanInput;\r\n\r\n    @Input() expanded: boolean = false;\r\n    @Input() face: CmatCardFace = 'front';\r\n    @Input() flippable: boolean = false;\r\n\r\n    @HostBinding('class') get classList(): any {\r\n        /* eslint-disable @typescript-eslint/naming-convention */\r\n        return {\r\n            'cmat-card-expanded': this.expanded,\r\n            'cmat-card-face-back': this.flippable && this.face === 'back',\r\n            'cmat-card-face-front': this.flippable && this.face === 'front',\r\n            'cmat-card-flippable': this.flippable\r\n        };\r\n        /* eslint-enable @typescript-eslint/naming-convention */\r\n    }\r\n\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        // Expanded\r\n        if ('expanded' in changes) {\r\n            // Coerce the value to a boolean\r\n            this.expanded = coerceBooleanProperty(changes['expanded'].currentValue);\r\n        }\r\n\r\n        // Flippable\r\n        if ('flippable' in changes) {\r\n            // Coerce the value to a boolean\r\n            this.flippable = coerceBooleanProperty(changes['flippable'].currentValue);\r\n        }\r\n    }\r\n}\r\n","<!-- Flippable card -->\r\n@if (flippable) {\r\n  <!-- Front -->\r\n  <div class=\"cmat-card-front\">\r\n    <ng-content select=\"[cmatCardFront]\"></ng-content>\r\n  </div>\r\n  <!-- Back -->\r\n  <div class=\"cmat-card-back overflow-y-auto scrollbar-custom\">\r\n    <ng-content select=\"[cmatCardBack]\"></ng-content>\r\n  </div>\r\n}\r\n\r\n<!-- Normal card -->\r\n@if (!flippable) {\r\n  <!-- Content -->\r\n  <ng-content></ng-content>\r\n  <!-- Expansion -->\r\n  @if (expanded) {\r\n    <div class=\"cmat-card-expansion\" [@expandCollapse]>\r\n      <ng-content select=\"[cmatCardExpansion]\"></ng-content>\r\n    </div>\r\n  }\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAea,iBAAiB,CAAA;AAV9B,IAAA,WAAA,GAAA;QAgBa,IAAQ,CAAA,QAAA,GAAY,KAAK;QACzB,IAAI,CAAA,IAAA,GAAiB,OAAO;QAC5B,IAAS,CAAA,SAAA,GAAY,KAAK;AA0BtC;AAxBG,IAAA,IAA0B,SAAS,GAAA;;QAE/B,OAAO;YACH,oBAAoB,EAAE,IAAI,CAAC,QAAQ;YACnC,qBAAqB,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YAC7D,sBAAsB,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAC/D,qBAAqB,EAAE,IAAI,CAAC;SAC/B;;;AAIL,IAAA,WAAW,CAAC,OAAsB,EAAA;;AAE9B,QAAA,IAAI,UAAU,IAAI,OAAO,EAAE;;AAEvB,YAAA,IAAI,CAAC,QAAQ,GAAG,qBAAqB,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;;;AAI3E,QAAA,IAAI,WAAW,IAAI,OAAO,EAAE;;AAExB,YAAA,IAAI,CAAC,SAAS,GAAG,qBAAqB,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC;;;8GA/BxE,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,SAAA,EAAA,WAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,UAAA,CAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECf9B,ioBAsBC,EAAA,MAAA,EAAA,CAAA,kiCAAA,CAAA,EAAA,UAAA,EDXe,cAAc,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAIjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAV7B,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAGN,aAAA,EAAA,iBAAiB,CAAC,IAAI,EACpB,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACnC,UAAA,EAAA,cAAc,EAChB,QAAA,EAAA,UAAU,WACX,EAAE,EAAA,QAAA,EAAA,ioBAAA,EAAA,MAAA,EAAA,CAAA,kiCAAA,CAAA,EAAA;8BAQF,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBAEyB,SAAS,EAAA,CAAA;sBAAlC,WAAW;uBAAC,OAAO;;;AEzBxB;;AAEG;;;;"}

package/fesm2022/cmat-components-carousel.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, Directive, Input, EventEmitter, PLATFORM_ID, booleanAttribute, numberAttribute, ChangeDetectionStrategy, ViewEncapsulation, Inject, Output, ViewChild, ContentChild, ContentChildren } from '@angular/core';
+import { Component, Input, Directive, EventEmitter, PLATFORM_ID, numberAttribute, booleanAttribute, ContentChildren, ContentChild, ViewChild, Output, Inject, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
 import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/icon';
@@ -10,10 +10,10 @@ import { CmatArrowCursorDirective } from 'cmat/directives/arrow-cursor';
 
 /* eslint-disable @typescript-eslint/member-ordering */
 class CmatCarouselHeaderComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: CmatCarouselHeaderComponent, isStandalone: true, selector: "cmat-carousel-header", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCarouselHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: CmatCarouselHeaderComponent, isStandalone: true, selector: "cmat-carousel-header", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCarouselHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCarouselHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cmat-carousel-header',
@@ -21,10 +21,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImpor
                 }]
         }] });
 class CmatCarouselFooterComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.6", type: CmatCarouselFooterComponent, isStandalone: true, selector: "cmat-carousel-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCarouselFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.0", type: CmatCarouselFooterComponent, isStandalone: true, selector: "cmat-carousel-footer", ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCarouselFooterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCarouselFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'cmat-carousel-footer',
@@ -38,10 +38,10 @@ class CmatCarouselTemplateDirective {
     getType() {
         return this.name;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.6", type: CmatCarouselTemplateDirective, isStandalone: true, selector: "[cmatCarouselTemplate]", inputs: { type: "type", name: ["cmatCarouselTemplate", "name"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCarouselTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.0", type: CmatCarouselTemplateDirective, isStandalone: true, selector: "[cmatCarouselTemplate]", inputs: { type: "type", name: ["cmatCarouselTemplate", "name"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCarouselTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatCarouselTemplate]'
@@ -628,10 +628,10 @@ class CmatCarouselComponent {
             this.clonedItemsForFinishing.push(...this.data.slice(0, this._numVisible));
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: CmatCarouselComponent, isStandalone: true, selector: "cmat-carousel", inputs: { page: "page", numVisible: "numVisible", numScroll: "numScroll", responsiveOptions: "responsiveOptions", orientation: "orientation", navigatorsType: "navigatorsType", verticalViewPortHeight: "verticalViewPortHeight", arrowSelector: "arrowSelector", contentClass: "contentClass", indicatorsContentClass: "indicatorsContentClass", indicatorsContentStyle: "indicatorsContentStyle", indicatorStyleClass: "indicatorStyleClass", indicatorStyle: "indicatorStyle", data: "data", circular: ["circular", "circular", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showNavigators: ["showNavigators", "showNavigators", booleanAttribute], autoplayInterval: ["autoplayInterval", "autoplayInterval", numberAttribute], style: "style", styleClass: "styleClass" }, outputs: { pageEvent: "pageEvent" }, queries: [{ propertyName: "headerFacet", first: true, predicate: CmatCarouselHeaderComponent, descendants: true }, { propertyName: "footerFacet", first: true, predicate: CmatCarouselFooterComponent, descendants: true }, { propertyName: "templates", predicate: CmatCarouselTemplateDirective }], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "indicatorContent", first: true, predicate: ["indicatorContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div role=\"region\" [attr.id]=\"id\"\r\n    [ngClass]=\"{ 'cmat-carousel': true, 'cmat-carousel-vertical': isVertical(), 'cmat-carousel-horizontal': !isVertical() }\"\r\n    [ngStyle]=\"style\" [class]=\"styleClass\">\r\n\r\n    @if(headerFacet || headerTemplate){\r\n    <div class=\"cmat-carousel-header\">\r\n        <ng-content select=\"cmat-carousel-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n    <div [class]=\"contentClass\" [ngClass]=\"'items-center cmat-carousel-content'\">\r\n        <div class=\"cmat-carousel-container\" cmatArrowCursor [orientation]=\"orientation\" [selector]=\"arrowSelector\"\r\n            [enabled]=\"navigatorsType==='arrow'\" [attr.aria-live]=\"allowAutoplay ? 'polite' : 'off'\"\r\n            (clickEvent)=\"arrowCursorClick($event)\">\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-prev': true }\"\r\n                [disabled]=\"isBackwardNavDisabled()\" (click)=\"navBackward($event)\">\r\n                @if(!previousIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-left'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-up'\"></mat-icon>\r\n                }\r\n                }\r\n                @else {\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n            <div class=\"cmat-carousel-items-content\"\r\n                [ngStyle]=\"{ height: isVertical() ? verticalViewPortHeight : 'auto' }\" (touchend)=\"onTouchEnd($event)\"\r\n                (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\r\n                <div #itemsContainer class=\"cmat-carousel-items-container\" (transitionend)=\"onTransitionEnd()\">\r\n                    @for (item of clonedItemsForStarting; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === data.length,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForStarting?.length??0 - 1 === $index\r\n                        }\" [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of data; track $index) {\r\n                    <div [ngClass]=\"{ 'cmat-carousel-item': true, 'cmat-carousel-item-active': firstIndex() <= $index && lastIndex() >= $index, 'cmat-carousel-item-start': firstIndex() === $index, 'cmat-carousel-item-end': lastIndex() === $index }\"\r\n                        [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of clonedItemsForFinishing; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === numVisible,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForFinishing?.length??0 - 1 === $index\r\n                        }\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n            </div>\r\n\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-next': true}\"\r\n                [disabled]=\"isForwardNavDisabled()\" (click)=\"navForward($event)\">\r\n                @if(!nextIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-down'\"></mat-icon>\r\n                }\r\n                }\r\n                @else{\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n        </div>\r\n        @if(showIndicators){\r\n        <ul #indicatorContent role=\"presentation\" [ngClass]=\"'cmat-carousel-indicators'\"\r\n            [class]=\"indicatorsContentClass\" [ngStyle]=\"indicatorsContentStyle\" (keydown)=\"onIndicatorKeydown($event)\">\r\n            @for (totalDot of totalDotsArray(); track $index) {\r\n            <li [ngClass]=\"{ 'cmat-carousel-indicator': true, 'cmat-carousel-indicator-active': page === $index }\"\r\n                [attr.data-pc-section]=\"'indicator'\">\r\n                <button type=\"button\" [ngClass]=\"'cmat-carousel-indicator-button'\" [class]=\"indicatorStyleClass\"\r\n                    [ngStyle]=\"indicatorStyle\" [attr.aria-current]=\"page === $index ? 'page' : undefined\"\r\n                    [tabindex]=\"page === $index ? 0 : -1\" (click)=\"onDotClick($event, $index)\">\r\n                </button>\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n\r\n    </div>\r\n    @if(footerFacet || footerTemplate){\r\n    <div class=\"cmat-carousel-footer\">\r\n        <ng-content select=\"cmat-carousel-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-carousel{display:flex;flex-direction:column}cmat-carousel .cmat-carousel-content{display:flex;flex-direction:column;overflow:hidden}cmat-carousel .cmat-carousel-prev,cmat-carousel .cmat-carousel-next{align-self:center;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;margin:.25rem}cmat-carousel .cmat-carousel-container{display:flex;flex-direction:row;width:100%}cmat-carousel .cmat-carousel-items-content{overflow:hidden;width:100%}cmat-carousel .cmat-carousel-items-container{display:flex;flex-direction:row}cmat-carousel .cmat-carousel-indicators{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;padding:1rem;gap:.5rem;margin:0;list-style:none}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator-active{background:var(--cmat-text-default)!important;opacity:1!important}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator{border:0 none;border-radius:6px;background:var(--cmat-text-disabled);transition:background .2s,color .2s,outline-color .2s,box-shadow .2s;opacity:.3}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator .cmat-carousel-indicator-button{display:flex;align-items:center;justify-content:center;width:2rem;height:.5rem;outline-color:transparent;padding:0;margin:0;-webkit-user-select:none;user-select:none;cursor:pointer}cmat-carousel .cmat-carousel-vertical .cmat-carousel-container{flex-direction:column;width:auto}cmat-carousel .cmat-carousel-vertical .cmat-carousel-items-container{flex-direction:column;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: CmatArrowCursorDirective, selector: "[cmatArrowCursor]", inputs: ["animationDuration", "orientation", "enabled", "selector"], outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCarouselComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: CmatCarouselComponent, isStandalone: true, selector: "cmat-carousel", inputs: { page: "page", numVisible: "numVisible", numScroll: "numScroll", responsiveOptions: "responsiveOptions", orientation: "orientation", navigatorsType: "navigatorsType", verticalViewPortHeight: "verticalViewPortHeight", arrowSelector: "arrowSelector", contentClass: "contentClass", indicatorsContentClass: "indicatorsContentClass", indicatorsContentStyle: "indicatorsContentStyle", indicatorStyleClass: "indicatorStyleClass", indicatorStyle: "indicatorStyle", data: "data", circular: ["circular", "circular", booleanAttribute], showIndicators: ["showIndicators", "showIndicators", booleanAttribute], showNavigators: ["showNavigators", "showNavigators", booleanAttribute], autoplayInterval: ["autoplayInterval", "autoplayInterval", numberAttribute], style: "style", styleClass: "styleClass" }, outputs: { pageEvent: "pageEvent" }, queries: [{ propertyName: "headerFacet", first: true, predicate: CmatCarouselHeaderComponent, descendants: true }, { propertyName: "footerFacet", first: true, predicate: CmatCarouselFooterComponent, descendants: true }, { propertyName: "templates", predicate: CmatCarouselTemplateDirective }], viewQueries: [{ propertyName: "itemsContainer", first: true, predicate: ["itemsContainer"], descendants: true }, { propertyName: "indicatorContent", first: true, predicate: ["indicatorContent"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div role=\"region\" [attr.id]=\"id\"\r\n    [ngClass]=\"{ 'cmat-carousel': true, 'cmat-carousel-vertical': isVertical(), 'cmat-carousel-horizontal': !isVertical() }\"\r\n    [ngStyle]=\"style\" [class]=\"styleClass\">\r\n\r\n    @if(headerFacet || headerTemplate){\r\n    <div class=\"cmat-carousel-header\">\r\n        <ng-content select=\"cmat-carousel-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n    <div [class]=\"contentClass\" [ngClass]=\"'items-center cmat-carousel-content'\">\r\n        <div class=\"cmat-carousel-container\" cmatArrowCursor [orientation]=\"orientation\" [selector]=\"arrowSelector\"\r\n            [enabled]=\"navigatorsType==='arrow'\" [attr.aria-live]=\"allowAutoplay ? 'polite' : 'off'\"\r\n            (clickEvent)=\"arrowCursorClick($event)\">\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-prev': true }\"\r\n                [disabled]=\"isBackwardNavDisabled()\" (click)=\"navBackward($event)\">\r\n                @if(!previousIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-left'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-up'\"></mat-icon>\r\n                }\r\n                }\r\n                @else {\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n            <div class=\"cmat-carousel-items-content\"\r\n                [ngStyle]=\"{ height: isVertical() ? verticalViewPortHeight : 'auto' }\" (touchend)=\"onTouchEnd($event)\"\r\n                (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\r\n                <div #itemsContainer class=\"cmat-carousel-items-container\" (transitionend)=\"onTransitionEnd()\">\r\n                    @for (item of clonedItemsForStarting; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === data.length,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForStarting?.length??0 - 1 === $index\r\n                        }\" [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of data; track $index) {\r\n                    <div [ngClass]=\"{ 'cmat-carousel-item': true, 'cmat-carousel-item-active': firstIndex() <= $index && lastIndex() >= $index, 'cmat-carousel-item-start': firstIndex() === $index, 'cmat-carousel-item-end': lastIndex() === $index }\"\r\n                        [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of clonedItemsForFinishing; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === numVisible,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForFinishing?.length??0 - 1 === $index\r\n                        }\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n            </div>\r\n\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-next': true}\"\r\n                [disabled]=\"isForwardNavDisabled()\" (click)=\"navForward($event)\">\r\n                @if(!nextIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-down'\"></mat-icon>\r\n                }\r\n                }\r\n                @else{\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n        </div>\r\n        @if(showIndicators){\r\n        <ul #indicatorContent role=\"presentation\" [ngClass]=\"'cmat-carousel-indicators'\"\r\n            [class]=\"indicatorsContentClass\" [ngStyle]=\"indicatorsContentStyle\" (keydown)=\"onIndicatorKeydown($event)\">\r\n            @for (totalDot of totalDotsArray(); track $index) {\r\n            <li [ngClass]=\"{ 'cmat-carousel-indicator': true, 'cmat-carousel-indicator-active': page === $index }\"\r\n                [attr.data-pc-section]=\"'indicator'\">\r\n                <button type=\"button\" [ngClass]=\"'cmat-carousel-indicator-button'\" [class]=\"indicatorStyleClass\"\r\n                    [ngStyle]=\"indicatorStyle\" [attr.aria-current]=\"page === $index ? 'page' : undefined\"\r\n                    [tabindex]=\"page === $index ? 0 : -1\" (click)=\"onDotClick($event, $index)\">\r\n                </button>\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n\r\n    </div>\r\n    @if(footerFacet || footerTemplate){\r\n    <div class=\"cmat-carousel-footer\">\r\n        <ng-content select=\"cmat-carousel-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-carousel{display:flex;flex-direction:column}cmat-carousel .cmat-carousel-content{display:flex;flex-direction:column;overflow:hidden}cmat-carousel .cmat-carousel-prev,cmat-carousel .cmat-carousel-next{align-self:center;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;margin:.25rem}cmat-carousel .cmat-carousel-container{display:flex;flex-direction:row;width:100%}cmat-carousel .cmat-carousel-items-content{overflow:hidden;width:100%}cmat-carousel .cmat-carousel-items-container{display:flex;flex-direction:row}cmat-carousel .cmat-carousel-indicators{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;padding:1rem;gap:.5rem;margin:0;list-style:none}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator-active{background:var(--cmat-text-default)!important;opacity:1!important}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator{border:0 none;border-radius:6px;background:var(--cmat-text-disabled);transition:background .2s,color .2s,outline-color .2s,box-shadow .2s;opacity:.3}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator .cmat-carousel-indicator-button{display:flex;align-items:center;justify-content:center;width:2rem;height:.5rem;outline-color:transparent;padding:0;margin:0;-webkit-user-select:none;user-select:none;cursor:pointer}cmat-carousel .cmat-carousel-vertical .cmat-carousel-container{flex-direction:column;width:auto}cmat-carousel .cmat-carousel-vertical .cmat-carousel-items-container{flex-direction:column;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: CmatArrowCursorDirective, selector: "[cmatArrowCursor]", inputs: ["animationDuration", "orientation", "enabled", "selector"], outputs: ["clickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCarouselComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCarouselComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-carousel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, MatIconModule, MatButtonModule, CmatArrowCursorDirective], template: "<div role=\"region\" [attr.id]=\"id\"\r\n    [ngClass]=\"{ 'cmat-carousel': true, 'cmat-carousel-vertical': isVertical(), 'cmat-carousel-horizontal': !isVertical() }\"\r\n    [ngStyle]=\"style\" [class]=\"styleClass\">\r\n\r\n    @if(headerFacet || headerTemplate){\r\n    <div class=\"cmat-carousel-header\">\r\n        <ng-content select=\"cmat-carousel-header\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n\r\n    <div [class]=\"contentClass\" [ngClass]=\"'items-center cmat-carousel-content'\">\r\n        <div class=\"cmat-carousel-container\" cmatArrowCursor [orientation]=\"orientation\" [selector]=\"arrowSelector\"\r\n            [enabled]=\"navigatorsType==='arrow'\" [attr.aria-live]=\"allowAutoplay ? 'polite' : 'off'\"\r\n            (clickEvent)=\"arrowCursorClick($event)\">\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-prev': true }\"\r\n                [disabled]=\"isBackwardNavDisabled()\" (click)=\"navBackward($event)\">\r\n                @if(!previousIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-left'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-up'\"></mat-icon>\r\n                }\r\n                }\r\n                @else {\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"previousIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n            <div class=\"cmat-carousel-items-content\"\r\n                [ngStyle]=\"{ height: isVertical() ? verticalViewPortHeight : 'auto' }\" (touchend)=\"onTouchEnd($event)\"\r\n                (touchstart)=\"onTouchStart($event)\" (touchmove)=\"onTouchMove($event)\">\r\n                <div #itemsContainer class=\"cmat-carousel-items-container\" (transitionend)=\"onTransitionEnd()\">\r\n                    @for (item of clonedItemsForStarting; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === data.length,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForStarting?.length??0 - 1 === $index\r\n                        }\" [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of data; track $index) {\r\n                    <div [ngClass]=\"{ 'cmat-carousel-item': true, 'cmat-carousel-item-active': firstIndex() <= $index && lastIndex() >= $index, 'cmat-carousel-item-start': firstIndex() === $index, 'cmat-carousel-item-end': lastIndex() === $index }\"\r\n                        [attr.aria-hidden]=\"!(totalShiftedItems * -1 === data.length)\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                    @for (item of clonedItemsForFinishing; track $index) {\r\n                    <div [ngClass]=\"{\r\n                            'cmat-carousel-item cmat-carousel-item-cloned': true,\r\n                            'cmat-carousel-item-active': totalShiftedItems * -1 === numVisible,\r\n                            'cmat-carousel-item-start': 0 === $index,\r\n                            'cmat-carousel-item-end': clonedItemsForFinishing?.length??0 - 1 === $index\r\n                        }\">\r\n                        <ng-container *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"></ng-container>\r\n                    </div>\r\n                    }\r\n\r\n                </div>\r\n            </div>\r\n\r\n            @if(showNavigators&&navigatorsType==='normal'){\r\n            <button type=\"button\" mat-icon-button [ngClass]=\"{ 'cmat-carousel-next': true}\"\r\n                [disabled]=\"isForwardNavDisabled()\" (click)=\"navForward($event)\">\r\n                @if(!nextIconTemplate){\r\n                @if(!isVertical()){\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-right'\"></mat-icon>\r\n                }@else {\r\n                <mat-icon [svgIcon]=\"'heroicons_solid:chevron-down'\"></mat-icon>\r\n                }\r\n                }\r\n                @else{\r\n                <span class=\"cmat-carousel-prev-icon\">\r\n                    <ng-template *ngTemplateOutlet=\"nextIconTemplate\"></ng-template>\r\n                </span>\r\n                }\r\n            </button>\r\n            }\r\n\r\n        </div>\r\n        @if(showIndicators){\r\n        <ul #indicatorContent role=\"presentation\" [ngClass]=\"'cmat-carousel-indicators'\"\r\n            [class]=\"indicatorsContentClass\" [ngStyle]=\"indicatorsContentStyle\" (keydown)=\"onIndicatorKeydown($event)\">\r\n            @for (totalDot of totalDotsArray(); track $index) {\r\n            <li [ngClass]=\"{ 'cmat-carousel-indicator': true, 'cmat-carousel-indicator-active': page === $index }\"\r\n                [attr.data-pc-section]=\"'indicator'\">\r\n                <button type=\"button\" [ngClass]=\"'cmat-carousel-indicator-button'\" [class]=\"indicatorStyleClass\"\r\n                    [ngStyle]=\"indicatorStyle\" [attr.aria-current]=\"page === $index ? 'page' : undefined\"\r\n                    [tabindex]=\"page === $index ? 0 : -1\" (click)=\"onDotClick($event, $index)\">\r\n                </button>\r\n            </li>\r\n            }\r\n        </ul>\r\n        }\r\n\r\n    </div>\r\n    @if(footerFacet || footerTemplate){\r\n    <div class=\"cmat-carousel-footer\">\r\n        <ng-content select=\"cmat-carousel-footer\"></ng-content>\r\n        <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n    </div>\r\n    }\r\n</div>", styles: ["cmat-carousel{display:flex;flex-direction:column}cmat-carousel .cmat-carousel-content{display:flex;flex-direction:column;overflow:hidden}cmat-carousel .cmat-carousel-prev,cmat-carousel .cmat-carousel-next{align-self:center;flex-grow:0;flex-shrink:0;display:flex;justify-content:center;align-items:center;overflow:hidden;position:relative;margin:.25rem}cmat-carousel .cmat-carousel-container{display:flex;flex-direction:row;width:100%}cmat-carousel .cmat-carousel-items-content{overflow:hidden;width:100%}cmat-carousel .cmat-carousel-items-container{display:flex;flex-direction:row}cmat-carousel .cmat-carousel-indicators{display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;padding:1rem;gap:.5rem;margin:0;list-style:none}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator-active{background:var(--cmat-text-default)!important;opacity:1!important}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator{border:0 none;border-radius:6px;background:var(--cmat-text-disabled);transition:background .2s,color .2s,outline-color .2s,box-shadow .2s;opacity:.3}cmat-carousel .cmat-carousel-indicators .cmat-carousel-indicator .cmat-carousel-indicator-button{display:flex;align-items:center;justify-content:center;width:2rem;height:.5rem;outline-color:transparent;padding:0;margin:0;-webkit-user-select:none;user-select:none;cursor:pointer}cmat-carousel .cmat-carousel-vertical .cmat-carousel-container{flex-direction:column;width:auto}cmat-carousel .cmat-carousel-vertical .cmat-carousel-items-container{flex-direction:column;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: Document, decorators: [{

package/fesm2022/cmat-components-cascade.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, Optional, Self, HostBinding, Input, ViewChild, Inject } from '@angular/core';
+import { Optional, ChangeDetectionStrategy, ViewEncapsulation, Component, Input, ViewChild, HostBinding, Self, Inject } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormControl } from '@angular/forms';
 import * as i4 from '@angular/material/bottom-sheet';
@@ -17,7 +17,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import * as i3$1 from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
 import * as i2$1 from '@angular/cdk/overlay';
-import { OverlayConfig, CdkOverlayOrigin, OverlayModule } from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import * as i8 from '@angular/cdk/portal';
 import { PortalModule } from '@angular/cdk/portal';
 import { NgClass } from '@angular/common';
@@ -33,12 +33,12 @@ class CmatCascadeMenuComponent {
     constructor(root) {
         this.root = root;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCascadeMenuComponent, deps: [{ token: CmatCascadeListComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: CmatCascadeMenuComponent, isStandalone: true, selector: "cmat-cascade-menu", exportAs: ["cmatCascadeMenu"], ngImport: i0, template: "@for (menuItem of root.steps; track step; let step = $index) {\r\n  <mat-list class=\"menu-list overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\"\r\n    >\r\n    @for (listItem of menuItem; track i; let i = $index) {\r\n      <mat-list-item class=\"menu-item\"\r\n        [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n        (click)=\"root.selectHandle($event, step, i);\">\r\n        <div matLine>{{listItem.label}}</div>\r\n        @if (listItem.children && listItem.children.length) {\r\n          <mat-icon class=\"item-icon\" [svgIcon]=\"'mat_outline:chevron_right'\"\r\n          ></mat-icon>\r\n        }\r\n      </mat-list-item>\r\n    }\r\n  </mat-list>\r\n}", styles: ["cmat-cascade-menu{height:200px;z-index:2007;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;white-space:nowrap}cmat-cascade-menu .menu-list{display:inline-block;border-right-width:1px;box-sizing:border-box;margin:0;padding:.5rem;overflow:hidden;position:relative;height:200px;min-width:200px;vertical-align:top}cmat-cascade-menu .menu-list:last-child{border-right-width:0px}cmat-cascade-menu .menu-item{line-height:3rem;padding:0 16px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important}cmat-cascade-menu .menu-item.disabled{cursor:not-allowed!important}cmat-cascade-menu .menu-item .item-icon{position:absolute;justify-items:center;top:50%;bottom:50%;right:0;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [cmatAnimations], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCascadeMenuComponent, deps: [{ token: CmatCascadeListComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: CmatCascadeMenuComponent, isStandalone: true, selector: "cmat-cascade-menu", exportAs: ["cmatCascadeMenu"], ngImport: i0, template: "@for (menuItem of root.steps; track step; let step = $index) {\r\n  <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\"\r\n    >\r\n    @for (listItem of menuItem; track i; let i = $index) {\r\n      <mat-list-item class=\"menu-item\"\r\n        [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n        (click)=\"root.selectHandle($event, step, i);\">\r\n        <div matLine>{{listItem.label}}</div>\r\n        @if (listItem.children && listItem.children.length) {\r\n          <mat-icon class=\"item-icon\" [svgIcon]=\"'mat_outline:chevron_right'\"\r\n          ></mat-icon>\r\n        }\r\n      </mat-list-item>\r\n    }\r\n  </mat-list>\r\n}", styles: ["cmat-cascade-menu{height:200px;z-index:2007;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;white-space:nowrap}cmat-cascade-menu .menu-list{display:inline-block;border-right-width:1px;box-sizing:border-box;margin:0;padding:.5rem;overflow:hidden;position:relative;height:200px;min-width:200px;vertical-align:top}cmat-cascade-menu .menu-list:last-child{border-right-width:0px}cmat-cascade-menu .menu-item{line-height:3rem;padding:0 16px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important}cmat-cascade-menu .menu-item.disabled{cursor:not-allowed!important}cmat-cascade-menu .menu-item .item-icon{position:absolute;justify-items:center;top:50%;bottom:50%;right:0;transform:translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], animations: [cmatAnimations], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCascadeMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCascadeMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-cascade-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeMenu', animations: [cmatAnimations], imports: [MatListModule, MatIconModule], template: "@for (menuItem of root.steps; track step; let step = $index) {\r\n  <mat-list class=\"menu-list overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\"\r\n    >\r\n    @for (listItem of menuItem; track i; let i = $index) {\r\n      <mat-list-item class=\"menu-item\"\r\n        [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n        (click)=\"root.selectHandle($event, step, i);\">\r\n        <div matLine>{{listItem.label}}</div>\r\n        @if (listItem.children && listItem.children.length) {\r\n          <mat-icon class=\"item-icon\" [svgIcon]=\"'mat_outline:chevron_right'\"\r\n          ></mat-icon>\r\n        }\r\n      </mat-list-item>\r\n    }\r\n  </mat-list>\r\n}", styles: ["cmat-cascade-menu{height:200px;z-index:2007;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;white-space:nowrap}cmat-cascade-menu .menu-list{display:inline-block;border-right-width:1px;box-sizing:border-box;margin:0;padding:.5rem;overflow:hidden;position:relative;height:200px;min-width:200px;vertical-align:top}cmat-cascade-menu .menu-list:last-child{border-right-width:0px}cmat-cascade-menu .menu-item{line-height:3rem;padding:0 16px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important}cmat-cascade-menu .menu-item.disabled{cursor:not-allowed!important}cmat-cascade-menu .menu-item .item-icon{position:absolute;justify-items:center;top:50%;bottom:50%;right:0;transform:translateY(-50%)}\n"] }]
+            args: [{ selector: 'cmat-cascade-menu', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeMenu', animations: [cmatAnimations], imports: [MatListModule, MatIconModule], template: "@for (menuItem of root.steps; track step; let step = $index) {\r\n  <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\"\r\n    >\r\n    @for (listItem of menuItem; track i; let i = $index) {\r\n      <mat-list-item class=\"menu-item\"\r\n        [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n        (click)=\"root.selectHandle($event, step, i);\">\r\n        <div matLine>{{listItem.label}}</div>\r\n        @if (listItem.children && listItem.children.length) {\r\n          <mat-icon class=\"item-icon\" [svgIcon]=\"'mat_outline:chevron_right'\"\r\n          ></mat-icon>\r\n        }\r\n      </mat-list-item>\r\n    }\r\n  </mat-list>\r\n}", styles: ["cmat-cascade-menu{height:200px;z-index:2007;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;white-space:nowrap}cmat-cascade-menu .menu-list{display:inline-block;border-right-width:1px;box-sizing:border-box;margin:0;padding:.5rem;overflow:hidden;position:relative;height:200px;min-width:200px;vertical-align:top}cmat-cascade-menu .menu-list:last-child{border-right-width:0px}cmat-cascade-menu .menu-item{line-height:3rem;padding:0 16px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important}cmat-cascade-menu .menu-item.disabled{cursor:not-allowed!important}cmat-cascade-menu .menu-item .item-icon{position:absolute;justify-items:center;top:50%;bottom:50%;right:0;transform:translateY(-50%)}\n"] }]
         }], ctorParameters: () => [{ type: CmatCascadeListComponent, decorators: [{
                     type: Optional
                 }] }] });
@@ -357,10 +357,10 @@ class CmatCascadeListComponent {
             this._inputElement.nativeElement.value = this.currentLabels[this.currentLabels.length - 1].label ?? '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCascadeListComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i2$1.Overlay }, { token: i3$1.BreakpointObserver }, { token: i4.MatBottomSheet }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: CmatCascadeListComponent, isStandalone: true, selector: "cmat-cascade-list", inputs: { id: "id", options: "options", clearable: "clearable", fullLevels: "fullLevels", changeOnSelect: "changeOnSelect", touchUi: "touchUi", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, host: { properties: { "attr.id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CmatCascadeListComponent }], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, static: true }, { propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, static: true }, { propertyName: "_inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], exportAs: ["cmatCascadeList"], usesOnChanges: true, ngImport: i0, template: "<span role=\"presentation\" class=\"cmat-cascade-list\" cdk-overlay-origin\r\n  [ngClass]=\"{'opened': menuVisible, 'disabled': disabled}\">\r\n  <input #inputElement matInput readonly [required]='required' [placeholder]=\"currentLabels.length>0 ? '' : placeholder\" (click)=\"clickHandle($event)\"\r\n    (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n\r\n  @if (showClearIcon()) {\r\n  <button type=\"button\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearValue($event)\">\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n  </button>\r\n  }\r\n  @else {\r\n  <mat-icon matSuffix [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\r\n  }\r\n</span>\r\n\r\n<ng-template #menuTemplate=\"cdkPortal\" cdk-portal>\r\n  <cmat-cascade-menu></cmat-cascade-menu>\r\n</ng-template>", styles: ["cmat-cascade-list{width:100%}.cmat-cascade-list{position:relative;display:flex;width:100%;line-height:2;align-items:center}.cmat-cascade-list mat-form-field{width:100%}.cmat-cascade-list input{cursor:pointer}.cmat-cascade-list.disabled .cascade-label{z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CmatCascadeMenuComponent, selector: "cmat-cascade-menu", exportAs: ["cmatCascadeMenu"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i8.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCascadeListComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: i2$1.Overlay }, { token: i3$1.BreakpointObserver }, { token: i4.MatBottomSheet }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: CmatCascadeListComponent, isStandalone: true, selector: "cmat-cascade-list", inputs: { id: "id", options: "options", clearable: "clearable", fullLevels: "fullLevels", changeOnSelect: "changeOnSelect", touchUi: "touchUi", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, host: { properties: { "attr.id": "this.id" } }, providers: [{ provide: MatFormFieldControl, useExisting: CmatCascadeListComponent }], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, static: true }, { propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true, static: true }, { propertyName: "_inputElement", first: true, predicate: ["inputElement"], descendants: true, static: true }], exportAs: ["cmatCascadeList"], usesOnChanges: true, ngImport: i0, template: "<span role=\"presentation\" class=\"cmat-cascade-list\" cdk-overlay-origin\r\n  [ngClass]=\"{'opened': menuVisible, 'disabled': disabled}\">\r\n  <input #inputElement matInput readonly [required]='required' [placeholder]=\"currentLabels.length>0 ? '' : placeholder\" (click)=\"clickHandle($event)\"\r\n    (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n\r\n  @if (showClearIcon()) {\r\n  <button type=\"button\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearValue($event)\">\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n  </button>\r\n  }\r\n  @else {\r\n  <mat-icon matSuffix [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\r\n  }\r\n</span>\r\n\r\n<ng-template #menuTemplate=\"cdkPortal\" cdk-portal>\r\n  <cmat-cascade-menu></cmat-cascade-menu>\r\n</ng-template>", styles: ["cmat-cascade-list{width:100%}.cmat-cascade-list{position:relative;display:flex;width:100%;line-height:2;align-items:center}.cmat-cascade-list mat-form-field{width:100%}.cmat-cascade-list input{cursor:pointer}.cmat-cascade-list.disabled .cascade-label{z-index:2}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CmatCascadeMenuComponent, selector: "cmat-cascade-menu", exportAs: ["cmatCascadeMenu"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i7.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i8.TemplatePortalDirective, selector: "[cdk-portal], [portal]", exportAs: ["cdkPortal"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.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: CmatCascadeListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCascadeListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-cascade-list', providers: [{ provide: MatFormFieldControl, useExisting: CmatCascadeListComponent }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeList', imports: [MatIconModule, NgClass, CmatCascadeMenuComponent, MatInputModule, OverlayModule, PortalModule, MatButtonModule], template: "<span role=\"presentation\" class=\"cmat-cascade-list\" cdk-overlay-origin\r\n  [ngClass]=\"{'opened': menuVisible, 'disabled': disabled}\">\r\n  <input #inputElement matInput readonly [required]='required' [placeholder]=\"currentLabels.length>0 ? '' : placeholder\" (click)=\"clickHandle($event)\"\r\n    (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n\r\n  @if (showClearIcon()) {\r\n  <button type=\"button\" matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clearValue($event)\">\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n  </button>\r\n  }\r\n  @else {\r\n  <mat-icon matSuffix [svgIcon]=\"'mat_outline:arrow_drop_down'\"></mat-icon>\r\n  }\r\n</span>\r\n\r\n<ng-template #menuTemplate=\"cdkPortal\" cdk-portal>\r\n  <cmat-cascade-menu></cmat-cascade-menu>\r\n</ng-template>", styles: ["cmat-cascade-list{width:100%}.cmat-cascade-list{position:relative;display:flex;width:100%;line-height:2;align-items:center}.cmat-cascade-list mat-form-field{width:100%}.cmat-cascade-list input{cursor:pointer}.cmat-cascade-list.disabled .cascade-label{z-index:2}\n"] }]
         }], ctorParameters: () => [{ type: i1.NgControl, decorators: [{
@@ -426,12 +426,12 @@ class CmatCascadeBottomSheetComponent {
             this.selected.setValue(this.root.steps.length - 1);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCascadeBottomSheetComponent, deps: [{ token: MAT_BOTTOM_SHEET_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.6", type: CmatCascadeBottomSheetComponent, isStandalone: true, selector: "cmat-cascade-bottom-sheet", exportAs: ["cmatCascadeBottomSheet"], ngImport: i0, template: "<div role=\"presentation\" class=\"cmat-cascade-bottom-sheet\" (click)=\"clickHandle($event)\">\r\n  <div class=\"sheet-header flex items-center\">\r\n    <p class=\"sheet-title\">{{root.placeholder}}</p>\r\n    <button type=\"button\" mat-icon-button (click)=\"root.bottomSheetRef.dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-tab-group [selectedIndex]=\"selected.value\" (selectedIndexChange)=\"selected.setValue($event);\">\r\n    @for (menuItem of root.steps; track step; let step = $index) {\r\n      <mat-tab\r\n        [label]=\"labels[step] || '\u9009\u62E9'\">\r\n        <mat-list class=\"menu-list overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\r\n          @for (listItem of menuItem; track i; let i = $index) {\r\n            <mat-list-item class=\"menu-item\"\r\n              [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n              (click)=\"root.selectHandle($event, step, i); select(listItem.disabled,listItem.label);\">\r\n              <div matLine>{{listItem.label}}</div>\r\n            </mat-list-item>\r\n          }\r\n        </mat-list>\r\n      </mat-tab>\r\n    }\r\n  </mat-tab-group>\r\n</div>", styles: [".cmat-cascade-bottom-sheet{padding:0;margin:-8px -16px}.cmat-cascade-bottom-sheet .sheet-header{display:flex;flex:1 1 0%;align-items:center;font-size:1rem;border-bottom-width:1px;padding:12px 16px}.cmat-cascade-bottom-sheet .sheet-header .sheet-title{margin:0;padding:0;letter-spacing:.05rem;text-align:center;flex-grow:1}.cmat-cascade-bottom-sheet .menu-list{vertical-align:top;box-sizing:border-box;margin:0;padding:0;width:100%;overflow:hidden;position:relative;height:204px}.cmat-cascade-bottom-sheet .menu-item{padding:0 16px;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important;font-size:14px;line-height:3em}.cmat-cascade-bottom-sheet .menu-item.disabled{cursor:not-allowed!important;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCascadeBottomSheetComponent, deps: [{ token: MAT_BOTTOM_SHEET_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: CmatCascadeBottomSheetComponent, isStandalone: true, selector: "cmat-cascade-bottom-sheet", exportAs: ["cmatCascadeBottomSheet"], ngImport: i0, template: "<div role=\"presentation\" class=\"cmat-cascade-bottom-sheet\" (click)=\"clickHandle($event)\">\r\n  <div class=\"sheet-header flex items-center\">\r\n    <p class=\"sheet-title\">{{root.placeholder}}</p>\r\n    <button type=\"button\" mat-icon-button (click)=\"root.bottomSheetRef.dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-tab-group [selectedIndex]=\"selected.value\" (selectedIndexChange)=\"selected.setValue($event);\">\r\n    @for (menuItem of root.steps; track step; let step = $index) {\r\n      <mat-tab\r\n        [label]=\"labels[step] || '\u9009\u62E9'\">\r\n        <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\">\r\n          @for (listItem of menuItem; track i; let i = $index) {\r\n            <mat-list-item class=\"menu-item\"\r\n              [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n              (click)=\"root.selectHandle($event, step, i); select(listItem.disabled,listItem.label);\">\r\n              <div matLine>{{listItem.label}}</div>\r\n            </mat-list-item>\r\n          }\r\n        </mat-list>\r\n      </mat-tab>\r\n    }\r\n  </mat-tab-group>\r\n</div>", styles: [".cmat-cascade-bottom-sheet{padding:0;margin:-8px -16px}.cmat-cascade-bottom-sheet .sheet-header{display:flex;flex:1 1 0%;align-items:center;font-size:1rem;border-bottom-width:1px;padding:12px 16px}.cmat-cascade-bottom-sheet .sheet-header .sheet-title{margin:0;padding:0;letter-spacing:.05rem;text-align:center;flex-grow:1}.cmat-cascade-bottom-sheet .menu-list{vertical-align:top;box-sizing:border-box;margin:0;padding:0;width:100%;overflow:hidden;position:relative;height:204px}.cmat-cascade-bottom-sheet .menu-item{padding:0 16px;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important;font-size:14px;line-height:3em}.cmat-cascade-bottom-sheet .menu-item.disabled{cursor:not-allowed!important;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i9.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i2$2.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$2.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.6", ngImport: i0, type: CmatCascadeBottomSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: CmatCascadeBottomSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-cascade-bottom-sheet', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeBottomSheet', imports: [MatButtonModule, MatTabsModule, MatListModule, MatIconModule], template: "<div role=\"presentation\" class=\"cmat-cascade-bottom-sheet\" (click)=\"clickHandle($event)\">\r\n  <div class=\"sheet-header flex items-center\">\r\n    <p class=\"sheet-title\">{{root.placeholder}}</p>\r\n    <button type=\"button\" mat-icon-button (click)=\"root.bottomSheetRef.dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-tab-group [selectedIndex]=\"selected.value\" (selectedIndexChange)=\"selected.setValue($event);\">\r\n    @for (menuItem of root.steps; track step; let step = $index) {\r\n      <mat-tab\r\n        [label]=\"labels[step] || '\u9009\u62E9'\">\r\n        <mat-list class=\"menu-list overflow-y-auto lg:overflow-y-hidden lg:hover:overflow-y-auto scrollbar-custom\">\r\n          @for (listItem of menuItem; track i; let i = $index) {\r\n            <mat-list-item class=\"menu-item\"\r\n              [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n              (click)=\"root.selectHandle($event, step, i); select(listItem.disabled,listItem.label);\">\r\n              <div matLine>{{listItem.label}}</div>\r\n            </mat-list-item>\r\n          }\r\n        </mat-list>\r\n      </mat-tab>\r\n    }\r\n  </mat-tab-group>\r\n</div>", styles: [".cmat-cascade-bottom-sheet{padding:0;margin:-8px -16px}.cmat-cascade-bottom-sheet .sheet-header{display:flex;flex:1 1 0%;align-items:center;font-size:1rem;border-bottom-width:1px;padding:12px 16px}.cmat-cascade-bottom-sheet .sheet-header .sheet-title{margin:0;padding:0;letter-spacing:.05rem;text-align:center;flex-grow:1}.cmat-cascade-bottom-sheet .menu-list{vertical-align:top;box-sizing:border-box;margin:0;padding:0;width:100%;overflow:hidden;position:relative;height:204px}.cmat-cascade-bottom-sheet .menu-item{padding:0 16px;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important;font-size:14px;line-height:3em}.cmat-cascade-bottom-sheet .menu-item.disabled{cursor:not-allowed!important;pointer-events:none}\n"] }]
+            args: [{ selector: 'cmat-cascade-bottom-sheet', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatCascadeBottomSheet', imports: [MatButtonModule, MatTabsModule, MatListModule, MatIconModule], template: "<div role=\"presentation\" class=\"cmat-cascade-bottom-sheet\" (click)=\"clickHandle($event)\">\r\n  <div class=\"sheet-header flex items-center\">\r\n    <p class=\"sheet-title\">{{root.placeholder}}</p>\r\n    <button type=\"button\" mat-icon-button (click)=\"root.bottomSheetRef.dismiss()\">\r\n      <mat-icon [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n    </button>\r\n  </div>\r\n  <mat-tab-group [selectedIndex]=\"selected.value\" (selectedIndexChange)=\"selected.setValue($event);\">\r\n    @for (menuItem of root.steps; track step; let step = $index) {\r\n      <mat-tab\r\n        [label]=\"labels[step] || '\u9009\u62E9'\">\r\n        <mat-list class=\"menu-list overflow-y-auto scrollbar-custom\">\r\n          @for (listItem of menuItem; track i; let i = $index) {\r\n            <mat-list-item class=\"menu-item\"\r\n              [class.active]=\"listItem.active\" [class.disabled]=\"listItem.disabled\"\r\n              (click)=\"root.selectHandle($event, step, i); select(listItem.disabled,listItem.label);\">\r\n              <div matLine>{{listItem.label}}</div>\r\n            </mat-list-item>\r\n          }\r\n        </mat-list>\r\n      </mat-tab>\r\n    }\r\n  </mat-tab-group>\r\n</div>", styles: [".cmat-cascade-bottom-sheet{padding:0;margin:-8px -16px}.cmat-cascade-bottom-sheet .sheet-header{display:flex;flex:1 1 0%;align-items:center;font-size:1rem;border-bottom-width:1px;padding:12px 16px}.cmat-cascade-bottom-sheet .sheet-header .sheet-title{margin:0;padding:0;letter-spacing:.05rem;text-align:center;flex-grow:1}.cmat-cascade-bottom-sheet .menu-list{vertical-align:top;box-sizing:border-box;margin:0;padding:0;width:100%;overflow:hidden;position:relative;height:204px}.cmat-cascade-bottom-sheet .menu-item{padding:0 16px;text-overflow:ellipsis;box-sizing:border-box;cursor:pointer!important;font-size:14px;line-height:3em}.cmat-cascade-bottom-sheet .menu-item.disabled{cursor:not-allowed!important;pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: CmatCascadeListComponent, decorators: [{
                     type: Inject,
                     args: [MAT_BOTTOM_SHEET_DATA]